@charset "UTF-8";

/* =========================================================
   style.css - イベント情報一覧（events）専用
   ページタイトル帯 / お問い合わせ帯 / フッターは base.css 側にある
   ========================================================= */

/* =========================================================
   イベント一覧
   ========================================================= */

.events {
    padding-top: 169px;
}

/* 一覧だけ .inner より広い（Figma: 1190px） */
.events__list {
    width: 88%;
    max-width: 1190px;
    margin-inline: auto;
}

/*
    2 件目以降は上に区切り線。
    Figma の線は 1190px 進むあいだに 6px 下がる斜め線だが、
    0.3 度で目視できないうえ再現するとレスポンシブが破綻するので水平で引く。
*/
.events__item + .events__item {
    margin-top: 83px;
    padding-top: 115px;
    border-top: 1px solid #d9d9d9;
}

.events__article {
    display: flex;
    align-items: center;
    gap: 206px;
}

.events__image {
    flex: 0 0 413px;
    aspect-ratio: 413 / 233;
    object-fit: cover;
}

.events__body {
    flex: 0 0 386px;
}

.events__title {
    color: #3b2a1a;
    font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.45;
}

.events__text {
    margin-top: 32px;
    color: #3b2a1a;
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================================
   ページ送り
   本体は base.css の .pagination（施工事例ページと共通）。ここは上の余白だけ。
   ========================================================= */

.pagination {
    margin-top: 169px;
}

/* =========================================================
   お問い合わせ帯
   本体は base.css の .contact-cta。ここは上の余白だけ。
   ========================================================= */

.contact-cta {
    margin-top: 264px;
}

/* =========================================================
   スクロールで浮かび上がる演出
   ========================================================= */

.js-fadeIn {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.js-fadeIn.is-visible {
    opacity: 1;
    transform: none;
}

/* =========================================================
   SP（768px 以下）
   ========================================================= */

@media (max-width: 768px) {

    /* --- イベント一覧 --- */

    .events {
        padding-top: 56px;
    }

    /* SP は写真を上、文章を下に積む */
    .events__article {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .events__item + .events__item {
        margin-top: 48px;
        padding-top: 48px;
    }

    .events__image {
        flex: 0 0 auto;
        width: 100%;
    }

    .events__body {
        flex: 0 0 auto;
    }

    .events__title {
        font-size: 20px;
    }

    .events__text {
        margin-top: 16px;
        font-size: 15px;
    }

    /* --- ページ送り --- */

    .pagination {
        margin-top: 64px;
    }

    /* --- お問い合わせ帯 --- */

    .contact-cta {
        margin-top: 90px;
    }
}

/* =========================================================
   小さめのスマホ（480px 以下）
   デザインどおりの改行位置だと 1 行が画面幅を超えるので、
   このサイズからは <br> を無効にして自然折り返しに任せる。
   ========================================================= */

@media (max-width: 480px) {

    .contact-cta__text br {
        display: none;
    }
}

/* =========================================================
   アニメーション抑制
   ========================================================= */

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

    .js-fadeIn {
        opacity: 1;
        transform: none;
        transition: none;
    }
}