@charset "utf-8";
/* ==========================================================================
   top2.css  ―  トップページのブロック（ヒーロー／違い／流れ／声／コラム／Q&A）

   ※既存CSS（reset / common / layout / page / fonts / facts / simbanner）は
   　一切変更していません。このファイルは index.php からのみ読み込みます。

   【ブロックの並びと背景色】
   　縦に長いページなので、白と薄いピンクを交互にして区切りを作っています。
   　白ばかりだと、どこで話が変わったのかが分かりません。

   　　#mainimg   ヒーロー          淡いピンク＋写真1枚
   　　.facts     施設数・中立      白
   　　.why       紹介サイトとの違い ピンク #fdf7f9
   　　.scope     どこまで無料か     白（3ステップの流れ図）
   　　.vfacts    数字とお客様の声   ピンク #fdf2f5（少し濃いほう）
   　　.sim_banner 費用シミュレーション 白地にピンクの枠（simbanner.css）
   　　.topcol    コラム3本          白
   　　.preq      お電話の前のQ&A    ピンク #fdf7f9

   　カードの形も、ブロックごとに変えています
   　（枠つきカード → 番号つきの流れ図 → 引用カード → 記事カード）。
   　同じ形が4回続くと、読むほうは飽きて止まります。

   【色とフォント】
   　配色は既存サイト（#e95377 系）のみで、新しい色は追加していません。
   　フォントはサイト共通の指定（css/fonts.css）に従います。
   　見出しは h1〜h3 を使っているため、自動で丸ゴシックが当たります。
   ========================================================================== */

/* ==========================================================================
   共通の見出し（英字ラベル＋短い罫線＋日本語見出し）
   ========================================================================== */
.t2_tit{
    text-align: center;
}
.t2_tit .t2_en{
    display: block;
    color: #cc2b5a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.t2_tit .t2_en::after{
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin: 12px auto 0;
    background: #e95377;
}
.t2_tit .t2_jp{
    margin-top: 16px;
    color: #111;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.6;
}
.t2_tit .t2_jp span{
    color: #cc2b5a;
}
.t2_tit .t2_note{
    margin: 16px auto 0;
    max-width: 820px;
    color: #555;
    font-size: 15px;
    line-height: 1.95;
}

/* ==========================================================================
   ヒーロー（#mainimg の中身）  ※2026年8月13日に作り直しました

   【前の作り】
   　背景画像 images/top/mainimg.png（イラスト＋四つ葉に切り抜いた写真）を
   　敷き、その上に文字を重ねていました。文字と写真が重ならないよう、
   　文字幅と上下の余白を実測値で固定する必要がありました。

   【いまの作り】
   　・写真 images/top/hero_consult.jpg を背景に敷いています。
   　　相談員の女性が大きく写り、左の男性が半分見切れる位置に寄せてあります。
   　　寄せ方は background-size と background-position の2つで決めています。
   　・その上に白いグラデーション（#mainimg::before）をかけ、
   　　左半分を白く伏せて文字を読ませています。右は写真がそのまま見えます。
   　・読み込む画像は、この写真1枚（193KB）だけです。
   　　前は背景PNGだけでPC 1,267KB／スマホ 579KB でした。

   【触るときの注意】
   　・上の余白 200px は、position:fixed のヘッダー（高さ160px）の下に
   　　見出しを出すための値です。170pxより小さくしないでください。
   　・.hero_b の幅 560px を広げると、白く伏せた範囲から文字がはみ出して
   　　写真の上に乗り、読みにくくなります。
   ========================================================================== */
