/* 共通の部品（51-2）：最上部の帯・ヘッダー・小分類のパネル・☰ の画面・フッター・最上部へ戻るボタン。
   見た目の正は 50_サイト全面改修\試作\B2.html（2026-10-29 確定）。名前はすべて sk- で始め、古い CSS とぶつけない。
   寸法はすべて rem。幅 1440px までは 1rem = 16px、それより広い画面では幅に比例して大きくする（上限 28px＝幅 2520px 相当。提案書 §2-2） */

:root{
  --sk-brown:#3A251A;--sk-brown-dk:#2A1A12;--sk-brown-xdk:#17110E;--sk-brown-md:#4A2F20;
  --sk-gold:#C9A96A;--sk-gold-lt:#FFF3D2;--sk-gold-text:#E9C88C;
  --sk-champ:#F3DDAE;/* 明るいシャンパンゴールド（暗い面の上の文字とボタン） */
  --sk-champ-btn:linear-gradient(100deg,#EED29A 0%,#FFF3D2 45%,#F3DDAE 100%);
  --sk-ink-dk:#F4EBDD;
  --sk-serif:"Shippori Mincho B1",serif;--sk-latin:"Playfair Display",serif;
}
html{font-size:clamp(16px,calc(100vw / 90),28px)}
.sk,.sk *{box-sizing:border-box}
.sk{font-family:"Noto Sans JP",system-ui,sans-serif;line-height:1.75}
/* 下の3つは、部品ごとの指定（ボタンの色など）より弱くするため :where で包む */
:where(.sk) a{color:inherit;text-decoration:none}
:where(.sk) img{display:block;max-width:100%}
:where(.sk) ul{list-style:none;margin:0;padding:0}
.sk-wrap{width:min(80rem,100% - 3rem);margin-inline:auto}
/* Tab で移ったときの枠（古い style.css の細い点線より強くする） */
.sk :is(a,button):focus-visible{outline:.125rem solid var(--sk-gold);outline-offset:.125rem}
.sk-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ボタン：マウスを載せたら背景と文字の色が入れ替わる（どちらの組も読める濃さ） */
.sk-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.5rem;padding:0 1.125rem;border:.0625rem solid transparent;font-size:.875rem;font-weight:500;line-height:1;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;white-space:nowrap;font-family:inherit}
.sk-btn:focus-visible{outline:.125rem solid var(--sk-gold);outline-offset:.1875rem}
.sk-btn-solid{background:var(--sk-champ-btn);color:var(--sk-brown-dk);border-color:var(--sk-champ)}
.sk-btn-solid:hover{background:var(--sk-brown-dk);color:var(--sk-champ);border-color:var(--sk-champ)}
.sk-btn-line{background:transparent;color:var(--sk-ink-dk);border-color:rgba(244,235,221,.55)}
.sk-btn-line:hover{background:var(--sk-gold-lt);color:var(--sk-brown-dk);border-color:var(--sk-gold-lt)}

/* 最上部の帯 */
.sk-util{background:var(--sk-brown-xdk);color:var(--sk-champ);font-size:.7812rem;position:relative;z-index:41}
.sk-util .sk-wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:2.125rem;flex-wrap:wrap}
.sk-util p{margin:0;letter-spacing:.04em}
.sk-util ul{display:flex;gap:.25rem;flex-wrap:wrap}
.sk-util ul a{display:block;padding:.25rem .625rem;transition:background-color .2s,color .2s}
.sk-util ul a:hover{background:var(--sk-gold-lt);color:var(--sk-brown-dk)}
.sk-util .sk-frame a{outline:.0625rem solid rgba(243,221,174,.6);outline-offset:-1px}
.sk-util .sk-frame a:focus-visible{outline:.125rem solid var(--sk-gold);outline-offset:.125rem}

