/* 畳屋さん向けLP（B案：い草の緑と木の色）
   色：背景 #fafaf5／い草の緑 #7ea23c／濃い緑 #4d6b1c／木の色 #b88a55／文字 #2a2b24 */

/* ---- 基本 ---- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fafaf5;color:#2a2b24;font-family:'Noto Sans JP',sans-serif}
a{color:#4d6b1c}
a:hover{color:#3a5214}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

.page{background:#fafaf5;color:#2a2b24;font-family:'Noto Sans JP',sans-serif;font-size:17px;line-height:1.9;padding-bottom:104px;line-break:strict;text-wrap:pretty}
.wrap{max-width:720px;margin:0 auto}
.round{font-family:'M PLUS Rounded 1c',sans-serif;font-weight:700}
.nb{display:inline-block} /* 見出しを意味の区切りで折り返す */
.green{color:#4d6b1c}
.lead{margin:24px auto 0;width:fit-content;max-width:100%;text-align:left}
.icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* ---- ヘッダー ---- */
.site-header{background:#fafaf5;border-bottom:1px solid #b88a55}
.site-header .wrap{padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-header__name{font-size:13px;letter-spacing:.2em;font-weight:700;color:#7f5a2e}
.site-header__tel{color:#4d6b1c;text-decoration:none;font-size:17px;letter-spacing:.03em;display:flex;align-items:center;gap:6px}

/* ---- セクション共通 ---- */
.sec{padding:88px 24px 0}
.sec--tint{margin-top:88px;padding:80px 24px;background:#f0f2e4}
.rule{width:40px;height:1px;background:#b88a55;margin:0 auto 20px}
.sec-title{margin:0;text-align:center;font-size:24px;line-height:1.6}

/* ---- ボタン ---- */
.btn{margin:32px auto 0;max-width:420px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:0 22px;background:#fff;color:#4d6b1c;border:2px solid #4d6b1c;text-decoration:none;border-radius:4px;font-weight:700;font-size:18px;box-sizing:border-box}
.btn:hover{background:#4d6b1c;color:#fff}
.btn__arrow{fill:none;stroke:currentColor;stroke-width:1.5;flex:none}

/* ---- 1. つかみ ---- */
.hero{padding:48px 24px 8px;text-align:center}
.hero__label{display:inline-block;font-size:13px;letter-spacing:.3em;font-weight:700;color:#4d6b1c;border:1px solid #7ea23c;border-radius:999px;padding:4px 16px 4px 20px}
.hero__title{margin:22px 0 0;font-size:30px;line-height:1.6;letter-spacing:.02em}
.hero__mat{margin:34px 0 0;background:#eef2df;border-radius:6px;padding:14px 14px 12px}
.hero__band{position:relative;height:96px;background:repeating-linear-gradient(90deg,#7ea23c 0 2px,#a9c26a 2px 3px,transparent 3px 6px);overflow:hidden}
.hero__cover{position:absolute;inset:0;background:#eef2df;transform:scaleX(0);transform-origin:right center}
.hero__edge{border-radius:2px;transform-origin:left center}
.hero__edge--wood{height:8px;background:#b88a55;margin-top:8px}
.hero__edge--green{height:3px;background:#4d6b1c;margin-top:4px}
.hero .lead{margin-top:32px}

/* ---- 2. 迷うこと ---- */
.worries{margin-top:36px;display:grid;gap:18px}
.worry{background:#fff;border:1px solid #b88a55;border-radius:6px;padding:24px 22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center}
.worry__icon{width:48px;height:48px;border-radius:50%;background:#eef2df;display:grid;place-items:center;color:#4d6b1c}
.worry__icon svg{stroke-width:1.6}
.worry h3{margin:0;font-size:20px;line-height:1.5}
.worry h3.lg{font-size:21px}
.worry p{margin:8px 0 0;grid-column:1/-1}
.summary{margin:36px auto 0;width:fit-content;max-width:100%;text-align:left;font-size:20px;line-height:1.7;color:#4d6b1c}

/* ---- 3. 探し方：スマホの枠と検索 ---- */
.phone{margin:40px auto 0;max-width:290px;border:9px solid #b88a55;border-radius:36px;background:#fff;padding:18px 16px 40px}
.phone__notch{width:56px;height:6px;border-radius:3px;background:#e2d3bf;margin:0 auto 26px}
.search{display:flex;align-items:center;gap:10px;background:#f3f4ec;border:1px solid #c9cdb4;border-radius:28px;padding:10px 16px;font-size:18px;line-height:1.5;font-weight:700}
.search__icon{fill:none;stroke:#4d6b1c;stroke-width:2;flex:none}
.search__text{white-space:nowrap}
.search__space{display:inline-block;width:.5em}
.search__cursor{display:none;width:2px;height:20px;background:#4d6b1c;vertical-align:-4px;margin-left:2px}
.results{margin-top:28px;display:grid;gap:16px}
.results div{height:18px;background:#dcdcd2;border-radius:9px}
.ways{margin-top:44px;display:grid;gap:14px}
.way{background:#fff;border-radius:6px;padding:20px 22px;display:flex;gap:16px}
.way svg{flex:none;margin-top:3px;stroke:#7f5a2e;stroke-width:1.6}
.way h3{margin:0;font-size:19px;line-height:1.5}
.way p{margin:6px 0 0}

/* ---- 4. できること：つながる線 ---- */
.links{margin:40px auto 0;max-width:440px}
.links__from{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pill{border:1px solid #b88a55;border-radius:999px;padding:12px 6px;text-align:center;font-size:16px;line-height:1.4;background:#fff;display:flex;align-items:center;justify-content:center;gap:6px}
.pill svg{fill:none;stroke:#7f5a2e;stroke-width:1.6}
.links__svg{display:block;width:100%;height:auto}
.links__svg path{fill:none;stroke-width:4;stroke-linecap:round}
.links__path{stroke:#d6d5c6;stroke-dasharray:1;stroke-dashoffset:0}
.links__lit{stroke:#7ea23c}
.links__to{background:#4d6b1c;color:#fff;border-radius:999px;padding:14px 8px;text-align:center;font-size:19px;display:flex;align-items:center;justify-content:center;gap:10px}
.links__to svg{stroke-width:1.8}
.cans{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.can h3{margin:0;line-height:1.5}
.can p{margin:6px 0 0}
.can--main{grid-column:1/-1;background:#f0f2e4;border-radius:6px;padding:24px 22px}
.can--main h3{font-size:21px;color:#4d6b1c}
.can--line{border-top:1px solid #b88a55;padding:18px 4px 6px}
.can--line h3{font-size:19px}
.can--box{grid-column:1/-1;background:#fff;border:1px solid #b88a55;border-radius:6px;padding:24px 22px}
.can--box h3{font-size:20px}
.can--main p,.can--box p{margin-top:8px}
.note-strong{margin:32px auto 0;width:fit-content;max-width:100%;font-weight:700;color:#4d6b1c;text-align:left}

/* ---- 5. 仕事が楽に ---- */
.eases{margin-top:32px;border-bottom:1px solid #b88a55}
.ease{border-top:1px solid #b88a55;padding:24px 0}
.ease h3{margin:0;font-size:19px;line-height:1.5;color:#4d6b1c}
.ease h3.lg{font-size:21px}
.ease p{margin:8px 0 0}

/* ---- 6. 見本 ---- */
#sample{scroll-margin-top:0}
.sample-phone{margin:40px auto 0;width:min(100%,300px);border:9px solid #b88a55;border-radius:36px;background:#b88a55}
.sample-phone__view{height:520px;overflow:hidden;border-radius:27px;background:#efe9da;position:relative}
.sample-phone__img{display:block;width:100%;height:auto}
.sample-phone__dummy{height:1560px;background:#efe9da repeating-linear-gradient(180deg,transparent 0 259px,#ddd4bf 259px 260px);display:flex;align-items:flex-start;justify-content:center;padding-top:40px;box-sizing:border-box;color:#5b5a52;font-size:13px;text-align:center}
.sample .btn{margin-top:36px}
.fine{margin:14px auto 0;max-width:420px;text-align:left;font-size:13px;line-height:1.8;color:#5b5a52}

/* ---- 7. よくある心配 ---- */
.qas{margin-top:32px;display:grid;gap:14px}
.qa{background:#fff;border:1px solid #b88a55;border-radius:6px;padding:20px}
.qa p{margin:0;display:flex;gap:12px;align-items:flex-start}
.qa__q{font-weight:700}
.qa .qa__a{margin-top:12px}
.qa__mark{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:'M PLUS Rounded 1c',sans-serif;font-size:15px;line-height:1;margin-top:1px;box-sizing:border-box}
.qa__mark--q{background:#4d6b1c;color:#fff}
.qa__mark--a{border:1px solid #b88a55;color:#7f5a2e}

/* ---- 8. 料金と始め方 ---- */
.price-title{font-size:25px}
.includes{margin-top:36px;background:#f0f2e4;border-radius:6px;padding:24px 22px}
.small-head{margin:0;font-size:15px;font-weight:700;color:#7f5a2e;letter-spacing:.06em}
.checks{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.checks li{display:flex;gap:12px}
.checks svg{flex:none;margin-top:7px;stroke:#4d6b1c;stroke-width:2}
.monitor{margin-top:16px;border:1px solid #b88a55;border-radius:6px;padding:20px 22px;background:#fff}
.monitor h3{margin:0;font-size:18px;color:#7f5a2e}
.monitor p{margin:6px 0 0}
.steps-head{margin:44px 0 0;text-align:center}
.steps{margin:18px auto 0;width:fit-content;max-width:100%;padding:0;list-style:none;display:grid;gap:0}
.steps li{display:flex;gap:16px;align-items:flex-start}
.steps__col{flex:none;display:flex;flex-direction:column;align-items:center}
.steps__num{flex:none;width:40px;height:40px;border-radius:50%;background:#7ea23c;color:#1f2a0b;display:grid;place-items:center;font-family:'M PLUS Rounded 1c',sans-serif;font-size:18px;line-height:1}
.steps__num--last{background:#4d6b1c;color:#fff}
.steps__line{width:1px;height:28px;background:#b88a55}
.steps__text{font-weight:700;padding-top:4px}

/* ---- 9. 作っている人 ---- */
.profile-title{font-size:23px;line-height:1.7}
.profile{margin:24px auto 0;width:fit-content;max-width:100%;text-align:left}
.profile p{margin:16px 0 0}
.profile p:first-child{margin:0}
.igusa{margin-top:40px;background:#fff;border-radius:6px;padding:26px 22px}
.tag{font-size:13px;letter-spacing:.3em;font-weight:700;color:#4d6b1c}
.farms{margin-top:20px}
.farms__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.farms__row--new{margin-top:22px}
.farms__year{font-size:15px;font-weight:700}
.farms__year--old{color:#5b5a52}
.farms__val{font-family:'M PLUS Rounded 1c',sans-serif}
.farms__val--old{color:#5b5a52}
.farms__val--new{color:#4d6b1c}
.farms__unit{font-size:15px}
.farms__big-old{font-size:27px}
.farms__num{font-size:40px;line-height:1.2;font-variant-numeric:tabular-nums}
.farms__unit-new{font-size:17px}
.farms__bar{height:18px;margin-top:6px}
.farms__bar--old{background:#e2d3bf;border-radius:9px}
.farms__shrink{height:18px;width:16.64%;background:#7ea23c;border-radius:9px;transform-origin:left center}
.source{margin:12px 0 0;font-size:12px;line-height:1.7;color:#5b5a52}
.igusa > p{margin:20px 0 0}
.message{margin:40px auto 0;width:fit-content;max-width:100%;text-align:left;font-size:20px;line-height:1.8;color:#4d6b1c}
.contact{margin-top:40px;background:#fff;border:1px solid #b88a55;border-radius:6px;padding:26px 22px;text-align:center}
.contact .tag{color:#7f5a2e}
.contact__name{margin:10px 0 0;font-weight:700;font-size:18px}
.contact__tel{margin:4px 0 0;display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
.contact__tel a{color:#2a2b24;text-decoration:none;font-size:30px;letter-spacing:.02em}
.call{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:0 22px;background:#4d6b1c;color:#fff;text-decoration:none;border-radius:4px;font-weight:700;font-size:20px}
.call:hover,.callbar__btn:hover{background:#3a5214;color:#fff}
.call__label{display:flex;align-items:center;gap:12px}
.call svg.icon{stroke-width:1.8}

/* ---- フッター ---- */
.site-footer{max-width:720px;margin:0 auto;padding:28px 24px 0;text-align:center;display:grid;gap:4px}
.site-footer__name{font-weight:700;font-size:15px;color:#7f5a2e}
.site-footer__tel{color:#2a2b24;text-decoration:none;font-weight:700;font-size:15px}
.site-footer small{font-size:12px;color:#5b5a52}

/* ---- 画面下の電話ボタン（常時表示） ---- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:10;background:rgba(250,250,245,.96);border-top:1px solid #b88a55;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.callbar__btn{max-width:688px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;background:#4d6b1c;color:#fff;text-decoration:none;border-radius:4px;font-weight:700}
.callbar__btn svg{stroke-width:1.8;flex:none}
.callbar__label{font-size:15px}
.callbar__num{font-size:23px;letter-spacing:.03em}

/* 元デザインでは、これらのリンクはホバーで色が変わらない */
.site-header__tel:hover{color:#4d6b1c}
.contact__tel a:hover,.site-footer__tel:hover{color:#2a2b24}