/* =========================================================
   UBAKU Letter の購読（2026-10-11 トップページに組み込み）
   ・右下の札 → 押すと窓が開く（右上の「﹀」で札にたたむ）
   ・ページの中の購読欄（Journal と Contact のあいだ）
   ・目印は大雪山の稜線の小さな線（東川町の青）。札・窓が出るときに左から描かれる
   色・フォント・動きは style.css の :root の変数をそのまま使う（ここで色を直接書かない）
   ========================================================= */

/* ---------- 稜線（オープニングと同じ大雪山の形）とロゴ ---------- */
.lt-ridge{display:block;width:100%;height:auto;aspect-ratio:1000 / 110;overflow:visible}
.lt-ridge path{fill:none;stroke:var(--accent-hl);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.4,.1,.2,1) .2s}
.lt-fab.is-shown .lt-ridge path,.lt-pop.is-open .lt-ridge path,.lt-band .lt-ridge path{stroke-dashoffset:0}
/* UBAKŪ のロゴ（サイトと同じ .wordmark）＋ Letter
   Letter の文字の下（ベースライン）を、UBAKU の文字の下端にそろえる。
   ロゴの箱は 330:60 で、文字の下端は箱の下から 4/60（幅の 4/330）上にある → その分だけ箱を下にずらす。
   Letter の大きさは UBAKU の文字の高さより少し小さく（ロゴ幅の 16.5%） */
.lt-logo{--lw:74px;display:inline-flex;align-items:baseline;gap:calc(var(--lw) * .13)}
.lt-logo .wordmark{width:var(--lw);flex:none;margin-bottom:calc(var(--lw) * -6 / 330)}
.lt-logo-en{font-family:var(--f-title);font-weight:300;font-size:calc(var(--lw) * .165);letter-spacing:.14em;line-height:1;color:var(--green)}
.lt-kicker{display:flex;align-items:center;gap:14px}
.lt-kicker-ja{font-size:12px;letter-spacing:.16em;color:var(--sub);border-left:1px solid var(--rule-long);padding-left:14px}

/* ---------- 見出しと文章 ---------- */
.lt-catch{font-family:var(--f-heading);font-weight:400;font-size:20px;line-height:1.55;letter-spacing:.08em;color:var(--ink)}
.lt-catch em{font-style:normal;color:var(--accent-hl)}
.lt-lead{font-size:13px;line-height:1.85;color:var(--muted)}

/* ---------- 入力欄とボタン ---------- */
.lt-form{display:flex;flex-direction:column}
[data-step]{display:none;flex-direction:column;gap:14px}
.is-step1 [data-step="1"],.is-step2 [data-step="2"],.is-step3 [data-step="3"]{display:flex;animation:lt-in .5s cubic-bezier(.2,.7,.2,1)}
@keyframes lt-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lt-row{display:flex;align-items:stretch;border-bottom:1px solid var(--rule-long);transition:border-color .3s ease}
.lt-row:focus-within{border-bottom-color:var(--green)}
/* 入力した文字：細い字だとスマホや自動入力で薄く見えるので、ふつうの太さ・濃い色に固定する。
   16px 未満だと iPhone で入力時に画面が拡大されるので 16px */
/* .lt-row を付けて強くしているのは、東川ページの入力欄の共通の見た目（枠線・角丸・色）に負けないようにするため */
.lt-row .lt-input{flex:1;width:auto;min-width:0;font:inherit;font-weight:400;font-size:16px;letter-spacing:.02em;color:var(--ink);-webkit-text-fill-color:var(--ink);opacity:1;background:transparent;border:0;padding:12px 2px;border-radius:0;-webkit-appearance:none;appearance:none}
.lt-input::placeholder{font-weight:300;color:var(--sub);-webkit-text-fill-color:var(--sub);opacity:.7}
/* ブラウザの自動入力（保存したアドレスを選んだとき）でも、地の色と文字の色を変えない */
.lt-input:-webkit-autofill,.lt-input:-webkit-autofill:hover,.lt-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--cream) inset;box-shadow:0 0 0 1000px var(--cream) inset;transition:background-color 9999s ease 0s}
.lt-row .lt-input:focus{outline:none;border:0;background:transparent}
.lt-btn{flex:none;display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:13px;letter-spacing:.16em;color:var(--cream);background:var(--green);
  border:0;padding:11px 22px;cursor:pointer;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lt-btn::after{content:"→";font-family:var(--f-title);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lt-btn:hover::after{transform:translateX(4px)}
.lt-row .lt-btn{margin:4px 0 6px}
.lt-btn--ghost{color:var(--sub);background:transparent;padding:11px 2px;border-bottom:1px solid var(--rule-short)}
.lt-btn--ghost::after{content:none}
.lt-btn--ghost:hover{color:var(--green)}
.lt-note{font-size:11px;line-height:1.8;letter-spacing:.04em;color:var(--sub)}
.lt-note a{border-bottom:1px solid var(--rule-short)}
.lt-q{font-size:14px;letter-spacing:.06em;color:var(--ink)}
.lt-q small{display:block;margin-top:2px;font-size:11px;letter-spacing:.06em;color:var(--sub)}
.lt-actions{display:flex;align-items:center;gap:20px;margin-top:4px}
.lt-done{font-size:13px;line-height:2;color:var(--muted)}
.lt-done strong{display:block;font-family:var(--f-heading);font-weight:400;font-size:17px;letter-spacing:.08em;color:var(--ink);margin-bottom:6px}
.lt-done span{display:block;margin-top:8px;font-size:11px;color:var(--sub)}

/* 楽しみな話（押すと青くなる小さな札。チェックボックスの見た目は使わない） */
.lt-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.lt-chip{position:relative;cursor:pointer}
.lt-chip input{position:absolute;opacity:0;width:1px;height:1px}
.lt-chip span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--rule-long);padding:6px 12px;transition:color .25s ease,border-color .25s ease}
.lt-chip span::before{content:"＋";font-size:11px;color:var(--sub)}
.lt-chip:hover span{border-color:var(--green)}
.lt-chip input:checked + span{color:var(--accent-hl);border-color:var(--accent-hl)}
.lt-chip input:checked + span::before{content:"✓";color:var(--accent-hl)}
.lt-chip input:focus-visible + span{outline:2px solid var(--accent-hl);outline-offset:2px}

