/* 2026-10-23 写真の追加（トップ・/support/）。has-photo が付いた要素だけに効く */

/* 写真はHTMLのwidth/height属性（縦横比の予約用）より、CSSの縦横比を優先する */
.about-action-photo,.social-purpose-photo,.seminar-track-photo,.journal-photo{height:auto}

/* ---- 主な支援内容：写真つきカード（PCは3列、4件は4列） */
.catalog-grid:has(.has-photo){grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px;border-top:0;padding-top:6px}
.catalog-grid-4:has(.has-photo){grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px}
.catalog-grid-3:has(.has-photo) .catalog-item:last-child{grid-column:auto}
.catalog-item.has-photo{border-bottom:0;padding:0}
.catalog-item-photo{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--catalog-pale);margin-bottom:16px}
.catalog-item-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.catalog-item.has-photo:hover .catalog-item-photo img{transform:scale(1.04)}
.catalog-item.has-photo .catalog-item-icon{display:none}
.catalog-item.has-photo p{margin-top:6px}

/* ---- /support/ 各項目：見出しの下に写真 */
.detail-topic-photo{grid-column:1/-1;margin:6px 0 0;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--catalog-pale)}
.detail-topic-photo img{width:100%;height:100%;object-fit:cover}

/* ---- サロンシードについて：3枚のカードの上に写真 */
.about-actions>div{overflow:hidden}
.about-action-photo{display:block;width:calc(100% + 48px);max-width:none;margin:-30px -24px 22px;aspect-ratio:3/2;object-fit:cover}

/* ---- 地域で進めたい取り組み：写真＋縦の一覧 */
.social-purpose.has-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:6px 44px;align-items:start}
.social-purpose-photo{grid-row:1/3;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px}
.social-purpose.has-photo h3{white-space:normal;padding-top:4px}
.social-purpose.has-photo ul{display:grid;gap:4px;font-size:16px;line-height:2;color:#4a5f6b;margin-top:10px}

/* ---- セミナー：カードの上に写真 */
.seminar-track{overflow:hidden}
.seminar-track-photo{display:block;width:calc(100% + 60px);max-width:none;margin:-32px -30px 24px;aspect-ratio:16/9;object-fit:cover}

/* ---- お役立ち情報：記事カードの上に写真 */
.journal-grid>a{overflow:hidden}
.journal-photo{display:block;width:calc(100% + 48px);max-width:none;margin:-28px -24px 22px;aspect-ratio:3/2;object-fit:cover}

/* ---- 相談：写真＋文章の2列 */
.contact.has-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding-inline:max(5%,calc((100% - 1180px)/2))}
.contact-photo{border-radius:24px;overflow:hidden;aspect-ratio:3/2}
.contact-photo img{width:100%;height:100%;object-fit:cover}
.contact.has-photo .contact-inner{text-align:left;margin:0}
.contact.has-photo .contact-inner .button{min-width:0}

@media(max-width:1000px){
 .catalog-grid-4:has(.has-photo){grid-template-columns:repeat(2,minmax(0,1fr))}
 .catalog-grid:has(.has-photo){gap:30px 20px}
}
@media(max-width:1100px){
 .social-purpose.has-photo{display:grid}
}
@media(max-width:820px){
 .social-purpose.has-photo{grid-template-columns:1fr;grid-template-rows:none;gap:18px}
 .social-purpose-photo{grid-row:auto}
 .social-purpose.has-photo ul{margin-top:0;font-size:15px}
 .about-action-photo{width:calc(100% + 50px);margin:-25px -25px 20px}
 .journal-photo{width:calc(100% + 52px);margin:-26px -26px 20px}
 .contact.has-photo{grid-template-columns:1fr;gap:28px}
 .contact.has-photo .contact-inner{text-align:center}
 .contact-photo{aspect-ratio:16/10;border-radius:20px}
}
/* スマホ：支援項目は「左に写真・右に文章」の1列 */
@media(max-width:700px){
 .catalog-grid:has(.has-photo),.catalog-grid-4:has(.has-photo){grid-template-columns:1fr;gap:0;border-top:1px solid var(--catalog-line)}
 .catalog-item.has-photo{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 16px;align-items:start;padding:18px 0;border-bottom:1px solid var(--catalog-line)}
 .catalog-item.has-photo .catalog-item-photo{grid-row:1/3;aspect-ratio:1/1;margin:2px 0 0;border-radius:12px}
 .catalog-item.has-photo h4{margin:0;font-size:1rem;line-height:1.7}
 .catalog-item.has-photo p{margin-top:4px;font-size:.9375rem;line-height:1.8}
 .detail-topic-photo{aspect-ratio:16/10;margin-top:2px}
 .seminar-track-photo{width:calc(100% + 44px);margin:-26px -22px 20px}
}
@media(max-width:360px){
 .catalog-item.has-photo{grid-template-columns:76px minmax(0,1fr);gap:0 12px}
}
@media(prefers-reduced-motion:reduce){.catalog-item-photo img{transition:none}}