@charset "UTF-8";
/* ==========================================================================
   相談枠の下の「住まいるへのご相談の流れ」（2026年11月5日）

   施設探しの記事（「施設の選び方」の記事）の .inline_cta のすぐ下に置く .cta_next の見た目です。
   GA4（8/18〜11/4）で、問い合わせた方はご相談方法・ご利用の流れ・相談員紹介を見ている割合が高く、
   記事の本文からそれらのページへのリンクが無かったため、相談したあとの進み方を先に見せています。
   大宮さんが3案から案A（写真＋3つの段）を選択。見本を見て「写真はもう少し引きで」「こう進みますの表現を適切に」＝
   写真を引きのカットに替え、見出しを「はじめての方へ／住まいるへのご相談の流れ」にしました。

   ★このファイルは .cta_next を置いた記事の head でだけ読み込みます（column.css には足していません。
   　古い column.css がブラウザに残っていても、新しい部品が崩れないようにするためです）。
   ★記事の箇条書き（column.css の .article_body ol/ul li:before の番号・点）を、この中だけ打ち消しています。
   ★写真はパソコン＝images/column/photo/cta-consult.jpg（縦長・トップの hero_consult.jpg から、机でタブレットを持つところまで）、
   　スマホ＝cta-consult-sp.jpg（横長・相談者の横顔まで入る別カット）。どちらも右の女性は入れない。
   ========================================================================== */

/* 記事の箇条書きの番号・点を打ち消す */
#column .article_body .cta_next li{padding-left:0;margin-top:0;font-size:inherit;line-height:inherit}
#column .article_body .cta_next li::before{content:none;display:none}
#column .article_body .cta_next ol,
#column .article_body .cta_next ul{counter-reset:none}

/* 枠 */
#column .cta_next{
    display:grid;grid-template-columns:40% 1fr;
    margin:-26px 0 50px;
    border:1px solid #f3d6df;border-top:0;border-radius:0 0 10px 10px;
    overflow:hidden;background:#fff;
    box-shadow:0 10px 28px rgba(190,60,100,.08);
}
#column .cta_next .cn_photo{position:relative;margin:0}
#column .cta_next .cn_photo picture{display:block;height:100%}
#column .cta_next .cn_photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:45% 40%}
#column .cta_next .cn_photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 70%,rgba(255,255,255,.9) 100%)}
#column .cta_next .cn_body{padding:30px 34px 30px 26px}
#column .cta_next .cn_eyebrow{margin:0 0 6px;color:#D94F76;font-size:13px;font-weight:700;letter-spacing:.12em}
#column .cta_next .cn_tit{margin:0 0 18px;font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1.5;text-wrap:balance}

/* 3つの段（数字は武蔵小杉の POP で選ばれた塗りの札と同じ作り） */
#column .cta_next .cn_steps{position:relative;margin:0 0 16px;padding:0;list-style:none}
#column .cta_next .cn_steps li{position:relative;display:grid;grid-template-columns:34px 1fr;column-gap:14px;padding:0 0 16px}
#column .cta_next .cn_steps li:not(:last-child)::after{content:"";position:absolute;left:16px;top:38px;bottom:4px;width:2px;border-radius:2px;background:linear-gradient(#f2b3c4,#f7d9e2)}
#column .cta_next .cn_no{
    grid-row:1 / span 2;
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:28%;
    background:radial-gradient(90% 90% at 25% 15%,rgba(255,255,255,.38),rgba(255,255,255,0) 55%),linear-gradient(150deg,#EA7896 0%,#D94F76 55%,#C23F66 100%);
    box-shadow:0 .25em .6em rgba(190,60,100,.28),inset 0 -.14em 0 rgba(120,20,60,.18);
    color:#fff;font-family:"Inter",var(--font-head);font-size:17px;font-weight:700;line-height:1;
}
#column .cta_next .cn_st{margin:4px 0 4px;font-size:16px;font-weight:700;line-height:1.5}
#column .cta_next .cn_sx{margin:0;color:#555;font-size:14px;line-height:1.8}
#column .cta_next .cn_sx a{color:#C23F66;font-weight:700}

/* 費用の一文とリンク */
#column .cta_next .cn_free{margin:0 0 18px;padding:10px 14px;border-radius:6px;background:#fdf0f4;color:#B8385E;font-size:14px;font-weight:700;line-height:1.6}
#column .cta_next .cn_links{display:flex;flex-wrap:wrap;gap:10px;margin:0}
#column .cta_next .cn_links a{
    flex:1 1 0;min-width:0;
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:12px 14px;border:1.5px solid #e9809a;border-radius:30px;background:#fff;
    color:#C23F66;font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;white-space:nowrap;
}
#column .cta_next .cn_links a::after{content:"";width:7px;height:7px;margin-left:2px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
#column .cta_next .cn_links a:hover{background:#fdf0f4}
#column .cta_next a:focus-visible{outline:2px solid #C23F66;outline-offset:2px}

@media screen and (max-width: 767px){
    #column .cta_next{display:block;margin:-18px 0 30px}
    #column .cta_next .cn_photo{aspect-ratio:16 / 9}
    #column .cta_next .cn_photo img{object-position:50% 50%}
    #column .cta_next .cn_photo::after{background:linear-gradient(180deg,rgba(255,255,255,0) 72%,rgba(255,255,255,.95) 100%)}
    #column .cta_next .cn_body{padding:4px 18px 22px}
    #column .cta_next .cn_tit{margin-bottom:16px;font-size:17px}
    #column .cta_next .cn_st{font-size:15px}
    #column .cta_next .cn_sx{font-size:13.5px}
    #column .cta_next .cn_free{font-size:13.5px}
    #column .cta_next .cn_links a{padding:12px 8px;font-size:13.5px}
}