/* Kohana. build-07 r14 PROTOTYPE (2026-11-03, local, not published) — loaded after build07l.css.
   Phones only (below 600px) and only with JavaScript (letters-slide.js adds the page count and the door size):
   1. The two letters slide sideways, one at a time, like the review carousel: scroll-snap, a little of Letter 02 shows at
      the right, 「01 / 02」 under the cards, no auto slide. Each card keeps its own height (「続きを読む」 opens only that card).
   2. The doors cover one letter (Letter 01, closed) instead of the whole section: from the top of the slider to the bottom
      of Letter 01, full width. They are removed once open, so opening a letter never moves them.
   No JavaScript: the letters stay one under the other, as before. PC / tablets: unchanged. */
@media(max-width:37.49em){
 .js #letters .letters{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;
  margin-inline:calc(var(--pad,20px)*-1);padding:26px var(--pad,20px) 20px;scroll-padding-inline:var(--pad,20px)}
 .js #letters .letters::-webkit-scrollbar{display:none}
 .js #letters .letters:focus-visible{outline:2px solid var(--cocoa-ink);outline-offset:-2px}
 .js #letters .letters>.letter{flex:0 0 calc(100vw - 2*var(--pad,20px) - 26px);scroll-snap-align:start}   /* about 32px of Letter 02 shows */
 .js #letters .letters::after{content:"";flex:0 0 32px}   /* room for Letter 02 to settle at the left edge */
 .tm-pos{margin:4px 0 0;text-align:center;font:400 12px/1.6 var(--serif);letter-spacing:.24em;color:var(--gold-ink)}
 .js #letters>.doors{top:var(--ld-top,0px);height:var(--ld-h,min(100%,100svh))}
}
@media(min-width:37.5em){.tm-pos{display:none}}