/* 123living.info — 日本の引越し会社サイトの作り。白地、ロゴのオレンジと紫、見積もり導線を常に表示。外部フォントなし */
:root{
  --ink:#2b2622; --ink2:#6a625b; --line:#ece4da; --cream:#fff8ee; --cream2:#fdf1df;
  --org:#f08a00; --org-d:#d46f00; --pur:#7b3b8c; --pur-l:#f4eaf6; --grn:#2f9a5b;
  --f:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","PingFang SC","Microsoft YaHei",sans-serif;
  --r:"Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro","Rounded Mplus 1c","Hiragino Sans","Yu Gothic","Meiryo","PingFang SC",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.9;letter-spacing:.03em}
img{max-width:100%;height:auto;display:block}
a{color:var(--pur)}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.center{text-align:center}
.nw{display:inline-block}
mark{background:linear-gradient(transparent 60%,#ffe2a8 60%);color:inherit;font-weight:700}

/* ヘッダー */
.hd{background:#fff;border-top:4px solid var(--org);box-shadow:0 1px 0 var(--line);position:sticky;top:0;z-index:20}
.hd-in{display:flex;align-items:center;gap:24px;min-height:78px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex-shrink:0}
.logo img{width:104px}
.logo span{font-family:var(--r);font-weight:700;font-size:.95rem;line-height:1.3}
.logo small{display:block;font-weight:400;font-size:.68rem;color:var(--ink2)}
.gnav{margin-left:auto}
.gnav ul{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.gnav a{display:block;padding:8px 12px;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:600;border-radius:6px}
.gnav a:hover{background:var(--cream)}
.gnav a[aria-current]{color:var(--org-d)}
.hd-cta{display:flex;align-items:center;gap:12px}
.hd-tel{text-decoration:none;color:var(--ink);font-family:var(--r);font-weight:700;font-size:1.3rem;line-height:1.2;text-align:right;letter-spacing:.02em}
.hd-tel small{display:block;font-family:var(--f);font-size:.65rem;font-weight:400;color:var(--ink2)}
.hd-tel::before{content:"☎ ";color:var(--org)}
.btn-est{display:inline-flex;align-items:center;background:var(--org);color:#fff;text-decoration:none;font-weight:700;padding:12px 18px;border-radius:8px;box-shadow:0 3px 0 var(--org-d);font-size:.92rem}
.btn-est:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--org-d)}

/* ヒーロー */
.hero{position:relative;background:var(--cream)}
.hero-img img{width:100%;height:clamp(360px,44vw,560px);object-fit:cover;object-position:60% 40%}
.hero-in{position:absolute;inset:0;display:flex;align-items:center}
.hero-box{background:rgba(255,255,255,.94);border-radius:16px;padding:32px 36px;max-width:500px;box-shadow:0 10px 30px rgba(80,50,10,.12)}
.hero-sub{margin:0 0 6px;font-size:.88rem;color:var(--pur);font-weight:700}
.hero h1{margin:0 0 10px;font-family:var(--r);font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.4;letter-spacing:.04em}
.hero h1 em{font-style:normal;color:var(--org-d);background:linear-gradient(transparent 65%,#ffe2a8 65%)}
.hero-box>p{margin:0 0 14px;color:var(--ink2)}
.hero-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 20px}
.hero-tags li{background:var(--pur-l);color:var(--pur);font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:999px}
.hero-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn-big{display:inline-flex;align-items:center;justify-content:center;background:var(--org);color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;padding:16px 28px;border-radius:10px;box-shadow:0 4px 0 var(--org-d)}
.btn-big::after{content:"　›"}
.hero-tel{text-decoration:none;color:var(--ink);font-family:var(--r);font-weight:700;font-size:1.35rem;line-height:1.2}
.hero-tel small{display:block;font-family:var(--f);font-weight:400;font-size:.7rem;color:var(--ink2)}

.notice{background:var(--pur);color:#fff;font-size:.9rem}
.notice p{margin:0;padding:12px 0}
.notice b{display:inline-block;background:#fff;color:var(--pur);border-radius:4px;padding:0 8px;margin-right:10px;font-size:.82rem}

/* セクション */
.sec{padding:80px 0}
.sec-cream{background:var(--cream)}
.sec-h{text-align:center;margin-bottom:40px}
.eyebrow{margin:0 0 6px;color:var(--org-d);font-weight:700;font-size:.9rem}
.sec-h .eyebrow::before,.sec-h .eyebrow::after{content:"—";margin:0 10px;color:var(--org)}
.h2{margin:0;font-family:var(--r);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.5;letter-spacing:.04em}
.hl{color:var(--pur)}

.about{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
.about .h2{margin-bottom:18px}
.about-txt p{color:var(--ink2)}
.about-img img{border-radius:16px}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.plan{background:#fff;border-radius:16px;overflow:hidden;border:2px solid var(--org);display:flex;flex-direction:column}
.plan.opt{border-color:var(--line)}
.plan>img{width:100%;aspect-ratio:475/200;object-fit:cover}
.plan-b{padding:22px 26px 26px;display:flex;flex-direction:column;flex:1}
.plan-tag{align-self:flex-start;margin:0 0 6px;background:var(--org);color:#fff;font-size:.75rem;font-weight:700;padding:2px 12px;border-radius:999px}
.plan.opt .plan-tag{background:var(--pur)}
.plan h3{margin:0 0 4px;font-family:var(--r);font-size:1.35rem}
.plan-catch{margin:0 0 10px;font-weight:700;color:var(--pur);font-size:.95rem}
.plan-b>p{font-size:.93rem;color:var(--ink2);margin:0 0 12px}
.pts{list-style:none;padding:12px 14px;margin:0 0 16px;background:var(--cream);border-radius:8px;font-size:.88rem}
.pts li{position:relative;padding-left:1.4em}
.pts li::before{content:"★";position:absolute;left:0;color:var(--org)}
.btn-plan{margin-top:auto;align-self:stretch;text-align:center;background:#fff;border:2px solid var(--org);color:var(--org-d);text-decoration:none;font-weight:700;padding:10px;border-radius:8px}
.btn-plan:hover{background:var(--org);color:#fff}

.rec{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:center}
.rec .h2{margin-bottom:14px}
.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;padding:12px 0 12px 44px;border-bottom:1px dashed var(--line);font-weight:700;font-size:1.05rem}
.checks li::before{content:"✓";position:absolute;left:0;top:10px;width:30px;height:30px;border-radius:50%;background:var(--grn);color:#fff;display:grid;place-items:center;font-size:.9rem}

.flow-mini{list-style:none;padding:0;margin:0 0 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.flow-mini li{background:#fff;border-radius:12px;padding:16px;text-align:center;position:relative}
.flow-mini li:not(:last-child)::after{content:"▶";position:absolute;right:-18px;top:46%;color:var(--org);font-size:.8rem}
.flow-mini img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;margin:8px 0 10px}
.fn{display:inline-block;background:var(--org);color:#fff;font-weight:700;font-size:.72rem;border-radius:999px;padding:1px 12px;letter-spacing:.1em}
.flow-mini b{font-size:.95rem}
.btn-line{display:inline-block;border:2px solid var(--pur);color:var(--pur);text-decoration:none;font-weight:700;padding:10px 28px;border-radius:999px}
.btn-line:hover{background:var(--pur);color:#fff}

.areas{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.areas li{background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 18px;font-weight:700;font-size:.95rem}
.note{color:var(--ink2);font-size:.88rem;text-align:center}

.clean-band{background:var(--pur-l);padding:64px 0}
.clean-in{display:grid;grid-template-columns:5fr 6fr;gap:48px;align-items:center}
.clean-img img{border-radius:16px}
.clean-in .h2{font-size:clamp(1.2rem,2vw,1.6rem);margin-bottom:12px}
.clean-in p:not(.eyebrow){color:var(--ink2)}

/* 見積もりボックス */
.est{background:linear-gradient(180deg,var(--cream) 0,var(--cream2) 100%);padding:72px 0;border-top:4px solid var(--org)}
.est-in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.est-badge{display:inline-block;margin:0 0 10px;background:var(--org);color:#fff;font-weight:700;font-size:.85rem;padding:3px 14px;border-radius:999px}
.est h2{margin:0 0 14px;font-family:var(--r);font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.5}
.est-l p{color:var(--ink2)}
.est-r{display:grid;gap:12px}
.est-form,.est-tel{display:block;text-decoration:none;text-align:center;border-radius:12px;padding:16px;font-weight:700;line-height:1.3}
.est-form{background:var(--org);color:#fff;font-size:1.2rem;box-shadow:0 4px 0 var(--org-d)}
.est-tel{background:#fff;color:var(--ink);font-family:var(--r);font-size:1.6rem;border:2px solid var(--line)}
.est-form small,.est-tel small{display:block;font-family:var(--f);font-weight:400;font-size:.75rem;opacity:.85}
.est-wc{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:#fff;border-radius:12px;padding:12px;font-size:.82rem;color:var(--ink2)}
.est-wc b{display:block;color:var(--ink)}
.est-wc p{margin:0;line-height:1.7}

/* 下層 */
.ph{background:var(--cream);padding:36px 0 40px;border-bottom:1px solid var(--line)}
.crumb{margin:0 0 10px;font-size:.78rem;color:var(--ink2)}
.crumb a{color:var(--ink2)}
.ph h1{margin:0;font-family:var(--r);font-size:clamp(1.6rem,3vw,2.2rem)}
.ph .lead{margin:8px 0 0;color:var(--ink2)}
.art{padding-top:48px;padding-bottom:72px;max-width:960px}
.art h2{font-family:var(--r);font-size:1.45rem;margin:56px 0 20px;padding:10px 16px;background:var(--cream);border-left:6px solid var(--org);border-radius:4px}
.art h2:first-child{margin-top:0}
.art h3{font-family:var(--r);font-size:1.15rem;margin:0 0 8px;color:var(--pur)}
.steps{list-style:none;padding:0;margin:0}
.step{display:grid;grid-template-columns:72px 240px 1fr;gap:24px;align-items:start;padding:24px 0;border-bottom:1px dashed var(--line)}
.step-n{background:var(--org);color:#fff;border-radius:12px;text-align:center;font-size:.7rem;font-weight:700;padding:8px 0;letter-spacing:.1em;line-height:1.2}
.step-n b{display:block;font-size:1.7rem}
.step-img img{border-radius:10px;width:100%;aspect-ratio:3/2;object-fit:cover}
.step-b h3{font-size:1.25rem}
.step-b p{margin:0 0 8px}
.aside{background:var(--pur-l);padding:10px 12px;border-radius:8px;font-size:.88rem}
.wc-row{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center}
.small{font-size:.85rem;color:var(--ink2)}
.right{text-align:right}
.tip{margin-top:40px;background:var(--pur-l);border-radius:12px;padding:20px 24px}
.tip p{margin:0 0 12px}
.mt{display:grid;grid-template-columns:2fr 3fr;gap:28px;align-items:center;margin:28px 0}
.mt img{border-radius:12px}
.em{color:#c0392b;font-weight:700}
.price{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--org);color:#fff;border-radius:12px;padding:16px 24px;margin:36px 0 0}
.price-l{margin:0;font-weight:700;font-size:1.1rem}
.price-v{margin:0;font-weight:700}
.price-v b{font-family:var(--r);font-size:2.4rem;margin:0 4px;line-height:1}
.tbl{width:100%;border-collapse:collapse;margin:16px 0 28px;background:#fff}
.tbl th,.tbl td{border:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top}
.tbl th{background:var(--cream);width:10em;font-weight:700}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery figure{margin:0}
.gallery img{border-radius:10px;width:100%;aspect-ratio:288/414;object-fit:cover}
.gallery figcaption{font-size:.85rem;color:var(--ink2);margin-top:6px}

/* フォーム */
.form{background:#fff}
.form .grp{border:2px solid var(--line);border-radius:12px;padding:6px 22px 18px;margin-bottom:20px}
.form dl{margin:0}
.form dt{font-weight:700;padding-top:16px}
.form dt .req,.form dt .opt{display:inline-block;font-size:.7rem;padding:1px 8px;border-radius:4px;margin-right:8px;vertical-align:2px;color:#fff;background:#d4442f}
.form dt .opt{background:#9a918a}
.form dd{margin:8px 0 0}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=date],.form select,.form textarea{font:inherit;padding:11px 12px;border:1px solid #cfc5b9;border-radius:8px;background:#fffdf9;max-width:100%}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{width:100%}
.form textarea{min-height:150px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--org);outline-offset:-1px}
.form .inl{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.form label.ck{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.form label.ck input{margin-top:.5em}
.form .hint{font-size:.8rem;color:var(--ink2);margin:6px 0 0}
.form .hp{position:absolute;left:-9999px}
.form .actions{text-align:center;margin-top:28px}
.form .btn-big{border:0;cursor:pointer;font-family:inherit;min-width:280px}
.err{color:#d4442f;font-size:.86rem;margin:6px 0 0}
.box-ng{border:2px solid #d4442f;color:#d4442f;padding:12px 16px;border-radius:8px;margin-bottom:16px}
.box-ok{background:var(--cream);border:2px solid var(--org);border-radius:12px;padding:24px}

/* フッター */
.ft{background:#3a312b;color:#d9cfc6;font-size:.86rem;padding-bottom:0}
.ft-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-top:48px;padding-bottom:36px}
.ft-co img{width:96px;background:#fff;border-radius:8px;padding:6px;margin-bottom:12px}
.ft-co b{color:#fff}
.ft-nav{list-style:none;margin:0;padding:0}
.ft-nav a{color:#d9cfc6;text-decoration:none;line-height:2.2}
.ft-nav a:hover{color:#fff}
.ft-wc img{width:110px;border-radius:8px}
.ft-wc p{margin:8px 0 0;font-size:.8rem}
.copy{margin:0;padding:14px;text-align:center;border-top:1px solid #4d433b;font-size:.75rem}
.sp-bar{display:none}

@media (max-width:1020px){
  .gnav{display:none}
  .hd-cta{margin-left:auto}
}
@media (max-width:760px){
  body{font-size:15px;padding-bottom:62px}
  .wrap{padding:0 16px}
  .hd{position:static}
  .hd-in{min-height:62px;gap:10px}
  .logo img{width:80px}
  .logo span{font-size:.78rem}
  .hd-cta{display:none}
  .hero-img img{height:240px}
  .hero-in{position:static;display:block;margin-top:-40px;position:relative}
  .hero-box{padding:22px 20px;border-radius:14px;max-width:none}
  .hero{padding-bottom:28px}
  .notice b{display:block;margin:0 0 4px;width:max-content}
  .sec{padding:56px 0}
  .about,.rec,.clean-in,.est-in{grid-template-columns:1fr;gap:28px}
  .rec-img{max-width:180px;margin:0 auto}
  .plans{grid-template-columns:1fr}
  .flow-mini{grid-template-columns:1fr 1fr;gap:14px}
  .flow-mini li::after{display:none}
  .checks li{font-size:.95rem}
  .step{grid-template-columns:56px 1fr;gap:14px}
  .step-img{grid-column:2}
  .step-b{grid-column:1/-1}
  .step-n b{font-size:1.3rem}
  .wc-row,.mt{grid-template-columns:1fr}
  .wc-row img{max-width:160px}
  .gallery{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .tbl th{width:6.5em;padding:12px 10px}.tbl td{padding:12px 10px}
  .ft-in{grid-template-columns:1fr 1fr;gap:24px}
  .ft-co{grid-column:1/-1}
  .sp-bar{display:grid;grid-template-columns:1fr 1.4fr;position:fixed;left:0;right:0;bottom:0;z-index:30;box-shadow:0 -2px 10px rgba(0,0,0,.12)}
  .sp-bar a{display:flex;align-items:center;justify-content:center;height:62px;text-decoration:none;font-weight:700;font-size:1rem}
  .sp-tel{background:#fff;color:var(--ink)}
  .sp-tel::before{content:"☎";color:var(--org);margin-right:6px}
  .sp-est{background:var(--org);color:#fff}
}