@charset "UTF-8";
/* =========================================================
   さんさん ふれあいかわら版 — 追加CSS（design.md 準拠）
   すべての規則を .ssk 配下にスコープし、Astra 本体には影響させない。
   6色 / 8pxベース / 明朝体 / 影なし
   ========================================================= */

/* ---------- 1. トークン ---------- */
.ssk{
  --ssk-main:#FFA614;
  --ssk-sub:#05912E;
  --ssk-accent:#FCE43C;
  --ssk-bg:#C7F8FF;
  --ssk-text:#333333;
  --ssk-white:#FFFFFF;

  --ssk-main-08:rgba(255,166,20,.08);
  --ssk-main-16:rgba(255,166,20,.16);
  --ssk-main-32:rgba(255,166,20,.32);
  --ssk-sub-08:rgba(5,145,46,.08);
  --ssk-accent-24:rgba(252,228,60,.24);
  --ssk-line:rgba(51,51,51,.16);
  --ssk-line-strong:rgba(51,51,51,.32);
  --ssk-muted:rgba(51,51,51,.68);

  --ssk-s1:8px;  --ssk-s2:16px; --ssk-s3:24px; --ssk-s4:32px;
  --ssk-s5:40px; --ssk-s6:48px; --ssk-s7:64px; --ssk-s8:80px;

  --ssk-font:"Yu Mincho","游明朝","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
}

/* ---------- 2. ベース ---------- */
.ssk{
  font-family:var(--ssk-font);
  font-size:16px;
  line-height:1.9;
  color:var(--ssk-text);
  background:var(--ssk-white);
}
.ssk :where(h1,h2,h3,h4){font-family:var(--ssk-font);font-weight:600;line-height:1.45;color:var(--ssk-text)}
.ssk :where(p,ul,ol,figure,table){margin-block:0}
.ssk a{color:var(--ssk-sub)}
.ssk img{display:block;max-width:100%;height:auto}
.ssk :focus-visible{outline:3px solid var(--ssk-sub);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .ssk *{animation:none !important;transition:none !important}
}

/* ---------- 3. 全幅の土台 ----------
   WordPress / Astra はフルワイド要素に左右パディング（既定48px）を付けるので、
   包みでは打ち消し、各セクション側で 1200px の内側幅を作る。
   こうすると帯は画面端まで届き、中身は左揃えのまま 1200px に収まる。 */
/* Astra は .entry-content > .wp-block-group に自前の変数でパディングを付ける。
   その変数をここで 0 にすれば、詳細度を競わずに打ち消せる。 */
.ssk{
  --wp--custom--ast-default-block-top-padding:0;
  --wp--custom--ast-default-block-right-padding:0;
  --wp--custom--ast-default-block-bottom-padding:0;
  --wp--custom--ast-default-block-left-padding:0;
  padding:0;
}
.ssk .ssk-sec,
.ssk .ssk-hero,
.ssk .ssk-pagehead{
  padding-inline:max(32px, calc((100% - 1200px) / 2));
}
/* 制約レイアウトが入れる margin-left/right:auto（中央寄せ）を左揃えに戻す。
   論理プロパティではなく物理プロパティで上書きする。 */
.ssk .ssk-lead,
.ssk .ssk-sec--narrow > *,
.ssk .ssk-hero-copy > *{margin-left:0 !important;margin-right:0 !important}
.ssk .ssk-hero-copy{margin-left:0 !important;margin-right:auto !important}

@media (max-width:781px){
  .ssk .ssk-sec,
  .ssk .ssk-hero,
  .ssk .ssk-pagehead{padding-inline:16px}
}

/* ---------- 4. セクション ---------- */
.ssk .ssk-sec{padding-block:var(--ssk-s8)}
.ssk .ssk-sec--sky{background:var(--ssk-bg)}
.ssk .ssk-sec--tint{background:var(--ssk-main-08)}
.ssk .ssk-sec--tight{padding-block:var(--ssk-s6) 0}
.ssk .ssk-sec--narrow > *{max-width:760px}
.ssk .ssk-sec > *{margin-block:0}
.ssk .ssk-sec > * + *{margin-top:var(--ssk-s3)}
.ssk .ssk-card > *,
.ssk .ssk-office > *,
.ssk .ssk-org-node > *,
.ssk .ssk-hero-copy > *{margin-block:0}
.ssk .ssk-sec > .wp-block-heading + *{margin-top:var(--ssk-s2)}
@media (max-width:781px){
  .ssk .ssk-sec{padding-block:var(--ssk-s6)}
}

/* ---------- 4. 見出し ---------- */
.ssk .ssk-h1{font-size:clamp(28px,3.1vw,42px);line-height:1.4;letter-spacing:.02em}
.ssk .ssk-em{color:var(--ssk-main)}

