@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などハイフン＋時間の場合に日にちと時間の隙間がない問題を改修
 * @version 25.11.10 アコーディオン全面改修 構造をシンプルに
 * @version 25.12.04 三角形を追加
 */

/*
[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%); }

/*
・期間From～To
<ul class="fromto-box jc-c">
  <li>2024-01</li>
  <li>2024-02</li>
</ul>
<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
パラメータ
・data-op="open / close" 開いた状態で表示 / 閉じた状態で表示
・data-icn-type="pm / arrow" +／-アイコン / 矢羽アイコン
・data-icn-position="left / right" 左側にアイコン / 右側にアイコン
・data-slide-speed="100 ~ 3000" 開閉スピード0.001秒

[サンプルHTML]
<dl class="acrd-box" data-op="open / close" data-icn-type="pm / arrow" data-icn-position="left / right" data-slide-speed="100 / 200...">
  <dt class="acrd-btn">
    <button type="button" class="btn mid def"><label>開閉ボタン</label></button>
  </dt>
  <dd class="acrd-body">
    <div>折りたたむコンテンツ</div>
  </dd>
</dl>
*/

.acrd-box[data-icn-position="left"] .acrd-btn .btn::before,
.acrd-box[data-icn-position="right"] .acrd-btn .btn::after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  display: block;
  width: 16px;
}
.acrd-box[data-icn-position] .btn { display: inline-flex; align-items: baseline; gap: 0.8em; justify-content: center; }
.acrd-box[data-icn-position] .btn:active { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1.0; }
.acrd-box[data-icn-position] .btn.sml { gap: 0.5em; }
.acrd-box[data-icn-position] .btn.min { gap: 0.3em; }

.acrd-box[data-icn-position="left"] .acrd-btn .btn.lrg::before,
.acrd-box[data-icn-position="right"] .acrd-btn .btn.lrg::after {
  width: 24px;
}
.acrd-box[data-icn-position="left"] .acrd-btn .btn.sml::before,
.acrd-box[data-icn-position="right"] .acrd-btn .btn.sml::after {
  width: 13px;
}
.acrd-box[data-icn-position="left"] .acrd-btn .btn.min::before,
.acrd-box[data-icn-position="right"] .acrd-btn .btn.min::after {
  width: 11px;
}

.acrd-box[data-icn-position="left"][data-icn-type="pm"][data-op="open"] .acrd-btn .btn::before,
.acrd-box[data-icn-position="right"][data-icn-type="pm"][data-op="open"] .acrd-btn .btn::after {
  content: '\f056';
}
.acrd-box[data-icn-position="left"][data-icn-type="pm"][data-op="close"] .acrd-btn .btn::before,
.acrd-box[data-icn-position="right"][data-icn-type="pm"][data-op="close"] .acrd-btn .btn::after {
  content: '\f055';
}
.acrd-box[data-icn-position="left"][data-icn-type="arrow"][data-op="open"] .acrd-btn .btn::before,
.acrd-box[data-icn-position="right"][data-icn-type="arrow"][data-op="open"] .acrd-btn .btn::after {
  content: '\f107';
}
.acrd-box[data-icn-position="left"][data-icn-type="arrow"][data-op="close"] .acrd-btn .btn::before,
.acrd-box[data-icn-position="right"][data-icn-type="arrow"][data-op="close"] .acrd-btn .btn::after {
  content: '\f105';
}


