@charset "UTF-8";
/* ============================================================
   選ばれる理由ページ 専用スタイル
   ・TOPの「3カラム＋丸番号」とも、旧ページの「左右交互」とも
     重ならないレイアウトにする
   ・大きなアウトライン数字を背景に敷いた横帯 + 2列のチェック
   ============================================================ */

.r-page{
    --g:#1b5e3a;
    --g-d:#14472c;
    --g-l:#e7f1ea;
    --g-ll:#f2f8f4;
    --o:#e8820c;
    --cream:#fdf8ef;
    --ink:#2c322e;
    --ink-s:#6b746d;
    --bd:#e0e4e0;
    font-family:'Noto Sans JP',sans-serif;
    color:var(--ink);
}
.r-page *{box-sizing:border-box}
.r-wrap{max-width:960px;margin:0 auto;padding:0 24px}

/* ---------- 冒頭のインデックス ---------- */
.r-index{background:var(--cream);padding:36px 0 40px}
.r-index__lead{
    text-align:center;font-size:1.0625rem;font-weight:700;color:var(--g);
    margin:0 0 24px;line-height:1.7;
}
.r-index__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.r-index__item{
    display:flex;flex-direction:column;gap:6px;
    background:#fff;border:1px solid var(--bd);border-radius:10px;
    padding:16px 18px;text-decoration:none;color:inherit;
    transition:border-color .2s,box-shadow .2s,transform .2s;
}
.r-index__item:hover{border-color:var(--g);box-shadow:0 6px 18px rgba(20,28,23,.08);transform:translateY(-2px)}
.r-index__no{
    font-size:.8125rem;font-weight:900;letter-spacing:.06em;color:var(--o);
}
.r-index__title{font-size:1.0625rem;font-weight:900;color:var(--g);line-height:1.5}

/* ---------- 本体：理由ブロック ---------- */
.r-item{position:relative;overflow:hidden;padding:52px 0 56px}
.r-item--odd{background:#fff}
.r-item--even{background:var(--g-ll)}

/* 背景に敷く大きなアウトライン数字 */
.r-item__ghost{
    position:absolute;right:calc(50% - 480px);top:14px;
    font-size:190px;font-weight:900;line-height:.8;
    color:transparent;-webkit-text-stroke:2px rgba(27,94,58,.13);
    letter-spacing:-.04em;pointer-events:none;user-select:none;
}
.r-item__inner{position:relative;z-index:1}

.r-item__label{
    display:inline-flex;align-items:baseline;gap:4px;
    background:var(--o);color:#fff;border-radius:4px;
    padding:6px 14px;margin-bottom:16px;
}
.r-item__label-en{font-size:.9375rem;font-weight:900;letter-spacing:.06em}
.r-item__label-no{font-size:1.125rem;font-weight:900;line-height:1}

.r-item__title{
    font-size:1.875rem;font-weight:900;color:var(--g);
    line-height:1.45;letter-spacing:.01em;margin:0 0 18px;
}
.r-item__lead{
    border-left:5px solid var(--o);
    background:#fff;
    padding:14px 18px;margin:0 0 20px;border-radius:0 8px 8px 0;
    font-size:1.125rem;font-weight:700;color:var(--g);line-height:1.7;
}
.r-item--odd .r-item__lead{background:var(--g-ll)}
.r-item__desc{font-size:1rem;line-height:2;color:var(--ink);margin:0 0 24px}

.r-item__checks{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;list-style:none;margin:0;padding:0;
}
.r-item__checks li{
    display:flex;align-items:flex-start;gap:10px;
    background:#fff;border:1px solid var(--bd);border-radius:8px;
    padding:13px 15px;font-size:.9375rem;font-weight:700;line-height:1.6;
}
.r-item--even .r-item__checks li{border-color:#d5e3da}
.r-item__checks svg{flex-shrink:0;color:var(--g);margin-top:2px}

/* ---------- 締めの一文 ---------- */
.r-closing{background:var(--cream);padding:44px 0 48px;text-align:center}
.r-closing__text{
    font-size:1.125rem;font-weight:700;color:var(--g);line-height:1.9;margin:0;
}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
    .r-wrap{padding:0 18px}
    .r-index{padding:28px 0 30px}
    .r-index__grid{grid-template-columns:1fr;gap:10px}
    .r-index__lead{font-size:.9375rem;margin-bottom:18px}
    .r-item{padding:36px 0 38px}
    .r-item__ghost{right:8px;top:10px;font-size:110px;-webkit-text-stroke-width:1.5px}
    .r-item__title{font-size:1.375rem;margin-bottom:14px}
    .r-item__lead{font-size:1rem;padding:12px 14px;margin-bottom:16px}
    .r-item__desc{font-size:.9375rem;line-height:1.95;margin-bottom:18px}
    .r-item__checks{grid-template-columns:1fr;gap:9px}
    .r-item__checks li{font-size:.875rem;padding:11px 13px}
    .r-closing{padding:32px 0 34px}
    .r-closing__text{font-size:1rem}
}