@charset "utf-8";
/* 過去の美術展（archive）のページ用：スマホ（820px未満）のときだけ効く調整。パソコンの見た目は変えない（2026-10-16） */
@media (max-width:819px){
  body{background:#fff linear-gradient(#bfe6f7,#fff 220px) no-repeat;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;font-size:15px;line-height:1.6}
  #container,#contents{width:auto !important;background:#fff !important}
  /* ヘッダー：パソコンと同じ構図を画面幅に合わせて縮小 */
  #header{position:relative;height:auto;padding:0}
  #header::before{content:"";display:block;aspect-ratio:796/150;background:url(/common/css/img/bg_contents.jpg) center top/100% auto no-repeat}
  #header h1{position:absolute;left:3.14%;top:0;float:none;width:42.2%;height:auto;aspect-ratio:336/130;background-size:100% 100%}
  /* ナビ：文字のボタンを4つ均等に */
  #navi{float:none;width:auto;height:auto;padding:0 12px;margin:8px auto 6px;max-width:560px}
  #navi ul{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  #navi li,#navi ul li.n_1,#navi ul li.n_2,#navi ul li.n_3,#navi ul li.n_4{position:static;width:auto;height:auto;background:none}
  #navi ul li a,#navi ul li a:hover,#archive #navi ul li.n_3 a{height:auto;min-height:44px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #c9cfe3;border-radius:6px;color:#2b3996;font-size:13px;font-weight:bold;line-height:1.3;text-align:center;text-decoration:none;padding:4px 2px}
  #archive #navi ul li.n_3 a{background:#2b3996;color:#fff;border-color:#2b3996}
  #navi .none{display:inline}
  /* 本文と、右の「過去の美術展」一覧は縦に並べる */
  #archive #a_left,#archive #a_right,#a_left,#a_right{float:none !important;width:auto !important;margin:0 0 16px !important}
  #a_right .a_link ul{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  #a_right .a_link li{float:none;width:auto;margin:0;background:none}
  #a_right .a_link li a{display:block;padding:8px 2px;text-align:center;border:1px solid #ddd;border-radius:4px}
  .archive_listbox .list_c a{display:inline-block;margin:0 6px 8px 0}
  .bt_top_p{margin:20px 16px 0 0}
  #footer{font-size:11px;letter-spacing:0;padding:10px 12px}
}
@media (max-width:819px){
  #main,#home #main,#pan{width:auto !important;margin:0 16px}
  #main *{max-width:100%}
  #main img{height:auto}
  #main h2{width:auto !important;height:auto !important;background-size:100% 100%}
  #main table{display:block;width:auto !important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #main [style*="width"]{width:auto !important}
  #main .float_l,#main .float_r,#main .top_l,#main .top_r{float:none !important;width:auto !important}
  #pan{font-size:12px}
  #pan a{font-size:12px}
}
@media (max-width:819px){body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;font-size:15px;line-height:1.6}}
@media (max-width:819px){
  /* 回り込みの写真は、スマホでは本文の上に1枚で置く */
  #main [style*="float"],#main .img_l,#main .img_r,#main .img_l10,#main .img_r10,#main img[align]{float:none !important;display:block;margin:12px auto !important;width:auto !important}
}
@media (max-width:819px){
  /* 左右に振り分けた箱は、スマホでは上から順に並べる */
  #main .f_left,#main .f_right{float:none !important;margin:8px auto !important;text-align:center;width:auto !important}
  #main [style*="margin-left"],#main [style*="margin-right"]{margin-left:auto !important;margin-right:auto !important}
  #main div,#main ul,#main p,#main h3,#main h4{width:auto !important;max-width:100%}
  #main .flex01{flex-wrap:wrap;justify-content:center}
}
@media (max-width:819px){
  /* ---- スマホの余白と左ぞろえ（2026-10-16 社長の指摘で調整） ---- */
  /* 縦に並んだ画像のバナー・ボタンの間をあける */
  #main a > img{display:inline-block}
  #main div > a > img,#main p > a > img,#main li > a > img,#main .f_left img,#main .f_right img{margin:0 0 10px}
  #main .flex01 li,#main .flex01 > div{margin:0 4px 8px !important}
  #main ul.list_youshiki li{float:none;display:inline-block;margin:0 4px 8px}
  /* 文章の段落・見出しの上下に間をとる */
  #main p + p,#main p + ul,#main ul + p,#main div + p{margin-top:.8em}
  #main h3,#main h4{margin-top:14px !important;margin-bottom:8px !important;line-height:1.5}
  #main h2{margin-bottom:12px}
  /* 公募規定の「資料請求・問い合わせ先」の箱 */
  #invitation .box1{width:auto;padding:12px;background-image:none}
  .box_wh350,.box1 .r_box310{float:none;width:auto !important;padding:12px 14px;margin:0 0 12px;background-image:none;background-color:#fff}
  #main img[src*="bg_wh_350"],#main img[src*="ic_dan"]{display:none}
  .box1 .ad{margin:10px 0 0;padding:0 0 0 10px}
  .box1 .ad p{line-height:1.7}
  .box1 .r_box310 > img{display:block;margin:0 0 8px}
  .list_pdf li{padding:0;margin:0 0 8px}
  .list_pdf li a{display:block;padding:8px 10px !important;margin:0 !important}
  .box1 .r_box310 > div{margin:12px 0 8px}
}
@media (max-width:819px){
  #btn_move{width:auto}
  #btn_move ul{margin:10px 0 0}
  #btn_move li{height:auto;float:none;margin:0 0 8px}
  #btn_move li img{margin:0}
  #w_navi li{margin:0 6px 6px 0 !important}
}
@media (max-width:819px){
  #w_navi,#w_navi ul{height:auto !important;overflow:visible;margin-bottom:14px}
  #w_navi::after,#w_navi ul::after{content:"";display:block;clear:both}
  /* 見出しと中身の2列の表は、スマホでは上下に積む */
  #main table.inv_table{display:block;overflow:visible}
  #main table.inv_table tbody,#main table.inv_table tr,#main table.inv_table > tbody > tr > th,#main table.inv_table > tbody > tr > td{display:block;width:auto !important}
  #main table.inv_table > tbody > tr > th{text-align:left;padding:8px 10px}
  #main table.inv_table > tbody > tr > td{padding:8px 10px 12px}
  #main table.inv_table td table{display:table;width:100% !important}
}
/* ナビのアイコン画像がカーソルを乗せたときに出ないように（2026-10-16 社長の指摘） */
@media (max-width:819px){
  #navi ul li a,#navi ul li a:hover,#navi ul li.n_1 a:hover,#navi ul li.n_2 a:hover,#navi ul li.n_3 a:hover,#navi ul li.n_4 a:hover,#home #navi ul li.n_1 a,#invitation #navi ul li.n_2 a,#contact #navi ul li.n_4 a{background-image:none !important}
}
@media (max-width:819px){
  #navi ul li a,#navi ul li a:hover,#archive #navi ul li.n_3 a{font-size:clamp(11px,3.3vw,13px);letter-spacing:-.02em;white-space:nowrap;padding:4px 1px}
  #pan{margin:12px 16px 14px !important;line-height:1.6}
}

/* 古い枠のページでも新しいフッターを使う（全幅） */
.to-top{clear:both;display:flex;justify-content:flex-end;margin:32px 24px 14px}
.to-top a{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:1px solid #c9cfe3;border-radius:999px;background:#fff;color:#2b3996;font:600 12px/1 "Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;letter-spacing:.14em;text-decoration:none}
.to-top a:hover{background:#2b3996;border-color:#2b3996;color:#fff}
.site-footer{clear:both;margin:0;padding:22px 16px 18px;background:#1b2a6b;border-top:3px solid #3fc3c9;color:#cfd5ec;text-align:center;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;letter-spacing:.04em;line-height:1.6}
.site-footer .fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin-bottom:12px}
.site-footer .fnav a{color:#fff;font-size:13px;text-decoration:none}
.site-footer .ftag{font:600 15px/1.6 "Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;color:#fff;letter-spacing:.12em;margin:0 0 4px}
.site-footer .fcopy{font-size:11px;color:#9aa5cf;margin:0}

/* 右の「過去の美術展」一覧：古いページ・新しいページで同じ見た目にそろえる（全幅） */
#a_right .a_link{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;font-size:12px;line-height:1.5}
#a_right .a_link h3{margin:0;padding:5px 0;line-height:15px;text-align:center}
#a_right .a_link h3 img{display:inline-block;vertical-align:top;margin:0}
#a_right .a_link li{padding:5px 0 5px 10px;margin:0;font-size:12px;line-height:1.5}
#a_right .a_link li a{font-size:12px;line-height:1.5}
/* パンくずの下の余白を、新しいページとそろえる（全幅） */
#pan{margin-bottom:12px !important;padding-top:2px}