#mid_box {
  width:1000px;
  margin:30px auto;
}

h2 { margin-top:0px; margin-bottom:0px; }

h2.title {
  display: inline-flex;
  align-items: center;
  gap: .5em; /* 画像と文字の間隔 */
  line-height: 1.2;
}

/* 先頭にロゴを挿入 */
h2.title::before {
  content: "";
  display: inline-block;
  width: 40px;           /* 必要に応じて調整 */
  height: 40px;          /* 必要に応じて調整 */
  background-image: url("../images/logo_maru.png");
  background-repeat: no-repeat;
  background-size: contain; /* 画像を枠に収める */
  background-position: center;
}

#c_box {
  width:800px;
  margin:5px auto;
  padding:10px;
}

.s_box {
  border:5px solid #eee;
  padding:0px;
  margin:40px auto 0px auto;
  border-radius:10px;
}

.s_box img {
  float:right;
  padding:10px;
}

.s_box p {
  margin:0px 20px;
  line-height:2.0em;
  margin-left:1.5em;
  padding-top:0px;
}

h3 {
  margin-top:00px;
  margin-left:0px;
  background-color:#2381b7;
  padding:4px 20px;
  color:#fff;
  border-radius:5px;
}

h3 span {
  font-weight:normal;
  font-size:16px;
  text-align:right;
  float:right;
  margin-right:1em;
  letter-spacing:1px;
  margin-top:5px;
}

#c_box li {
  margin-left:2em;
  line-height:2em;
}

/* ▼ 画像 .jimg 用（JSで fi-target / fi-show を付与） */
.jimg.fi-target{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 1200ms ease, transform 1200ms ease;
}
.jimg.fi-show{
  opacity:1;
  transform:translateY(0);
}

/* ▼ 汎用ふわっと表示（テキスト/見出し/非 .jimg 画像など） */
.reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.show{
  opacity:1;
  transform:none;
}

/* ▼ アニメ抑制設定の端末では即時表示 */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .jimg.fi-target{
	opacity:1 !important;
	transform:none !important;
	transition:none !important;
  }
}