.sth-gallery {
display: grid;
gap: 8px;
margin: 28px 0 36px;
}
.sth-gallery-caption {
margin: -24px 0 32px;
color: #666666;
font-size: 13px;
line-height: 1.6;
text-align: center;
}
.sth-gallery–count-1 {
grid-template-columns: repeat(1, 1fr);
max-width: 420px;
}
.sth-gallery–count-2 {
grid-template-columns: repeat(2, 1fr);
}
.sth-gallery–count-3 {
grid-template-columns: repeat(3, 1fr);
}
.sth-gallery–count-4,
.sth-gallery–count-5,
.sth-gallery–count-6,
.sth-gallery–count-7,
.sth-gallery–count-8 {
grid-template-columns: repeat(4, 1fr);
}
.sth-gallery–count-9 {
grid-template-columns: repeat(3, 1fr);
}
.sth-gallery–count-10,
.sth-gallery–count-11,
.sth-gallery–count-12 {
grid-template-columns: repeat(5, 1fr);
}
.sth-gallery__item {
display: block;
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f3f3f3;
text-decoration: none;
}
.sth-gallery__item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.sth-gallery__item:hover img {
transform: scale(1.04);
opacity: 0.92;
}
.sth-gallery-lightbox {
display: none;
position: fixed;
z-index: 999999;
inset: 0;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.82);
}
.sth-gallery-lightbox.is-active {
display: flex;
}
.sth-gallery-lightbox__inner {
position: relative;
max-width: min(1100px, 96vw);
max-height: 90vh;
}
.sth-gallery-lightbox__inner img {
display: block;
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
.sth-gallery-lightbox__close {
position: absolute;
top: -42px;
right: 0;
width: 36px;
height: 36px;
border: 0;
border-radius: 999px;
background: #ffffff;
color: #111111;
cursor: pointer;
font-size: 24px;
line-height: 1;
}
@media (max-width: 640px) {
.sth-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin: 22px 0 30px;
}
.sth-gallery.sth-gallery–count-1 {
grid-template-columns: repeat(1, 1fr) !important;
max-width: none;
}
.sth-gallery.sth-gallery–count-2 {
grid-template-columns: repeat(2, 1fr) !important;
}
.sth-gallery.sth-gallery–count-3,
.sth-gallery.sth-gallery–count-6,
.sth-gallery.sth-gallery–count-9 {
grid-template-columns: repeat(3, 1fr) !important;
}
.sth-gallery.sth-gallery–count-4,
.sth-gallery.sth-gallery–count-5,
.sth-gallery.sth-gallery–count-7,
.sth-gallery.sth-gallery–count-8 {
grid-template-columns: repeat(4, 1fr) !important;
}
.sth-gallery.sth-gallery–count-10,
.sth-gallery.sth-gallery–count-11,
.sth-gallery.sth-gallery–count-12 {
grid-template-columns: repeat(5, 1fr) !important;
}
.sth-gallery-lightbox {
padding: 16px;
}
.sth-gallery-lightbox__inner img {
max-height: 82vh;
}
.sth-gallery-lightbox__close {
position: fixed;
top: 10px;
right: 10px;
}
}
.st-article .st-wrap-image {
clear: right;
}
.st-article .st-wrap-image.st-wrap-s {
width: 26%;
}
.st-article .st-wrap-image.st-wrap-m {
width: 34%;
}
.st-article .st-wrap-image.st-wrap-l {
width: 42%;
}
.st-article .st-wrap-image img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
border-radius: 4px;
}
.st-article .st-wrap-image .st-image-caption,
.st-article .st-wrap-image .wp-element-caption {
text-align: left;
}
.st-article .st-zoom {
display: block;
cursor: zoom-in;
}
@media (max-width: 900px) {
.st-article .st-wrap-image.st-wrap-s,
.st-article .st-wrap-image.st-wrap-m,
.st-article .st-wrap-image.st-wrap-l {
width: auto;
}
}
画像：堺市HPより
「ミスタータイガース」が一日署長に
サンスクエア堺（堺市堺区）で9月22日、堺警察署と北堺警察署による「秋の交通安全イベント」が開かれるんよ。「ミスタータイガース」として知られる掛布雅之さんが一日警察署長に就任し、交通安全教室などに参加するわ。時間は午前10時から11時45分まで。定員は400人。
掛布さんは大阪府警察交通安全教育班とともに交通安全教室を行うねん。大阪公立大学吹奏楽部による演奏も予定してるで。
来場者には交通安全啓発品をプレゼントするほか、イベントの最後には掛布さんによるくじ引き大会を実施するんよ。景品には数に限りがあるわ。
イベントは9月21日から30日まで実施される「秋の全国交通安全運動」に合わせて開かれるねん。会場のサンスクエア堺はJR堺市駅から徒歩約5分。来場者が多い場合は入場を断る場合があるで。
- 会場 サンスクエア堺（堺市堺区田出井町2-1）
- 日時 9月22日（火・祝）午前10時～11時45分
- 定員 400人
- 内容 交通安全教室、大阪公立大学吹奏楽部の演奏、交通安全啓発品の配布、くじ引き大会
- アクセス JR堺市駅から徒歩約5分
- 問い合わせ 堺警察署交通総務係（072-223-1234）
クリックで拡大
こうしたメールが届くようになります
希望する方は入力欄にメールアドレスを入れ「登録を完了する」ボタンをクリックしてください
(function(){
var css=”.stnl-wrap{display:flex;gap:28px;align-items:stretch;justify-content:center;max-width:860px;margin:28px auto;padding:0 16px;box-sizing:border-box;font-family:\”Noto Sans JP\”,\”Hiragino Kaku Gothic ProN\”,\”Yu Gothic\”,sans-serif;color:#222}.stnl-left{width:160px;flex:none}.stnl-imgbox{position:relative;line-height:0}.stnl-imgbox img{display:block;width:100%;height:auto;border:1px solid #e6e3dd;border-radius:3px;cursor:zoom-in}.stnl-badge{position:absolute;left:6px;bottom:6px;padding:3px 7px;font-size:10px;line-height:1;color:#fff;background:rgba(20,18,15,.6);border-radius:3px;pointer-events:none}.stnl-right{position:relative;display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-width:0;align-items:flex-start}.stnl-text{flex:none;margin:0!important;padding:0!important}.stnl-wrap .stnl-head{margin:0!important;padding:0!important;font-size:18px;line-height:1.5;font-weight:700;letter-spacing:.01em;color:#1d1d1d}.stnl-wrap .stnl-sub{margin:2px 0 0!important;padding:0!important;font-size:13px;line-height:1.55;color:#6f6b64}.stnl-frame{position:absolute;top:50%;left:50%;width:100%;max-width:470px;height:150px;min-height:150px;border:0;display:block;transform:translate(calc(-50% – 94px),-50%)}.stnl-linkbox{position:absolute;left:0;bottom:0;flex:none}.stnl-link{font-size:13px;line-height:1.5;color:#1d4e6e;text-decoration:underline;text-underline-offset:2px}.stnl-modal{display:none;position:fixed;inset:0;z-index:99999;background:rgba(20,18,15,.82);align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.stnl-modal.is-open{display:flex}.stnl-modal img{max-width:90vw;max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 12px 48px rgba(0,0,0,.5)}.stnl-close{position:absolute;top:14px;right:18px;width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}@media (max-width:640px){.stnl-wrap{flex-direction:column;align-items:center;gap:14px}.stnl-left{display:block;width:200px;flex:none}.stnl-imgbox{width:100%}.stnl-right{position:static;display:flex;width:100%;max-width:520px;height:auto!important;gap:6px;align-items:stretch}.stnl-text{width:100%;max-width:none}.stnl-frame{position:static;flex:none;width:100%;max-width:none;height:170px;min-height:170px;margin-left:0;margin-right:0;transform:none}.stnl-linkbox{position:static;width:100%;max-width:none}}”;
var s=document.createElement(‘style’);s.textContent=css;document.head.appendChild(s);
var img=document.getElementById(‘stnlImg’),
modal=document.getElementById(‘stnlModal’),
closeBtn=modal.querySelector(‘.stnl-close’),
wrap=img.closest(‘.stnl-wrap’),
imgbox=wrap.querySelector(‘.stnl-imgbox’),
right=wrap.querySelector(‘.stnl-right’);
function syncLayout(){
if(window.innerWidth<=640){right.style.height='';return;}
right.style.height=imgbox.offsetHeight+'px';
}
function open(){modal.classList.add('is-open');modal.setAttribute('aria-hidden','false');}
function close(){modal.classList.remove('is-open');modal.setAttribute('aria-hidden','true');}
if(img.complete){syncLayout();}else{img.addEventListener('load',syncLayout);}
window.addEventListener('resize',syncLayout);
img.addEventListener('click',open);
closeBtn.addEventListener('click',close);
modal.addEventListener('click',function(e){if(e.target===modal)close();});
document.addEventListener('keydown',function(e){if(e.key==='Escape')close();});
})();
(function () {
if (window.__sthGalleryLightboxReady) { return; }
window.__sthGalleryLightboxReady = true;
function closeLightbox(overlay) {
if (!overlay) { return; }
overlay.classList.remove(‘is-active’);
var image = overlay.querySelector(‘img’);
if (image) {
image.removeAttribute(‘src’);
image.alt = ”;
}
}
function getLightbox() {
var overlay = document.querySelector(‘.sth-gallery-lightbox’);
if (overlay) { return overlay; }
overlay = document.createElement(‘div’);
overlay.className = ‘sth-gallery-lightbox’;
overlay.innerHTML = ‘
![]()
‘;
document.body.appendChild(overlay);
overlay.addEventListener(‘click’, function (event) {
if (event.target === overlay || event.target.classList.contains(‘sth-gallery-lightbox__close’)) {
closeLightbox(overlay);
}
});
return overlay;
}
document.addEventListener(‘click’, function (event) {
var target = event.target;
var link = target && target.closest ? target.closest(‘a[data-sth-gallery]’) : null;
if (!link) { return; }
event.preventDefault();
var src = link.getAttribute(‘href’);
if (!src) { return; }
var overlay = getLightbox();
var image = overlay.querySelector(‘img’);
var thumb = link.querySelector(‘img’);
if (image) {
image.src = src;
image.alt = thumb ? (thumb.getAttribute(‘alt’) || ”) : ”;
}
overlay.classList.add(‘is-active’);
});
document.addEventListener(‘keydown’, function (event) {
if (event.key !== ‘Escape’) { return; }
closeLightbox(document.querySelector(‘.sth-gallery-lightbox.is-active’));
});
}());