/* H2 に添える太陽の印（この1つだけをアクセントにする） */
.ssk .ssk-h2{
  font-size:28px;line-height:1.45;
  display:flex;align-items:baseline;gap:var(--ssk-s2);
}
.ssk .ssk-h2::before{
  content:"";flex:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--ssk-main);
  box-shadow:0 0 0 5px var(--ssk-main-16);
  transform:translateY(-2px);
}
.ssk h3{font-size:22px}
.ssk .ssk-eyebrow{font-size:14px;line-height:1.7;letter-spacing:.14em;color:var(--ssk-sub)}
.ssk .ssk-lead{font-size:18px;line-height:1.9;max-width:760px}
.ssk .ssk-note{font-size:14px;line-height:1.7;color:var(--ssk-muted)}
.ssk .ssk-crumbs{font-size:13px;color:var(--ssk-muted)}
.ssk .ssk-crumbs a{color:var(--ssk-sub)}
@media (max-width:781px){
  .ssk .ssk-h2{font-size:24px}
  .ssk h3{font-size:20px}
}

/* ---------- 5. ページ見出し帯 ---------- */
.ssk .ssk-pagehead{
  position:relative;overflow:hidden;
  background:var(--ssk-bg);
  padding-block:var(--ssk-s6);
}
.ssk .ssk-pagehead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-conic-gradient(from 196deg at 94% -14%,
    var(--ssk-main-16) 0deg 2deg, transparent 2deg 13deg);
  -webkit-mask-image:radial-gradient(circle at 94% -14%, #000 8%, transparent 62%);
  mask-image:radial-gradient(circle at 94% -14%, #000 8%, transparent 62%);
}
.ssk .ssk-pagehead > *{position:relative;z-index:1}
.ssk .ssk-pagehead > * + *{margin-top:var(--ssk-s2)}

/* ---------- 6. ヒーロー ---------- */
.ssk .ssk-hero{position:relative;overflow:hidden;background:var(--ssk-bg)}
.ssk .ssk-hero-copy > * + *{margin-top:var(--ssk-s3)}
.ssk .ssk-hero-media{margin:0}
.ssk .ssk-hero-media img{width:100%;border-radius:16px}

/* スマホ〜狭いPC：見出し → 画像の縦積み */
@media (max-width:1099px){
  .ssk .ssk-hero{padding-block:var(--ssk-s6)}
  .ssk .ssk-hero-media{margin-top:var(--ssk-s5)}
}

/* PC：画像を右に寄せて敷き、左の静かな面に見出しを重ねる。
   この画像は左およそ27%までが余白で、その先にマスコットが立っている。 */
@media (min-width:1100px){
  .ssk .ssk-hero{
    display:flex;align-items:center;
    min-height:clamp(440px,34vw,560px);
    padding-block:var(--ssk-s6);
  }
  .ssk .ssk-hero-media{
    position:absolute;inset:0;
    pointer-events:none;
  }
  .ssk .ssk-hero-media img{
    position:absolute;top:0;right:0;
    height:100%;width:auto;max-width:none;min-width:62%;
    object-fit:cover;object-position:100% 45%;
    border-radius:0;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);
    mask-image:linear-gradient(to right,transparent 0,#000 16%);
  }
  .ssk .ssk-hero::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(100deg,
      rgba(199,248,255,.48) 0%,
      rgba(199,248,255,.40) 36%,
      rgba(199,248,255,.18) 48%,
      rgba(199,248,255,0) 58%);
  }
  .ssk .ssk-hero-copy{
    position:relative;z-index:2;
    width:100%;max-width:min(46%,540px);
  }
  .ssk .ssk-hero-copy > *{max-width:none}
  .ssk .ssk-hero-copy > .ssk-h1{font-size:clamp(28px,2.7vw,38px)}
}

/* ---------- 7. ボタン ---------- */
.ssk .wp-block-buttons{gap:var(--ssk-s2)}
.ssk .wp-block-button__link{
  min-height:48px;padding:var(--ssk-s1) var(--ssk-s3);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;border:1px solid transparent;
  font-family:var(--ssk-font);font-size:16px;line-height:1.5;
  transition:filter .18s ease,background-color .18s ease;
}
/* Astra は div.wp-block-button.is-style-outline > .wp-block-button__link などの
   高い詳細度でボタン色を指定する。ここは .ssk の中だけ明示的に上書きする。 */
