/* 縦書きエントリー専用。ビルドせず、このファイルを直接読み込む。 */
.entry-vertical {
  --vr-font-size: 18px;
  --vr-line-length: clamp(calc(var(--vr-font-size) * 20), calc(100svh - 8rem), calc(var(--vr-font-size) * 27.222222));
  --vr-row-gap: 80px;
  --vr-line-height: 1.7;
  --vr-bottom-space: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 24px;
}

.entry-vertical > * { grid-column: 1 / -1; min-width: 0; }
.entry-vertical > .vr-section { grid-row: 1; }
.entry-vertical > .entry-updated { grid-row: 2; margin: 0 0 20px; }
.entry-vertical > .entry-audio { grid-column: 1; grid-row: 3; }
.entry-vertical > .entry-feedback { grid-column: 2; grid-row: 3; }
.entry-audio p { margin: 2px 0 12px; font-size: 16px; }
.entry-audio iframe { display: block; }

/* JSが使えない場合は通常の横書きとして読み進められる。 */
.vr-section { position: relative; min-width: 0; }
.vr-section:not(.is-vertical-ready) .columnImage { max-width: 100%; height: auto; }

/* JSが前後の移動先を選ぶための領域。CSSの自動吸着では現在の段へ戻さない。 */
.vr-snap-page {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.is-vertical-ready .vr-cont {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: var(--vr-font-size);
  line-height: var(--vr-line-height);
  width: 100%;
  height: var(--vr-line-length);
  column-width: var(--vr-line-length);
  column-gap: var(--vr-row-gap);
  column-rule: 1px dashed #808080;
  column-fill: auto;
  margin: 0 auto;
}

.is-vertical-ready .entry-body {
  font-size: var(--vr-font-size);
  line-height: var(--vr-line-height);
}
.is-vertical-ready .vr-cont p { text-indent: 1em; line-height: var(--vr-line-height); }
.is-vertical-ready .vr-cont p.kakko { text-indent: 0; }
.is-vertical-ready .vr-cont .tate { text-orientation: mixed; }
.is-vertical-ready .vr-cont a {
  text-decoration: none;
  border: 0;
  border-block-start: 1px dashed;
  padding-block-start: 3px;
}
.is-vertical-ready .vr-cont a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.is-vertical-ready .entry-date { margin: 0 10px 15px 0; text-align: right; }
.is-vertical-ready .entry-labels { margin: 0 0 25px 30px; text-align: right; }
.is-vertical-ready .entry-body h2 { margin-top: 0; margin-right: 30px; }
.is-vertical-ready .vr-cont blockquote { margin: 0 20px; padding: 25px 30px; border: 0; background: #f2f2f2; }
.is-vertical-ready .vr-cont :is(dl, ol, ul) { overflow: visible; padding: revert; }
.is-vertical-ready .vr-cont .entry-labels { padding: 0; }

/* 画像ユニットの縦横比を保ち、段の高さと画面幅の両方に収める。 */
.is-vertical-ready .vr-cont :is([class*="column-image-"], [class*="column-media-"], [class*="column-eximage-"]) {
  float: none;
  width: auto;
  max-width: var(--vr-available-width);
  break-inside: avoid;
  margin: 0 20px;
}
.is-vertical-ready .vr-cont .columnImage {
  display: block;
  width: min(var(--vr-available-width), calc(var(--vr-line-length) * var(--vr-image-ratio, 1)));
  height: auto;
  aspect-ratio: var(--vr-image-ratio, 1);
  max-width: var(--vr-available-width);
  max-height: var(--vr-line-length);
  object-fit: contain;
}
.is-vertical-ready .vr-cont :is([class*="column-image-"], [class*="column-media-"], [class*="column-eximage-"]) > a {
  display: block;
  padding: 0;
  border: 0;
}

/* 動画・表・コード・目次・リンクカードは横書きのまとまりとして配置する。 */
.is-vertical-ready .vr-cont :is([class*="column-youtube-"], [class*="column-video-"], [class*="column-map-"], [class*="column-street-view-"], [class*="column-table-"], [class*="column-quote-"], .outline, pre, table) {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  float: none;
  width: min(36rem, var(--vr-available-width));
  max-width: var(--vr-available-width);
  max-height: var(--vr-line-length);
  overflow: auto;
  break-inside: avoid;
  margin: 0 20px;
}
.is-vertical-ready .vr-cont :is(.outline, [class*="column-quote-"]) p { text-indent: 0; }
.is-vertical-ready .vr-cont .column-iframe {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0;
  aspect-ratio: 16 / 9;
}
.is-vertical-ready .vr-cont iframe { display: block; max-width: var(--vr-available-width); border: 0; }
.is-vertical-ready .vr-cont .column-iframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.is-vertical-ready .vr-cont .quoteLink { border: 0; padding: 15px; }
.is-vertical-ready .vr-cont .quoteImage { max-width: 150px; height: auto; }
.is-vertical-ready .vr-cont .outline-list { padding-inline-start: 1em; }

@media (max-width: 767px) {
  .entry-vertical { --vr-row-gap: 48px; grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .entry-vertical > .entry-audio { grid-column: 1; grid-row: 1; margin-bottom: 20px; }
  .entry-vertical > .vr-section { grid-row: 2; }
  .entry-vertical > .entry-updated { grid-row: 3; }
  .entry-vertical > .entry-feedback { grid-column: 1; grid-row: 4; }
}

@media print {
  .vr-snap-page { display: none; }
  .entry-vertical { display: block; }
  .entry-vertical .vr-section { height: auto !important; }
  .is-vertical-ready .vr-cont { writing-mode: horizontal-tb; height: auto; columns: auto; }
  .is-vertical-ready .vr-cont :is(table, pre, .outline, [class*="column-table-"]) { max-height: none; overflow: visible; }
  .entry-vertical :is(.entry-audio, .entry-feedback) { display: none; }
}