@charset "UTF-8";

/* =========================================================
   ミヨスマート（/miyosmart/）専用
   - 読み込み順: page-rejusea.css → vendor/lism-css-1.0.0.css → このファイル
   - Lism はレイヤー内、テーマの CSS はレイヤー外。同じプロパティではテーマが勝つ
   - 生の HEX は書かない。色はすべて style.css の :root 変数を参照する
   ========================================================= */

@layer lism-base {

    /* --- 1. Lism のトークンを既存サイトの :root 変数へ寄せる --- */
    :root {
        --brand: var(--color-primary);
        /* 白文字を載せる面（Q行・表の見出し・番号）用。primary/secondary では白文字 4.5:1 に届かないため main */
        --accent: var(--color-main);
        --text: var(--color-text);
        --text-2: var(--color-text-light);
        --base: var(--color-white);
        --base-2: var(--color-light-purple);
        --divider: var(--color-border-medium);
        --link: var(--color-main);
        --ff--base: var(--font-base);
        --ff--accent: var(--font-head);
        /* 角丸は DESIGN.md rounded（small 4 / default 8 / card 10 / large 12 / pill）に揃える */
        --bdrs--10: 0.25rem;
        --bdrs--20: 0.5rem;
        --bdrs--30: 0.625rem;
        --bdrs--40: 0.75rem;
    }

    /* --- 2. Lism のリセット・要素スタイルを本文（.c--miyosmart）の外へ漏らさない ---
       ヘッダー・フッター・上部の帯・パンくず・電話ボタンは、Lism を読む前と同じ見た目に戻す。
       revert はブラウザ既定へ戻すだけなので、テーマ側で指定済みのプロパティはテーマが勝つ。 */
    html {
        line-break: revert;
        overflow-wrap: revert;
        word-break: revert;
    }

    body :not(.c--miyosmart, .c--miyosmart *) {
        margin: revert;
        line-height: revert;
    }

    body :is(h1, h2, h3, h4, h5, h6, small, b, strong, dt, figcaption, caption, sub, sup, code, kbd, samp, var):not(.c--miyosmart *) {
        font-family: revert;
        font-size: revert;
        font-weight: revert;
    }

    body :is(button, input, select, textarea):not(.c--miyosmart *) {
        font: revert;
        letter-spacing: revert;
        color: revert;
        background-color: revert;
        border: revert;
        padding: revert;
    }

    body :is(ul, ol, menu, td, th, blockquote):not(.c--miyosmart *) {
        padding: revert;
    }

    body :is(blockquote, q):not(.c--miyosmart *) {
        font-style: revert;
        background-color: revert;
    }

    body :is(svg, canvas, iframe, video, audio, object):not(.c--miyosmart *) {
        vertical-align: revert;
    }
}

@layer lism-custom {

    /* 見出し: misight／リジュセアの rj-main-title に合わせる（明朝・中央・下に短い線） */
    .c--miyosmart h2 {
        font-family: var(--ff--accent);
        color: var(--brand);
        text-align: center;
    }

    .c--miyosmart h2::after {
        content: "";
        display: block;
        inline-size: var(--s50);
        block-size: var(--s5);
        margin: var(--s15) auto 0;
        background-color: var(--accent);
    }

    /* レンズ図: 点線リングを4重に重ね、中心だけ透明（白）にする */
    .c--lens span {
        display: block;
        aspect-ratio: 1 / 1;
        padding: var(--s5);
        border: var(--s10) dotted var(--color-secondary);
        border-radius: var(--bdrs--99);
    }

    .c--lens .c--lens_center {
        padding: 0;
        border: 1px solid var(--divider);
        background-color: var(--base);
    }

    /* 流れの番号（DESIGN.md ステップフロー: 40px の丸） */
    .c--steps_num {
        inline-size: var(--s40);
        block-size: var(--s40);
    }

    /* 臨床試験の条件（対象・期間・出典）: 薄紫の面にラベル列＋内容列。行間に細い区切り線 */
    /* 幅に余裕があればラベルの右に内容、狭いとき（内容が14em取れないとき）はラベルの下へ回り込む */
    .c--trialSpec_row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--s10) var(--s15);
        padding-block: var(--s20);
    }

    .c--trialSpec dt {
        flex: 0 0 4.5em;
    }

    .c--trialSpec dd {
        flex: 1 1 14em;
    }

    .c--trialSpec_row + .c--trialSpec_row {
        border-block-start: 1px solid var(--divider);
    }

    .c--trialSpec dt {
        padding: var(--s5) var(--s10);
        border-radius: var(--bdrs--99);
        background-color: var(--base);
        color: var(--accent);
        font-size: var(--fz--s);
        font-weight: bold;
        text-align: center;
    }

    .c--trialSpec dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

    /* ほかの方法のカード: リンクだと分かるよう、題名に下線＋右端に矢印の丸。hover で面と矢印が反応する */
    .c--linkCard {
        box-shadow: var(--shadow-sm);
        transition: background-color 0.2s, box-shadow 0.2s;
    }

    .c--linkCard:hover,
    .c--linkCard:focus-visible {
        background-color: var(--color-pale);
        box-shadow: var(--shadow-lg);
    }

    .c--linkCard_title {
        text-decoration: underline;
        text-underline-offset: 0.3em;
        text-decoration-thickness: 1px;
    }

    .c--linkCard_arrow {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        inline-size: var(--s40);
        block-size: var(--s40);
        border-radius: var(--bdrs--99);
        background-color: var(--accent);
        color: var(--base);
        font-size: var(--fz--s);
        transition: translate 0.2s;
    }

    .c--linkCard:hover .c--linkCard_arrow,
    .c--linkCard:focus-visible .c--linkCard_arrow {
        translate: var(--s5) 0;
    }

    /* こんなお子さまに: 薄紫の面に白いカードを並べ、各行の頭にチェックの丸 */
    .c--checkList {
        background-color: var(--base-2);
    }

    .c--checkList_icon {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        inline-size: var(--s30);
        block-size: var(--s30);
        border-radius: var(--bdrs--99);
        background-color: var(--accent);
        color: var(--base);
        font-size: var(--fz--xs);
    }

    /* 費用の表 */
    .c--costTable {
        border-collapse: collapse;
    }

    .c--costTable :is(th, td) {
        border: 1px solid var(--divider);
        text-align: start;
        vertical-align: top;
    }

    .c--costTable thead th {
        background-color: var(--accent);
        color: var(--base);
    }

    .c--costTable tbody th {
        background-color: var(--base-2);
    }
}

/* Property Class の拡張（レイヤー外）。テーマの a{text-decoration:none} より強くするため */
.-td\:underline {
    text-decoration: underline;
}