.ssk .ssk-btn-primary .wp-block-button__link{
  background:var(--ssk-main) !important;
  color:var(--ssk-white) !important;
  border-color:var(--ssk-main) !important;
}
.ssk .ssk-btn-primary .wp-block-button__link:hover{filter:brightness(.94)}
.ssk .ssk-btn-secondary .wp-block-button__link{
  background:var(--ssk-white) !important;
  color:var(--ssk-sub) !important;
  border-color:var(--ssk-sub) !important;
  border-width:1px !important;
}
.ssk .ssk-btn-secondary .wp-block-button__link:hover{background:var(--ssk-sub-08) !important}
@media (max-width:600px){
  .ssk .ssk-btns{flex-direction:column;align-items:stretch}
  .ssk .ssk-btns .wp-block-button{width:100%}
  .ssk .ssk-btns .wp-block-button__link{width:100%}
}

/* ---------- 8. カード（columns / column） ---------- */
.ssk .ssk-cards{gap:var(--ssk-s3)}
.ssk .ssk-card{
  background:var(--ssk-white);
  border:1px solid var(--ssk-line);
  border-radius:16px;
  padding:var(--ssk-s3);
  display:flex;flex-direction:column;gap:var(--ssk-s2);
}
.ssk .ssk-sec--sky .ssk-card{border-color:transparent}
.ssk .ssk-card > *{margin-block:0}
.ssk .ssk-card-title{font-size:19px;line-height:1.5}
.ssk .ssk-card-text{font-size:15px;line-height:1.8;color:var(--ssk-muted);flex:1}
.ssk .ssk-more{font-size:15px;margin-top:auto}
.ssk .ssk-more a{text-decoration:underline}
/* カード内の画像はカードの縁まで届かせる */
.ssk .ssk-card .ssk-card-img{
  margin:calc(var(--ssk-s3) * -1) calc(var(--ssk-s3) * -1) 0;
}
.ssk .ssk-card .ssk-card-img img{
  border-radius:16px 16px 0 0;
  aspect-ratio:4/3;object-fit:cover;width:100%;
}
@media (max-width:600px){
  .ssk .ssk-card{padding:var(--ssk-s2)}
  .ssk .ssk-card .ssk-card-img{margin:calc(var(--ssk-s2) * -1) calc(var(--ssk-s2) * -1) 0}
}

/* 2カラム（画像＋文章） */
.ssk .ssk-split{gap:var(--ssk-s7);align-items:center}
.ssk .ssk-split > .wp-block-column > * + *{margin-top:var(--ssk-s3)}
.ssk .ssk-fig img{border-radius:16px;width:100%}
@media (max-width:781px){
  .ssk .ssk-split{gap:var(--ssk-s4)}
}

/* 帯状の画像 */
.ssk .ssk-banner img{border-radius:16px;width:100%;aspect-ratio:21/9;object-fit:cover}
@media (max-width:600px){
  .ssk .ssk-banner img{aspect-ratio:16/9}
}

/* ---------- 9. タグ ---------- */
.ssk .ssk-tags{display:flex;flex-wrap:wrap;gap:var(--ssk-s1);font-size:13px}
.ssk .ssk-tag{
  display:inline-block;padding:2px 12px;border-radius:999px;
  background:var(--ssk-white);border:1px solid var(--ssk-sub);color:var(--ssk-sub);
  font-size:13px;line-height:1.8;white-space:nowrap;
}
.ssk .ssk-tag--accent{border-color:var(--ssk-main);color:var(--ssk-text);background:var(--ssk-accent-24)}

