@charset "utf-8";
/* Existing subpage design, with flexible widths. No added gallery controls. */
body.sj-responsive{margin:0;min-width:0;-webkit-text-size-adjust:100%}
body.sj-responsive #layout-header,body.sj-responsive #layout-container,body.sj-responsive #layout-footer{width:100%;min-width:0}
body.sj-responsive #layout-header{z-index:100}
body.sj-responsive #header,body.sj-responsive #container{width:calc(100% - 80px);max-width:1280px;min-width:0;margin:0 auto}
body.sj-responsive #header{height:0}
body.sj-responsive h1#site-logo{top:64px;left:0;width:205px;height:173px}
body.sj-responsive #lnb{top:237px;left:0;width:205px;height:auto}
body.sj-responsive #lnb .lnb-menu{width:205px;box-sizing:border-box}
body.sj-responsive #lnb .lnb-menu>li:focus-within>.sub-wrap{display:block!important;height:auto!important;overflow:visible!important}
body.sj-responsive #lnb a:focus-visible{outline:2px solid #fff;outline-offset:-3px}
body.sj-responsive #layout-container{margin:0;min-height:calc(100vh - 45px)}
body.sj-responsive #container-warp{margin:0 0 0 260px;width:calc(100% - 260px);max-width:1020px}
body.sj-responsive #contents-wrap{padding:64px 0 0;width:100%;z-index:1}
body.sj-responsive #contents-title{height:auto;min-height:66px}
body.sj-responsive #contents-title h2{overflow-wrap:break-word}
body.sj-responsive div.contents{width:100%;min-height:0;padding-bottom:60px}
body.sj-responsive #bg{display:none}
body.sj-responsive #footer,body.sj-responsive #footer-warp{width:calc(100% - 40px);max-width:1280px;min-width:0;height:auto;margin:0 auto}
body.sj-responsive #footer{padding:0}
body.sj-responsive #footer img{max-width:100%;height:auto}
body.sj-responsive #sj-menu-toggle{display:none}
body.sj-responsive #contents-wrap *,body.sj-responsive #sj-menu-toggle{box-sizing:border-box}
body.sj-responsive #contents-wrap img{max-width:100%;height:auto}

/* Keep the existing three-column gallery type and the original captions. */
body.sj-responsive div.img-view-list,body.sj-responsive div.img-view-list02{width:100%;max-width:none}
body.sj-responsive div.img-view-list ul.list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 19px;overflow:visible;padding:0;margin:0;text-align:center}
body.sj-responsive div.img-view-list.sj-installation-large ul.list,body.sj-responsive div.img-view-list[data-sj-board="installation"] ul.list{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 42px}
body.sj-responsive div.img-view-list02 ul.list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 13px;overflow:visible;padding:0;margin:0;text-align:center}
body.sj-responsive div.img-view-list ul.list>li,body.sj-responsive div.img-view-list02 ul.list>li{float:none;clear:none;width:auto;max-width:none;height:auto;min-width:0;padding:0;margin:0;text-align:center}

/* Only dimensions override Cycle Lite's inline CSS. Cycle retains display,
   opacity and z-index control, so the original automatic transitions continue. */
