/* 2ページ共通: 色・地・ヘッダー・ボタン・フッター・LINE のトーク画面の部品 */
:root{--ink:#3a342c;--sub:#6b6258;--line:#e4e2dd;--accent:#f07500;--accent-deep:#c95f00;--band:#fbf7f1}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font-family:"Helvetica Neue",Helvetica,"Hiragino Sans","ヒラギノ角ゴ ProN","Noto Sans JP",system-ui,sans-serif;font-size:16px;line-height:1.8}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep)}
.wrap{margin:0 auto;padding:0 20px}
.num{font-family:Rubik,"Helvetica Neue",sans-serif;font-weight:800}
section.band{background:var(--band)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(100deg,#ec6a00 0%,#ffa94d 100%);color:#fff;text-decoration:none;font-weight:800;border-radius:999px;border:0;cursor:pointer;font-family:inherit}

/* ヘッダー */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.top img{height:28px;width:auto}

/* フッター */
footer{background:#3a342c;color:#efe9e1;font-size:16px}
footer a{color:#ffc58a}
.flinks{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:0;padding:0}

/* スマホの枠と LINE のトーク画面（iOS の LINE の作りに合わせる） */
.iph{position:relative;width:236px;border-radius:46px;background:#0c0c0d;padding:7px;box-shadow:inset 0 0 0 1.5px #3a3a3c,0 0 0 1px #9a9a9e,0 40px 60px -24px rgba(58,52,44,.55)}
.iph .scr{border-radius:39px;overflow:hidden;position:relative;aspect-ratio:390/800;background:#fff}
.iph .isl{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:72px;height:21px;border-radius:12px;background:#000;z-index:3}
.iph.setl{position:relative;left:auto;top:auto;width:280px;margin:0 auto}
.iph.setl .scr{aspect-ratio:390/860}
.lt{position:absolute;inset:0;display:flex;flex-direction:column;background:#8ca9d6;font-size:14px;line-height:1.45;color:#111;font-family:"Hiragino Sans","Helvetica Neue",sans-serif}
.lt .sb{height:38px;background:#fff;display:flex;align-items:flex-end;justify-content:space-between;padding:0 14px 5px 22px;font:600 14px/1 -apple-system,"Helvetica Neue",sans-serif}
.lt .sb i{display:flex;gap:4px;align-items:center}
.lt .hd{display:flex;align-items:center;gap:8px;padding:8px 10px 9px;background:#fff;font-weight:700;border-bottom:.5px solid #d9d9d9}
.lt .hd .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt .hd svg{flex:none}
.lt .body{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:8px;overflow:hidden;justify-content:flex-start}
.lt .r{display:flex;gap:6px;align-items:flex-end}
.lt .r.me{justify-content:flex-end}
.lt .av{width:30px;height:30px;border-radius:50%;background:#fff;flex:none;display:grid;place-items:center;align-self:flex-start;box-shadow:0 0 0 .5px rgba(0,0,0,.08)}
.lt .av img{width:19px}
.lt .bb{position:relative;max-width:72%;padding:7px 11px;border-radius:18px;background:#fff}
.lt .r:not(.me) .bb::before{content:"";position:absolute;left:-5px;top:8px;border:6px solid transparent;border-right-color:#fff;border-left:0}
.lt .me .bb{background:#86e14f}
.lt .me .bb::after{content:"";position:absolute;right:-5px;top:8px;border:6px solid transparent;border-left-color:#86e14f;border-right:0}
.lt .tm{font-size:14px;line-height:1.2;color:#f4f7fc;transform:scale(.68);transform-origin:bottom right;white-space:nowrap;margin:0 2px 0 -12px;text-align:right}
.lt .ft{display:flex;align-items:center;gap:10px;padding:7px 10px 22px;background:#fff;border-top:.5px solid #d9d9d9;color:#9a9a9a}
.lt .ft .in{flex:1;height:30px;border-radius:15px;background:#f1f1f1}
.lt .imgmsg{border-radius:14px;overflow:hidden;max-width:62%;box-shadow:0 0 0 .5px rgba(0,0,0,.1)}
.lt .imgmsg img{display:block;width:100%;filter:blur(.6px)}