/* ---------- 10. 種別ショートカット（アイコンはCSSで付ける） ---------- */
.ssk .ssk-chips{gap:var(--ssk-s2)}
.ssk .ssk-chip .wp-block-button__link{
  flex-direction:column;gap:var(--ssk-s1);
  min-height:104px;min-width:150px;padding:var(--ssk-s2);
  border-radius:16px;font-size:15px;text-align:center;
  background:var(--ssk-white) !important;
  color:var(--ssk-text) !important;
  border:1px solid var(--ssk-line) !important;
}
.ssk .ssk-chip .wp-block-button__link:hover{border-color:var(--ssk-main-32) !important}
.ssk .ssk-chip .wp-block-button__link::before{
  content:"";display:block;width:28px;height:28px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.ssk .ssk-chip--kayou .wp-block-button__link::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305912E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V4.5A1.5 1.5 0 0 1 5.5 3h8A1.5 1.5 0 0 1 15 4.5V21'/%3E%3Cpath d='M15 9.5h3.5A1.5 1.5 0 0 1 20 11v10'/%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M7.5 7.5h4M7.5 11.5h4M7.5 15.5h4'/%3E%3C/svg%3E")}
.ssk .ssk-chip--kurasu .wp-block-button__link::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305912E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19v-7h12a5 5 0 0 1 5 5v2'/%3E%3Cpath d='M3 19h18'/%3E%3Cpath d='M3 12V6'/%3E%3Ccircle cx='7.5' cy='9' r='1.9'/%3E%3C/svg%3E")}
.ssk .ssk-chip--houmon .wp-block-button__link::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305912E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3H19a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5.5'/%3E%3Cpath d='M3 12h11'/%3E%3Cpath d='m10 8 4 4-4 4'/%3E%3C/svg%3E")}
.ssk .ssk-chip--soudan .wp-block-button__link::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305912E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.2a7.5 7.5 0 0 1-11 6.7L4.5 19.5l1.6-4.6a7.5 7.5 0 1 1 14.4-3.7Z'/%3E%3Cpath d='M9 11.5h.01M12.5 11.5h.01M16 11.5h.01'/%3E%3C/svg%3E")}
.ssk .ssk-chip--hataraku .wp-block-button__link::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305912E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5h18v11H3z'/%3E%3Cpath d='M9 8.5V6.5A1.5 1.5 0 0 1 10.5 5h3A1.5 1.5 0 0 1 15 6.5v2'/%3E%3Cpath d='M3 13.5h18'/%3E%3C/svg%3E")}
.ssk .ssk-chip--kodomo .wp-block-button__link::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305912E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='6.5' r='2.7'/%3E%3Cpath d='M3.5 20v-2.8A3.5 3.5 0 0 1 7 13.7h2a3.5 3.5 0 0 1 3.5 3.5V20'/%3E%3Ccircle cx='17' cy='11' r='2.1'/%3E%3Cpath d='M13.8 20v-2A2.7 2.7 0 0 1 16.5 15.3h1a2.7 2.7 0 0 1 2.7 2.7v2'/%3E%3C/svg%3E")}

/* ---------- 11. 定義リスト風のリスト ---------- */
/* 「ラベル：内容」の並び。本文に「：」を残したまま、ラベル幅だけを揃える。
   エディタ上でもそのまま読める形にしている。 */
.ssk .ssk-dl{list-style:none;padding-left:0;margin:0;display:grid;gap:var(--ssk-s2);font-size:15px;line-height:1.8}
.ssk .ssk-dl li{display:block}
.ssk .ssk-dl li strong{
  display:inline-block;min-width:150px;
  color:var(--ssk-sub);font-weight:400;vertical-align:top;
}
/* 幅が足りるうちは「ラベル：内容」を横並びのままにする。
   狭い画面だけラベルを上に置く */
@media (max-width:600px){
  .ssk .ssk-dl li strong{display:block;min-width:0}
}

/* ---------- 12. 手順（番号付きリスト） ---------- */
.ssk .ssk-flow{list-style:none;padding-left:0;margin:0;counter-reset:sskflow;display:grid;gap:var(--ssk-s2)}
/* グリッドにすると、<strong> の後ろの素のテキストが別の部品として
   番号用の 40px 列に落ち、1文字ずつ折り返されて縦長になる。
   番号は絶対配置にし、本文は通常の行として流す。 */
.ssk .ssk-flow li{
  counter-increment:sskflow;
  position:relative;
  background:var(--ssk-white);border:1px solid var(--ssk-line);border-radius:16px;
  padding:var(--ssk-s3);
  padding-left:calc(var(--ssk-s3) + 40px + var(--ssk-s2));
  min-height:calc(40px + var(--ssk-s3) * 2);
}
.ssk .ssk-flow li::before{
  content:counter(sskflow);
  position:absolute;left:var(--ssk-s3);top:var(--ssk-s3);
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--ssk-main-16);color:var(--ssk-text);font-size:16px;
}
.ssk .ssk-flow li strong{display:block;font-size:18px;font-weight:400;line-height:1.6}
@media (max-width:600px){
  .ssk .ssk-flow li{padding:var(--ssk-s2);padding-left:calc(var(--ssk-s2) + 40px + var(--ssk-s2))}
  .ssk .ssk-flow li::before{left:var(--ssk-s2);top:var(--ssk-s2)}
}

/* ---------- 13. 沿革 ---------- */
.ssk .ssk-history{list-style:none;padding-left:0;margin:0;border-left:2px solid var(--ssk-main-32);display:grid;gap:var(--ssk-s3)}
.ssk .ssk-history li{padding-left:var(--ssk-s3);position:relative}
.ssk .ssk-history li::before{
  content:"";position:absolute;left:-7px;top:12px;
  width:12px;height:12px;border-radius:50%;background:var(--ssk-main);
}
.ssk .ssk-history li strong{color:var(--ssk-sub);font-weight:400}

