* { box-sizing:border-box; }
body { margin:0; color:#655c53; background:#8eb0c0; font:normal normal normal 13px/1.2 "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "Osaka", "Helvetica", "Arial", "ＭＳ Ｐゴシック", sans-serif; }
a { color:#ffccaa; }
img { border:0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid #154963; outline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip { position:absolute; top:-80px; left:8px; z-index:10; padding:12px; background:white; }
.skip:focus { top:8px; }
#site { position:relative; width:1048px; min-height:870px; margin:0 auto; background:url('../images/BgImg.jpg') left top / 1048px 846px no-repeat; }
#gallery-navigation { display:contents; }
#Main { position:absolute; top:16px; left:463px; visibility:visible; }
.main { width:555px; height:800px; overflow:hidden; }
.main img { max-width:100%; height:auto; }
#btn_comment { width:190px; }
#image-error { padding:12px; background:#fff3df; }
[hidden] { display:none !important; }
#btn_ctrl1,#btn_ctrl2 { width:390px; visibility:visible !important; }
button { padding:0; border:0; background:transparent; cursor:pointer; }
button:disabled { opacity:.4; cursor:default; }
button img { max-width:100%; }
#btn_c80 { visibility:visible !important; }
#google { position:absolute; top:820px; left:150px; width:728px; }
#work-descriptions { width:100%; max-width:1000px; margin:40px auto 24px; padding:0 16px; }
#work-descriptions details { background:rgba(255,255,255,.8); border-radius:8px; padding:12px; }
#work-descriptions li { margin:12px 0; }
@media (prefers-reduced-motion:no-preference) { .main img { animation:appear .3s ease-out; } @keyframes appear { from {opacity:.4;} to {opacity:1;} } }

/* 固定レイアウト全体を縮小。配置を変更するブレークポイントは使用しない。 */
#site-frame { position:relative; width:100%; max-width:1048px; margin:0 auto; }
#site-canvas { width:1048px; transform-origin:top left; }
#site { margin:0; }
header { height:0; }
#work-descriptions { width:1000px; }

/* 紙の枠を9分割で伸ばし、角の形を保つ。 */
#paper {position:absolute;left:447px;top:0;width:601px;height:846px;border-style:solid;border-width:40px 30px 40px 28px;border-image:url('../images/paper.png') 40 30 40 28 fill stretch;pointer-events:none;}
#Main {z-index:1;}
.main {height:auto;overflow:visible;}
.main img {display:block;width:100%;height:auto;}
#gallery-navigation {position:absolute;left:36px;top:103px;width:360px;display:grid;grid-template-columns:repeat(7,48px);column-gap:4px;row-gap:0;grid-template-rows:56px 51px;grid-auto-rows:52px;}
#btn_Gallery1,#btn_Gallery2,#btn_Gallery3 {display:contents;}
#gallery-navigation img {width:48px;height:48px;object-fit:cover;display:block;}
#btn_comment {background:white;border:2px solid black;border-radius:5px;padding:10px 12px;width:214px;left:218px!important;top:419px;}
#btn_comment .posted-comment {margin:0;white-space:pre-wrap;overflow-wrap:anywhere;}

#gallery-navigation.gallery-expanded {background:#8eb0c0;border-radius:4px;}