/* ヘッダー */
/* height:auto は、古い style.css の「幅 1230px 以下で header{height:99px}」（古いヘッダーの高さ）を打ち消すため */
.sk-head{position:sticky;top:0;z-index:1000;height:auto;background:var(--sk-brown-dk);color:var(--sk-ink-dk);border-bottom:.0625rem solid rgba(201,169,106,.35)}
.admin-bar .sk-head{top:32px}
.sk-head>.sk-wrap{display:flex;align-items:center;gap:1.25rem;height:5.25rem}
.sk-h1{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.sk-logo{display:flex;align-items:center;gap:.75rem;white-space:nowrap;flex:none}
.sk-logo-txt{display:flex;align-items:baseline;gap:.75rem}
.sk-logo-txt b{font-family:var(--sk-serif);font-weight:700;font-size:2.125rem;letter-spacing:.1em;color:var(--sk-champ);line-height:1}
.sk-logo-txt small{font-family:var(--sk-latin);font-size:.875rem;letter-spacing:.3em;color:var(--sk-champ)}
.sk-logo-img{height:3.25rem;width:auto}
.sk-logo:focus-visible{outline:.125rem solid var(--sk-gold);outline-offset:.25rem}
nav.sk-gnav-wrap{display:block;flex:1;min-width:0}
.sk-gnav{display:flex;gap:.25rem;font-size:.875rem;font-weight:500;justify-content:center;justify-content:safe center}
.sk-gnav>li>button{all:unset;cursor:pointer;display:flex;align-items:center;gap:.25rem;padding:.5rem;white-space:nowrap;transition:background-color .2s,color .2s}
.sk-gnav>li>button::after{content:"";flex:none;width:.3125rem;height:.3125rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-.125rem) rotate(45deg);opacity:.7}
.sk-gnav>li>button:hover,.sk-gnav>li>button[aria-expanded="true"]{background:var(--sk-gold-lt);color:var(--sk-brown-dk)}
.sk-gnav>li>button:focus-visible{outline:2px solid var(--sk-gold);outline-offset:2px}
.sk-acts{display:flex;align-items:center;gap:.625rem}
.sk-search{position:relative;display:flex;align-items:center;height:2.5rem;border:.0625rem solid rgba(244,235,221,.45);background:rgba(255,255,255,.06);padding:0 .25rem 0 .75rem;margin:0}
/* 入力欄の幅は B2 の 9.375rem から 6rem に（「絞り込み」のボタンの分。決定 51-2-2） */
.sk-search input{background:transparent;border:0;color:var(--sk-ink-dk);font:inherit;font-size:.875rem;width:6rem;outline:none;height:auto;padding:0;box-shadow:none}
.sk-search input::placeholder{color:#d9cbb6;opacity:1}
/* 「絞り込み」は 51-5 から検索結果ページへのリンク（a.sk-filter）。ボタンと同じ形にする */
.sk-search :is(button,a.sk-filter){all:unset;cursor:pointer;height:2rem;display:grid;place-items:center;color:var(--sk-gold-text);transition:background-color .2s,color .2s}
.sk-search .sk-search-go{width:2rem}
.sk-search .sk-search-go svg{width:1.125rem;height:1.125rem}
.sk-search .sk-filter{padding:0 .5rem;font-size:.75rem;border-left:.0625rem solid rgba(244,235,221,.3);white-space:nowrap}
.sk-search :is(button,a.sk-filter):hover{background:var(--sk-gold-lt);color:var(--sk-brown-dk)}
.sk-search :is(button,a.sk-filter):focus-visible{outline:2px solid var(--sk-gold);outline-offset:1px}
.sk-search:focus-within{border-color:var(--sk-gold)}
.sk-burger{display:none}

/* 小分類のパネル（開くと画像の札が並ぶ。記事一覧は出さない＝判断4） */
.sk-mega{position:absolute;left:0;right:0;top:100%;z-index:45;background:linear-gradient(180deg,#21150F 0%,#17110E 100%);border-top:1px solid rgba(201,169,106,.35);border-bottom:1px solid rgba(201,169,106,.45);box-shadow:0 1.5rem 3rem rgba(0,0,0,.45);max-height:calc(100vh - 7.5rem);overflow:auto;font-weight:400}
.sk-mega[hidden]{display:none}
.sk-mega>.sk-wrap{display:grid;grid-template-columns:15rem 1fr;gap:2.25rem;padding-block:1.75rem 1.5rem;align-items:start}
.sk-mintro .sk-e{font-family:var(--sk-latin);letter-spacing:.28em;font-size:.6875rem;color:var(--sk-gold-text)}
.sk-mintro .sk-mh{margin:.25rem 0 .5rem;font-family:var(--sk-serif);font-size:1.75rem;font-weight:600;color:var(--sk-champ);line-height:1.3}
.sk-mintro p{margin:0 0 .75rem;font-size:.8125rem;color:#d9cbb6;line-height:1.7}
.sk-mintro .sk-n{font-family:var(--sk-latin);font-size:1.75rem;color:var(--sk-champ);line-height:1}
.sk-mintro .sk-n small{font-family:"Noto Sans JP",sans-serif;font-size:.75rem;margin-left:.25rem;color:#cdbfa9}
.sk-mintro .sk-btn{margin-top:1rem}
.sk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.75rem}
.sk-tile{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid rgba(201,169,106,.3);isolation:isolate;transition:border-color .2s}
.sk-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:sepia(.3) saturate(.85) hue-rotate(-8deg);transition:transform .5s}
.sk-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(23,17,14,.92) 0%,rgba(23,17,14,.45) 55%,rgba(23,17,14,.15) 100%);transition:background-color .2s}
.sk-tile-t{position:absolute;left:.75rem;right:.75rem;bottom:.5rem;color:#fff;font-size:.875rem;font-weight:500;line-height:1.4;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.sk-tile-t small{display:block;font-family:var(--sk-latin);font-size:.6875rem;color:var(--sk-champ);letter-spacing:.06em;font-weight:400}
/* 画像の無い札：濃茶の面に英字と名前（決定 51-2-1。画像が届いたら管理画面で入れ替える） */
.sk-tile-text{background:linear-gradient(135deg,#2A1A12 0%,#4A2F20 60%,#3A251A 100%)}
.sk-tile-text::after{background:none}
.sk-tile-en{position:absolute;left:.75rem;right:.75rem;top:.625rem;font-family:var(--sk-latin);font-size:.75rem;letter-spacing:.14em;line-height:1.35;color:rgba(243,221,174,.8);word-break:break-word}
.sk-tile-text .sk-tile-t{text-shadow:none}
.sk-tile:hover,.sk-tile:focus-visible{border-color:var(--sk-champ);outline:none}
.sk-tile:hover img,.sk-tile:focus-visible img{transform:scale(1.06)}
.sk-tile:hover::after,.sk-tile:focus-visible::after{background-color:rgba(42,26,18,.25)}
.sk-tile-text:hover,.sk-tile-text:focus-visible{background:linear-gradient(135deg,#3A251A 0%,#5E3E2A 60%,#4A2F20 100%)}

/* 幅が狭いとき：☰ で開く画面。大分類ごとに開閉し、小分類は札を2列で */
nav.sk-drawer{display:block;position:fixed;left:0;right:0;bottom:0;z-index:999;background:#17110E;color:var(--sk-ink-dk);overflow:auto;padding:.5rem 0 3rem;border-top:1px solid rgba(201,169,106,.35)}
nav.sk-drawer[hidden]{display:none}
.sk-dsearch{margin:.75rem 0 .5rem}
.sk-dsearch .sk-search{width:100%}
.sk-dsearch .sk-search input{flex:1;width:auto;display:block}
.sk-dsec{border-bottom:1px solid rgba(201,169,106,.2)}
.sk-dsec>button{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;padding:.9rem .25rem;font-family:var(--sk-serif);font-size:1.0625rem;font-weight:600;color:var(--sk-champ)}
.sk-dsec>button::after{content:"+";font-family:var(--sk-latin);font-size:1.25rem;line-height:1}
.sk-dsec>button[aria-expanded="true"]::after{content:"−"}
.sk-dsec>button:focus-visible{outline:2px solid var(--sk-gold);outline-offset:2px}
.sk-dbody{padding:0 0 1rem}
.sk-dbody[hidden]{display:none}
.sk-dbody>a.sk-all{display:inline-block;margin-bottom:.625rem;font-size:.8125rem;color:var(--sk-champ);text-decoration:underline;text-underline-offset:3px}
.sk-dsec .sk-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.sk-dsec .sk-tile-t{font-size:.8125rem}
.sk-dlinks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.sk-dutil{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-top:1rem;font-size:.8125rem;color:var(--sk-champ)}

/* 古い「絞り込み検索」の画面のための指定は、画面と一緒に消した（51-6） */

/* フッター */
.sk-foot{background:#100b09;color:#d9cbb6;padding:3.25rem 0 2.5rem;font-size:.8125rem}
.sk-foot>.sk-wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.5rem}
.sk-foot p{margin:.75rem 0 0;line-height:1.8}
.sk-foot .sk-fh{margin:0 0 .625rem;font-size:.8125rem;letter-spacing:.1em;color:var(--sk-gold-text);font-weight:700}
.sk-foot ul{display:grid;gap:.25rem}
.sk-foot ul a{display:inline-block;padding:.125rem .375rem;margin-left:-.375rem;transition:background-color .2s,color .2s}
.sk-foot ul a:hover{background:var(--sk-gold-lt);color:var(--sk-brown-dk)}
.sk-foot .sk-cta{display:flex;gap:.625rem;margin-top:1rem;flex-wrap:wrap}
.sk-copy{grid-column:1/-1;margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(201,169,106,.2);font-family:var(--sk-latin);font-size:.75rem;letter-spacing:.06em;color:#9f8f79}

/* ページ最上部へ戻るボタン（右下に常設。少し下へ進むと現れる）。暗い面・明るい面のどちらの上でも見える色 */
.sk-totop{position:fixed;z-index:990;right:1.25rem;bottom:1.25rem;width:3rem;height:3rem;display:grid;place-items:center;padding:0;
  background:var(--sk-champ-btn);color:var(--sk-brown-dk);border:1px solid var(--sk-brown-dk);box-shadow:0 .375rem 1.25rem rgba(23,17,14,.35);
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(.5rem);transition:opacity .25s,transform .25s,visibility 0s .25s,background-color .2s,color .2s}
.sk-totop.sk-show{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s,background-color .2s,color .2s}
.sk-totop svg{width:1.125rem;height:1.125rem}
.sk-totop:hover{background:var(--sk-brown-dk);color:var(--sk-champ);border-color:var(--sk-champ)}
.sk-totop:focus-visible{outline:2px solid var(--sk-gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.sk-totop,.sk-totop.sk-show{transition:none}}
/* フォームのあるページの CAPTCHA のマークは、戻るボタンの上へ（今のサイトと同じ並び） */
.grecaptcha-badge{bottom:5.5rem!important}

/* 古い CSS の rem を、51-2 の前と同じ大きさに留める。html の文字の大きさを幅に応じて変えたため、
   rem を使う古い指定は 1441px 以上で大きくなる。本文は部3・部4で作り直すまで変えないので、前の 16px 基準の値に置き換える。
   （元：css/corporate.css の .skc、css/sourvane.css の .svn、style.css の2か所。html を付けて元の指定より強くする） */
html .skc,html .svn{--s:clamp(16px,.833333vw,24px)}
html .svn .svn-card__fig{margin:-24px -24px calc(1.25 * var(--s))}
html .wp__colums_2 .wpcf7-list-item:nth-child(3n){margin-right:16px}
html .wp__single_content .note{padding:16px 32px}
@media (max-width:600px){html .svn .svn-card__fig{margin:-24px -24px calc(1 * var(--s))}}

/* 幅が狭いとき */
/* 1400px 以下：ナビ8項目を1行に収めるため、検索は虫眼鏡だけにし、押すと入力欄が下に開く */
@media (max-width:1400px){
  .sk-head>.sk-wrap{gap:1rem}
  .sk-head .sk-search{width:2.5rem;padding:0;justify-content:center}
  .sk-head .sk-search input,.sk-head .sk-search .sk-filter{display:none}
  .sk-head .sk-search.sk-open{width:auto;padding:0 .25rem 0 .75rem}
  .sk-head .sk-search.sk-open input{display:block;position:absolute;right:0;top:calc(100% + .5rem);width:16rem;height:2.5rem;padding:0 .75rem;background:#21150F;border:1px solid var(--sk-gold);z-index:50}
  .sk-head .sk-search.sk-open .sk-filter{display:grid;position:absolute;right:0;top:calc(100% + 3.25rem);height:2rem;background:#21150F;border:1px solid var(--sk-gold);z-index:50}
}
@media (max-width:1180px){
  nav.sk-gnav-wrap{display:none}
  .sk-burger{display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;background:none;border:.0625rem solid rgba(244,235,221,.45);color:var(--sk-ink-dk);font-size:1.25rem;line-height:1;cursor:pointer}
  .sk-burger:hover{background:var(--sk-gold-lt);color:var(--sk-brown-dk)}
  .sk-burger:focus-visible{outline:2px solid var(--sk-gold);outline-offset:2px}
  .sk-head>.sk-wrap{justify-content:space-between}
}
@media (max-width:782px){.admin-bar .sk-head{top:46px}}
@media (max-width:760px){
  .sk-wrap{width:calc(100% - 2rem)}
  .sk-util p{display:none}.sk-util .sk-wrap{justify-content:center}
  .sk-head>.sk-wrap{height:4rem;gap:.625rem}
  .sk-head .sk-search,.sk-acts>.sk-btn-line{display:none}
  .sk-logo-txt b{font-size:1.75rem}.sk-logo-img{height:2.5rem}
  .sk-logo-txt{gap:.5rem}.sk-logo-txt small{font-size:.625rem;letter-spacing:.18em}
  .sk-acts{gap:.375rem}.sk-acts>.sk-btn-solid{padding:0 .75rem}
  .sk-foot>.sk-wrap{grid-template-columns:1fr 1fr}.sk-foot>.sk-wrap>div:first-child{grid-column:span 2}
}