@charset "UTF-8";
/*
 * 計算フォーム（旧サイトの calculated-fields-form を移した app/inc/calc.php・assets/js/calc.js）の見た目。
 * SWELL の表示（app/views/layout-swell.php）で、計算フォームのあるページだけ読む。
 *
 * 中身は style.css の「計算フォーム（旧 calculated-fields-form）」の節の写し（値を変えていない）に、その節が使う
 * style.css の変数 3 つ（--c-border・--c-bg-sub・--c-text-weak。値は style.css の :root と同じ）を .c-calc の頭に足したもの。SWELL の表示は style.css を
 * 読まないので、計算フォームだけを今の見た目のまま使える形に保つ（鍋ログ系列の SWELL の表示の「記事の中の道具」と同じ扱い。
 * 2026-10-12 のなべちゃんの回答「道具は元テーマに無い部品なので『元に戻す』の対象外として扱い、使える形を保つ」。
 * manage の tasks/nabe/done/manage_swell-fps-tools-css.md）。
 * **style.css の同じ節を直したら、こちらも同じに直す**（移行後の表示は style.css のほうを読み、これは読まない）。
 */
.c-calc {
    /* style.css の :root の変数（この 3 行だけ足した） */
    --c-border: #d6dfd8;
    --c-bg-sub: #eef2ee;
    --c-text-weak: #5f6f66;
    margin: 2em 0;
    padding: 1.2em 1.4em 1.4em;
    border: 1px solid var(--c-border, #e2e2e2);
    border-radius: 8px;
    background: var(--c-bg-sub);
}
.c-calc__title {
    margin: 0 0 .8em;
    font-size: 1.1em;
    font-weight: 700;
}
.c-calc__row {
    display: flex;
    gap: .8em;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: .7em;
}
.c-calc__label {
    flex: 1 1 16em;
    min-width: 0;
    font-size: .95em;
}
.c-calc__input {
    flex: 0 0 auto;
    width: 10em;
    max-width: 100%;
    padding: .4em .6em;
    border: 1px solid var(--c-border, #ccc);
    border-radius: 4px;
    background: #fff;
    font-size: 1em;
}
.c-calc__note {
    margin: 1.2em 0 .5em;
    font-weight: 700;
}
.c-calc__help {
    flex: 1 1 100%;
    margin: 0;
    color: var(--c-text-weak, #666);
    font-size: max(.84em, 1rem);
}
.c-calc__results {
    margin-top: 1.2em;
    padding-top: 1em;
    border-top: 2px solid var(--c-border, #e2e2e2);
}
.c-calc__resultsTitle {
    margin: 0 0 .7em;
    font-weight: 700;
}
.c-calc__row.-result .c-calc__output {
    width: 10em;
    padding: .4em .6em;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 599px) {
    .c-calc__label {
        flex-basis: 100%;
    }
    .c-calc__input,
    .c-calc__row.-result .c-calc__output {
        width: 100%;
    }
}