縦書きレイアウト

<div class="page">
  <header class="nav">
    <div class="brand"><span class="cup"></span>MOON BREW</div>
    <span class="tag">珈琲と、しずかな時間</span>
  </header>

  <section class="hero">
    <div class="vtext">
      <h1 class="lead-v">
        <span class="line big">月夜に深煎り</span>
        <span class="line">湯気のむこうに<br>香りが立ちのぼる</span>
        <span class="line sub">― 本日の一杯 ―</span>
      </h1>
    </div>

    <div class="photo">
      <img src="https://picsum.photos/240/300?random=21" alt="一杯のコーヒー">
      <div class="caption">
        <p class="name">満月のブレンド</p>
        <p class="price">¥640</p>
        <p class="desc">深いコクと、ほろ苦い余韻。</p>
      </div>
    </div>
  </section>
</div>

/* MOON BREW：縦書き和風レイアウトが主役 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  background:
    radial-gradient(500px 300px at 15% 0%, #3a2817 0%, transparent 60%),
    linear-gradient(165deg, #2b1d12 0%, #1d130a 100%);
  color: #f5ede1;
  min-height: 400px;
  overflow: hidden;
}
.page { padding: 16px 26px; }

.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; letter-spacing: 0.08em; }
.cup { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f3d9a8, #c98a3b); }
.tag { font-size: 12px; color: #c98a3b; letter-spacing: 0.1em; }

/* 縦書きエリアと写真を横並び */
.hero {
  margin-top: 14px;
  display: flex; align-items: flex-start; gap: 24px;
  justify-content: center;
}

.vtext {
  /* 縦書きの本体 */
  writing-mode: vertical-rl;
  text-orientation: upright;
  height: 280px;
}
.lead-v { display: flex; gap: 22px; }
.line {
  line-height: 1.9; letter-spacing: 0.14em;
  border-right: 1px solid rgba(201,138,59,0.25);
  padding-right: 4px;
}
.line.big { font-size: 30px; font-weight: 700; color: #f5ede1; }
.line { font-size: 16px; color: #e3d4bd; }
.line.sub { font-size: 13px; color: #c98a3b; letter-spacing: 0.2em; }

.photo {
  position: relative;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,0.5);
}
.photo img { display: block; width: 200px; height: 250px; object-fit: cover; }
.caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  background: linear-gradient(180deg, transparent, rgba(29,19,10,0.92));
}
.caption .name { font-size: 15px; font-weight: 700; }
.caption .price { font-size: 14px; color: #e0a04a; margin: 2px 0; }
.caption .desc { font-size: 11px; color: #cdb593; font-family: "Segoe UI", sans-serif; }

// 画像の読み込み失敗時に和色の無地へフォールバック
(function () {
  const img = document.querySelector('.photo img');
  if (!img) return; // null安全
  img.addEventListener('error', () => {
    img.style.background = 'linear-gradient(160deg, #5a3d22, #2b1d12)';
    img.removeAttribute('src'); // 壊れアイコンを隠す
  });
})();

<main class="stage">
  <article class="scroll">
    <h1 class="v-title">月光の<br>夜想曲</h1>
    <p class="v-body">
      静かな水面に　月が ひとひら 落ちて、<br>
      風はどこへ ともなく 言葉を運ぶ。
    </p>
    <p class="v-sign">― 縦書きの記憶</p>
  </article>
  <p class="hint">writing-mode: vertical-rl による縦組み</p>
</main>

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 360px;
  display: grid;
  place-items: center;
  /* 和紙のような淡い背景 */
  background:
    radial-gradient(1000px 600px at 50% 50%, #fbf6ec 0%, #f0e7d6 100%);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  color: #2b2620;
  overflow: hidden;
  padding: 20px;
}

.stage { text-align: center; }

/* 縦書きの巻物。右から左へ各段が並ぶ */
.scroll {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 270px;
  /* vertical-rlではブロック方向が右→左。flexの主軸をブロック方向(column)に
     合わせることで、各段(タイトル/本文/署名)が右から左へ横に並ぶ。
     row指定だと主軸がインライン方向=縦になり段が縦積みになって崩れる */
  display: inline-flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: 26px;
  padding: 8px 4px;
  margin-inline: auto;
}

.v-title {
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 700;
  letter-spacing: 0.25em;
  line-height: 1.7;
  /* 朱色のアクセント */
  border-right: 3px solid #b23a48;
  padding-right: 14px;
}

.v-body {
  font-size: clamp(15px, 3.6vw, 19px);
  line-height: 2;
  letter-spacing: 0.12em;
  color: #4a423a;
}

.v-sign {
  font-size: 13px;
  letter-spacing: 0.2em;
  color: #9a8f7e;
  align-self: flex-end;
}

.hint {
  margin-top: 22px;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #a89a83;
}