/* Kohana. 「扉」改良版 (2026-11-02, local prototype, not published)
   1) 幸せの手紙: two real letters (excerpt card + 「続きを読む」 with answers ①〜⑨). Reuses the paper card of story.css.
   2) IBJ AWARD banner beside the 「Kohana.について」 heading (only on the *-award pages).
   Uses the site's own tokens (base.css). Nothing of the published sections is restyled except inside these two parts. */

/* ---------- 1) letters ---------- */
.tm-note{max-width:36em;margin:calc(var(--ma-3)*-1) auto var(--ma-5);text-align:center;font-size:13px;line-height:1.8;color:var(--cocoa)}
.tm-list{max-width:960px;margin-inline:auto;align-items:start;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.letter.tm .paper{height:auto;padding:44px clamp(20px,5vw,34px) 24px;background:linear-gradient(180deg,#fffdf8,#fdf8f0)}
.tm-kind{margin-top:16px;text-align:center;font:400 11px/1.6 var(--sans);letter-spacing:.24em;color:var(--gold-ink)}
/* the excerpt sits on the ruled lines of the letter paper (line height = rule spacing) */
.tm-quote{margin:10px 0 0;padding:0;font:400 16px/34px var(--serif);letter-spacing:.05em;color:var(--cocoa-ink);
 background:repeating-linear-gradient(180deg,transparent 0 33px,rgba(176,138,62,.16) 33px 34px)}
.tm-ex{margin:0}
.tm-ex+.tm-ex{margin-top:34px}
.tm-ex-sub{font-size:15px}
.tm-src{display:block;font:400 11px/34px var(--sans);letter-spacing:.12em;color:var(--cocoa);text-align:right}
.letter.tm .from{margin-top:10px}
/* open / close */
.tm-more{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:.6em;width:100%;min-height:52px;margin-top:20px;padding:8px 44px;
 position:relative;border:1px solid rgba(166,135,80,.55);border-radius:999px;background:#fffdf8;color:var(--cocoa-ink);cursor:pointer;
 font:500 14px/1.5 var(--serif);letter-spacing:.08em;transition:background-color .2s,border-color .2s}
.tm-more-s{font:400 11.5px/1.5 var(--sans);letter-spacing:.06em;color:var(--cocoa)}
.tm-more i{position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
 rotate:45deg;transition:rotate .35s var(--ease),margin-top .35s var(--ease)}
.tm-more[aria-expanded="true"] i{rotate:225deg;margin-top:-2px}
.tm-more:hover{background:#fbf3e6;border-color:#a68750}
.tm-more:focus-visible,.tm-close:focus-visible{outline:3px solid var(--cocoa-ink);outline-offset:3px}
/* the full answers: height animates with grid rows; hidden from tab order and screen readers while closed */
.js .tm-full{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease)}
.js .tm-full.open{grid-template-rows:1fr;opacity:1}
.tm-full-in{overflow:hidden;min-height:0}
.js .tm-full:not(.open) .tm-full-in{visibility:hidden;transition:visibility 0s .5s}
.tm-kind-full{margin:22px 0 4px;padding-top:18px;border-top:1px solid rgba(176,138,62,.3);text-align:left;letter-spacing:.12em;line-height:1.8}
.tm-qa{list-style:none;margin:0;padding:0}
.tm-qa li{padding:18px 0;border-bottom:1px solid rgba(176,138,62,.18)}
.tm-q{display:flex;gap:.6em;font:500 14px/1.8 var(--serif);letter-spacing:.04em;color:var(--gold-ink)}
.tm-n{flex:none;font-size:16px;line-height:1.55}
.tm-a{margin-top:8px}
.tm-a p{font:400 16px/1.95 var(--sans);letter-spacing:.03em;color:var(--sumi)}
.tm-a p+p{margin-top:.5em}
.tm-close{display:block;min-height:48px;margin:16px auto 0;padding:8px 28px;border:1px solid rgba(166,135,80,.55);border-radius:999px;background:transparent;
 color:var(--cocoa-ink);font:500 14px/1.5 var(--serif);letter-spacing:.12em;cursor:pointer}
@media(min-width:64em){.tm-quote{font-size:17px}.tm-ex-sub{font-size:15.5px}}
@media(max-width:359px){.tm-more{padding-inline:36px}.tm-more i{right:16px}.tm-a p{font-size:15.5px}}
@media(prefers-reduced-motion:reduce){.js .tm-full,.js .tm-full:not(.open) .tm-full-in,.tm-more i{transition:none}}
@media(forced-colors:active){.tm-more,.tm-close{border:1px solid ButtonText}}

/* ---------- 2) IBJ AWARD banner beside the About heading ---------- */
.aw-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 16px}
.aw-ttl{flex:0 0 auto;max-width:100%}
.aw-row h2{margin:0}
.aw-badge{flex:none;margin:0 0 4px;width:clamp(120px,32vw,148px);line-height:0}
.aw-badge img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:3px;box-shadow:0 6px 16px rgba(43,36,32,.14),0 0 0 1px rgba(166,135,80,.35)}
@media(min-width:64em){.aw-row{justify-content:flex-start;gap:clamp(28px,3vw,44px)}.aw-badge{width:clamp(140px,11.5vw,160px);margin-bottom:8px}}
/* when the heading and the banner do not fit side by side, the banner wraps under the heading (the heading itself never wraps) */
@media(max-width:389px){.aw-badge{width:112px}}

/* ---------- comparison menu: two choices of two (phones and tablets) ---------- */
@media(max-width:63.99em){.kc-sel{grid-template-columns:1.1fr 1fr}}