@charset "UTF-8";

/* ================================================================
   株式会社Logic - news.css
   新着情報 一覧 / 詳細ページ 専用スタイル
   ※ PKOBO-News01（news/）の出力に合わせたスタイル
================================================================ */

/* ================================================================
   セクション見出しの装飾（ページ共通）
   ※ このページは全セクションを同じ形で揃える。
     形＝帯3本積み。トップの新着情報と同じマーク
     （定義は common.css の .c-mark-bars3）。
   ※ サイズ調整は --news-bar / --news-gap を触る。
     外形 = 帯3本 + 隙間2つで正方形になる。
   ※ 一覧・詳細の両方で使うので body クラスを両方並べる。
================================================================ */

/* ── パンくず ──
   ※ ※重要※ 直下のセクションの「上端の色」に合わせる。
     ここでは一覧（.news-list）の --news-bg-top（#111111）。
     一覧は上から下への勾配なので、揃える先は
     下端ではなく上端。ずれると境目に段差が見える。
   ※ 共通の .breadcrumb は --color-bg（#0D0D0D）なので、
     そのままだと 4階調暗い帯がヒーローと一覧の間に入る。
   ※ 一覧の上端色を変えたときはここもセットで直すこと。
   ※ 罫線も暗背景向けにする。 */
.page-news .breadcrumb {
    background-color: var(--color-bg-raise);
    border-bottom-color: var(--color-border-dark);
}

/* ── セクションの地（上から下への勾配）──
   上端 #111111 → 下端 #0D0D0D。
   ※ トップの強み（index.css の .index-strengths）、
     事業内容の対応地域（service.css）、
     施工実績（works.css）、会社概要の地図（company.css）、
     メールフォーム（contact.css）と同じ持ち方。
   ※ 下端をページ背景（--color-bg ＝ #0D0D0D）と同値にして
     次の共通CTA へつなげる。
   ※ 色を変えるときは下の2つの変数だけを触る。
   ※ background-color も下端色で持つ。
     グラデーションの描画に隙が出たときの保険。
   ※ 一覧・詳細の両方で使うので body クラスを両方並べる。
     ※ 詳細ページのセクション名が違う場合は、
       そちらのクラスをここに追加する。 */
.page-news .news-list {
    --news-bg-top: var(--color-bg-raise);
    /* 上端：#111111 */
    --news-bg-bottom: var(--black-3);
    /* 下端：#0D0D0D */

    background-color: var(--news-bg-bottom);
    background-image: linear-gradient(to bottom,
        var(--news-bg-top) 0%,
        var(--news-bg-bottom) 100%);
}

/* ── 英字見出しの大きさ ──
   トップの各セクション・共通CTA・施工実績・会社概要と
   揃えてある。向こうの定義は
   index.css の「英字見出しの大きさ」ブロック、
   common.css の .sec-cta__head、works.css / company.css の
   .page-* 側。値を変えるときはセットで見直すこと。
     ベース      32〜42px
     1024px以上  42〜60px
   ※ 共通側の既定（.section-head__title）は 24〜30px → 768px以上 30〜40px。
     英字を見出しの主役にしている --swap のセクションでは
     小さいのでここで引き上げる。
   ※ 一覧・詳細の両方で使うので body クラスを両方並べる。
   ※ 詳細度 0-2-0。共通の .section-head__title（0-1-0）より強いので、
     メディアクエリの順番に関係なく勝つ。 */
.page-news .section-head__title,
.page-news-detail .section-head__title {
    font-size: clamp(2rem, 7vw, 2.625rem);
}

@media (min-width: 1024px) {
    .page-news .section-head__title,
    .page-news-detail .section-head__title {
        font-size: clamp(2.625rem, 4.2vw, 3.75rem);
    }
}

.page-news .section-head__label,
.page-news-detail .section-head__label {
    --news-gap: 0.125rem;
    --news-bar: calc((var(--mark-size) - var(--news-gap) * 2) / 3);
    --label-mark: var(--mark-size);
    --mark-ink: var(--color-text-light);
}

.page-news .section-head__label::before,
.page-news-detail .section-head__label::before {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(var(--mark-ink) 0 0),
        linear-gradient(var(--mark-ink) 0 0),
        linear-gradient(var(--mark-ink) 0 0);
    background-size: 100% var(--news-bar);
    background-repeat: no-repeat;
    background-position:
        left top,
        left center,
        left bottom;
}