#mainimg{
    position: relative;
    box-sizing: border-box;
    /* ★文章を上下中央に置いています（2026年8月13日）

       　ヒーローは、写真の顔が切れないように高さが必要です
       　（下の min-height）。一方で文章の量は決まっているため、
       　**余った高さがどこかに空白として残ります。**

       　以前は文章が上端に固定されていたので、余りがすべて
       　**文章の下**にたまり、大きな画面ほど下に大きな空きができていました
       　（1920pxで207px）。

       　display:flex ＋ align-items:center で上下中央に置くことで、
       　余りが上下に分かれ、下だけが極端に空くことがなくなります。

       ★下の余白は74px→40pxにしています。
       　ただし**ヒーローの高さは min-height より小さくなりません。**
       　これ以上詰めても高さは変わらず、余白も減りません。 */
    display: flex;
    align-items: center;
    padding: 200px 0 40px;
    /* ★ヒーローの高さを画面幅に連動させています。これが要です。
       写真は画面幅の230%に拡大しているので、画面が広いほど写真も大きくなります。
       高さが固定だと、そのぶん縦に写る範囲だけが狭くなり、
       大きな画面で相談員の顔が下から切れてしまいます。
       47vw は「顔が切れない最小の高さ」です。小さくしないでください。
       820px は、大きすぎるヒーローにならないための上限です。 */
    min-height: min(47vw, 820px);
    overflow: hidden;
    background: #fdf4f7 url(../images/top/hero_consult.jpg) no-repeat;
    /* 相談員の女性を大きく、左の男性が半分見切れる位置に寄せています。
       1つ目の数字（横）
       　小さくすると → 写真が右へ（女性が文字から離れます）
       　大きくすると → 写真が左へ（女性が文字に近づきます）
       2つ目の数字（縦）
       　小さくすると → 写真が下へ（頭の上の余白が増えます）
       　大きくすると → 写真が上へ（あごの下の余白が増えます） */
    background-size: 230% auto;
    background-position: 24% 37%;
}
/* 写真の上にかける白いグラデーション。左を白く伏せて文字を読ませ、
   右は写真をそのまま見せます。数字を大きくすると白い部分が広がります。 */
#mainimg::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.89) 26%,
        rgba(255,255,255,.74) 42%,
        rgba(255,255,255,.30) 58%,
        rgba(255,255,255,0) 74%);
}
#mainimg .inner{
    z-index: 1;
    position: relative;
    box-sizing: border-box;
    padding: 0 20px;
    /* 親が flex になったので、幅いっぱいに広がるよう指定します
       （これがないと、中身の幅だけに縮んで左に寄ります） */
    width: 100%;
}
.hero_b{
    max-width: 560px;
}

.hero_b .hero_h1{
    color: #111;
    font-size: clamp(32px, 3.9vw, 52px);
    font-weight: 500;
    line-height: 1.38;
    letter-spacing: .01em;
}
.hero_b .hero_lead{
    margin-top: 26px;
    color: #333;
    font-size: 19px;
    line-height: 1.95;
}
.hero_b .hero_lead strong{
    color: #cc2b5a;
    font-weight: 700;
    /* 「中立の立場」「何度でも無料」が行またぎで割れないようにします */
    white-space: nowrap;
}

/* --- ボタン2つ --- */
.hero_b .hero_cta{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
}
.hero_b .hero_cta a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    transition: opacity .2s, background-color .2s;
}
.hero_b .hc_form{
    padding: 15px 26px;
    background: #e95377;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.hero_b .hc_form:hover{
    opacity: .8;
}
.hero_b .hc_tel{
    padding: 9px 20px;
    border: 1px solid #e95377;
    background: #fff;
    color: #cc2b5a;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
}
.hero_b .hc_tel span{
    display: block;
    margin-top: 2px;
    color: #6e6e6e;
    font-size: 12px;   /* 11.5px → 12px（2026年8月14日）*/
    font-weight: 400;
    line-height: 1.5;
}
.hero_b .hc_tel:hover{
    background: #fdf2f5;
}
.hero_b .hero_sim{
    margin-top: 18px;
    color: #6e6e6e;
    /* 2026年8月14日：14px → 16px。
       すぐ上のリード文が19pxで、そこから14pxは落差が大きく、
       費用シミュレーションへの導線が目に入りにくいためです。
       リード文より小さい、という関係は保っています。 */
    font-size: 16px;
    line-height: 1.8;
}
.hero_b .hero_sim a{
    border-bottom: 1px solid #f0d3db;
    color: #cc2b5a;
    font-weight: 700;
    text-decoration: none;
}
.hero_b .hero_sim a:hover{
    border-bottom-color: #e95377;
}

