@charset "UTF-8";
/**
 * BOX css
 * @version 23.05.26
 */

/*
 タイトルが枠線に重なるBOX
 <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 .title { position: absolute; display: inline-block; top: -0.7em; padding: 0 0.3em 0 0.3em; background-color: #ffffff; }
.article-box .body { 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);
*/



/*
アコーディオン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>
  </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; }