@charset "UTF-8";
/*
 * コラム本文のブロックパターン（inc/column.php で登録）の見た目。
 * 公開ページとブロックエディタの両方で読み込む。
 */

/* ---------- 囲みボックス共通 ---------- */
.aru-box {
    position: relative;
    margin: 2.5em 0;
    padding: 1.8em 1.6em 1.4em;
    border-radius: 8px;
}

.aru-box p.aru-box__label {
    position: absolute;
    top: 0;
    left: 1.2em;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: .3em 1em;
    border-radius: 999px;
    color: #fff;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.4 !important;
    letter-spacing: .08em;
}

.aru-box p.aru-box__label::before {
    margin-right: .5em;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
}

.aru-box > :last-child,
.aru-box .wp-block-group__inner-container > :last-child {
    margin-bottom: 0 !important;
}

/* ---------- この記事のポイント ---------- */
.aru-box--point {
    background: #eef7fc;
    border: 2px solid #68c6f2;
}

.aru-box--point p.aru-box__label {
    background: #3f72af;
}

.aru-box--point p.aru-box__label::before {
    content: "\f0eb"; /* lightbulb */
}

.aru-box--point ul {
    margin: 0 !important;
    padding: 0 0 0 1.4em !important;
    list-style: none !important;
}

.aru-box--point li {
    position: relative;
    padding: .35em 0 !important;
    font-weight: 700;
}

.aru-box--point li::before {
    content: "\f00c"; /* check */
    position: absolute;
    left: -1.4em;
    color: #3f72af;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
}

/* ---------- ARUの現場から ---------- */
.aru-box--genba {
    background: #fff8f1;
    border: 2px solid #f0b27a;
}

.aru-box--genba p.aru-box__label {
    background: #e07b39;
}

.aru-box--genba p.aru-box__label::before {
    content: "\f4c4"; /* hands-helping */
}

.aru-box--genba p.aru-box__by {
    margin-top: .8em !important;
    color: #8a6a52;
    font-size: 14px !important;
    text-align: right;
}

/* ---------- よくある質問 ---------- */
.aru-faq {
    margin: 0 0 12px;
    border: 1px solid #d6e6f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.aru-faq summary {
    position: relative;
    padding: 1em 3em 1em 3.2em;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.6;
    list-style: none;
}

.aru-faq summary::-webkit-details-marker {
    display: none;
}

.aru-faq summary::before {
    content: "Q";
    position: absolute;
    top: .85em;
    left: 1em;
    color: #3f72af;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.2em;
    font-weight: 700;
}

.aru-faq summary::after {
    content: "\f107"; /* angle-down */
    position: absolute;
    top: 50%;
    right: 1.2em;
    transform: translateY(-50%);
    color: #68c6f2;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    transition: transform .2s;
}

.aru-faq[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}

.aru-faq > :not(summary) {
    position: relative;
    margin: 0 !important;
    padding: 0 1.2em 1.2em 3.2em;
}

.aru-faq > p:first-of-type::before {
    content: "A";
    position: absolute;
    left: 1em;
    color: #e07b39;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.2em;
    font-weight: 700;
}