@charset "UTF-8";
/* ============================================================
   lp.css - フォトリミCONNECT 紹介ページ（index.html）
   全面キービジュアル＋巨大タイポ。文字量は最小限。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap');

:root{
    --navy:      #10233d;
    --navy-deep: #071426;
    --blue:      #2b6cb0;
    --blue-lt:   #5aa0e8;
    --sky:       #c6ddf1;
    --sky-bg:    #eef3f9;
    --green:     #4db421;   /* フォトリミ本体サイトのアクセント（お試し導線） */
    --green-dk:  #3d9019;
    --text:      #14181c;
    --text-sub:  #5d666d;
    --text-mute: #97a0a8;
    --line:      #e2e6ea;
    --head-h:    62px;
    --wrap:      1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
    margin:0; background:#fff; color:var(--text);
    font-family:"Zen Kaku Gothic Antique","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p,dl,dd,dt,figure{ margin:0; }
section{ scroll-margin-top:var(--head-h); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.forsmt{ display:none; }

/* 英字ラベル */
.en{
    font-family:"Barlow Condensed",sans-serif; font-weight:600;
    letter-spacing:.24em; font-size:14px; line-height:1;
}

/* ============ ヘッダー ============ */
.lp-head{
    position:fixed; top:0; left:0; right:0; z-index:100; height:var(--head-h);
    display:flex; align-items:center;
    transition:border-color .3s;
    border-bottom:1px solid transparent;
}
/* 背景とぼかしは必ず疑似要素へ。.lp-head 自身に backdrop-filter を付けると、
   中の position:fixed（スマホの引き出しメニュー）の基準がヘッダー自身になり、
   高さ 62px に潰れて 1行分しか出なくなる */
.lp-head::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:transparent; transition:background .3s;
}
.lp-head.is-stuck{ border-bottom-color:#24405f; }
.lp-head.is-stuck::before{ background:rgba(10,20,34,.92); backdrop-filter:blur(8px); }
.lp-head-in{ max-width:var(--wrap); margin:0 auto; padding:0 24px; width:100%; display:flex; align-items:center; gap:26px; }
/* 管理画面のヘッダー（_studio_header.html）と同じ形。ロゴ＋区切り線＋CONNECT */
.lp-logo{ display:flex; align-items:center; }
.lp-logo img{ height:36px; width:auto; }
.lp-sitename{
    font-size:15px; font-weight:700; color:var(--sky); letter-spacing:.20em;
    padding-left:16px; margin-left:16px; line-height:1;
    border-left:1px solid rgba(198,221,241,.35);
}
.lp-nav ul{ display:flex; gap:clamp(14px,1.8vw,22px); }
.lp-nav a{ color:#dbe6f2; font-size:13px; letter-spacing:.04em; white-space:nowrap; }
.lp-nav a:hover{ color:#fff; }
.lp-head-btns{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.lp-head-btns a{ font-size:13px; color:#cfdcea; white-space:nowrap; }
.lp-head-btns a.is-cv{
    background:var(--green); color:#fff; font-weight:700; padding:9px 18px; border-radius:4px;
}
.lp-head-btns a.is-cv:hover{ background:var(--green-dk); }
.lp-burger{ display:none; }

/* ============ 全面キービジュアル ============ */
.kv{
    position:relative; min-height:100svh; display:flex; align-items:center;
    background:linear-gradient(150deg,#16304f 0%,var(--navy-deep) 70%);
    overflow:hidden; color:#fff;
}
.kv-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.kv::after{  /* 文字を読ませるための覆い */
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg,rgba(5,14,26,.90) 0%,rgba(5,14,26,.72) 45%,rgba(5,14,26,.30) 100%);
}
.kv-in{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:120px 24px 90px; width:100%; }
.kv-badge{
    display:inline-block; color:#b9cfe6;
    font-size:13px; letter-spacing:.08em; margin-bottom:34px;
}
.kv-badge img{ height:16px; width:auto; display:inline-block; vertical-align:middle; margin-right:9px; }
.kv h1{
    /* 1行が最長12文字。104pxだと 1120px の器からはみ出すので上限を下げてある */
    font-weight:900; font-size:clamp(38px,6.6vw,86px); line-height:1.18; letter-spacing:-.01em;
    margin-bottom:34px; text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.kv h1 .qr{ color:var(--blue-lt); }
.kv h1 .thin{ display:block; font-size:.46em; font-weight:500; letter-spacing:.04em; line-height:1.6; margin-top:24px; color:#d6e3f0; }
.kv-cta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.kv-note{ margin-top:20px; font-size:12.5px; color:#8fa6bd; letter-spacing:.02em; }
.kv-scroll{
    position:absolute; z-index:2; bottom:26px; left:50%; transform:translateX(-50%);
    color:#7d94ab; font-size:11px;
}
/* ボタン */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-weight:700; letter-spacing:.05em; padding:19px 40px; border-radius:5px;
    border:2px solid transparent; transition:.2s; font-size:16px;
}
.btn-cv{ background:var(--green); color:#fff; box-shadow:0 8px 26px rgba(77,180,33,.32); }
.btn-cv:hover{ background:var(--green-dk); }
.btn-ghost{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--blue); }
.btn-navy-line{ border-color:var(--navy); color:var(--navy); }
.btn-navy-line:hover{ background:var(--navy); color:#fff; }
.btn-sm{ padding:13px 24px; font-size:14px; }
.btn-wide{ width:100%; }

/* ============ セクション共通（巨大タイポ） ============ */
.blk{ padding:clamp(80px,11vw,150px) 0; }
.blk.is-dark{ background:var(--navy); color:#fff; }
.blk.is-gray{ background:var(--sky-bg); }
.blk .en{ color:var(--blue); display:block; margin-bottom:18px; }
.blk.is-dark .en{ color:var(--blue-lt); }
.big{
    font-weight:900; font-size:clamp(32px,5.6vw,50px); line-height:1.2; letter-spacing:-.01em;
}
.big .u{ background:linear-gradient(transparent 66%,rgba(43,108,176,.28) 66%); }
.blk.is-dark .big .u{ background:linear-gradient(transparent 66%,rgba(90,160,232,.4) 66%); }
.lead{ font-size:clamp(15px,1.5vw,18px); color:var(--text-sub); margin-top:28px; max-width:34em; }
/* 左右2段になっていないブロック（料金など）の説明文は、幅いっぱいまで使う */
.wrap > .lead{ max-width:none; }
.blk.is-dark .lead{ color:#b9cfe6; }

/* 見出しは <br> を置いた位置だけで折り返させる。gapを詰めているのは、
   半分の幅でも1行（最長10文字×50px）が収まるようにするため */
.big br + span, .big span.u{ white-space:nowrap; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.split.is-rev .split-body{ order:2; }

/* 数字の強調 */
.num{
    font-family:"Barlow Condensed",sans-serif; font-weight:700; line-height:.9;
    font-size:clamp(90px,15vw,200px); color:var(--blue); letter-spacing:-.02em;
}
.num small{ font-size:.22em; letter-spacing:.16em; display:block; margin-top:14px; color:var(--text-sub); }
.blk.is-dark .num{ color:var(--blue-lt); }
.blk.is-dark .num small{ color:#b9cfe6; }

/* サイズのチップ */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.chips li{
    font-size:13px; padding:6px 14px; border:1px solid var(--line); border-radius:999px; color:var(--text-sub);
    background:#fff;
}
.blk.is-dark .chips li{ border-color:#2f4c6d; background:transparent; color:#c6ddf1; }

/* 対応環境（アイコン付き）。テザーのブロック最下段に置く */
.envs{
    display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;
    margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
}
.envs li{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; }
.envs li img{ width:22px; height:auto; flex:0 0 auto; }   /* viewBoxのみのSVGなので幅を明示する */
.envs li svg{ width:21px; height:21px; flex:0 0 auto; }
.envs li.is-note{ font-weight:500; font-size:14px; color:var(--text-sub); }
.blk.is-dark .envs{ border-top-color:#2f4c6d; }
.blk.is-dark .envs li.is-note{ color:#b9cfe6; }
/* Appleマークは黒1色のSVG。暗い背景では沈むので白へ反転する
   （Windowsのマークは元から4色なので触らない） */
.blk.is-dark .envs li img[src*="apple_icon"]{ filter:brightness(0) invert(1); }

/* 差し替え済みの画像 */
.shot{ margin:0; }
.shot img{ width:100%; border:1px solid var(--line); border-radius:8px; }
.blk.is-dark .shot img{ border-color:#2f4c6d; }

/* 画面のスクリーンショットは白地で背景に沈むので、少し浮かせる */
.shot.is-float img{
    border-color:rgba(26,54,93,.10);
    border-radius:10px;
    box-shadow:0 18px 40px rgba(16,42,73,.16), 0 3px 10px rgba(16,42,73,.08);
}
.blk.is-gray .shot.is-float img{ box-shadow:0 18px 40px rgba(16,42,73,.13), 0 3px 10px rgba(16,42,73,.07); }
.blk.is-dark .shot.is-float img{ border-color:#2f4c6d; box-shadow:0 20px 44px rgba(0,0,0,.45); }

/* ============ 画像プレースホルダ ============ */
.ph{
    border:2px dashed #c0ccd8; border-radius:8px;
    background:repeating-linear-gradient(45deg,#f5f8fa,#f5f8fa 14px,#eef3f9 14px,#eef3f9 28px);
    color:var(--text-sub); text-align:center; line-height:1.7;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    padding:28px 20px; min-height:clamp(240px,32vw,420px);
}
.ph b{ font-size:12px; letter-spacing:.14em; color:var(--blue); font-family:"Barlow Condensed",sans-serif; }
.ph span{ font-size:13px; }
.ph code{
    font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; color:var(--text-mute);
    background:#fff; border:1px solid var(--line); border-radius:4px; padding:2px 8px;
}
.blk.is-dark .ph{ border-color:#3d5f8c; background:rgba(255,255,255,.05); color:#b9cfe6; }
.blk.is-dark .ph b{ color:var(--sky); }
.blk.is-dark .ph code{ background:rgba(0,0,0,.3); border-color:#3d5f8c; color:#9db3cc; }

/* ============ セキュリティ ============ */
/* 「受け取る方の話」と「写真館の話」が混ざらないよう、列ごとに誰の話かを出す */
.sec-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); margin-top:50px; }
.sec-col{ border:1px solid #2f4c6d; border-radius:10px; background:rgba(255,255,255,.05); padding:28px 30px 30px; }
.sec-who{
    display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em;
    color:var(--navy); background:var(--sky); border-radius:3px; padding:3px 12px; margin-bottom:16px;
}
.sec-col h3{ font-size:clamp(18px,2vw,23px); font-weight:900; line-height:1.5; margin-bottom:22px; }
.sec-col ul{ display:flex; flex-direction:column; gap:18px; }
.sec-col li{ font-size:14px; color:#b9cfe6; line-height:1.85; padding-left:22px; position:relative; }
.sec-col li::before{
    content:""; position:absolute; left:0; top:.62em; width:9px; height:9px;
    border-radius:2px; background:var(--blue-lt);
}
.sec-col li b{ display:block; color:#fff; font-size:15.5px; margin-bottom:2px; }
.sec-foot{ margin-top:34px; font-size:14px; color:#93aac1; }
.sec-foot a{ color:var(--sky); border-bottom:1px solid #3d5f8c; }
.sec-foot a:hover{ color:#fff; }

/* ============ 会社情報 ============ */
/* 販売＝よしみカメラ／開発＝村上開発。ロゴSVGが白なのでこの段は暗い背景で使う */
.comp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); margin-top:14px; }
.comp-label{
    display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em;
    color:var(--navy); background:var(--sky); border-radius:3px; padding:3px 12px; margin-bottom:18px;
}
.comp-logo{
    border:1px solid #2f4c6d; border-radius:8px; background:rgba(255,255,255,.05);
    padding:26px 24px; margin-bottom:20px; display:flex; align-items:center; justify-content:center; min-height:104px;
}
/* このSVGは viewBox しか持たないので、幅を明示しないと表示されない。
   幅を%で書くとリンク要素の幅と循環して中央に揃わないため、実寸で指定する */
.comp-logo a{ display:block; width:100%; }
.comp-logo img{ width:220px; max-width:100%; height:auto; max-height:46px; margin:0 auto; }
.comp-table{ width:100%; border-collapse:collapse; font-size:14px; }
.comp-table th, .comp-table td{
    text-align:left; vertical-align:top; padding:9px 0; border-bottom:1px solid #24405f; line-height:1.7;
}
.comp-table th{ width:6.5em; font-weight:500; color:#93aac1; white-space:nowrap; }
.comp-table td{ color:#e2eefa; }
.comp-table a{ color:#fff; border-bottom:1px solid #3d5f8c; }
.comp-table a:hover{ border-bottom-color:var(--sky); }

/* キービジュアルの販売元表記 */
.kv-trust{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
    font-size:12.5px; color:#9db3cc; line-height:1.7;
}
.kv-trust img{ width:118px; height:auto; flex:0 0 auto; opacity:.9; }

/* ============ フォトリミ（パソコン用アプリ）の案内 ============ */
/* CONNECT単体で使えるサービスなので、ここは末尾に控えめに置く */
.ptrm-note{ background:#0f1720; padding:34px 24px; }
.ptrm-note-in{
    max-width:var(--wrap); margin:0 auto;
    display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:center;
}
.ptrm-note-logo{ height:24px; width:auto; opacity:.8; flex:0 0 auto; }
.ptrm-note p{ font-size:13.5px; color:#8b96a2; line-height:1.85; max-width:52em; }
.ptrm-note b{ color:#c2cad2; }
.ptrm-note a{ display:inline-block; margin-top:4px; font-size:13px; color:var(--sky); }
.ptrm-note a:hover{ color:#fff; }

/* ============ 料金 ============ */
.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; }
.plan{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px 22px; display:flex; flex-direction:column; text-align:center; }
.plan.is-push{ border:2px solid var(--green); box-shadow:0 10px 30px rgba(77,180,33,.16); position:relative; }
.plan.is-push::before{
    content:"FREE"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    font-family:"Barlow Condensed",sans-serif; letter-spacing:.16em; font-size:13px; font-weight:700;
    background:var(--green); color:#fff; padding:2px 16px; border-radius:999px;
}
.plan-name{ font-size:15px; font-weight:700; color:var(--text-sub); }
.plan-cap{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:56px; line-height:1.1; color:var(--navy); margin:6px 0 2px; }
.plan-cap small{ font-size:.36em; margin-left:2px; }
.plan-price{ font-size:14px; color:var(--text-sub); }
.plan-price .yen{ font-family:"Barlow Condensed",sans-serif; font-size:26px; font-weight:600; color:var(--text); margin-right:2px; }
.plan-users{
    font-size:14px; color:var(--text-sub); margin-top:10px;
    padding-top:10px; border-top:1px solid var(--line);
}
.plan-foot{ margin-top:auto; padding-top:22px; }
.price-notes{ margin-top:32px; font-size:13px; color:var(--text-mute); }
.price-notes li{ padding-left:1em; text-indent:-1em; }

/* ============ 末尾CTA ============ */
.cta-end{
    background:linear-gradient(150deg,#16304f 0%,var(--navy-deep) 75%); color:#fff; text-align:center;
    padding:clamp(80px,11vw,140px) 24px;
}
.cta-end .big{ margin-bottom:20px; }
.cta-end p{ color:#a9c0d6; margin-bottom:40px; }
.cta-end .btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============ サポート ============ */
.sup{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px; }
.sup a{
    border:1px solid var(--line); border-radius:8px; padding:26px 24px; background:#fff;
    display:flex; flex-direction:column; gap:6px; transition:.2s;
}
.sup a:hover{ border-color:var(--blue); transform:translateY(-2px); }
.sup .en{ color:var(--blue); font-size:12px; margin:0; }
.sup h3{ font-size:18px; font-weight:700; }
.sup p{ font-size:13px; color:var(--text-sub); }

/* ============ フッター ============ */
.lp-foot{ background:#0b1219; color:#8b96a2; padding:38px 24px; }
.lp-foot-in{ max-width:var(--wrap); margin:0 auto; display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; }
.foot-comp{ display:flex; flex-direction:column; gap:4px; }
.foot-comp .comp{ font-size:13px; color:#c2cad2; }
.lp-foot nav{ display:flex; gap:22px; flex-wrap:wrap; }
.lp-foot a{ font-size:13px; color:#8b96a2; }
.lp-foot a:hover{ color:#fff; }
.foot-ptrm{ display:inline-flex; align-items:center; gap:7px; }
.foot-ptrm img{ height:14px; width:auto; }
.lp-foot .copy{ margin-left:auto; font-size:10.5px; color:#5d6873; }

/* ============ タブレット ============ */
/* ヘッダーは横幅が足りなくなる順に間引く。ロゴ＋ナビ＋ボタンで詰まるため */
@media screen and (max-width:1000px){
    .lp-head-btns a.forpc{ display:none; }   /* マニュアル・ログインはナビの「サポート」とフッターから辿れる */
}
@media screen and (max-width:900px){
    .lp-nav .cut1{ display:none; }           /* サポート：フッターに同じ導線がある */
}
@media screen and (max-width:860px){
    .lp-sitename{ display:none; }

    /* safe を解さないブラウザは flex-start のまま（中央寄せで上が切れるのを避ける） */
    .kv{ flex-direction:column; align-items:stretch; justify-content:flex-start; justify-content:safe center; }
}
@media screen and (max-width:760px){
    .lp-nav .cut2{ display:none; }           /* QR配布・データ受け渡し：スクロールで届く */
}

/* 2段組みのままだと見出し1行（最長10文字×50px）が列に収まらなくなるので、
   ここで1段組みへ落とす */
@media screen and (max-width:1119px){
    .split{ grid-template-columns:1fr; }
    .split.is-rev .split-body{ order:0; }
}

@media screen and (max-width:900px){
    .plans{ grid-template-columns:repeat(2,1fr); }
    .sup{ grid-template-columns:1fr; }
    .comp-cols{ grid-template-columns:1fr; }
    .sec-cols{ grid-template-columns:1fr; }
}

/* ============ スマートフォン ============ */
@media screen and (max-width:600px){
    body{ font-size:15px; }
    .forsmt{ display:block; }
    .forpc{ display:none; }

    .lp-nav{
        position:fixed; top:var(--head-h); left:0; right:0; bottom:0; background:var(--navy-deep);
        padding:12px 24px 40px; overflow-y:auto; transform:translateX(100%); opacity:0; transition:.25s;
    }
    .lp-nav.is-open{ transform:translateX(0); opacity:1; }
    .lp-nav ul{ display:block; }
    .lp-nav .cut1,
    .lp-nav .cut2{ display:block; }   /* 引き出しメニューでは全部見せる */
    .lp-nav a{ display:block; padding:13px 2px; font-size:16px; border-bottom:1px solid #24405f; }   /* 10項目入るよう少し詰めている */
    .lp-head::before{ background:rgba(10,20,34,.92); backdrop-filter:blur(8px); }
    .lp-logo img{ height:29px; }
    .lp-sitename{ font-size:13px; padding-left:11px; margin-left:11px; }
    .lp-head-btns a:not(.is-cv){ display:none; }
    .lp-burger{
        display:block; width:32px; height:24px; position:relative; background:none; border:0; padding:0; cursor:pointer;
    }
    .lp-burger span{ display:block; position:absolute; left:0; width:100%; height:2px; background:#fff; transition:.25s; }
    .lp-burger span:nth-child(1){ top:1px; }
    .lp-burger span:nth-child(2){ top:11px; }
    .lp-burger span:nth-child(3){ top:21px; }
    .lp-burger.is-open span:nth-child(1){ top:11px; transform:rotate(45deg); }
    .lp-burger.is-open span:nth-child(2){ opacity:0; }
    .lp-burger.is-open span:nth-child(3){ top:11px; transform:rotate(-45deg); }
    body.is-menu{ overflow:hidden; }

    /* 一律に暗くすると写真が何なのか分からなくなるので、2枚重ねにする。
       ・斜め（左上→右下）… 中央だけを暗くし、左上と右下の角は素通し
       ・縦　　　　　　　　… 文字が乗る帯だけを軽く締める
       重なった中央は8割ほどの暗さになり、白文字は読めるまま角から写真が見える */
    .kv::after{
        background:
            linear-gradient(135deg,
                rgba(5,14,26,0)   0%,
                rgba(5,14,26,.56) 30%,
                rgba(5,14,26,.60) 70%,
                rgba(5,14,26,0)   100%),
            linear-gradient(180deg,
                rgba(5,14,26,.26) 0%,
                rgba(5,14,26,.56) 42%,
                rgba(5,14,26,.62) 74%,
                rgba(5,14,26,.28) 100%);
    }
    /* 覆いを薄くしたぶん、小さい文字は影で輪郭を確保する */
    .kv-badge, .kv-note{ text-shadow:0 1px 8px rgba(0,0,0,.85); }
    .kv h1{ text-shadow:0 2px 10px rgba(0,0,0,.6), 0 2px 30px rgba(0,0,0,.5); }
    .kv-in{ padding:92px 22px 60px; }
    .kv-badge{ font-size:12px; letter-spacing:.04em; line-height:1.6; margin-bottom:18px; }
    /* スマホは <br class="forsmt"> で3行に折る。最長10文字ぶんが収まる大きさ */
    .kv h1{ font-size:clamp(26px,8vw,36px); margin-bottom:24px; }
    .kv h1 .thin{ font-size:.55em; margin-top:18px; }
    .kv-cta{ flex-direction:column; align-items:stretch; }
    .kv-note{ margin-top:14px; font-size:12px; }
    /* 横位置の画像をそのまま使う場合、真ん中で切ると被写体が外れやすい。
       やや上寄りで切って、下に敷いた覆いと重ならないようにする */
    .kv-img{ object-position:center 35%; }
    .kv-scroll{ display:none; }

    .plans{ grid-template-columns:1fr; gap:24px; }
    .lp-foot .copy{ margin-left:0; }
}