/* ================================================================
   一覧（カードリスト）
   ※ 以前は2色の罫線で区切るテキストリストだった。
     トップの新着情報と同じ形で揃えていたが、
     一覧ページはサムネイルを見せる形に変更した。
     トップページ側は罫線リストのまま据え置いている。
   ※ ただし2色の罫線（--news-line-accent）はカード内の
     区切り線として残してある。形が変わっても
     「このサイトの新着情報」だと分かる要素を1つ持たせる意図。
     やめる場合は .news-card__body の background-* を消す。
================================================================ */

.news-list__body {
    max-width: var(--section-width-lg);
    margin-inline: auto;
    margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
    .news-list__body {
        margin-top: var(--spacing-xl);
    }
}

/* ※ 2列までにとどめる。記事は抜粋のテキストを持つので、
     3列にすると1行あたりの文字数が減りすぎて読みにくい。
     写真だけを並べる施工実績（3列）とは事情が違う。 */
.news-list__list {
    display: grid;
    gap: var(--spacing-md);
}

@media (min-width: 576px) {
    .news-list__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

@media (min-width: 768px) {
    .news-list__list {
        gap: var(--spacing-lg);
    }
}

/* ※ カードの高さを行内で揃えるため、li と a を縦に伸ばす。
     タイトルや抜粋の行数が記事ごとに違っても、
     カードの下端が揃う。 */
.news-list__item {
    display: flex;
}

.news-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* ※ カードの面。--black-2（#080808）。
         セクションの地（#111111 → #0D0D0D の勾配）より
         一段沈むので、カードの輪郭が面として見える。
       ※ 以前は背景を持たず、セクションの地を
         そのまま透かしていた。
       ※ 色は黒スケール経由で持つ（common.css の :root）。
         実値のベタ書きはしない。 */
    background-color: var(--black-2);
    /* ※ 共通お問い合わせセクションのカード（common.css の .cta-group）と
         同じ罫線。色は --color-border。
       ※ ホバーでは罫線を変えない（固定）。写真の彩度・拡大と
         タイトルの白化で「押せる」合図は十分なので、罫線は輪郭として置くだけ。 */
    border: 1px solid var(--color-border);
}

/* ── サムネイル ──
   ※ 比率は 16 / 10。施工実績（正方形）と変えているのは、
     記事のサムネイルは横位置の写真が入ることが多いため。
   ※ 背景色は遅延読み込みの待ち時間に見える色。
   ※ .js-mask（帯リビール）は付けない。
     common.css の .js-mask > * { opacity: 0 } は JS が
     .is-revealed を付けるまで中身を隠すため、リビールが
     発火しないと空の箱のまま残る。CMS画像は
     「確実に出る」ことを優先する（works.php と同じ判断）。 */
.news-card__thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background-color: var(--color-bg-light);
}

/* ※ グレースケール量は共通の写真用変数を参照する。
     値の定義は common.css の :root。
   ※ ホバーで彩度を戻し、わずかに寄る。
     カード全体がリンクなので「押せる」合図として働く。 */
.news-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(var(--photo-grayscale));
    transition:
        filter 0.5s ease,
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card:is(:hover, :focus-visible) .news-card__image {
    filter: grayscale(0%);
    transform: scale(1.03);
}

/* 画像が登録されていない記事のプレースホルダー（OGP画像を流用）。
   ※ 目的はカードの高さを揃えることなので目立たせない。
     実際の記事画像と区別できるよう、彩度を落として一段沈ませる。
   ※ ホバーでも彩度は戻さない。押しても拡大するものが無いため。 */
.news-card__thumb--placeholder .news-card__image {
    filter: grayscale(100%);
    opacity: 0.45;
}

.news-card:is(:hover, :focus-visible) .news-card__thumb--placeholder .news-card__image {
    filter: grayscale(100%);
    transform: none;
}

/* ── 本文側 ──
   ※ 上端の2色の罫線は、以前のテキストリストの区切り線を
     そのまま持ってきたもの。
     左：墨黒・短く・太く（2px）／右：グレー・全幅・細く（1px）。
   ※ 黒の長さは --news-line-accent（common.css）で一元管理。
     トップの新着情報と同じ値を共有している。
   ※ flex: 1 は、カード下端を行内で揃えるため。 */
/* カード上端の2色の罫線。
   ※ 左：白・短く・太く（2px）／右：白14%・全幅・細く（1px）。
     暗転前は左が墨黒だったが、黒地では消えるので白に反転。
     トップの .index-news__link::before と同じ扱い。 */
