/* ホームページの見た目「これまでの協会のホームページ」：緑と空色。ヘッダー・メニュー・空の背景・白い枠・フッター（もとのホームページの指定に合わせています） */
.t-sanpai { background: var(--cream, #fefdf3); font-family: var(--site-font, inherit); text-align: center; }
.t-sanpai .skip { z-index: 99; }
.t-sanpai .t-wrap { background: url('/static/img/site/page_bg.png') repeat-x; min-height: 700px; overflow: hidden; }
.t-sanpai.t-top .t-wrap { background: url('/static/img/site/index_bg.png') repeat-x; min-height: 800px; position: relative; }
.t-sanpai .inner { width: 960px; max-width: 100%; margin: 0 auto; padding: 0; }

/* ヘッダー */
.t-sanpai .site-head { background: #fff; position: relative; z-index: 30; border: 0; }
.t-sanpai .site-head-in { width: 960px; max-width: 100%; padding: 2em 0 1.5em; display: flex; justify-content: space-between; align-items: flex-end; margin: 0 auto; }
.t-sanpai .site-name { flex-basis: 50%; text-align: left; }
.t-sanpai .site-logo { max-width: 400px; width: 100%; height: auto; }
.t-sanpai .site-tel { flex-basis: 45%; text-align: right; font-size: .8rem; line-height: 1.4; }
.t-sanpai .site-tel a { text-decoration: none; color: #808086; font-size: 2.5em; line-height: 1em; font-weight: 700; background: url('/static/img/site/tell.png') no-repeat center left; background-size: auto 44%; padding-left: 1.15em; }
.t-sanpai .site-tel a:hover { opacity: .5; }
.t-sanpai .site-tel span { display: block; color: #2d2d2d; font-size: 1em; }

/* メニュー */
.t-sanpai .site-nav { background: var(--nav-bg, #f3f3f3); border-top: 3px solid var(--sg-dark, #28cc61); border-bottom: 1px solid var(--sg-dark, #28cc61); display: block; padding: 0; }
.t-sanpai .site-nav ul { list-style: none; display: flex; margin: 0 auto; padding: 0; width: 960px; max-width: 100%; }
.t-sanpai .site-nav li { flex: 1 1 100%; display: flex; justify-content: center; border-right: 1px solid var(--sg-dark, #28cc61); margin: 0; padding: 0; } .t-sanpai .site-nav li:first-child { border-left: 1px solid var(--sg-dark, #28cc61); }
.t-sanpai .site-nav li a { width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #000; padding: 1em .5em; line-height: 1.3em; border: 0; background: none; text-shadow: #fff 1px 1px 0, #fff -1px -1px 0, #fff -1px 1px 0, #fff 1px -1px 0; }
.t-sanpai .site-nav li a:hover, .t-sanpai .site-nav li.nav_hover a { background-color: var(--sg-dark, #28cc61); color: #000; text-shadow: none; } .t-sanpai .site-nav li a:hover { color: #fff; }

/* 本文：空色の背景・タイトル・白い枠 */
.t-sanpai .site-main { max-width: none; padding: 0 0 3em; margin: 0; text-align: center; }
.t-sanpai .page-art { background: url('/static/img/site/page_bg1.png') no-repeat top right; } .t-sanpai .page-art.alt { background: url('/static/img/site/page_bg2.png') no-repeat top right; }
.t-sanpai .page-art > h1 { color: #fff; font-size: 1.7em; text-shadow: 0 0 5px #ceeaff; text-align: left; padding: 2em 0 1.5em 1em; margin: 0; border: 0; }
.t-sanpai .white-frame { border-radius: var(--r, 10px); background: #fff; box-shadow: 0 0 6px 0 #a4a4a4; padding: 2em; text-align: left; }
.t-sanpai .white-frame .article { border: 0; border-radius: 0; background: none; padding: 0; box-shadow: none; }
.t-sanpai .white-frame .article > h1 { display: none; }
.t-sanpai .white-frame > h1:first-child { display: none; }
.t-sanpai .white-frame p { line-height: 1.8em; color: #2d2d2d; }
.t-sanpai .white-frame a { color: #00e; }
.t-sanpai .white-frame .btn.primary, .t-sanpai .white-frame button.btn.primary { color: #fff; }

/* フッター */
.t-sanpai .site-foot { background: var(--sg-dark, #28cc61); color: #fff; padding: 0; position: relative; z-index: 20; }
.t-sanpai .foot-in { width: 960px; max-width: 100%; display: flex; text-align: left; font-size: .8rem; padding: 2em 0 4em; margin: 0 auto; gap: 0; }
.t-sanpai .foot-map { display: flex; gap: 0; grid-template-columns: none; }
.t-sanpai .foot-map > div { margin-right: 3em; display: block; } .t-sanpai .foot-map b { display: block; color: var(--sp-lite, #bbfdd2); font-weight: 700; margin-bottom: .5em; border: 0; padding: 0; } .t-sanpai .foot-map a { display: block; color: #fff; text-decoration: none; margin-bottom: .2em; }
.t-sanpai .foot-org { order: 2; flex-grow: 1; text-align: right; color: #fff; } .t-sanpai .foot-org b { font-size: 1.2em; display: block; margin-bottom: .5em; }
.t-sanpai .copy { display: block; text-align: right; width: 960px; max-width: 100%; margin: -2.4em auto 0; padding: 0 0 2em; color: var(--sp-lite, #bbfdd2); font-size: .75rem; opacity: 1; position: relative; }
.t-sanpai .foot-in { position: relative; }

/* トップページ：回る空・キャッチ・8つのアイコン・バナー・最近の情報 */
.t-top .t-hero { position: relative; height: 343px; overflow: hidden; }
.t-top .t-roll { position: absolute; left: 50%; top: 50%; width: 1000px; height: auto; transform: translate(-50%, -50%); animation: t-rot 300s linear infinite; pointer-events: none; }
@keyframes t-rot { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .t-top .t-roll { animation: none; } }
.t-top .t-hero-in { position: relative; display: flow-root; height: 100%; background: url('/static/img/site/ball_bg.png') no-repeat center 41px; }
.t-top .t-hero-in h1 { margin: 0; padding: 0; border: 0; } .t-top .t-hero-in h1 img { max-width: 530px; width: 90%; height: auto; margin: 141px auto 0; display: block; }
.t-top .white-frame { position: relative; z-index: 10; margin-top: 0; }
ul#icon_list { list-style: none; margin: 1em 0 0; padding: 0; display: flex; justify-content: space-around; flex-wrap: wrap; }
ul#icon_list li { flex-basis: calc(100% / var(--icon-cols, 8) - 1.6%); margin: 0 0 1em; padding: 0; }
ul#icon_list .icon_box { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--sg-dark, #28cc61); }
ul#icon_list .icon_box > div { display: flex; }
ul#icon_list .icon_box > div:nth-of-type(1) { background: #fff; border-left: 4px solid var(--sg-dark, #28cc61); border-right: 4px solid var(--sg-dark, #28cc61); border-top: 4px solid var(--sg-dark, #28cc61); }
ul#icon_list .icon_box > div:nth-of-type(2) { border: 4px solid var(--sg-dark, #28cc61); }
ul#icon_list .icon_box a { display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none; color: #fff; font-size: .8rem; line-height: 1.2em; padding: .1em 0; font-weight: 700; }
ul#icon_list .icon_box a span.s { font-size: .8em; }
ul#icon_list .icon_box a img { max-height: 96px; height: 100%; width: auto; object-fit: contain; vertical-align: bottom; padding: 1em; box-sizing: border-box; }
ul#icon_list li a:hover { opacity: .9; }
.index_banner { width: 96%; max-width: 553px; margin: 3em auto 0; text-align: left; }
.index_banner ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0; padding: 0; } .index_banner li { margin: 0; padding: 0; }
.index_banner li.yuuryou_banner { flex-basis: 100%; margin-bottom: 1em; } .index_banner li.kousyuukai_banner, .index_banner li.recruit_banner { flex-basis: 48.5%; }
.index_banner img { width: 100%; height: auto; display: block; }
.t-top .t-frame h2 { background: #f3f3f3; margin: 3em 0 2em; padding: .5em 1em .5em .8em; text-align: left; font-size: 1rem; border: 0; color: #111; } .t-top .t-frame h2::before { content: ""; border-left: 5px solid var(--sg-dark, #28cc61); padding-left: .7em; } .t-top .t-frame h2 span { font-weight: 400; color: red; }
section.topics dl { margin: 0 1em; display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
section.topics dl dt { flex-basis: 20%; min-width: 9em; margin: 0 0 .5em; } section.topics dl dd { flex-basis: 80%; margin: 0 0 .5em; }
section.topics dl dd a { text-decoration: none; } section.topics dl dd a span { background: #fff82d; color: #000; font-size: .8em; font-weight: 700; margin-right: .5em; }
ul#banner_list { list-style: none; display: flex; margin: 3em 0 0; border-top: 1px solid #eee; padding: 3em 0 0; } ul#banner_list li { flex-basis: 30%; padding: 0 .5em; margin: 0; } ul#banner_list li img { max-width: 100%; width: 100%; height: auto; display: block; }
.t-top .t-ad { margin: 1.5em 0; }

/* サブページの中身 */
.t-sanpai .white-frame table.rt th, .t-sanpai .white-frame table.rt td { border-color: #ccc; }
.news-list { list-style: none; margin: 0; padding: 0 1em; } .news-list li { display: flex; gap: 0; margin: 0 0 .65em; text-align: left; } .news-list time { flex: 0 0 10.5em; color: #111; } .news-list a { text-decoration: none; } .news-list a span.bdg { background: #fff82d; color: #000; font-size: .8em; font-weight: 700; margin-right: .5em; }
.news-more { text-align: center; margin: 2.2em 0 0; } .news-more a { color: #00e; }

@media (max-width: 760px) {
  .t-sanpai .site-head-in { flex-direction: column; align-items: flex-start; gap: .8em; padding: 1em 14px; } .t-sanpai .site-name, .t-sanpai .site-tel { flex-basis: auto; width: 100%; } .t-sanpai .site-tel { text-align: left; }
  .t-sanpai .site-nav ul { flex-wrap: wrap; } .t-sanpai .site-nav li { flex: 1 1 33%; border-bottom: 1px solid var(--sg-dark, #28cc61); }
  .t-sanpai .page-art, .t-sanpai .t-hero-in { padding-left: 10px; padding-right: 10px; } .t-sanpai .page-art > h1 { padding: 1.2em 0 1em .6em; }
  .t-sanpai .white-frame { border-radius: 0; box-shadow: none; padding: 1.2em 12px; }
  ul#icon_list li { flex-basis: 50%; margin-bottom: 1em; } ul#icon_list .icon_box { width: 90%; margin: 0 auto; }
  section.topics dl dt, section.topics dl dd { flex-basis: 100%; } ul#banner_list { flex-direction: column; gap: 1em; } ul#banner_list li { padding: 0; }
  .t-sanpai .foot-in { flex-direction: column; gap: 1.5em; padding: 1.5em 14px 3em; } .t-sanpai .foot-map { flex-wrap: wrap; gap: 1em 0; } .t-sanpai .foot-map > div { margin-right: 2em; } .t-sanpai .foot-org { order: 0; text-align: left; } .t-sanpai .copy { text-align: left; margin: -1.5em auto 0; padding: 0 14px 1.5em; }
  .t-top .t-hero { height: 220px; } .t-top .t-hero-in { background-size: 300px auto; background-position: center 20px; } .t-top .t-hero-in h1 img { margin-top: 80px; width: 80%; }
  .news-list li { flex-direction: column; } .news-list time { flex-basis: auto; }
}

.t-sanpai .foot-map{flex-wrap:wrap;row-gap:1.2em}

/* メニューの二段目（マウスを乗せる／キーボードで入ると開く） */
.t-sanpai .site-nav li.has-sub { position: relative; flex-wrap: wrap; }
.t-sanpai .site-nav ul.sub { display: none; position: absolute; top: 100%; left: -1px; right: -1px; width: auto; max-width: none; margin: 0; padding: 0; background: #f3f3f3; border: 1px solid var(--sg-dark, #28cc61); border-top: 0; z-index: 40; flex-direction: column; }
.t-sanpai .site-nav li.has-sub:hover > ul.sub, .t-sanpai .site-nav li.has-sub:focus-within > ul.sub { display: flex; }
.t-sanpai .site-nav ul.sub li { flex: none; border: 0; border-top: 1px solid #cfeedb; display: block; } .t-sanpai .site-nav ul.sub li a { padding: .7em .6em; font-size: .9rem; }
@media (max-width: 760px) { .t-sanpai .site-nav ul.sub { position: static; border: 0; } .t-sanpai .site-nav li.has-sub:hover > ul.sub { display: none; } }

/* 設定した見出しの文字（空の絵の上） */
.t-top .t-hero-in .t-title { margin: 120px auto 0; font-size: 2.4rem; line-height: 1.3; color: #fff; text-shadow: 0 2px 8px rgba(0, 60, 120, .55); text-align: center; }
.t-top .t-hero-in .t-lead { margin: .6em auto 0; font-size: 1.1rem; color: #fff; text-shadow: 0 1px 6px rgba(0, 60, 120, .55); text-align: center; }
/* お知らせを左右2列に */
.topics-pair.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.topics-pair.two section.topics dl dt, .topics-pair.two section.topics dl dd { flex-basis: 100%; }
@media (max-width: 760px) { .topics-pair.two { grid-template-columns: 1fr; } .t-top .t-hero-in .t-title { font-size: 1.6rem; margin-top: 70px; } }

/* 協力ひろばの案内バナー */
.index_banner li.hiroba_banner { flex-basis: 100%; margin-top: 1em; }
.index_banner li.hiroba_banner a { display: flex; flex-direction: column; gap: .2em; padding: 1em 1.4em; border: 3px solid var(--sg-dark, #28cc61); border-radius: 12px; background: #fff; color: #222; text-decoration: none; text-align: center; }
.index_banner li.hiroba_banner a b { font-size: 1.2rem; color: var(--sg-dark, #28cc61); }
.index_banner li.hiroba_banner a:hover { background: #f4fbf6; }

/* マイページ（会員向け）：あいさつ・よく使う画面・出欠のお願い・お知らせを、見やすく */
.mp-hello { margin: 0 0 18px; } .mp-name { font-size: 1.25rem; margin: 0 0 8px; } .mp-role { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.mp-chip { display: inline-block; padding: 2px 11px; border-radius: 999px; background: #eef3f0; color: #35524a; font-size: .86rem; line-height: 1.6; } .mp-chip.lead { background: #1f7a5a; color: #fff; font-weight: 700; }
.mp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; margin: 0 0 24px; }
.mp-act { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid #b9cfc6; border-left: 6px solid #1f7a5a; border-radius: 8px; background: #fff; color: #1d2b27; text-decoration: none; }
.mp-act b { font-size: 1.05rem; color: #14543e; } .mp-act small { color: #5c6c66; } .mp-act:hover { background: #f1f7f4; } .mp-act.staff { border-left-color: #b8860b; }
.mp-card { margin: 0 0 20px; padding: 14px 18px 12px; border: 1px solid #d6e0db; border-radius: 8px; background: #fff; } .mp-card h2 { margin: 0 0 8px; font-size: 1.1rem; padding-bottom: 6px; border-bottom: 2px solid #1f7a5a; }
.mp-card.ask { border-color: #e0a526; background: #fff9e8; } .mp-card.ask h2 { border-bottom-color: #e0a526; } .mp-count { display: inline-block; margin-left: 6px; padding: 0 10px; border-radius: 999px; background: #c0392b; color: #fff; font-size: .85rem; vertical-align: middle; }
.mp-more { margin: 8px 0 0; text-align: right; font-size: .92rem; } .mp-card .news li { padding: 7px 0; } .mp-card .muted.small { margin: 0 0 6px; }
/* 「必須」の印は、見出し（入力欄の名前）と同じ行に出す */
.form label:has(> em) { display: block; } .form label:has(> em) > em { display: inline; margin-left: 6px; } .form label:has(> em) > :is(input, textarea, select) { display: block; width: 100%; margin-top: 4px; box-sizing: border-box; }
/* マイページの1週間のスケジュール（lib/week-view.js）。広い画面は7列、狭い画面は、日ごとの縦の並び */
.wk { margin: 0 0 10px; } .wk h2 { margin-top: 0; }
.wk-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 8px; } .wk-range { margin-left: 6px; font-size: .88rem; color: #5c6c66; }
.wk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid #cdd8d2; border-radius: 6px; overflow: hidden; background: #fff; }
.wk-day { min-height: 92px; padding: 4px 5px; border-left: 1px solid #e1e8e4; } .wk-day:first-child { border-left: 0; }
.wk-head { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin: 0 0 3px; padding-bottom: 2px; border-bottom: 1px solid #eef2f0; font-size: .86rem; } .wk-head span { color: #5c6c66; }
.wk-day.sun .wk-head { color: #b3341c; } .wk-day.sat .wk-head { color: #1f5fa8; } .wk-day.today { background: #eef7f2; } .wk-day.today .wk-head { color: #14543e; }
.wk-now { font-style: normal; font-size: .7rem; padding: 0 6px; border-radius: 999px; background: #1f7a5a; color: #fff; } .wk-add { margin-left: auto; text-decoration: none; color: #1f7a5a; font-weight: 700; padding: 0 4px; }
.wk-day ul { list-style: none; margin: 0; padding: 0; } .wk-day li { margin: 0 0 3px; padding: 2px 4px; border-radius: 4px; background: #e8f1ec; font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; } .wk-day li a { text-decoration: none; color: inherit; } .wk-day li small { color: #35524a; }
.wk-none { margin: 0; color: #9aa8a2; font-size: .75rem; }
@media (max-width: 860px) { .wk-grid { grid-template-columns: 1fr; } .wk-day { min-height: 0; border-left: 0; border-top: 1px solid #e1e8e4; display: grid; grid-template-columns: 6.2em 1fr; gap: 0 6px; } .wk-day:first-child { border-top: 0; } .wk-head { border-bottom: 0; margin: 0; } .wk-none { align-self: center; } }

/* マイページのツールバー（権限のある画面への入口） */
.tb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 10px; background: #fff; border: 1px solid #b9cfc6; border-radius: 8px; }
.t-sanpai .white-frame nav.tb a, nav.tb a, nav.tb a:visited { position: relative; display: grid; font-weight: normal; justify-items: center; align-content: center; gap: 2px; width: 100px; min-height: 70px; padding: 6px 4px; border: 1px solid #b9cfc6; border-radius: 10px; background: #fbfcfb; color: #1d2b27; text-decoration: none; font-size: .8rem; line-height: 1.25; text-align: center; }
nav.tb a:hover { border-color: #1f7a5a; background: #f1f7f4; }
.tb-ic { font-size: 1.6rem; line-height: 1.1; }
.tb-badge { position: absolute; top: 3px; right: 5px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #d33; color: #fff; font-style: normal; font-size: .72rem; line-height: 18px; }
@media (max-width: 860px) { .tb { gap: 6px; padding: 8px; } nav.tb a { width: calc((100% - 18px) / 4); min-width: 0; min-height: 62px; font-size: .72rem; } }

/* 会員向けのマイページの右上の5つのボタン（ホームページ用の色の決まりに負けないように） */
.t-sanpai .white-frame .top-tools { justify-content: flex-end; margin: 0 0 12px; }
.t-sanpai .white-frame .top-tools a.tt, .t-sanpai .white-frame .top-tools summary.tt { color: #1d2b27; text-decoration: none; }
.t-sanpai .white-frame .top-tools .tt.out { color: #fff; }
.t-sanpai .white-frame .tt-pop li a { color: #1d2b27; }