/* ==========================================================
   来場予約・お問い合わせの枠（inc/lp-cta.php）
   物件ページ v2 とトップページで共通。旧テンプレートは読み込まず、css/lp.css の元の見た目のまま
   物件ページでは css/lp.css も読み込まれるため、同じセレクタで上書きしている（lp.css より後に読み込む）
   .cta--dark は暗い背景用（物件ページの最後の枠、トップページの締め）
   ========================================================== */
.cta{background:var(--white,#fff)}
.cta .inner{width:min(100% - 48px,1000px);max-width:none;margin:0 auto;padding:56px 0}
.cta .tit{position:relative;margin:0 0 25px}
.cta .tit::before,.cta .tit::after{content:'';display:block;position:absolute}
.cta .tit::before{left:0;top:50%;z-index:1;width:100%;height:1px;background:var(--line,#d8d8d2)}
.cta .tit::after{left:50%;top:50%;z-index:2;width:calc(100% - 180px);height:3px;background:var(--white,#fff);transform:translate(-50%,-50%)}
.cta .tit h3{position:relative;z-index:3;margin:0;color:var(--ink,#111211);font-family:var(--font-serif);font-size:clamp(16px,2.1vw,26px);font-weight:500;line-height:1.6;letter-spacing:.06em;text-align:center}
.cta .tit h3::before{content:'';display:inline-block;width:84px;height:62px;vertical-align:middle;background:url('/img/lp/icn-amazon.png') no-repeat 50% 50%/100% auto}
.cta .tit h3 span{display:inline-block;padding-left:10px;vertical-align:middle}
.cta .tit h3 br{display:none}
.cta .btn{margin:0 0 25px;background:transparent}
.cta .btn a{position:relative;display:block;padding:30px 0 28px;background:var(--ink,#111211);color:#fff;line-height:1.2;text-align:center;text-decoration:none;transition:.3s cubic-bezier(.39,.575,.565,1)}
.cta .btn a span{display:block;font-family:var(--font-serif);font-size:clamp(17px,1.6vw,22px);font-weight:500;line-height:1.4;letter-spacing:.12em}
.cta .btn a span.eng{margin-bottom:10px;color:var(--sand,#c8bb91);font-family:var(--font-en,'Montserrat',sans-serif);font-size:.78rem;font-weight:700;line-height:1.2;letter-spacing:.3em;text-transform:uppercase}
.cta .btn a::after{content:'';display:block;position:absolute;right:40px;top:0;width:52px;height:100%;background:url('/img/lp/arw.svg') no-repeat 50% 50%/100% auto;transition:.3s cubic-bezier(.39,.575,.565,1)}
.cta .btn a:hover{opacity:1}
.cta .btn a:hover::after{transform:translateX(10px)}
.cta .btn a:focus-visible{outline:2px solid var(--accent,#7bd100);outline-offset:3px}
/* ワンポイントの色（#7bd100）: マウスを重ねると、ボタンの文字の下に短い線が伸びる。背景の色は変えない */
.cta .btn a span:not(.eng){position:relative}
.cta .btn a span:not(.eng)::after{content:'';position:absolute;left:50%;bottom:-9px;width:56px;height:2px;margin-left:-28px;background:var(--accent,#7bd100);transform:scaleX(0);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.cta .btn a:hover span:not(.eng)::after,.cta .btn a:focus-visible span:not(.eng)::after{transform:scaleX(1)}
.cta .tel{text-align:center}
.cta .tel p{margin:0;font-weight:500;line-height:1.6;letter-spacing:.1rem;text-align:center}
.cta .tel p.txt{display:inline-block;padding-bottom:10px;border-bottom:1px solid var(--accent,#7bd100);color:var(--ink,#111211);font-family:var(--font-serif);font-size:15px}
.cta .tel p.telno{font-family:var(--font-en,'Montserrat',sans-serif);font-size:30px;font-weight:600;letter-spacing:.12em}
.cta .tel p.telno a{color:var(--ink,#111211);text-decoration:none;pointer-events:none}

/* 暗い背景用 */
.cta--dark{background:var(--ink,#111211)}
.cta--dark .inner{padding:72px 0 64px}
.cta--dark .tit::before{background:rgba(255,255,255,.2)}
.cta--dark .tit::after{background:var(--ink,#111211)}
.cta--dark .tit h3,.cta--dark .tel p.txt,.cta--dark .tel p.telno a{color:#fff}
.cta--dark .btn a{background:#fff;color:var(--ink,#111211)}
.cta--dark .btn a span.eng{color:var(--green-dark,#4b513d)}
.cta--dark .btn a::after{filter:invert(1)}

@media (max-width:801px){
  .cta .tit h3{font-size:18px}
  .cta .tit h3::before{width:64px;height:48px}
  .cta .tit h3 br{display:block}
  .cta .tit h3 span{text-align:left}
}
@media (max-width:800px){
  .cta .inner{padding:40px 0}
  .cta--dark .inner{padding:52px 0 48px}
  .cta .btn a{padding:22px 0 20px}
  .cta .btn a::after{width:40px;right:22px}
}
@media (max-width:481px){
  .cta .tit{margin-bottom:12px}
  .cta .tit::after{width:calc(100% - 60px)}
  .cta .tit h3{font-size:14px}
  .cta .tit h3::before{width:40px;height:32px}
  .cta .btn{margin-bottom:15px}
  .cta .tel p.txt{padding-bottom:6px;font-size:12px}
  .cta .tel p.telno{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .cta .btn a,.cta .btn a::after,.cta .btn a span:not(.eng)::after{transition:none}
}