/* --- タブレット・小さいノートPC（1023px以下） ---------------------------
   横幅が足りず、文章側が狭くなって「無料で相談する」と電話番号の
   ボタンが2段に折り返してしまうため、この幅からは1列にします。
   写真を上、文章を下に置きます。
   ※スマートフォン用（767px以下）の指定は、このファイルのいちばん下に
   　まとめてあります。あちらが後に書いてあるので、そちらが優先されます。
   -------------------------------------------------------------------- */
@media screen and (max-width: 1023px){
    #mainimg{
        /* 2026年8月13日：下の余白 60px→40px */
        padding: 190px 0 40px;
        min-height: 0;
        background-size: 230% auto;
        background-position: 27% 35%;
    }
    #mainimg::before{
        background: linear-gradient(100deg,
            rgba(255,255,255,.93) 0%,
            rgba(255,255,255,.90) 30%,
            rgba(255,255,255,.76) 48%,
            rgba(255,255,255,.26) 66%,
            rgba(255,255,255,0) 82%);
    }
    .hero_b{
        max-width: 470px;
    }
}

/* ==========================================================================
   .why  紹介サイトとの違い（ピンク地）

   facts が「どれだけの選択肢から選べるか」なので、
   こちらは「誰が選ぶのか」を担当するブロックです。
   ========================================================================== */
.why{
    padding: 64px 0 68px;   /* 2026-08-13: 90/96 から圧縮 */
    background: #fdf7f9;
    font-family: var(--font-base);
}
.why .why_list{
    display: flex;
    gap: 20px;
    margin-top: 40px;
    padding: 0;
    list-style: none;
}
.why .why_list li{
    box-sizing: border-box;
    flex: 1 1 0;
    padding: 28px 24px 30px;
    border: 1px solid #f0d3db;
    border-radius: 10px;
    background: #fff;
}
.why .why_ico{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #fdf2f5;
}
.why .why_ico svg{
    display: block;
}
.why .why_hd{
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}
.why .why_txt{
    margin-top: 12px;
    color: #555;
    font-size: 14px;
    line-height: 1.9;
}
.why .why_txt strong{
    color: #cc2b5a;
    font-weight: 700;
}