/* ---------- 14. 開閉（details） ---------- */
.ssk .ssk-faq{border-bottom:1px solid var(--ssk-line);padding:0}
.ssk .ssk-faq summary{
  display:flex;align-items:flex-start;gap:var(--ssk-s2);
  padding:var(--ssk-s3) 0;cursor:pointer;line-height:1.7;list-style:none;
}
.ssk .ssk-faq summary::-webkit-details-marker{display:none}
.ssk .ssk-faq summary::before{content:"Q";flex:none;color:var(--ssk-main);font-size:15px;line-height:1.9}
.ssk .ssk-faq summary::after{content:"＋";margin-left:auto;color:var(--ssk-sub);flex:none}
.ssk .ssk-faq[open] summary::after{content:"－"}
.ssk .ssk-faq > :not(summary){padding:0 0 var(--ssk-s3) var(--ssk-s4);font-size:15px;color:var(--ssk-muted)}

/* ---------- 15. 事業所カード ---------- */
/* 公開資料の表がある事業所とない事業所で高さの差が大きいので、
   行の高さに合わせて引き伸ばさず、各カードを内容ぶんの高さにする */
.ssk .ssk-offices{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ssk-s3);
  align-items:start;
}
@media (max-width:900px){.ssk .ssk-offices{grid-template-columns:1fr}}
.ssk .ssk-office{
  background:var(--ssk-white);border-radius:16px;padding:var(--ssk-s3);
  display:flex;flex-direction:column;gap:var(--ssk-s2);
}
.ssk .ssk-office[hidden]{display:none}
.ssk .ssk-office > *{margin-block:0}
.ssk .ssk-office-name{font-size:20px;line-height:1.5}
.ssk .ssk-office-region{font-size:14px;color:var(--ssk-muted)}
.ssk .ssk-office-details{border-top:1px solid var(--ssk-line);padding-top:var(--ssk-s2)}
.ssk .ssk-office-details summary{cursor:pointer;color:var(--ssk-sub);font-size:15px;list-style:none;display:flex;gap:var(--ssk-s1)}
.ssk .ssk-office-details summary::-webkit-details-marker{display:none}
.ssk .ssk-office-details summary::after{content:"＋"}
.ssk .ssk-office-details[open] summary::after{content:"－"}
.ssk .ssk-office-details > :not(summary){margin-top:var(--ssk-s2)}
.ssk .ssk-result-count{font-size:15px;color:var(--ssk-muted)}
/* 該当なしの案内は既定で隠しておき、絞り込みの結果が 0 件のときだけ出す */
.ssk .ssk-empty{display:none;padding:var(--ssk-s5) 0;text-align:center;color:var(--ssk-muted)}
.ssk .ssk-empty.is-shown{display:block}
@media (max-width:600px){.ssk .ssk-office{padding:var(--ssk-s2)}}

/* ---------- 16. 絞り込み ---------- */
.ssk .ssk-filter-group{display:grid;gap:var(--ssk-s1)}
.ssk .ssk-filter-group > *{margin-block:0}
.ssk .ssk-filter-group + .ssk-filter-group{margin-top:var(--ssk-s3)}
.ssk .ssk-filter-legend{font-size:14px;color:var(--ssk-sub);letter-spacing:.08em}
.ssk .ssk-filter-row{gap:var(--ssk-s1)}
.ssk .ssk-filter .wp-block-button__link{
  min-height:40px;padding:0 var(--ssk-s2);border-radius:999px;font-size:14px;
  background:var(--ssk-white) !important;
  color:var(--ssk-text) !important;
  border:1px solid var(--ssk-line-strong) !important;
}
.ssk .ssk-filter .wp-block-button__link:hover{border-color:var(--ssk-sub) !important}
.ssk .ssk-filter.is-active .wp-block-button__link{
  background:var(--ssk-main) !important;
  border-color:var(--ssk-main) !important;
  color:var(--ssk-white) !important;
}