.news-card__body {
    /* ※ 短い白線（::before）の絶対配置の基準。 */
    position: relative;
    flex: 1;
    /* ※ ※重要※ 中身を縦の flex にする。
         下の Read More（.news-card__more）を
         margin-top: auto で下端へ押し出すため。
         これがないと、抹粋が短い記事で
         Read More が上に浮いて、隣のカードと
         高さが違うときに位置が揃わない。
       ※ カード自体の高さはグリッドの stretch で
         行内に揃う（.news-list__item / .news-card の flex）。
         ここの flex: 1 はその高さを受け取る側。 */
    display: flex;
    flex-direction: column;
    padding-top: var(--spacing-sm);
    /* ※ 左右と下の余白。
         カードに面（純黒）を持たせたので、
         文字が面の端に張り付かないよう内側に入れる。
       ※ ※重要※ 上端の罫線（下の background と ::before）は
         どちらも padding の外側に描かれる。
         つまり罫線は全幅のまま、文字だけが内側に入る。
         共通CTAの .cta-group__title（下線を枠の全幅に
         伸ばすために余白を内側で持つ）と同じ考え方。
       ※ サムネイル（.news-card__thumb）はカード幅いっぱいのまま。
         写真を端まで見せる方針なので、こことは揃えていない。 */
    padding-inline: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    /* ※ 上端の2色の罫線。
         左：白・短く・太く（2px）/ 右：白14%・全幅・細く（1px）。
       ※ 短い線の長さは --news-line-accent（common.css の :root）。
         トップの新着情報と同じ値を共有している。
       ※ ※重要※ ホバーで伸ばす演出はしない。
         一度 ::before に分けて width を動かしていたが、
         カードが最大6枚並ぶ一覧では動きが多すぎた。
         同じカードで既に写真の彩度・拡大、
         タイトルの濃さ、矢印の位置が動いている。
         ※ トップ（.index-news__link）は 3件の
           テキストリストなので伸ばす演出を持っている。
           一覧とは件数と密度が違うので揃えていない。 */
    background-image:
        linear-gradient(var(--color-text-inverse) 0 0),
        linear-gradient(var(--color-border) 0 0);
    background-size:
        var(--news-line-accent) 2px,
        100% 1px;
    background-repeat: no-repeat;
    background-position:
        left top,
        left top;
}

.news-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

.news-card__meta .up_ymd {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
}

/* カテゴリバッジ：白地に黒文字。トップの新着情報と揃える。
   ※ 暗転前は「黒地に白文字」。黒地では面が消えて
     白文字だけが浮き、バッジに見えなくなる。 */
.news-card__meta .catName {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.4;
    background-color: var(--color-text-inverse);
    color: var(--black-3);
}

/* ※ 暗転前は墨黒。紙面上で最も濃い色として目を引く
     役割だったので、黒地では最も明るい色に置き換える。 */
.news-card__meta .newMark {
    font-family: var(--font-en);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--color-title);
}

/* ※ 行数を2行で切る。記事ごとのタイトル長でカードの高さが
     ばらつくのを防ぐ。3行以上のタイトルは想定していない。
   ※ line-clamp は -webkit- 付きが実質の標準。
     未対応環境では単に折り返しが続くだけで、崩れはしない。 */
.news-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 1.0625rem;
    letter-spacing: 0.08em;
    line-height: 1.7;
    margin-bottom: 0.5rem;
    /* ※ 平時は一段薄く、ホバーで白に上げる。
         トップの新着情報（index.css の
         .index-news__item .title）と同じ手法。
         値も向こうと同じ 0.85。
       ※ ※重要※ opacity でなく color で持つ。
         opacity だと子要素ごと薄くなるので、
         文字だけを動かしたい場面では color の方が確か。
         サイト内の濃淡はすべて rgba で揃えてある。
       ※ 平時の濃さを変えるときはこの1行を触る。
         トップ側とセットで見直すこと。 */
    color: rgba(245, 244, 242, 0.85);
    transition: color var(--transition);
}

@media (min-width: 768px) {
    .news-card__title {
        font-size: 1.125rem;
    }
}

.news-card:is(:hover, :focus-visible) .news-card__title {
    color: var(--color-text-inverse);
}

/* ※ 抜粋は3行で切る。文字数は news.php の $commentNum が
     持っているが、行数はカードの幅で変わるのでここでも押さえる。 */
.news-card__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-text-light);
}

