/* 担当ロール: engineering | 作成日: 2026-09-12 | ステータス: draft
   集客サポート版の写真レイヤー。既存の構成・カラー・ヒーローは styles.css を継承します。 */

.scene-photo{position:relative;overflow:hidden;isolation:isolate;background:#e2eef2}
.scene-photo>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* The case cover is illustrative, never a photograph of the cooperating clinic. */
.article-cover{height:176px;border-radius:8px}
.article-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,55,74,.55),rgba(18,55,74,.05) 86%);z-index:0}
.article-cover-title{position:absolute;left:22px;top:50%;transform:translateY(-50%);z-index:1;font-size:20px;line-height:1.7;font-weight:400;color:#fff;text-shadow:0 1px 8px #183b4d22}

/* A real-life atmosphere beside the existing problem statement. */
.problems-intro{display:grid;grid-template-columns:1.12fr .88fr;gap:42px;align-items:center;margin-bottom:42px}
.problems-intro .section-heading{margin:0}
.problems-intro h2{font-size:clamp(28px,2.7vw,36px)}
.care-photo{aspect-ratio:16/10;border-radius:24px 68px 24px 24px;box-shadow:12px 12px 0 #e0f1f8}

/* Card photos extend to the existing card edges, keeping text padding intact. */
.support-card{--photo-inset:27px;overflow:hidden}
.support-photo{aspect-ratio:16/10;flex:none;margin:calc(-1 * var(--photo-inset)) calc(-1 * var(--photo-inset)) 23px}
.support-card-head{margin-bottom:18px}

/* The setup photograph replaces the two decorative circles. */
.setup-grid{align-items:center}
.setup-photo{width:100%;aspect-ratio:16/10;margin-top:29px;border-radius:20px 54px 20px 20px;box-shadow:9px 9px 0 #e1f1f7}

/* Industry photos update with the existing tabs. */
.industry-panel{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:28px;align-items:center;padding:32px;min-height:340px}
.industry-copy{min-width:0}
.industry-copy h3{font-size:25px}
.industry-copy>p:not(.industry-note){font-size:16px;line-height:2;color:var(--body);max-width:600px}
.industry-photo{width:100%;aspect-ratio:16/12;border-radius:16px 48px 16px 16px;align-self:stretch;max-height:360px}
.industry-photo>img{object-position:center}
.industry-uses{gap:6px}
.industry-uses>li{font-size:14px}

@media(max-width:1120px){
  .support-card{--photo-inset:21px}
  .support-photo{margin-top:-25px}
  .problems-intro{gap:30px}
  .problems-intro h2{font-size:29px}
  .industry-panel{padding:27px;gap:23px}
  .industry-copy h3{font-size:23px}
}
@media(max-width:1000px){
  .industry-layout{grid-template-columns:1fr;gap:18px}
  .industry-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
  .industry-tabs button{padding:13px 16px;font-size:14px}
  .industry-panel{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px;min-height:335px}
  .industry-photo{aspect-ratio:16/11;align-self:center;max-height:none}
}
@media(max-width:900px){
  .industry-copy>p:not(.industry-note){font-size:16px}
  .support-card{--photo-inset:17px}
  .support-photo{margin-top:-23px;margin-bottom:19px}
  .support-card-head{margin-bottom:17px}
  .problems-intro{grid-template-columns:1.05fr .95fr;gap:27px;margin-bottom:37px}
  .problems-intro h2{font-size:25px}
  .care-photo{border-top-right-radius:48px;box-shadow:8px 8px 0 #e0f1f8}
  .article-cover{height:147px}
  .article-cover-title{left:17px;font-size:16px}
  .setup-photo{margin-top:27px;border-top-right-radius:44px}
}
@media(max-width:700px){
  .article-cover{height:auto;aspect-ratio:16/10}
  .article-cover-title{font-size:17px;left:18px}
  .problems-intro{grid-template-columns:1fr;gap:26px;margin-bottom:32px}
  .problems-intro h2{font-size:clamp(25px,5.75vw,33px)}
  .care-photo{width:calc(100% - 7px);aspect-ratio:16/10;border-radius:18px 52px 18px 18px;box-shadow:7px 7px 0 #e0f1f8}
  .support-card{--photo-inset:27px}
  .support-photo{margin-top:-26px;margin-bottom:22px;aspect-ratio:16/10}
  .support-card-head{margin-bottom:17px}
  .setup-photo{width:calc(100% - 7px);margin-top:27px;border-radius:18px 48px 18px 18px;box-shadow:7px 7px 0 #e1f1f7}
  .industry-tabs{gap:6px}
  .industry-tabs button{padding:11px 3px;font-size:14px}
  .industry-panel{grid-template-columns:minmax(0,1fr);gap:24px;padding:23px;min-height:0}
  .industry-photo{grid-row:1;aspect-ratio:16/10;border-radius:13px 40px 13px 13px}
  .industry-copy h3{font-size:23px}
  .industry-copy>p:not(.industry-note){font-size:16px;line-height:2}
  .industry-uses>li{font-size:14px}
}
@media(max-width:370px){
  .problems-intro h2{font-size:24px}
  .article-cover-title{font-size:15px}
  .industry-tabs button{font-size:14px}
  .industry-copy h3{font-size:21px}
}

/* 16px本文に合わせ、中間幅の支援写真は横型カードの左列へ。 */
@media(min-width:701px) and (max-width:1000px){
  .support-card{--photo-inset:0px}
  .support-photo{margin:0;aspect-ratio:16/12;border-radius:14px;width:100%}
  .support-card-head{margin-bottom:0}
  .industry-panel{gap:25px}
}