/* ---------- 17. 表 ---------- */
/* .ssk 内のすべての表に共通の見た目（罫線は下線だけ） */
.ssk .wp-block-table{overflow-x:auto;margin:0}
.ssk .wp-block-table table{width:100%;border-collapse:collapse;font-size:15px}
.ssk .wp-block-table th,
.ssk .wp-block-table td{
  text-align:left;padding:var(--ssk-s2);
  border:0 !important;border-bottom:1px solid var(--ssk-line) !important;
  vertical-align:top;word-break:normal;
}
/* WordPress 標準は thead 自体に 3px の下線を引くので消し、th 側の細線だけにする */
.ssk .wp-block-table thead{border-bottom:0 !important}
.ssk .wp-block-table thead th{
  border-bottom:1px solid var(--ssk-line-strong) !important;
  font-weight:600;font-size:14px;color:var(--ssk-sub);
}
/* 横に長い表はスクロールさせる */
.ssk .ssk-table table{min-width:640px}
.ssk .ssk-news table{min-width:0}
.ssk .ssk-news thead{display:none}
.ssk .ssk-news td:first-child{width:120px;color:var(--ssk-muted);font-size:14px;white-space:nowrap}
.ssk .ssk-news td:nth-child(2){width:96px}
.ssk .ssk-news td:nth-child(2)::before{
  content:attr(data-x);
}
.ssk .ssk-news td a{color:var(--ssk-text);text-decoration:none}
.ssk .ssk-news td a:hover{text-decoration:underline}
.ssk .ssk-scroll-hint{display:none;font-size:13px;color:var(--ssk-muted)}
@media (max-width:640px){
  .ssk .ssk-scroll-hint{display:block}
  .ssk .ssk-news table{min-width:0}
  .ssk .ssk-news td{display:block;border-bottom:none;padding:2px var(--ssk-s2)}
  .ssk .ssk-news tr{display:block;border-bottom:1px solid var(--ssk-line);padding-block:var(--ssk-s2)}
  .ssk .ssk-news td:first-child,.ssk .ssk-news td:nth-child(2){width:auto}
}

/* ---------- 18. 組織図 ---------- */
.ssk .ssk-org{gap:var(--ssk-s3)}
.ssk .ssk-org-top{
  background:var(--ssk-white);border:1px solid var(--ssk-main-32);border-radius:16px;
  padding:var(--ssk-s3);text-align:center;font-size:20px;
}
.ssk .ssk-org-node{
  background:var(--ssk-white);border:1px solid var(--ssk-line);border-radius:16px;
  padding:var(--ssk-s3);display:flex;flex-direction:column;gap:var(--ssk-s2);
}
.ssk .ssk-org-node > *{margin-block:0}
.ssk .ssk-org-kind{font-size:13px;color:var(--ssk-sub);letter-spacing:.08em}
.ssk .ssk-org-name{font-size:19px;line-height:1.5}
.ssk .ssk-org-list{list-style:none;padding-left:0;margin:0;display:grid;gap:var(--ssk-s1);font-size:15px}
.ssk .ssk-org-list li{padding-left:var(--ssk-s2);border-left:2px solid var(--ssk-main-32)}

/* ---------- 19. 注意書き ---------- */
.ssk .ssk-callout{
  background:var(--ssk-white);border:1px solid var(--ssk-main-32);border-left:4px solid var(--ssk-main);
  border-radius:8px;padding:var(--ssk-s2) var(--ssk-s3);font-size:15px;line-height:1.8;
}
.ssk .ssk-draft{
  background:var(--ssk-accent-24);border:1px solid var(--ssk-main-32);border-radius:8px;
  padding:var(--ssk-s2) var(--ssk-s3);font-size:14px;line-height:1.8;
}

/* ---------- 20. フォーム設置予定の枠 ---------- */
.ssk .ssk-formph{
  background:var(--ssk-white);border:1px dashed var(--ssk-line-strong);border-radius:16px;
  padding:var(--ssk-s3);display:grid;gap:var(--ssk-s2);
}
.ssk .ssk-formph-title{font-size:15px;color:var(--ssk-sub);letter-spacing:.08em}
.ssk .ssk-formph-list{list-style:none;padding-left:0;margin:0;display:grid;gap:var(--ssk-s2);font-size:15px}
.ssk .ssk-formph-list li{padding-bottom:var(--ssk-s2);border-bottom:1px solid var(--ssk-line)}
.ssk .ssk-req{font-size:12px;color:var(--ssk-white);background:var(--ssk-main);border-radius:999px;padding:1px 8px;margin-left:var(--ssk-s1)}
.ssk .ssk-opt{font-size:12px;color:var(--ssk-muted);border:1px solid var(--ssk-line-strong);border-radius:999px;padding:1px 8px;margin-left:var(--ssk-s1)}

/* ---------- 21. サイトマップ ---------- */
.ssk .ssk-sitemap-list{list-style:none;padding-left:0;margin:0;display:grid;gap:var(--ssk-s1);font-size:15px}
.ssk .ssk-sitemap-list a{color:var(--ssk-text);text-decoration:none;border-bottom:1px solid transparent}
.ssk .ssk-sitemap-list a:hover{border-bottom-color:var(--ssk-sub)}