/* ── 続きを読む ──
   ※ カード全体がリンクなので機能上は不要だが、
     カードが押せることの合図として置く。
   ※ 矢印は画像・アイコンフォントを使わず、
     border 2辺を45度回転させて描く（サイト共通の手法）。
   ※ 右寄せにするため inline-flex ではなく flex にしてある。
     inline-flex のままだとボックスが中身の幅しか持たないので、
     justify-content も margin-left: auto も効かない。
     flex ならボックスが本文幅いっぱいに広がるので、
     中身（文字＋矢印）だけを右端に寄せられる。
     左寄せに戻すときは display: inline-flex に戻し、
     justify-content の1行を削る。
   ※ 文字と矢印の間隔（gap）は変わらない。 */
.news-card__more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    /* ※ ※重要※ margin-top: auto でカードの下端へ押し出す。
         上の .news-card__body を縦の flex にしてあるので、
         余った高さがすべてこの上に入る。
         隣のカードと抹粋の行数が違っても、
         Read More の位置が行内で揃う。
       ※ 以前は var(--spacing-sm) の固定値。
         文字との最低間隔を保ちたい場合は、
         上の .news-card__text に margin-bottom を付ける。 */
    margin-top: auto;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--color-title);
}

.news-card__more::after {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition);
}

.news-card:is(:hover, :focus-visible) .news-card__more::after {
    transform: rotate(45deg) translate(2px, -2px);
}

/* 記事が0件のとき */
.news-list__list:empty::before {
    content: '現在、新着情報はありません。';
    display: block;
    padding-block: var(--spacing-xl);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--color-text-light);
}

/* ページ送り
   ※ CMS既定のページャーHTML（pager_dsp() の ['dsp']）は使わず、
     news.php 側でマークアップを組んでいる。
     クラス名を変えるときは両方を合わせること。
   ※ 角は落とさない（このサイトは装飾をすべて直角で組んでいる）。
   ※ 現在ページは黒地に白文字。カテゴリバッジと同じ扱いにして、
     「今ここ」の表現をページ内で統一する。 */
.news-list__pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
    .news-list__pager {
        margin-top: var(--spacing-xl);
    }
}

.news-list__pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: 0.5rem;
    font-family: var(--font-en);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition);
}

.news-list__pager-num:is(:hover, :focus-visible) {
    color: var(--color-title);
    border-color: var(--color-text-inverse);
}

/* ※ 現在ページはカテゴリバッジと同じ白地に黒文字。
     暗転前は黒地に白文字だったが、黒地では
     面も枠線も消えて「今ここ」が伝わらなくなる。 */
.news-list__pager-num.is-current {
    color: var(--black-3);
    background-color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
}

@media (prefers-reduced-motion: reduce) {

    .news-card__image,
    .news-card:is(:hover, :focus-visible) .news-card__image {
        transition: none;
        transform: none;
    }

    .news-card__more::after,
    .news-card:is(:hover, :focus-visible) .news-card__more::after {
        transition: none;
    }
}

/* ================================================================
   詳細
================================================================ */

.news-detail__body {
    max-width: var(--section-width-narrow);
    margin-inline: auto;
    /* ※ 本文カラムに純黒（--black-1 = #000000）の面を敷く。
         セクションの地（--color-bg = #0D0D0D）より一段沈むので、
         本文の領域が面として立ち上がる。
         一覧のカード（.news-card の --black-1）と同じ持ち方。
       ※ 実値のベタ書きはしない。黒はスケール（common.css の :root）
         経由で持つ。 */
    background-color: var(--black-1);
    /* ※ 面の輪郭を見せる罫線。色は本文内の他の罫線と揃えて --color-border（白15%）。 */
    border: 1px solid var(--color-border);
    /* ※ 面の端に文字・見出し下線・画像が張り付かないよう内側に余白を入れる。
         幅の狭いスマホでは左右を詰め、幅が広がるほど左右・上を広げる。
           ベース      上2rem   左右1.5rem
           576px以上   上2rem   左右2rem
           768px以上   上3rem   左右2rem
       ※ 下は全段共通で 3.75rem。ショートハンドの padding は上・左右のみにし、
         padding-bottom を別に持つ（各クエリの padding で上書きされないよう各段で明示）。 */
    padding: 2rem 1.5rem;
    padding-bottom: 3.75rem;
}

@media (min-width: 576px) {
    .news-detail__body {
        padding: 2rem 2rem;
        padding-bottom: 3.75rem;
    }
}

@media (min-width: 768px) {
    .news-detail__body {
        padding: 3rem 2rem;
        padding-bottom: 3.75rem;
    }
}

.news-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--spacing-xs);
}