/* 三角形 */
:is(.tri-t-l, .tri-t-r, .tri-b-l, .tri-b-r) { position: relative; }
:is(.tri-t-l, .tri-t-r, .tri-b-l, .tri-b-r)::after { content: ''; position: absolute; }
/* 三角形 ＞ 位置 ※tri-t-l=左上 */
.tri-t-l::after { top: 0; left: 0; border-left: 16px solid #ccc; border-bottom: 16px solid transparent; }
.tri-t-r::after { top: 0; right: 0; border-top: 16px solid #ccc; border-left: 16px solid transparent; }
.tri-b-l::after { bottom: 0; left: 0; border-right: 16px solid transparent; border-bottom: 16px solid #ccc; }
.tri-b-r::after { bottom: 0; right: 0; border-left: 16px solid transparent; border-bottom: 16px solid #ccc; }
/* 三角形 ＞ サイズ ※data-tri-size=任意 */
:is(.tri-t-l, .tri-t-r, .tri-b-l, .tri-b-r).tri-min::after { border-width:  8px; }
:is(.tri-t-l, .tri-t-r, .tri-b-l, .tri-b-r).tri-sml::after { border-width: 12px; }
:is(.tri-t-l, .tri-t-r, .tri-b-l, .tri-b-r).tri-mid::after { border-width: 16px; }
:is(.tri-t-l, .tri-t-r, .tri-b-l, .tri-b-r).tri-lrg::after { border-width: 20px; }
:is(.tri-t-l, .tri-t-r, .tri-b-l, .tri-b-r)[data-tri-size]::after { border-width: attr(data-tri-size px); }
/* 三角形 ＞ 色 ※data-tri-color=任意 2025-12-04:eclipseが理解しないのでコメントアウト中 */
.tri-t-l.tri-c-gre::after { border-left-color: var(--gre); }
.tri-t-r.tri-c-gre::after { border-top-color: var(--gre); }
.tri-b-l.tri-c-gre::after { border-bottom: var(--gre); }
.tri-b-r.tri-c-gre::after { border-bottom-color: var(--gre); }
.tri-t-l.tri-c-red::after { border-left-color: var(--red); }
.tri-t-r.tri-c-red::after { border-top-color: var(--red); }
.tri-b-l.tri-c-red::after { border-bottom: var(--red); }
.tri-b-r.tri-c-red::after { border-bottom-color: var(--red); }
.tri-t-l.tri-c-blu::after { border-left-color: var(--blu); }
.tri-t-r.tri-c-blu::after { border-top-color: var(--blu); }
.tri-b-l.tri-c-blu::after { border-bottom: var(--blu); }
.tri-b-r.tri-c-blu::after { border-bottom-color: var(--blu); }
.tri-t-l.tri-c-nav::after { border-left-color: var(--nav); }
.tri-t-r.tri-c-nav::after { border-top-color: var(--nav); }
.tri-b-l.tri-c-nav::after { border-bottom: var(--nav); }
.tri-b-r.tri-c-nav::after { border-bottom-color: var(--nav); }
.tri-t-l.tri-c-ora::after { border-left-color: var(--ora); }
.tri-t-r.tri-c-ora::after { border-top-color: var(--ora); }
.tri-b-l.tri-c-ora::after { border-bottom: var(--ora); }
.tri-b-r.tri-c-ora::after { border-bottom-color: var(--ora); }
.tri-t-l.tri-c-tea::after { border-left-color: var(--tea); }
.tri-t-r.tri-c-tea::after { border-top-color: var(--tea); }
.tri-b-l.tri-c-tea::after { border-bottom: var(--tea); }
.tri-b-r.tri-c-tea::after { border-bottom-color: var(--tea); }
.tri-t-l.tri-c-gra::after { border-left-color: var(--gra); }
.tri-t-r.tri-c-gra::after { border-top-color: var(--gra); }
.tri-b-l.tri-c-gra::after { border-bottom: var(--gra); }
.tri-b-r.tri-c-gra::after { border-bottom-color: var(--gra); }
.tri-t-l.tri-c-dpk::after { border-left-color: var(--dpk); }
.tri-t-r.tri-c-dpk::after { border-top-color: var(--dpk); }
.tri-b-l.tri-c-dpk::after { border-bottom: var(--dpk); }
.tri-b-r.tri-c-dpk::after { border-bottom-color: var(--dpk); }
.tri-t-l.tri-c-pur::after { border-left-color: var(--pur); }
.tri-t-r.tri-c-pur::after { border-top-color: var(--pur); }
.tri-b-l.tri-c-pur::after { border-bottom: var(--pur); }
.tri-b-r.tri-c-pur::after { border-bottom-color: var(--pur); }
.tri-t-l.tri-c-tmt::after { border-left-color: var(--tmt); }
.tri-t-r.tri-c-tmt::after { border-top-color: var(--tmt); }
.tri-b-l.tri-c-tmt::after { border-bottom: var(--tmt); }
.tri-b-r.tri-c-tmt::after { border-bottom-color: var(--tmt); }
.tri-t-l.tri-c-def::after { border-left-color: var(--def); }
.tri-t-r.tri-c-def::after { border-top-color: var(--def); }
.tri-b-l.tri-c-def::after { border-bottom: var(--def); }
.tri-b-r.tri-c-def::after { border-bottom-color: var(--def); }
.tri-t-l.tri-c-pri::after { border-left-color: var(--pri); }
.tri-t-r.tri-c-pri::after { border-top-color: var(--pri); }
.tri-b-l.tri-c-pri::after { border-bottom: var(--pri); }
.tri-b-r.tri-c-pri::after { border-bottom-color: var(--pri); }
.tri-t-l.tri-c-sec::after { border-left-color: var(--sec); }
.tri-t-r.tri-c-sec::after { border-top-color: var(--sec); }
.tri-b-l.tri-c-sec::after { border-bottom: var(--sec); }
.tri-b-r.tri-c-sec::after { border-bottom-color: var(--sec); }
.tri-t-l.tri-c-dan::after { border-left-color: var(--dan); }
.tri-t-r.tri-c-dan::after { border-top-color: var(--dan); }
.tri-b-l.tri-c-dan::after { border-bottom: var(--dan); }
.tri-b-r.tri-c-dan::after { border-bottom-color: var(--dan); }
.tri-t-l.tri-c-war::after { border-left-color: var(--war); }
.tri-t-r.tri-c-war::after { border-top-color: var(--war); }
.tri-b-l.tri-c-war::after { border-bottom: var(--war); }
.tri-b-r.tri-c-war::after { border-bottom-color: var(--war); }
.tri-t-l.tri-c-suc::after { border-left-color: var(--suc); }
.tri-t-r.tri-c-suc::after { border-top-color: var(--suc); }
.tri-b-l.tri-c-suc::after { border-bottom: var(--suc); }
.tri-b-r.tri-c-suc::after { border-bottom-color: var(--suc); }
.tri-t-l.tri-c-inf::after { border-left-color: var(--inf); }
.tri-t-r.tri-c-inf::after { border-top-color: var(--inf); }
.tri-b-l.tri-c-inf::after { border-bottom: var(--inf); }
.tri-b-r.tri-c-inf::after { border-bottom-color: var(--inf); }

/*.tri-t-l::after { border-left-color: attr(data-tri-color type(<color>)); }*/
/*.tri-t-r::after { border-top-color: attr(data-tri-color type(<color>)); }*/
/*.tri-b-l::after { border-bottom: attr(data-tri-color type(<color>)); }*/
/*.tri-b-r::after { border-bottom-color: attr(data-tri-color type(<color>)); }*/