body.sj-responsive .thumb_gallery{box-sizing:content-box;position:relative!important;width:100%!important;height:0!important;padding:75% 0 0!important;margin:0 0 10px!important;overflow:hidden;background:transparent}
body.sj-responsive div.img-view-list.sj-installation-large .thumb_gallery,body.sj-responsive div.img-view-list[data-sj-board="installation"] .thumb_gallery{margin-bottom:12px!important}
body.sj-responsive div.img-view-list02 .thumb_gallery{padding-top:76.875%!important;margin-bottom:0!important}
body.sj-responsive .thumb_gallery>a.pic{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none;min-width:0;padding:0!important;margin:0!important;overflow:hidden;background:transparent}
body.sj-responsive .thumb_gallery>a.pic:first-child{display:block}
body.sj-responsive .thumb_gallery>a.pic+a.pic{display:none}
body.sj-responsive .thumb_gallery>a.pic img{display:block;width:100%!important;height:100%!important;max-width:none;padding:0;margin:0;border:0;object-fit:cover}
body.sj-responsive div.img-view-list ul.list a.subject{display:block;width:auto;height:auto;max-width:100%;margin:0;text-align:center;overflow-wrap:break-word}
body.sj-responsive div.img-view-list.sj-installation-large ul.list a.subject,body.sj-responsive div.img-view-list[data-sj-board="installation"] ul.list a.subject{padding:0 4px 10px;font-size:13px;line-height:1.55}
body.sj-responsive div.img-view-list.sj-exhibition-large ul.list a.subject,body.sj-responsive div.img-view-list[data-sj-board="exhibition"] ul.list a.subject{padding:0 3px 10px;font-size:12px;line-height:1.5}
body.sj-responsive div.img-view-list.sj-installation-large ul.list a.subject span,body.sj-responsive div.img-view-list[data-sj-board="installation"] ul.list a.subject span{margin-top:4px}
body.sj-responsive div.img-view-list.sj-exhibition-large ul.list a.subject span,body.sj-responsive div.img-view-list[data-sj-board="exhibition"] ul.list a.subject span{margin-top:5px}
body.sj-responsive .thumb_gallery>a.pic:focus-visible{outline:2px solid #595959;outline-offset:-2px}
body.sj-responsive button:focus-visible,body.sj-responsive #contents-wrap a:focus-visible{outline:2px solid #244e80;outline-offset:2px}

/* Text and detail pages retain their fonts, colours and original image ratio. */
body.sj-responsive #board-view-contents,body.sj-responsive #board-view,body.sj-responsive #board-view-wrap,body.sj-responsive #board-wrap{width:100%;max-width:100%;min-width:0}
body.sj-responsive #board-view-contents .contents-wrap,body.sj-responsive .content-wrap{max-width:100%;overflow-wrap:break-word}
body.sj-responsive #board-view-contents .contents-wrap img{max-width:100%!important;height:auto!important}
/* Detail width fix r5: all photographs in the gallery detail template,
   including old image directories and absolute URLs. The explicit wrapper
   class keeps this independent of image filenames and excludes list thumbnails.
   The second selector preserves r4 behaviour during the template upload. */
body.sj-responsive #board-view-wrap.sj-gallery-detail #board-view-contents .contents-wrap img,
body.sj-responsive #board-view-contents .contents-wrap img[src^="/attach/sj_responsive_v2/"][src$="_full.jpg"]{display:block;width:100%!important;max-width:100%!important;height:auto!important}
/* The editor sometimes puts consecutive photographs in the same paragraph.
   Separate only adjacent images; other paragraphs already have 30px padding.
   No !important: retain any explicit per-image inline spacing. */
body.sj-responsive #board-view-wrap.sj-gallery-detail #board-view-contents .contents-wrap img + img{margin-top:30px}
body.sj-responsive #board-view-contents table.txc-wrapper{width:100%!important;max-width:100%!important;table-layout:fixed}
body.sj-responsive #board-view-contents table.txc-wrapper td{width:auto!important}
body.sj-responsive #board-view dl.header dt.subject{width:100%;overflow-wrap:break-word}
body.sj-responsive .history-wrap dl.history{display:grid;grid-template-columns:85px minmax(0,1fr);column-gap:12px}
body.sj-responsive .history-wrap dl.history dt,body.sj-responsive .history-wrap dl.history dd{float:none;width:auto;margin:0 0 2px;padding:0;overflow-wrap:break-word}
body.sj-responsive .history-wrap dl.history dd.st1{grid-column:2;width:auto;padding:0}
body.sj-responsive #board-list dl.list,body.sj-responsive #board-list dl.header{display:flex}
body.sj-responsive #board-list dl.list dt,body.sj-responsive #board-list dl.header dt{flex:0 0 23%;width:auto;min-width:0;height:auto}
body.sj-responsive #board-list dl.list dd.subject,body.sj-responsive #board-list dl.header dd.subject{flex:1;width:auto;min-width:0;height:auto;padding-right:16px;overflow-wrap:break-word}
body.sj-responsive div.paging div.pages{width:100%}
body.sj-responsive #board-bottom{overflow-wrap:break-word}

@media(max-width:900px){
body.sj-responsive #layout-header{position:sticky;top:0;background:#f5f5f3;box-shadow:0 1px 0 #0002}
body.sj-responsive #header{width:100%;height:auto;min-height:76px;padding-top:76px;box-sizing:border-box}
body.sj-responsive h1#site-logo{top:0;left:20px;width:112px;height:76px}
body.sj-responsive h1#site-logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;box-sizing:border-box}
body.sj-responsive h1#site-logo img{width:84px;height:auto}
body.sj-responsive #sj-menu-toggle{display:block;position:absolute;top:16px;right:20px;min-width:66px;min-height:44px;padding:8px 12px;border:1px solid #aaa;background:transparent;color:#111;font:14px/1.2 Arial,sans-serif;cursor:pointer}
body.sj-responsive #lnb{position:static;width:100%;height:auto;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto}
body.sj-responsive.sj-js:not(.sj-menu-open) #lnb{display:none}
body.sj-responsive #lnb,body.sj-responsive #lnb *{box-sizing:border-box}
body.sj-responsive #lnb .lnb-menu{width:100%;padding:12px 20px 20px;background:#292929}
body.sj-responsive #lnb ul.lnb-menu>li>a,body.sj-responsive #lnb ul.lnb-menu>li>a:hover,body.sj-responsive #lnb ul.lnb-menu>li>a.active{padding:12px;font-size:15px;line-height:1.4}
body.sj-responsive #lnb .sub-wrap{display:block!important;position:static!important;height:auto!important;overflow:visible!important}
body.sj-responsive #lnb .lnb-sub{width:100%;padding:0 0 8px}
body.sj-responsive #lnb ul.lnb-sub li a,body.sj-responsive #lnb ul.lnb-sub li a:hover,body.sj-responsive #lnb ul.lnb-sub li a.active{padding:10px 24px;font-size:13px;line-height:1.4;background:none}
body.sj-responsive #container{width:calc(100% - 40px)}
body.sj-responsive #container-warp{width:100%;max-width:none;margin:0}
body.sj-responsive #contents-wrap{padding-top:32px}
body.sj-responsive #contents-title{min-height:60px}
body.sj-responsive #layout-container{background-attachment:scroll;min-height:calc(100vh - 140px)}
body.sj-responsive div.img-view-list ul.list,body.sj-responsive div.img-view-list.sj-installation-large ul.list,body.sj-responsive div.img-view-list[data-sj-board="installation"] ul.list{grid-template-columns:repeat(2,minmax(0,1fr))}
body.sj-responsive div.img-view-list02 ul.list{grid-template-columns:repeat(3,minmax(0,1fr))}
body.sj-responsive #board-view-contents .contents-wrap{padding:16px}
}
@media(max-width:600px){
body.sj-responsive div.img-view-list ul.list,body.sj-responsive div.img-view-list.sj-installation-large ul.list,body.sj-responsive div.img-view-list[data-sj-board="installation"] ul.list{grid-template-columns:minmax(0,1fr)}
body.sj-responsive div.img-view-list02 ul.list{grid-template-columns:repeat(2,minmax(0,1fr))}
body.sj-responsive .content-wrap,body.sj-responsive #board-wrap{padding:16px}
body.sj-responsive .content-wrap p{text-align:left}
body.sj-responsive .history-wrap dl.history{grid-template-columns:58px minmax(0,1fr);column-gap:8px}
body.sj-responsive #board-list dl.list,body.sj-responsive #board-list dl.header{flex-direction:column}
body.sj-responsive #board-list dl.list dt,body.sj-responsive #board-list dl.header dt{width:100%;padding:12px 14px 0;border:0}
body.sj-responsive #board-list dl.list dd.subject,body.sj-responsive #board-list dl.header dd.subject{padding:10px 14px 16px}
body.sj-responsive #board-bottom .right{float:none;text-align:right}
body.sj-responsive div.paging div.pages span a{display:inline-block;min-width:28px;min-height:32px;padding:7px 6px;margin:2px}
}