/* --- 相談員（ランダムに2名） ------------------------------------------- */
.why_staff{
    margin-top: 26px;
    padding: 28px 30px 26px;
    border: 1px solid #f0d3db;
    border-radius: 10px;
    background: #fff;
}
.why_staff .ws_hd{
    color: #111;
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    text-align: center;
}
.why_staff .ws_list{
    display: flex;
    gap: 20px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.why_staff .ws_list li{
    flex: 1 1 0;
    min-width: 0;
}
.why_staff .ws_list a{
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-sizing: border-box;
    height: 100%;
    padding: 16px 18px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}
.why_staff .ws_list a:hover{
    border-color: #f0d3db;
    background: #fdf7f9;
}
/* 顔写真（イラスト）は120×160pxの縦長です。円形に切ると頭が欠けるため、
   元の比率のまま角丸の長方形で表示しています。 */
.why_staff .ws_photo{
    flex: none;
    width: 66px;
    height: 88px;
    overflow: hidden;
    border-radius: 6px;
    background: #fdf2f5;
}
.why_staff .ws_photo img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.why_staff .ws_body{
    display: block;
    min-width: 0;
}
.why_staff .ws_name{
    display: block;
    color: #111;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}
.why_staff .ws_lic{
    display: block;
    margin-top: 4px;
    color: #6e6e6e;
    font-size: 12px;   /* 11.5px → 12px（2026年8月14日）*/
    line-height: 1.6;
}
.why_staff .ws_catch{
    display: block;
    margin-top: 8px;
    color: #555;
    font-size: 13px;
    line-height: 1.85;
}
.why_staff .ws_more{
    margin-top: 20px;
    text-align: center;
}
.why_staff .ws_more a{
    display: inline-block;
    padding: 11px 36px;
    border: 1px solid #e95377;
    border-radius: 999px;
    color: #cc2b5a;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s;
}
.why_staff .ws_more a:hover{
    background: #fdf2f5;
}

/* ==========================================================================
   .scope  どこまで無料でやるのか（白地・3ステップの流れ図）

   ここは実際に順番のある話（探す → 見学 → 決める）なので、
   番号を振っています。順番のないものに番号を振ると意味が濁ります。
   ========================================================================== */
.scope{
    padding: 68px 0 70px;   /* 2026-08-13: 96/100 から圧縮 */
    font-family: var(--font-base);
}
.scope .scope_flow{
    display: flex;
    gap: 0;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
}
.scope .scope_flow li{
    position: relative;
    box-sizing: border-box;
    flex: 1 1 0;
    padding: 0 26px;
    text-align: center;
}
/* ステップをつなぐ縦の区切り線 */
.scope .scope_flow li + li::before{
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 1px;
    background: #f0d3db;
}
.scope .sf_no{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border: 2px solid #e95377;
    border-radius: 50%;
    color: #cc2b5a;
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}
.scope .sf_lbl{
    display: block;
    margin-bottom: 3px;
    font-size: 12px;   /* 10px → 12px（2026年8月14日）*/
    font-weight: 700;
    letter-spacing: .14em;
}
.scope .sf_hd{
    margin-top: 18px;
    color: #111;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
}
.scope .sf_txt{
    margin-top: 12px;
    color: #555;
    font-size: 14px;
    line-height: 1.95;
    text-align: left;
}
.scope .sf_txt strong{
    color: #cc2b5a;
    font-weight: 700;
}
.scope .scope_more{
    margin-top: 40px;
    text-align: center;
}
.scope .scope_more a{
    display: inline-block;
    padding: 13px 44px;
    border: 1px solid #e95377;
    border-radius: 999px;
    color: #cc2b5a;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s;
}
.scope .scope_more a:hover{
    background: #fdf2f5;
}

/* ==========================================================================
   .vfacts  アンケートの数字とお客様の声（濃いめのピンク地）

   ページ全体でいちばん数字を大きく見せる場所です。
   数字は voice/index.php の集計値と同じもの。回答が増えたときは、
   voice ページとここの両方を直してください。
   ========================================================================== */
.vfacts{
    padding: 64px 0 68px;   /* 2026-08-13: 90/96 から圧縮 */
    background: #fdf2f5;
    font-family: var(--font-base);
}
/* アンケートの3つの数字。
   「何を聞いたか（.vn_q）→ 結果（.vn_num）→ 何名中何名か（.vn_lbl）
   　→ 補足（.vn_sup）」の順に、上から読めるように積んでいます。 */
.vfacts .vf_lead{
    margin: 34px 0 0;
    color: #555;
    font-size: 15px;
    line-height: 1.9;
    text-align: center;
}
.vfacts .vf_lead strong{
    color: #c73b5d;
    font-weight: 700;
}
.vfacts .vf_num{
    display: flex;
    margin: 14px 0 0;
    padding: 0;
    border: 1px solid #e3d5d9;
    border-radius: 10px;
    background: #fff;
    list-style: none;
}
.vfacts .vf_num li{
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    padding: 26px 20px 24px;
    border-left: 1px solid #e3d5d9;
    text-align: center;
}
.vfacts .vf_num li:first-child{
    border-left: none;
}
.vfacts .vn_q{
    /* 質問が1行の枠と2行の枠が混ざっても数字の高さがそろうよう、
       2行ぶんの高さを確保して、その中で上下中央に置いています。 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.4em;
    color: #444;
    font-family: var(--font-head);
    font-size: 15px;
    line-height: 1.7;
}
.vfacts .vn_num{
    display: block;
    margin-top: 4px;
    color: #cc2b5a;
    font-family: var(--font-head);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.vfacts .vn_unit{
    margin-left: 2px;
    font-size: 22px;
}
.vfacts .vn_lbl{
    display: inline-block;
    margin: 10px auto 0;
    padding: 3px 14px;
    border-radius: 999px;
    background: #fdf2f5;
    color: #c73b5d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}
.vfacts .vn_sup{
    display: block;
    margin-top: 10px;
    color: #6e6e6e;
    font-size: 12.5px;
    line-height: 1.75;
}
.vfacts .vf_note{
    margin-top: 16px;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.9;
    text-align: center;
}

/* --- お客様の声 3件 ---------------------------------------------------- */
.vfacts .vf_cards{
    display: flex;
    gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}
.vfacts .vf_cards li{
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1 1 0;
    padding: 26px 24px 26px;
    border-radius: 10px;
    background: #fff;
}
/* 引用であることが分かるように、うすい鉤括弧を敷く */
.vfacts .vf_cards li::before{
    content: "\201C";
    position: absolute;
    top: 6px;
    right: 18px;
    color: #fbdde5;
    font-family: Georgia, serif;
    font-size: 64px;
    line-height: 1;
}
.vfacts .vc_score{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    color: #cc2b5a;
    font-family: var(--font-head);
    font-weight: 700;
}
.vfacts .vs_lbl{
    margin-right: 9px;
    color: #6e6e6e;
    font-size: 12px;
    font-weight: 400;
}
.vfacts .vc_score strong{
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
}
.vfacts .vs_max{
    font-size: 14px;
}
.vfacts .vs_of{
    color: #6e6e6e;
    font-size: 12px;
    font-weight: 400;
}
.vfacts .vc_hd{
    margin-top: 12px;
    color: #111;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
}
.vfacts .vc_txt{
    flex: 1 1 auto;
    margin-top: 12px;
    color: #555;
    font-size: 13.5px;
    line-height: 1.95;
}
.vfacts .vc_tag{
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #f0d3db;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.7;
}
.vfacts .vf_more{
    margin-top: 36px;
    text-align: center;
}
.vfacts .vf_more a{
    display: inline-block;
    padding: 13px 44px;
    border: 1px solid #e95377;
    border-radius: 999px;
    background: #fff;
    color: #cc2b5a;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s;
}
.vfacts .vf_more a:hover{
    background: #fdf2f5;
}

/* ==========================================================================
   .topcol  コラム3本（白地）

   コラム一覧（column/index.php）のカードとは別のスタイルです。
   column.css をトップで読み込まずに済むよう、ここに書いています。
   記事を差し替えるときは、index.php の3つの <li> を書き換えてください。
   ========================================================================== */
.topcol{
    padding: 68px 0 70px;   /* 2026-08-13: 96/100 から圧縮 */
    font-family: var(--font-base);
}
.topcol .tc_list{
    display: flex;
    gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}
.topcol .tc_list li{
    display: flex;
    box-sizing: border-box;
    flex: 1 1 0;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.topcol .tc_list li:hover{
    border-color: #f0d3db;
    box-shadow: 0 6px 20px -12px rgba(233, 83, 119, .5);
}
.topcol .tc_list a{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    padding: 24px 24px 26px;
    text-decoration: none;
}
.topcol .tc_cat{
    display: inline-block;
    align-self: flex-start;
    padding: 3px 12px;
    border-radius: 999px;
    background: #fdf2f5;
    color: #c73b5d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
}
.topcol .tc_hd{
    margin-top: 14px;
    color: #111;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
}
.topcol .tc_txt{
    flex: 1 1 auto;
    margin-top: 10px;
    color: #555;
    font-size: 13.5px;
    line-height: 1.9;
}
.topcol .tc_more{
    margin-top: 16px;
    color: #cc2b5a;
    font-size: 13px;
    font-weight: 700;
}
.topcol .tc_all{
    margin-top: 36px;
    text-align: center;
}
.topcol .tc_all a{
    display: inline-block;
    padding: 13px 44px;
    border: 1px solid #e95377;
    border-radius: 999px;
    color: #cc2b5a;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s;
}
.topcol .tc_all a:hover{
    background: #fdf2f5;
}

/* ==========================================================================
   .preq  お電話の前のQ&A（ピンク地）

   「無料の理由」は、よくある質問のページではなく
   お問い合わせブロックの直前で答えます。
   ========================================================================== */
.preq{
    padding: 64px 0 68px;   /* 2026-08-13: 90/96 から圧縮 */
    background: #fdf7f9;
    font-family: var(--font-base);
}
.preq .preq_list{
    max-width: 860px;
    margin: 36px auto 0;
    padding: 8px 34px 10px;
    border-radius: 10px;
    background: #fff;
}
.preq .preq_list dt{
    display: flex;
    gap: 12px;
    padding-top: 22px;
    color: #111;
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.7;
}
.preq .preq_list dt::before{
    content: "Q";
    flex: none;
    color: #cc2b5a;
    font-size: 18px;
    line-height: 1.6;
}
.preq .preq_list dd{
    margin: 8px 0 0;
    padding: 0 0 22px 29px;
    border-bottom: 1px solid #f0d3db;
    color: #555;
    font-size: 14.5px;
    line-height: 1.95;
}
.preq .preq_list dd:last-of-type{
    border-bottom: none;
}
.preq .preq_more{
    margin-top: 36px;
    text-align: center;
}
.preq .preq_more a{
    display: inline-block;
    padding: 13px 44px;
    border: 1px solid #e95377;
    border-radius: 999px;
    background: #fff;
    color: #cc2b5a;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s;
}
.preq .preq_more a:hover{
    background: #fdf2f5;
}

/* ==========================================================================
   タブレット

   .inner は幅1000px。767px以下では layout.css が左右10pxの余白を付けますが、
   768〜1000px の間は余白がなく、文字が画面の端に付いてしまいます
   （サイト全体にある以前からの性質です）。ここでは、このファイルで
   追加したブロックにだけ左右の余白を足しています。
   ========================================================================== */
@media screen and (max-width: 1040px){
    .why .inner,
    .scope .inner,
    .vfacts .inner,
    .topcol .inner,
    .preq .inner{
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* 横に3つ並べると窮屈になる幅から、縦積みにする */
@media screen and (max-width: 900px){

    .why .why_list,
    .why_staff .ws_list,
    .vfacts .vf_cards,
    .topcol .tc_list{
        flex-wrap: wrap;
    }
    .why .why_list li,
    .why_staff .ws_list li,
    .vfacts .vf_cards li,
    .topcol .tc_list li{
        flex: 1 1 100%;
    }
    /* 流れ図は縦並びにして、区切り線も横向きに変える */
    .scope .scope_flow{
        flex-direction: column;
        gap: 0;
    }
    .scope .scope_flow li{
        display: grid;
        grid-template-columns: 76px 1fr;
        gap: 4px 20px;
        padding: 24px 0;
        text-align: left;
    }
    .scope .scope_flow li + li::before{
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 1px;
    }
    .scope .sf_no{
        grid-row: span 2;
    }
    .scope .sf_hd{
        margin-top: 6px;
    }
}

/* ==========================================================================
   スマートフォン

   ・ヒーローは背景画像が上に来る（layout.css の指定）ため、
   　文字幅の制限を外して全幅で表示します。
   ・電話ボタンとフォームボタンは縦に並べます。
   ========================================================================== */
@media screen and (max-width: 767px){
    /* ヒーロー：写真は上のほう、文字は白く伏せた下のほうに置きます。
       #mainimg には layout.css で margin-top: 80px（固定ヘッダーの高さ分）が
       付いています。上の余白190pxが、写真だけが見えている高さになります。 */
    /* 縦の位置と白くする範囲は px で指定しています。
       ％にすると、文章の量でヒーローの高さが変わったときに
       写真の写り方までずれてしまうためです。
       -246px は、相談員の女性の顔が上の帯の中央に来る値です。 */
    #mainimg{
        padding: 236px 10px 34px;
        background-size: 1020px auto;
        /* 横位置：2026年8月14日に 49% → 44%。
           相談員の女性がほぼ中央にいたため、少し右へ寄せました。
           数値を下げるほど右へ動きます。ただし40%を切ると、左に写る
           別の相談者の後頭部が目立ってくるので、ここが目安です。 */
        background-position: 44% -228px;
    }
    #mainimg::before{
        background: linear-gradient(180deg,
            rgba(255,255,255,0) 0px,
            rgba(255,255,255,.06) 150px,
            rgba(255,255,255,.65) 205px,
            rgba(255,255,255,.96) 258px,
            #fff 330px);
    }
    #mainimg .inner{
        padding: 0;
    }
    .hero_b{
        max-width: none;
    }
    .hero_b .hero_h1{
        font-size: 28px;
    }
    .hero_b .hero_lead{
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.9;
    }
    .hero_b .hero_cta{
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
    .hero_b .hero_cta a{
        width: 100%;
    }
    .hero_b .hc_form{
        padding: 15px 20px;
    }
    .hero_b .hc_tel{
        padding: 10px 20px;
    }
    .hero_b .hero_sim{
        margin-top: 14px;
        font-size: 14px;   /* 2026年8月14日：13px → 14px */
    }

    .t2_tit .t2_en::after{
        margin-top: 10px;
    }
    .t2_tit .t2_jp{
        margin-top: 12px;
        font-size: 22px;
    }
    .t2_tit .t2_note{
        font-size: 14px;
        line-height: 1.9;
        text-align: left;
    }

    .why,
    .vfacts,
    .preq{
        padding: 40px 0 42px;   /* 2026-08-13: 52/56 から圧縮 */
    }
    .scope,
    .topcol{
        padding: 40px 0 42px;   /* 2026-08-13: 52/56 から圧縮 */
    }
    .why .why_list,
    .why_staff .ws_list,
    .vfacts .vf_cards,
    .topcol .tc_list{
        gap: 14px;
        margin-top: 26px;
    }
    .why .why_list li{
        padding: 22px 18px 24px;
    }
    .why .why_ico{
        width: 46px;
        height: 46px;
        margin-bottom: 14px;
    }
    .why .why_hd{
        font-size: 17px;
    }
    .why .why_txt{
        font-size: 13.5px;
    }

    .why_staff{
        margin-top: 20px;
        padding: 22px 16px 20px;
    }
    .why_staff .ws_hd{
        font-size: 15.5px;
    }
    .why_staff .ws_list a{
        gap: 14px;
        padding: 14px 14px;
    }
    .why_staff .ws_photo{
        width: 60px;
        height: 80px;
    }
    .why_staff .ws_name{
        font-size: 15px;
    }

    .scope .scope_flow{
        margin-top: 26px;
    }
    .scope .scope_flow li{
        grid-template-columns: 60px 1fr;
        gap: 2px 16px;
        padding: 20px 0;
    }
    .scope .sf_no{
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    .scope .sf_hd{
        margin-top: 4px;
        font-size: 17px;
    }
    .scope .sf_txt{
        font-size: 13.5px;
    }
    .scope .scope_more{
        margin-top: 28px;
    }

    .vfacts .vf_lead{
        margin-top: 24px;
        font-size: 14px;
        text-align: left;
    }
    .vfacts .vf_num{
        flex-wrap: wrap;
        margin-top: 12px;
    }
    .vfacts .vf_num li{
        box-sizing: border-box;
        flex: 1 1 100%;
        padding: 18px 14px 20px;
        border-left: none;
    }
    .vfacts .vf_num li + li{
        border-top: 1px solid #e3d5d9;
    }
    .vfacts .vn_q{
        display: block;  /* スマホは1列なので、高さをそろえる必要がありません */
        min-height: 0;
        font-size: 14px;
    }
    .vfacts .vn_num{
        font-size: 38px;
    }
    .vfacts .vn_unit{
        font-size: 18px;
    }
    .vfacts .vn_lbl{
        margin-top: 8px;
        font-size: 12.5px;
    }
    .vfacts .vn_sup{
        margin-top: 8px;
        font-size: 12px;
    }
    .vfacts .vf_note{
        text-align: left;
    }
    .vfacts .vf_cards li{
        padding: 22px 18px;
    }
    .vfacts .vc_hd{
        font-size: 15.5px;
    }
    .vfacts .vc_txt{
        font-size: 13px;
    }

    .topcol .tc_list a{
        padding: 20px 18px 22px;
    }
    .topcol .tc_hd{
        font-size: 15.5px;
    }

    .preq .preq_list{
        margin-top: 26px;
        padding: 4px 18px 6px;
    }
    .preq .preq_list dt{
        font-size: 15.5px;
    }
    .preq .preq_list dd{
        padding-left: 26px;
        font-size: 13.5px;
    }

    .why_staff .ws_more a,
    .scope .scope_more a,
    .vfacts .vf_more a,
    .topcol .tc_all a,
    .preq .preq_more a{
        display: block;
        padding: 13px 20px;
        font-size: 14px;
    }
}


/* ==========================================================================
   トップの「お役立ちコンテンツ」（2026年8月14日）

   コラムがトップで目立たなかったため、この節だけ地色を敷きました。
   ・地色  クリーム #fff7ee  … ほかページの「お役立ちコンテンツ」バナー
   　　　　（css/colbanner.css）と同じ色です
   ・札    ピンクの「お役立ちコンテンツ」（英字の Column と入れ替え）
   ・ボタン 白抜き → ピンクの塗り（バナーと同じ）

   ★前後との色の並びは、上から
   　　費用シミュレーション（ピンクの箱 #fdf0f4）
   　　→ コラム（クリームの帯 #fff7ee）      ←ここ
   　　→ お電話の前のQ&A（うすいピンク #fdf7f9）
   　になります。同系色が続かないよう、クリームを選んでいます。

   ★元に戻すときは、この節をまるごと消し、index.php の
   　<p class="tc_label"> を <span class="t2_en">Column</span> に戻してください。
   ========================================================================== */
.topcol{
    background: #fff7ee;
}

/* 「お役立ちコンテンツ」の札。ほかページのバナーの .cb_label と同じ形です */
.topcol .t2_tit .tc_label{
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 14px;
    border-radius: 4px;
    background: #e95377;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
}

/* 「コラムをすべて見る」を塗りボタンに（バナーと同じ） */
.topcol .tc_all a{
    border-color: #e95377;
    background: #e95377;
    color: #fff;
}
.topcol .tc_all a:hover{
    border-color: #cc2b5a;
    background: #cc2b5a;
    color: #fff;
}

@media screen and (max-width: 767px){
    .topcol .t2_tit .tc_label{
        margin-bottom: 10px;
        padding: 3px 12px;
        font-size: 12px;
    }
}

/* ==========================================================================
   ヒーローの2つ目のボタン（2026年8月14日）

   もとは電話番号のボタン（.hc_tel）でしたが、コラムへの入口
   （お役立ちコンテンツ／介護と住まいのコラム）に変更しました。
   電話番号は、ヘッダー右上と、ページ下部の「ご相談無料」に残っています。

   見た目は .hc_tel と同じ「白地＋ピンクの枠」です。左の
   「無料で相談する（1分）」（ピンクの塗り）が主役、こちらが副という
   関係は変えていません。

   ★.hc_tel の指定は消していません。電話番号のボタンに戻したくなったら、
   　index.php の <a class="hc_col"> を元の <a class="hc_tel"> に戻すだけで、
   　そのまま効きます。
   ========================================================================== */
.hero_b .hc_col{
    padding: 9px 22px;
    border: 1px solid #e95377;
    background: #fff;
    color: #cc2b5a;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .02em;
}
.hero_b .hc_col span{
    display: block;
    margin-bottom: 1px;
    color: #6e6e6e;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
}
.hero_b .hc_col:hover{
    background: #fdf2f5;
}

@media screen and (max-width: 767px){
    .hero_b .hc_col{
        padding: 10px 20px;
        font-size: 16px;
    }
}