@charset "utf-8";
/* ==========================================================================
   facts.css  ―  トップページの「ご紹介できる範囲と実績」ブロック

   ※既存CSS（reset/common/layout/page）は一切変更していません。
   　このファイルは、ブロックを設置したページからのみ読み込まれます。

   【設置しているページ】
   　index.php（トップ／ファーストビュー直下）

   【なぜこのブロックがあるか】
   　「東急が運営する施設を紹介するサービス」という誤解が多いため、
   　紹介できる施設数・エリア・費用帯・お身体の状態の幅を、
   　トップページの最初に事実として示すためのブロックです。

   　配色は既存サイト（#e95377）に合わせており、新しい色は追加していません。
   　フォントはサイト共通の指定（css/fonts.css）に従います。
   ========================================================================== */

/* ★上の余白について（2026年8月13日に70px→38pxへ）
   　すぐ上にPR帯（.hero_pr）が来たため、70pxだと帯と見出しのあいだに
   　白い空きが大きく残っていました。 */
.facts{
    padding: 38px 0 10px;
    font-family: var(--font-base);
}
.facts .facts_hd{
    color: #111;
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}
.facts .facts_hd span{
    color: #cc2b5a;
}
.facts .facts_lead{
    margin: 22px auto 0;
    max-width: 840px;
    color: #333;
    font-size: 16px;
    line-height: 2;
    text-align: center;
}

/* --- 数字 4つ --------------------------------------------------------- */
.facts .facts_num{
    display: flex;
    margin-top: 40px;
    border: 1px solid #e3d5d9;
    border-radius: 8px;
    background: #fdf2f5;
    list-style: none;
}
.facts .facts_num li{
    flex: 1 1 0;
    padding: 26px 10px;
    border-left: 1px solid #e3d5d9;
    text-align: center;
}
.facts .facts_num li:first-child{
    border-left: none;
}
.facts .fn_num{
    display: block;
    color: #cc2b5a;
    font-family: var(--font-head);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
}
.facts .fn_unit{
    margin-left: 2px;
    font-size: 17px;
}
.facts .fn_lbl{
    display: block;
    margin-top: 8px;
    color: #555;
    font-size: 13px;
    line-height: 1.7;
}
.facts .facts_note{
    margin-top: 14px;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.9;
}

/* --- ご紹介できる範囲 -------------------------------------------------- */
.facts .facts_range{
    margin-top: 44px;
    padding: 34px 40px 36px;
    border: 2px solid #e95377;
    border-radius: 8px;
    background: #fff;
}
.facts .fr_hd{
    margin-bottom: 22px;
    color: #111;
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}
.facts .fr_item{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px dotted #d8c8cc;
}
.facts .fr_item:first-of-type{
    border-top: none;
    padding-top: 0;
}
.facts .fr_item dt{
    flex: none;
    box-sizing: border-box;
    width: 132px;
    padding: 5px 0;
    border-radius: 4px;
    background: #e95377;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.6;
}
.facts .fr_item dd{
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 3px;
    color: #333;
    font-size: 16px;
    line-height: 1.9;
}
.facts .fr_item dd strong{
    color: #cc2b5a;
    font-weight: 700;
}
.facts .fr_sub{
    display: block;
    margin-top: 4px;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.8;
}

/* --- タブレット・スマートフォン ---------------------------------------- */
@media screen and (max-width: 767px){
    .facts{
        padding: 24px 0 5px;
    }
    .facts .facts_hd{
        font-size: 21px;
    }
    .facts .facts_lead{
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.9;
        text-align: left;
    }
    .facts .facts_num{
        flex-wrap: wrap;
        margin-top: 28px;
    }
    .facts .facts_num li{
        flex: 0 0 50%;
        box-sizing: border-box;
        padding: 18px 6px;
    }
    .facts .facts_num li:nth-child(odd){
        border-left: none;
    }
    .facts .facts_num li:nth-child(n+3){
        border-top: 1px solid #e3d5d9;
    }
    .facts .fn_num{
        font-size: 26px;
    }
    .facts .fn_unit{
        font-size: 14px;
    }
    .facts .fn_lbl{
        font-size: 12px;   /* 11px → 12px（2026年8月14日）*/
    }
    .facts .facts_range{
        margin-top: 30px;
        padding: 24px 18px 26px;
    }
    .facts .fr_hd{
        margin-bottom: 16px;
        font-size: 18px;
    }
    .facts .fr_item{
        display: block;
        padding: 14px 0;
    }
    .facts .fr_item dt{
        width: auto;
        max-width: 132px;
        margin-bottom: 8px;
        font-size: 13px;
    }
    .facts .fr_item dd{
        padding-top: 0;
        font-size: 14px;
        line-height: 1.85;
    }
}