/* ---------- 右下の札（白い面の上辺が大雪山の輪郭。小さめに） ---------- */
.lt-top{display:block;width:100%;height:auto;aspect-ratio:1000 / 110;margin-bottom:-1px;overflow:visible}
.lt-top-fill{fill:var(--cream)}
.lt-top-line{fill:none;stroke:var(--accent-hl);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.4,.1,.2,1) .2s}
.lt-fab.is-shown .lt-top-line,.lt-pop.is-open .lt-top-line{stroke-dashoffset:0}
.lt-fab{position:fixed;right:24px;bottom:24px;z-index:60;width:232px;display:block;
  font:inherit;text-align:left;color:var(--green);background:none;border:0;padding:0;cursor:pointer;
  filter:drop-shadow(0 6px 18px rgba(43,36,28,.12));
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.lt-fab.is-shown{opacity:1;transform:none;pointer-events:auto}
.lt-fab-body{display:flex;flex-direction:column;gap:6px;background:var(--cream);padding:6px 16px 12px}
.lt-fab-row{display:flex;align-items:center;justify-content:space-between}
.lt-fab-ja{font-size:10.5px;line-height:1.4;letter-spacing:.08em;color:var(--sub)}
.lt-fab-open{font-family:var(--f-title);font-weight:300;font-size:16px;line-height:1;color:var(--accent-hl);transition:transform .35s ease}
@media (hover:hover){
  .lt-fab.is-shown:hover{transform:translateY(var(--lift));filter:drop-shadow(0 12px 24px rgba(43,36,28,.16))}
  .lt-fab:hover .lt-fab-open{transform:rotate(90deg)}
}

/* ---------- 札を押すと開く窓 ---------- */
.lt-pop{position:fixed;right:24px;bottom:24px;z-index:61;width:400px;max-width:calc(100vw - 32px);
  filter:drop-shadow(0 12px 32px rgba(43,36,28,.16));
  opacity:0;transform:translateY(20px);pointer-events:none;visibility:hidden;
  transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s linear .5s}
.lt-pop.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.lt-pop-body{background:var(--cream);padding:8px 28px 24px;display:flex;flex-direction:column;gap:12px}
.lt-pop-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lt-pop .lt-catch{margin-top:4px}
/* たたむボタン（下向きの山形） */
.lt-fold{flex:none;width:32px;height:32px;margin-right:-8px;display:grid;place-items:center;background:none;border:0;cursor:pointer}
.lt-fold span{width:9px;height:9px;border-right:1px solid var(--sub);border-bottom:1px solid var(--sub);transform:translateY(-2px) rotate(45deg);transition:border-color .25s ease,transform .3s ease}
.lt-fold:hover span{border-color:var(--green);transform:translateY(1px) rotate(45deg)}

/* ---------- ページの中の購読欄（Journal と Contact のあいだ） ---------- */
.lt-band{background:var(--cream)}
.lt-band .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px 80px;align-items:end;
  border-top:1px solid var(--rule-long);padding-top:64px;padding-bottom:72px}
.lt-band .wrap > *{min-width:0}
.lt-band-text{display:flex;flex-direction:column;gap:16px}
.lt-band .lt-ridge{max-width:440px}
.lt-band .lt-logo{--lw:96px}
.lt-band .lt-catch{font-size:clamp(22px,2.3vw,30px)}
.lt-band .lt-lead{font-size:14px;line-height:2.1;max-width:520px}

/* ---------- スマホ（幅640px以下） ---------- */
@media (max-width: 640px){
  .lt-fab{right:16px;bottom:16px;width:156px}
  .lt-fab-body{padding:4px 12px 10px}
  .lt-fab-ja{display:none}
  .lt-fab .lt-logo{--lw:58px}
  .lt-pop{right:12px;left:12px;bottom:12px;width:auto;max-width:none;max-height:calc(100vh - 24px);overflow:auto}
  .lt-pop-body{padding:6px 20px 20px}
  .lt-pop .lt-catch{font-size:18px}
  .lt-band .wrap{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:48px;padding-bottom:56px}
}

/* 「動きを減らす」設定の人には動きを止める */
@media (prefers-reduced-motion: reduce){
  .lt-fab,.lt-pop,.lt-btn,.lt-btn::after,.lt-chip span,.lt-ridge path,.lt-top-line{transition:none}
  [data-step]{animation:none !important}
}
.gotcha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}   /* ロボット用の罠の欄（人には見えない） */
.lt-error{color:#B4553A}   /* 送れなかったときの文（Yasai の赤土に近い色） */
.lt-ts:empty{display:none}
.lt-ts iframe{max-width:100%}