@charset "UTF-8";
/**
 * BOX css
 * @version 23.05.26
 * @version 24.11.08 From~To 年月日のコンパクト版を追加
 * @version 25.03.14 タイトルが枠線に重なるBOX dlタグ版を追加
 * @version 25.03.17 MM-dd HH:mmなどハイフン＋時間の場合に日にちと時間の隙間がない問題を改修
 */

/*
[html]
 タイトルが枠線に重なるBOX
 <dl class="article-box">
   <dt>たいとる</dt>
   <dd>ないよう</dd>
 </dl>
OR
 <div class="article-box">
   <div class="title">たいとる</div>
   <div class="body">ないよう</div>
 </div>
*/
.article-box { display: block; position: relative; margin: 2em 0 0; padding: 0.5em 0.5em 0.1em 0.5em; border: 1px dashed #555555; border-radius: 8px; overflow: inherit; }
.article-box > :is(.title, dt) { position: absolute; display: inline-block; top: -0.7em; padding: 0 0.3em 0 0.3em; background-color: #ffffff; }
.article-box > :is(.body dd) { padding: 0.5em 0.7em; }

/** 下半分に色付け */ /* TODO:色のバリエーション グラデーションの有無 */
.half-paint.hp-under.gradation { background-image: linear-gradient(0deg, #ffdfdf 10%, #fff 50%); }
/*
左上に三角 条件がわからないが右上や右下に線が入ってしまうことがある 3つのグラデーションならうまくいく？ まだ調査中...
background-image: linear-gradient(145deg, transparent 0px, red 17px, transparent 17px);
*/

/*
・期間From～To
<div class="fromto-box jc-c">
  <div>2024-01</div>
  <div>2024-02</div>
</div>
*/

/* 期間From～To */
.fromto-box { display: flex; justify-content: space-between; align-items: center; }
.fromto-box.jc-c { justify-content: center; }
.fromto-box:is(.jc-st, .jc-l) { justify-content: flex-start; }
.fromto-box:is(.jc-ed, .jc-r) { justify-content: flex-end; }
.fromto-box::after { content: '～'; display: block; order: 1; }
.fromto-box.jc-c:not(.compact)::after { margin: 0 0.5em; font-size: 80%; }
.fromto-box *:last-of-type { order: 2; }

/* yyyy年M月d日 */
[date-fmt] { display: inline-block; vertical-align: baseline; }
[date-fmt] > span { vertical-align: baseline; }
[date-fmt] > span:nth-child(odd) { display: inline-block; text-align: right; min-width: 1.1em; } /* 数字部分 */
[date-fmt="ngp"] > span:nth-child(even) { font-size: 70%; } /* 年月日部分 */
[date-fmt="ngp"] > span:nth-child(even):not(:last-of-type) { margin-right: 0.1em; }
[date-fmt="sla"] > span:nth-child(even) { margin: 0 0.1em; } /* 「/」部分 */
[date-fmt="dot"] > span:nth-child(even) { margin-right: 0.1em; font-size: 120%; } /* 「.」部分 */
/*[date-fmt="dot"] > span:nth-child(odd) { text-align: left; } 2025-07-13:ドットの場合も右寄せでよい */ /* 数字部分 */
[date-fmt] > span.d-of-w { margin: 0 0 0 0.2em; font-size: 90%; }/* 曜日部分 */
[date-fmt] > span.d-time { margin: 0 0.5em; }
.d-time.m-l { margin-left: 0.5em; }
[date-fmt] > span.d-time:last-of-type { margin-right: 0; }
:is(.compact [date-fmt], [date-fmt].compact) > span:nth-child(odd) { min-width: auto; }


/*
アコーディオンBOX
accordion-boxパラメータ
・default-open = 開いた状態で初期表示

acrd-btnパラメータ
・type-pm = ＋／－で表示
・type-angle = 矢羽で表示
・icn-left = 左側にアイコン
・icn-right = 右側にアイコン

[サンプルHTML]
<div class="accordion-box">
  <div class="acrd-btn-wrap"><!-- acrd-btn-wrap=任意タグ 省略可能 -->
    <div class="btn sml acrd-btn type-pm icn-left"><label>開閉ボタン</label></div><!-- data-slide-speed="99" 個別で開閉速度を変える場合は指定 -->
  </div>
  <div class="acrd-body">
    <div>折りたたむコンテンツ</div>
  </div>
</div>
*/
.accordion-box .acrd-btn { border-radius: 4px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.accordion-box .acrd-btn.type-pm.mid { padding-right: 8px; }
.accordion-box .acrd-btn.type-angle.mid { padding-right: 12px; }

.accordion-box .acrd-btn.btn { box-shadow: none; }
.accordion-box .acrd-btn.btn label { cursor: pointer; }
.accordion-box .acrd-btn.icn-left, .accordion-box .acrd-btn.icn-right { display: inline-flex; gap: 0 0.5em; align-items: baseline; }
.accordion-box .acrd-btn.icn-left label, .accordion-box .acrd-btn.icn-right label { width: 100%; }
.accordion-box .acrd-btn.icn-right { flex-direction: row-reverse; }
.accordion-box .acrd-btn.icn-left::before, .accordion-box .acrd-btn.icn-right::before { font-family: "Font Awesome 5 Free"; font-weight: 900; display: block; }

.accordion-box .acrd-body { display: none; padding-left: 1em; border: 1px solid #ccc; border-radius: 0 4px 4px 4px; margin-top: -1px; }
.accordion-box.default-open > .acrd-body, .accordion-box.default-open > * > .acrd-body { display: block; }

.accordion-box.open > .acrd-btn,
.accordion-box.open > .acrd-btn-wrap > .acrd-btn,
.accordion-box.default-open > .acrd-btn-wrap > .acrd-btn,
.accordion-box.default-open > .acrd-btn { border-radius: 4px 4px 0 0; }

/* ＋／－ */
.accordion-box > .acrd-btn.type-pm::before,
.accordion-box > .acrd-btn-wrap > .acrd-btn.type-pm::before,
.accordion-box.close > .acrd-btn.type-pm::before,
.accordion-box.close > .acrd-btn-wrap > .acrd-btn.type-pm::before { content: '\f055'; }
.accordion-box.default-open > .acrd-btn.type-pm::before,
.accordion-box.default-open > .acrd-btn-wrap > .acrd-btn.type-pm::before,
.accordion-box.open > .acrd-btn.type-pm::before,
.accordion-box.open > .acrd-btn-wrap > .acrd-btn.type-pm::before { content: '\f056'; }
/* 矢羽 */
.accordion-box > .acrd-btn.type-angle::before,
.accordion-box > .acrd-btn-wrap > .acrd-btn.type-angle::before,
.accordion-box.close > .acrd-btn.type-angle::before,
.accordion-box.close > .acrd-btn-wrap > .acrd-btn.type-angle::before { content: '\f105'; min-width: 10px; }
.accordion-box.default-open > .acrd-btn.type-angle::before,
.accordion-box.default-open > .acrd-btn-wrap > .acrd-btn.type-angle::before,
.accordion-box.open > .acrd-btn.type-angle::before,
.accordion-box.open > .acrd-btn-wrap > .acrd-btn.type-angle::before { content: '\f107'; min-width: 10px; }