/* ==========================================================================
   ヒーロー直下のPR帯（2026年8月13日）

   --------------------------------------------------------------------------
   何を出しているか
   --------------------------------------------------------------------------
   **「事業開始からのご相談 2,000件突破」と「0円（無料）」の2つだけ**です。

   もとは4つの数字タイル（3,000施設／1都3県／2,000件突破／0円）でしたが、
   　・3,000施設・1都3県 … ヒーローの文章と、下の見出しで既に述べている
   　・2,000件突破・0円 … いちばんお伝えしたい2つ
   という整理で、**この2つに絞りました。**

   ★この帯は、2,000件突破と0円が出てくる**唯一の数字表示**です。
   　消す場合は、必ずどこかに書き足してください。

   --------------------------------------------------------------------------
   ★ヒーロー本体（#mainimg）には手を入れていません
   --------------------------------------------------------------------------
   ヒーローは写真の写り方を min-height と background-position で緻密に
   調整してあります（READMEの「★min-height は消さないでください」）。
   中に要素を足すと高さが変わり、相談員の顔の写り方が崩れます。
   **この帯はヒーローの外に、独立した帯として置いています。**

   --------------------------------------------------------------------------
   見た目
   --------------------------------------------------------------------------
   枠で区切った「表」の見え方をやめ、**うすいピンクの帯**にしています。
   ヒーローの下に地続きで乗るので、続きとして読めます。
   ========================================================================== */
/* ★2026年8月13日：横幅を使う形に変えました
   　もとは2つを中央に寄せていたため、**両端に大きな余白**ができていました。
   　　・li を flex:1 にして、幅を2等分（区切り線がちょうど中央に来ます）
   　　・数字とラベルを**横並び**にして、そのぶん縦を詰めました
   　　　（帯の高さ 163px → 約100px）
   　狭い画面（767px以下）では、横並びだと窮屈なので縦積みに戻します。 */
.hero_pr{
    padding: 10px 0 8px;
    background: #fdf2f5;
    font-family: var(--font-base);
}
.hero_pr .hp_list{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* flex:1 で幅を2等分。区切り線は border-left なので、
   ちょうど真ん中に来ます（中央寄せのときのような余りが出ません）。 */
.hero_pr .hp_list li{
    flex: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 18px;
    min-width: 0;
}
.hero_pr .hp_list li + li{
    border-left: 1px solid #f0d3db;
}
.hero_pr .hp_num{
    flex: none;
    color: #cc2b5a;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
}
.hero_pr .hp_unit{
    margin-left: 3px;
    font-size: 16px;
    font-weight: 700;
}
.hero_pr .hp_lbl{
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}
.hero_pr .hp_note{
    margin-top: 6px;
    color: #6e6e6e;
    font-size: 12px;   /* 11px → 12px（2026年8月14日）*/
    line-height: 1.6;
    text-align: center;
}

/* 1024px以下は、ラベルが長いぶん窮屈になるので少し詰めます */
@media screen and (max-width: 1024px) {
    .hero_pr .hp_list li{
        gap: 12px;
    }
    .hero_pr .hp_num{
        font-size: 34px;
    }
    .hero_pr .hp_lbl{
        font-size: 13px;
    }
}
/* スマートフォンでは横並びだと窮屈なので、数字の下にラベルを置きます。
   幅の2等分（flex:1）と中央の区切り線は、そのままです。 */
@media screen and (max-width: 767px) {
    .hero_pr{
        padding: 9px 0 7px;
    }
    .hero_pr .hp_list li{
        display: block;
        gap: 0;
        padding: 0 8px;
        text-align: center;
    }
    .hero_pr .hp_num{
        display: block;
        font-size: 27px;
    }
    .hero_pr .hp_unit{
        font-size: 12px;
    }
    .hero_pr .hp_lbl{
        display: block;
        margin-top: 4px;
        font-size: 12px;   /* 11px → 12px（2026年8月14日）*/
        line-height: 1.5;
        text-align: center;
    }
    .hero_pr .hp_note{
        margin-top: 6px;
        font-size: 10px;
    }
}


/* ==========================================================================
   PR帯の「！」（2026年8月14日）

   「2,000件突破！」「0円！」の感嘆符です。

   ・数字（.hp_num＝36px）と同じ大きさにするため、
   　小さい文字の .hp_unit の外に出しています（index.php）
   ・全角の「！」は文字の左右に余白を持つため、そのままだと
   　「件突破　！」のように離れて見えます。左を少し詰めています
   ========================================================================== */
.hero_pr .hp_ex{
    /* 数字と同じ36pxだと「件突破」に対して大きすぎるため、
       その中間（.66em ＝ 約24px）にしています。
       数字に合わせるなら 1em、「件突破」に合わせるなら .45em です */
    font-size: .66em;
    margin-left: -.14em;
    letter-spacing: 0;
}