/* トップページの控えめな装飾。余白・文字サイズ・カードの配置は変えない。 */
:root { --detail-line:#f1b3b8; --detail-shadow:0 4px 14px #6f24320c; }
.interview-heading h2 { position:relative; }
.interview-heading h2::after,
.essay-intro h2::after,
.word-header h2::after,
.news h2::after,
.contact-copy h2::after {
  content:"";
  position:absolute;
  bottom:-5px;
  width:32px;
  height:2px;
  border-radius:2px;
  background:var(--detail-line);
  pointer-events:none;
}
.interview-heading h2::after { left:0; bottom:1px; }
.essay-intro h2::after, .word-header h2::after, .contact-copy h2::after { left:calc(50% - 16px); }
.essay-intro h2::after { bottom:-8px; }
.word-header h2::after { bottom:-10px; }
.news h2 { position:relative; }
.news h2::after { left:0; }
.contact-copy h2::after { bottom:0; }

/* 記事リンクに細い下線を添え、写真の拡大は枠の中だけに収める。 */
.interview-photo { overflow:hidden; }
.interview-photo > img { transition:transform .45s ease-out; }
.interview-card, .essay-photo { transition:box-shadow .3s ease; }
.interview-card h3 a, .essay-copy h3 a, .news-list a {
  color:#262222;
  background-image:linear-gradient(var(--red),var(--red));
  background-position:0 100%;
  background-size:0 1px;
  background-repeat:no-repeat;
  transition:color .25s ease, background-size .3s ease;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.essay-copy time, .news-list time { color:#777; font-variant-numeric:tabular-nums; }
.news-list li { border-bottom-color:#e9e2e2; transition:border-color .3s ease; }
.recommend-badge { transform:rotate(-4deg); filter:drop-shadow(0 1px 1px #7e493518); }

/* 単語のイラスト枠に、ごく薄い紙の粒子を重ねる。 */
.word-tile {
  background-color:#fffefa;
  background-image:radial-gradient(#8c745e12 .5px,transparent .65px),radial-gradient(#8c745e09 .4px,transparent .6px);
  background-size:5px 5px,7px 7px;
  background-position:0 0,2px 3px;
  border-color:#e1d9d1;
  box-shadow:0 1px 3px #78553d05;
}

/* ボタン内の矢印は絶対配置にして、ボタンのサイズを変えない。 */
.contact-link { position:relative; box-shadow:var(--detail-shadow); }
.service-link { box-shadow:var(--detail-shadow); }
.service-link::after, .contact-link::after {
  content:"";
  position:absolute;
  right:20px;
  top:calc(50% - 4px);
  width:7px;
  height:7px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s ease;
  pointer-events:none;
}
.service-link, .contact-link, .word-index, .essay-filter .pill {
  transition:color .25s ease, background-color .25s ease, box-shadow .3s ease;
}
.view-all, .more-words { transition:color .25s ease; }
.grid-mark i { transition:background-color .25s ease; }
.plus-circle { transition:background-color .25s ease, color .25s ease; }
.news-list li > img { transition:transform .3s ease; }

/* キーボード操作でも、マウスを重ねたときと同じ反応を返す。 */
.interview-card:focus-within { box-shadow:var(--detail-shadow); }
.interview-card:focus-within .interview-photo > img { transform:scale(1.025); }
.interview-card h3 a:focus-visible, .essay-copy h3 a:focus-visible, .news-list a:focus-visible { color:var(--red); background-size:100% 1px; }
.essay-card:focus-within .essay-photo { box-shadow:var(--detail-shadow); }
.news-list li:focus-within { border-bottom-color:var(--detail-line); }
.news-list li:focus-within > img { transform:translateX(3px); }
.service-link:focus-visible, .contact-link:focus-visible { background-color:#fff7f6; box-shadow:0 5px 18px #6f243214; }
.service-link:focus-visible::after, .contact-link:focus-visible::after { transform:translateX(3px) rotate(45deg); }
.word-index:focus-visible, .essay-filter .pill:focus-visible { background-color:#cf0010; }
.view-all:focus-visible { color:var(--red); }
.view-all:focus-visible .grid-mark i { background-color:var(--coral); }
.more-words:focus-visible .plus-circle { color:#fff; background-color:var(--coral); }

@media (hover:hover) and (pointer:fine) {
  .interview-card:hover { box-shadow:var(--detail-shadow); }
  .interview-card:hover .interview-photo > img { transform:scale(1.025); }
  .interview-card h3 a:hover, .essay-copy h3 a:hover, .news-list a:hover { color:var(--red); background-size:100% 1px; }
  .essay-card:hover .essay-photo { box-shadow:var(--detail-shadow); }
  .news-list li:hover { border-bottom-color:var(--detail-line); }
  .news-list li:hover > img { transform:translateX(3px); }
  .service-link:hover, .contact-link:hover { background-color:#fff7f6; box-shadow:0 5px 18px #6f243214; }
  .service-link:hover::after, .contact-link:hover::after { transform:translateX(3px) rotate(45deg); }
  .word-index:hover, .essay-filter .pill:hover { background-color:#cf0010; }
  .view-all:hover { color:var(--red); }
  .view-all:hover .grid-mark i { background-color:var(--coral); }
  .more-words:hover .plus-circle { color:#fff; background-color:var(--coral); }
}

/* 線画とおすすめ印は画面に入ったとき一度だけ現れる。本文は常時表示する。 */
@media (prefers-reduced-motion:no-preference) {
  .detail-reveal { animation:detail-appear .7s ease-out both; }
}
@keyframes detail-appear { from { opacity:.25; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .interview-photo > img, .service-link::after, .contact-link::after, .news-list li > img { transform:none!important; }
  .service-link::after, .contact-link::after { transform:rotate(45deg)!important; }
}