.news-detail__meta .up_ymd {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
}

/* カテゴリバッジ：一覧・トップと同じ白地に黒文字。 */
.news-detail__meta .catName {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.4;
    background-color: var(--color-text-inverse);
    color: var(--black-3);
}

/* ※ 下線は一覧のカード（.news-card__body）と同じ
     「全幅の細線（白14%）＋左端の短い白線」の2本構成。
     トップの新着情報とも揃う。
   ※ ※重要※ 以前は border-bottom の1本だった。
     border では2色に分けられないので background に変えてある。
   ※ 短い線の長さは --news-line-accent（common.css の :root）。
     一覧・トップと同じ値を共有している。
   ※ 一覧のカードはホバーで短い線が伸びるが、
     ここは見出し（リンクでない）なので固定。
     そのため疑似要素に分けず background の2レイヤーで描く。
   ※ 短い線は 2px、全幅の線は 1px。
     太さの差で重なっていることを見せる。 */
.news-detail__title {
    font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    letter-spacing: 0.1em;
    line-height: 1.6;
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    background-image:
        linear-gradient(var(--color-text-inverse) 0 0),
        linear-gradient(var(--color-border) 0 0);
    background-size:
        var(--news-line-accent) 2px,
        100% 1px;
    background-repeat: no-repeat;
    background-position:
        left bottom,
        left bottom;
}

@media (min-width: 768px) {
    .news-detail__title {
        font-size: clamp(1.75rem, 3vw, 2.125rem);
    }
}

.news-detail__figure {
    margin-bottom: var(--spacing-md);
}

.news-detail__figure img {
    width: 100%;
    height: auto;
    /* ※ アスペクト比を固定する。ベース（576px未満）は
         縦を少し高く 16/11、576px以上で 16/10にする。
         幅の狭いスマホで写真の縦幅を稼ぐ意図。
       ※ height:auto だと aspect-ratio が効かないので、
         比を優先させるには object-fit で埋める。 */
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

@media (min-width: 576px) {
    .news-detail__figure img {
        aspect-ratio: 16 / 10;
    }
}

/* ※ ※重要※ 本文はCMS（PKOBO-News01）のWYSIWYG出力。
     エディタが font-size / color / line-height などを
     インラインstyleで埋め込むことがあり、そのままだと
     詳細度でCSSより強く、字組みがサイトの基準からずれる。
     （特に画像を含む記事で顕著）
   ※ そこで字組み系プロパティは !important でCSS側を優先させる。
     色・書体・行間・字間・文字サイズをここで一元管理する。
   ※ レイアウト系（margin/padding 等）は記事ごとの調整を
     許容したいので !important は付けない。字組みだけ固定する。
   ※ 子要素のインライン値も払うため、p/span/div 等に inherit を
     !important でかけて親（.news-detail__content）の値に揃える。 */
.news-detail__content {
    font-family: var(--font-family) !important;
    font-size: 1.05rem !important;
    line-height: 2 !important;
    letter-spacing: normal !important;
    color: var(--color-text) !important;
}

@media (min-width: 768px) {
    .news-detail__content {
        font-size: 1.1rem !important;
    }
}

.news-detail__content :is(p, span, div, li, td, th, a, strong, em) {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
}

.news-detail__content p {
    margin-bottom: var(--spacing-sm);
}

.news-detail__content img {
    max-width: 100%;
    height: auto;
    margin-block: var(--spacing-sm);
}

.news-detail__content a {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transition: opacity var(--transition);
}

.news-detail__content a:hover {
    opacity: 0.65;
}

/* 一覧へ戻る */
.news-detail__back {
    margin-top: 3.75rem;
    text-align: center;
}

.news-detail__back-button {
    min-width: 16rem;
}

/* ※ 矢印の形とホバーの動きは共通側に任せる。
     形 … common.css の .btn__arrow / .btn__arrow--back
     動き … .btn:is(:hover, :active) .btn__arrow--back
   ※ ※重要※ 以前はここで .news-detail__back-arrow という
     独自クラスを使ってホバーの動きを上書きしていたが、
     そのクラスは共通の矢印セレクタ群
     （.c-arrow, .btn__arrow, …）に含まれていないため
     transition を持たず、動きが瞬間的に切り替わっていた。
     HTML 側からそのクラスを外し、
     共通側の translate を左向きに直して解消してある。
   ※ 共通側の矢印セレクタ群に新しいクラスを
     追加するときは、形と transition の両方を
     そちらで拾うこと。 */