:root {
  --ink: #171717;
  --paper: #fff;
  --focus: #0066cc;
  --column-font: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color: var(--ink);
  background: var(--paper);
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--paper);
}

/* ==================== V3 カバーページ ==================== */
.cover-page main {
  width: 100%;
}

.cover-visual {
  position: relative;
  width: min(100%, 842px);
  margin: 0 auto;
}

.cover-visual > img {
  display: block;
  width: 100%;
  height: auto;
}

.hotspot {
  position: absolute;
  display: block;
  background: transparent;
  border-radius: .45rem;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 235, 0, .24);
}

.hotspot:hover {
  background: rgba(255, 235, 0, .09);
}

.hotspot:focus-visible,
.vertical-title:focus-visible,
.story-entry a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* 画像内の「過去の実績」 */
.hotspot-works {
  top: 65.8%;
  left: 25.2%;
  width: 10.2%;
  height: 13.2%;
}

/* 画像内の「お問い合わせ」 */
.hotspot-contact {
  top: 71.6%;
  left: 17.8%;
  width: 9.5%;
  height: 13.6%;
}

/* 画像内の「最近の話」 */
.hotspot-recent {
  top: 77%;
  left: 10.2%;
  width: 9.2%;
  height: 15%;
}

/* ==================== コラム共通 ==================== */
.column-page {
  font-family: var(--column-font);
}

.column-sheet {
  position: relative;
  width: min(100%, 838px);
  min-height: max(100vh, 1484px);
  margin: 0 auto;
  padding-top: clamp(3.3rem, 9.8vw, 5.1rem);
  padding-right: 11.2%;
  padding-bottom: 7rem;
  padding-left: 11.2%;
}

.vertical-title {
  position: absolute;
  top: clamp(3rem, 4.3vw, 4rem);
  right: 10.5%;
  display: block;
  width: clamp(48px, 7.6vw, 64px);
}

.vertical-title img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==================== コラム一覧 ==================== */
.story-list {
  width: min(68%, 420px);
}

.story-entry {
  margin: 0 0 clamp(1.65rem, 4.2vw, 2.2rem);
}

.story-entry a {
  display: inline-flex;
  flex-direction: column;
  color: var(--ink);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.45;
  letter-spacing: .025em;
  text-decoration: none;
}

.story-entry time {
  font-variant-numeric: tabular-nums;
}

.story-entry a:hover span {
  text-decoration: underline;
  text-underline-offset: .25em;
}

/* ==================== コラム本文 ==================== */
.article-body {
  width: min(68%, 430px);
  font-size: clamp(.95rem, 2.05vw, 1.08rem);
  line-height: 1.65;
  letter-spacing: .055em;
}

.article-body p {
  margin: 0 0 1.75em;
}

/* 読み上げ用の見出し。画面上では非表示です。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 520px) {
  .column-sheet {
    min-height: 100vh;
    padding-top: 3.2rem;
    padding-bottom: 5rem;
  }

  .story-list,
  .article-body {
    width: 72%;
  }

  .vertical-title {
    top: 3rem;
    right: 8.5%;
    width: 48px;
  }
}