/* ---------- 22. 事業所カード内の「公開資料」表 ---------- */
.ssk .ssk-doc-title{
  font-size:14px;color:var(--ssk-sub);letter-spacing:.08em;
  padding-top:var(--ssk-s1);border-top:1px solid var(--ssk-line);
}
/* カード幅に収めるため、帯用の表とは別の寸法にする */
.ssk .ssk-office .ssk-doc-table{overflow-x:auto}
.ssk .ssk-office .ssk-doc-table table{min-width:0;font-size:13px;table-layout:fixed}
.ssk .ssk-office .ssk-doc-table th,
.ssk .ssk-office .ssk-doc-table td{
  padding:var(--ssk-s1);
  border:0 !important;border-bottom:1px solid var(--ssk-line) !important;
  vertical-align:top;word-break:break-word;
}
.ssk .ssk-office .ssk-doc-table thead th{
  font-size:12px;font-weight:600;color:var(--ssk-sub);white-space:nowrap;
  border-bottom:1px solid var(--ssk-line-strong) !important;
}
/* 年度・形式は内容が短いので幅を絞る */
.ssk .ssk-office .ssk-doc-table th:nth-child(1),
.ssk .ssk-office .ssk-doc-table td:nth-child(1){width:22%}
.ssk .ssk-office .ssk-doc-table th:nth-child(4),
.ssk .ssk-office .ssk-doc-table td:nth-child(4){width:18%}
/* 空行でも高さが潰れないように */
.ssk .ssk-office .ssk-doc-table td:empty::after{content:"";display:inline-block;min-height:1.6em}

/* ---------- 23. 無添加食パンページ ---------- */
/* Main #FFA614 を「耳（クラスト）」、白を「中身」に見立てる。新しい色は増やしていない */

/* 画像をメディアに入れるまでの表示。
   ハッチは img の背景なので、画像を入れると自動的に隠れる（消し忘れが起きない） */
.ssk .ssk-ph img{
  background:repeating-linear-gradient(135deg,
    rgba(199,248,255,.40) 0 10px, rgba(255,255,255,.78) 10px 20px);
  font-size:13px;color:var(--ssk-muted);
}
/* 比率の指定がない図だけ、枠が潰れないように 3:2 を与える */
.ssk .ssk-fig.ssk-ph img{aspect-ratio:3/2;object-fit:cover;width:100%}

/* 耳の線。このページで2か所だけに使う */
.ssk .ssk-crust{border-top:8px solid var(--ssk-main);border-radius:16px;overflow:hidden}
.ssk .ssk-crust img{border-radius:0}

/* こだわり3点の小さな丸 */
.ssk .ssk-point{display:flex;align-items:baseline;gap:var(--ssk-s1)}
.ssk .ssk-point::before{
  content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--ssk-main);box-shadow:0 0 0 4px var(--ssk-main-16);
  transform:translateY(-2px);
}

/* 食パンとの歩み。番号ではなく「どこで焼いていたか」で刻む */
.ssk .ssk-journey > *{margin-block:0}
.ssk .ssk-journey > * + *{margin-top:0}
.ssk .ssk-step{display:grid;grid-template-columns:184px 1fr}
.ssk .ssk-step > *{margin-block:0}
.ssk .ssk-step-where{padding-right:var(--ssk-s4);text-align:right}
.ssk .ssk-step-where > *{margin-block:0}
.ssk .ssk-step-place{font-size:17px;line-height:1.6}
.ssk .ssk-step-when{
  font-size:14px;line-height:1.7;color:var(--ssk-muted);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;margin-top:2px;
}
.ssk .ssk-step-body{
  position:relative;
  border-left:1px solid var(--ssk-main-32);
  padding-left:var(--ssk-s4);padding-bottom:var(--ssk-s6);
}
.ssk .ssk-step-body > *{margin-block:0;max-width:760px}
.ssk .ssk-step:last-child .ssk-step-body{border-left-color:transparent;padding-bottom:0}
.ssk .ssk-step-body::before{
  content:"";position:absolute;left:-6px;top:6px;
  width:11px;height:11px;border-radius:50%;
  background:var(--ssk-main);
  box-shadow:0 0 0 4px var(--ssk-white),0 0 0 8px var(--ssk-main-16);
}
.ssk .ssk-journey-close{
  margin-top:var(--ssk-s5);padding-top:var(--ssk-s5);
  border-top:1px solid var(--ssk-line);
}
.ssk .ssk-journey-close > *{margin-block:0;max-width:760px}
.ssk .ssk-journey-close > * + *{margin-top:var(--ssk-s3)}

