/*===============================
case
================================*/
#case {
}
@media screen and (min-width: 768px) {
}
/* ★ 白い巨大パネル（2枚目スクショの白枠） */
.case-detail-wrapper {
 background: #ffffff;
 border-radius: 22px;
 padding: 60px 50px;
 margin-top: -40px;
}

/* タイトル */
.case-detail-title {
 font-size: 26px;
 font-weight: 700;
 color: #0066b3;
 margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
 .case-detail-title {
  font-size: 36px;
  font-weight: 700;
  color: #0066b3;
  margin-bottom: 40px;
 }
}
/* ▼ 上段：3要素 */
.case-detail-toparea {
 text-align: center;
 display: flex;
 justify-content: space-between;
 gap: 40px;
 margin-bottom: 60px;
}

/* 左BOX */
.case-detail-leftbox {
 width: 45%;
 background: #fff;
 padding: 25px 30px;
 border-radius: 14px;
 border: 2px solid #c3d5e7;
}
.case-detail-text01 {
 font-size: 16px;
 font-weight: 600;
}
@media screen and (min-width: 768px) {
 .case-detail-text01 {
  font-size: 22px;
  font-weight: 600;
 }
}
.case-detail-text02 {
 padding-top: 30px;
}
/* 右BOX */
.case-detail-rightbox {
 width: 45%;
 background: #0066b3;
 color: #fff;
 padding: 25px 30px;
 border-radius: 14px;
}

/* 深さメーター */
.case-detail-depth {
 display: flex;
 gap: 6px;
 margin-bottom: 15px;
 align-items: center;
}
.case-detail-depth p {
 font-size: 16px;
}
@media screen and (min-width: 768px) {
 .case-detail-depth p {
  font-size: 17px;
 }
}
.case-detail-depth span {
 width: 18px;
 height: 10px;
 background: #ffe600;
}

.case-detail-subtitle {
 font-size: 16px;
 font-weight: 600;
}
@media screen and (min-width: 768px) {
 .case-detail-subtitle {
  font-size: 22px;
  font-weight: 600;
 }
}
.case-detail-flow {
 font-size: 16px;
 font-weight: 600;
}
@media screen and (min-width: 768px) {
 .case-detail-flow {
  font-size: 22px;
  font-weight: 600;
 }
}
.case-detail-text {
 padding-top: 30px;
}
/* 中央アイコン */
.case-detail-centericon {
 position: absolute;
 left: 50%;
 top: 25%;
 transform: translate(-50%, -50%);
}
.case-detail-centericon img {
 width: 48px;
}

/* 大画像 */
.case-detail-img-large img {
 width: 100%;
 border-radius: 14px;
 background: #e8e8e8;
}

/* 大画像下の文章 */
.case-detail-paragraph {
 margin: 15px 0 50px;
 font-size: 16px;
 line-height: 1.8;
}
@media screen and (min-width: 768px) {
 .case-detail-paragraph {
  margin: 15px 0 50px;
  font-size: 18px;
  line-height: 1.8;
 }
}
/* 下段2カラム */
.case-detail-row {
 display: flex;
 justify-content: space-between;
 gap: 40px;
 margin-bottom: 60px;
}

.case-detail-img-small {
 width: 45%;
}
.case-detail-img-small img {
 width: 100%;
 border-radius: 14px;
 background: #e8e8e8;
}

.case-detail-textblock {
 width: 56%;
 font-size: 16px;
 line-height: 1.9;
}

/* SP */
@media screen and (max-width: 767px) {
 .case-detail-wrapper {
  padding: 30px 15px;
 }

 .case-detail-toparea {
  flex-direction: column;
  gap: 12px;
 }

 .case-detail-leftbox,
 .case-detail-rightbox {
  width: 100%;
  padding: 25px 10px;
 }

 .case-detail-centericon {
  position: static;
  transform: none;
  margin: 20px auto;
 }

 .case-detail-row {
  flex-direction: column;
 }

 .case-detail-img-small,
 .case-detail-textblock {
  width: 100%;
 }
}