@media (max-width:781px){
  /* 縦1列。線は歩み全体の左に1本だけ通し、印は各段の先頭に置く */
  .ssk .ssk-step{
    grid-template-columns:1fr;position:relative;
    border-left:1px solid var(--ssk-main-32);padding-left:var(--ssk-s3);
  }
  .ssk .ssk-step:last-child{border-left-color:transparent}
  .ssk .ssk-step-where{text-align:left;padding-right:0;margin-bottom:var(--ssk-s1)}
  .ssk .ssk-step-body{border-left:0;padding-left:0;padding-bottom:var(--ssk-s4)}
  .ssk .ssk-step-body::before{content:none}
  .ssk .ssk-step::before{
    content:"";position:absolute;left:-6px;top:8px;
    width:11px;height:11px;border-radius:50%;
    background:var(--ssk-main);
    box-shadow:0 0 0 4px var(--ssk-white),0 0 0 8px var(--ssk-main-16);
  }
  .ssk .ssk-journey-close{margin-top:var(--ssk-s4);padding-top:var(--ssk-s4)}
}

/* 食パン専門店のカード。
   .ssk .ssk-sec--sky .ssk-card{border-color:transparent} と同じ詳細度にして耳の線を残す */
.ssk .ssk-card.ssk-flagship{border-top:8px solid var(--ssk-main);padding-top:var(--ssk-s4)}
.ssk .ssk-flagship .ssk-split{align-items:start}

/* 食パンが食べられる施設のカード。項目が多いので .ssk-dl より詰める */
.ssk .ssk-shop .ssk-shop-dl{font-size:14px;gap:var(--ssk-s1);font-variant-numeric:tabular-nums}
.ssk .ssk-shop .ssk-shop-dl li strong{min-width:76px}
@media (max-width:600px){
  /* 狭い画面でもラベルは横に置いたままにする（縦に伸びすぎるため） */
  .ssk .ssk-shop .ssk-shop-dl li strong{display:inline-block;min-width:76px}
}

/* ---------- 24. 旅行業ページ ---------- */
/* カードの中に置く「ラベル：内容」。帯用の 150px ではカード幅に収まらないので詰める */
.ssk .ssk-card .ssk-card-dl{font-size:14px;gap:var(--ssk-s1)}
.ssk .ssk-card .ssk-card-dl li strong{min-width:64px}
@media (max-width:600px){
  /* 狭い画面でもラベルは横に置いたままにする（縦に伸びすぎるため） */
  .ssk .ssk-card .ssk-card-dl li strong{display:inline-block;min-width:64px}
}

/* 募集中の旅の表。ご案内できる旅がないあいだ、空行が潰れないようにする。
   他の表に影響しないよう、この表だけのクラスに当てる */
.ssk .ssk-offer-table td:empty::after{content:"";display:inline-block;min-height:1.6em}

/* ---------- 25. 施設カードの写真 ---------- */
/* 用意した写真が 3:2（1200×800）なので、この節のカードだけ枠を 3:2 にする。
   他ページのカード画像は 4:3 のまま。 */
.ssk .ssk-shop .ssk-card-img img{aspect-ratio:3/2}

/* ---------- 26. かわら版の自動一覧（クエリーループ） ---------- */
/* 投稿を公開すると、この一覧に新しい順で自動的に並ぶ。手入力は不要。 */
.ssk .ssk-newslist{margin-block:0}
.ssk .ssk-newslist .wp-block-post-template{list-style:none;margin:0;padding:0}
.ssk .ssk-newsrow{
  display:grid;grid-template-columns:110px 1fr;gap:var(--ssk-s2);
  align-items:baseline;
  padding:var(--ssk-s2) 0;
  border-bottom:1px solid var(--ssk-line);
}
.ssk .ssk-newsrow > *{margin-block:0}
.ssk .ssk-newsdate{
  font-size:14px;color:var(--ssk-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ssk .ssk-newstitle{font-size:16px;line-height:1.7;font-weight:400}
.ssk .ssk-newstitle a{color:var(--ssk-text);text-decoration:none}
.ssk .ssk-newstitle a:hover{text-decoration:underline}
@media (max-width:600px){
  /* 狭い画面では日付を上に置く */
  .ssk .ssk-newsrow{grid-template-columns:1fr;gap:2px}
}

/* ---------- 27. 投稿本文 ---------- */
/* .ssk は段落の余白を 0 にしているので、投稿本文では改めて行間を作る。
   固定ページはセクション側で余白を持っているため、この規則は投稿だけに当てる。 */
.ssk.ssk-article{background:none}
.ssk.ssk-article > * + *{margin-top:var(--ssk-s3)}
.ssk.ssk-article > :where(h2,h3,h4){margin-top:var(--ssk-s6)}
.ssk.ssk-article > :where(h2,h3,h4) + *{margin-top:var(--ssk-s2)}
.ssk.ssk-article > .wp-block-buttons{margin-top:var(--ssk-s4)}