@charset "UTF-8";

/*
 * 協賛者一覧（フェーズ2）: [kyosan_list] の表示用スタイル
 *
 * 色・余白・文字サイズ・最大幅は下の変数にまとめてある。
 * 文字サイズはPC・タブレットを基準にし、max-width: 600px でスマホ用に切り替える。
 * レイアウトの余白・配置は既存の600px / 960pxの段階調整を維持する。
 * SWELL の本文用の見出し・リスト装飾を打ち消すため、セレクタは .kyosan-list を頭に付けて詳細度を上げている。
 */

.kyosan-list {
    --kyosan-color-text: #000;
    --kyosan-color-band: #f8f7f5;
    --kyosan-color-row: #f7f4f2;
    --kyosan-color-select: #f1efec;
    --kyosan-color-on-gold: #fff;
    --kyosan-color-button: #fff;

    /*
     * 金色2つは指定色。ラベルの文字はミディアム。
     */
    --kyosan-color-label: #d1ab2f;
    --kyosan-color-number: #d0aa30;

    /* SWELL 側で Noto Serif JP を読み込んでいればそれが使われ、無ければ端末の明朝になる */
    --kyosan-font-family: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif;

    --kyosan-max-width: 1000px;
    --kyosan-space-event: 4.5em;
    --kyosan-space-kifusaki: 3em;
    --kyosan-space-group: 2.25em;

    --kyosan-band-padding-y: 1.75em;

    --kyosan-logo-size: 36px;
    --kyosan-logo-gap: 12px;
    --kyosan-illust-size: 96px;

    --kyosan-row-padding: 0.9em 1em;
    --kyosan-row-gap: 1em;
    --kyosan-row-space: 8px;
    --kyosan-naiyo-width: auto;
    --kyosan-naiyo-align: right;

    --kyosan-font-event: 23px;
    --kyosan-font-event-sub: 10px;
    --kyosan-font-nendo: 15px;
    --kyosan-font-year: 26px;
    --kyosan-font-number: 37.25px;
    --kyosan-font-group: 18px;
    --kyosan-font-kifusaki: 20px;
    --kyosan-font-total-label: 18px;
    --kyosan-font-total: 23px;
    --kyosan-font-total-unit: 13px;
    --kyosan-font-row: 16px;
    --kyosan-font-row-value: 20px;
    --kyosan-font-row-text: 16px;
    --kyosan-total-gap: 1.5em;

    /* 年度を切り替えたあと、固定ヘッダーにイベント見出しが隠れないようにする余白 */
    --kyosan-scroll-offset: 80px;

    max-width: var(--kyosan-max-width);
    margin-right: auto;
    margin-left: auto;
    color: var(--kyosan-color-text);
    font-family: var(--kyosan-font-family);
    letter-spacing: 0.08em;
}

.kyosan-list .empty {
    margin: 2em 0;
    text-align: center;
}

/* 見出し共通。SWELL が本文の h2〜h4 に付ける背景・罫線・疑似要素を消してから組み直す */
.kyosan-list .year-head > .title,
.kyosan-list .event-head > .title,
.kyosan-list .kifusaki-head > .title,
.kyosan-list .kyosan-group > .title {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--kyosan-color-text);
    font-family: inherit;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

.kyosan-list .year-head > .title::before,
.kyosan-list .year-head > .title::after,
.kyosan-list .event-head > .title::before,
.kyosan-list .event-head > .title::after,
.kyosan-list .kifusaki-head > .title::before,
.kyosan-list .kifusaki-head > .title::after,
.kyosan-list .kyosan-group > .title::before,
.kyosan-list .kyosan-group > .title::after {
    content: none;
}

/* イベント */
.kyosan-list .kyosan-event {
    margin: 0 0 var(--kyosan-space-event);
    scroll-margin-top: var(--kyosan-scroll-offset);
}

.kyosan-list .kyosan-event:last-child {
    margin-bottom: 0;
}

.kyosan-list .event-head {
    position: relative;
    overflow: visible;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--kyosan-logo-size) minmax(0, 1fr);
    column-gap: var(--kyosan-logo-gap);
    padding: var(--kyosan-band-padding-y) 0;
    background: none;
    text-align: left;
}

/* 帯の背景だけを画面幅に広げる。 */
.kyosan-list .event-band {
    position: absolute;
    z-index: -1;
    inset-block: 0;
    left: var(--kyosan-band-left, calc(50% - 50vw));
    width: var(--kyosan-band-width, 100vw);
    background: var(--kyosan-color-band);
    pointer-events: none;
}

/* 見出し左の紋。画像要素で表示し、テーマの疑似要素と分ける。 */
.kyosan-list .logo {
    display: block;
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: var(--kyosan-logo-size);
    height: var(--kyosan-logo-size);
    max-width: none;
    margin: 0;
    object-fit: contain;
    pointer-events: none;
}

/*
 * 帯の右上の和柄。img-illust.png（428×351）は左上に桜の円（約245px四方）、下に別の柄が入った1枚絵なので、
 * 画像全体を表示し、帯の上下にも和柄を重ねる。
 */
.kyosan-list .year-head::after {
    content: "";
    position: absolute;
    top: calc(var(--kyosan-illust-size) * -0.29);
    right: auto;
    left: calc(var(--kyosan-band-left, 50% - 50vw) + var(--kyosan-band-width, 100vw));
    transform: translateX(-100%);
    height: calc(var(--kyosan-illust-size) * 351 / 245);
    width: calc(var(--kyosan-illust-size) * 428 / 245);
    background: url("../img/img-illust.png") no-repeat center / contain;
    pointer-events: none;
}

.kyosan-list .event-head > .title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    position: relative;
    z-index: 1;
    text-align: left;
    font-size: var(--kyosan-font-event);
    letter-spacing: 0.18em;
}

.kyosan-list .sub-title {
    display: block;
    grid-column: 2;
    grid-row: 2;
    position: relative;
    z-index: 1;
    margin: 0.75em 0 0;
    padding: 0;
    text-align: left;
    font-size: var(--kyosan-font-event-sub);
    line-height: 1.4;
    letter-spacing: 0.12em;
}

/* JSが有効なときは選択で切り替え、送信ボタンを操作対象から外す。 */
.kyosan-list .is-auto .nendo-submit {
    display: none;
}

/* 年度プルダウン */
.kyosan-list .kyosan-nendo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 1.75em;
    padding-top: 2.5em;
}

.kyosan-list .nendo-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.kyosan-list .nendo-field {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* プルダウンの矢印。select の標準の矢印を消して、線2本の山形を重ねている */
.kyosan-list .nendo-field::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    width: 0.4em;
    height: 0.4em;
    margin-top: -0.3em;
    border-right: 1px solid var(--kyosan-color-text);
    border-bottom: 1px solid var(--kyosan-color-text);
    transform: rotate(45deg);
    pointer-events: none;
}

.kyosan-list .nendo-select {
    max-width: 100%;
    margin: 0;
    padding: 0.5em 2.5em 0.5em 0.9em;
    border: 1px solid #d1ab2f;
    border-radius: 0;
    background: transparent;
    color: var(--kyosan-color-text);
    font-family: inherit;
    font-size: var(--kyosan-font-nendo);
    line-height: 1.4;
    letter-spacing: 0.1em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.kyosan-list .nendo-select:focus-visible,
.kyosan-list .nendo-submit:focus-visible {
    outline: 2px solid var(--kyosan-color-text);
    outline-offset: 2px;
}

.kyosan-list .nendo-submit {
    margin: 0;
    padding: 0.5em 1.2em;
    border: 1px solid var(--kyosan-color-text);
    border-radius: 0;
    background: var(--kyosan-color-button);
    color: var(--kyosan-color-text);
    font-family: inherit;
    font-size: var(--kyosan-font-nendo);
    line-height: 1.4;
    cursor: pointer;
}

/* 寄付先 */
.kyosan-list .kyosan-kifusaki {
    margin: var(--kyosan-space-kifusaki) 0 0;
}

/* 先頭にはイベント見出しがあるため、その直後の寄付先だけ上余白をなくす。 */
.kyosan-list .kyosan-event > .event-head + .kyosan-kifusaki {
    margin-top: 0;
}

.kyosan-list .kifusaki-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5em min(var(--kyosan-total-gap), 1em);
}

.kyosan-list .kifusaki-head > .title {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    gap: 0.4em;
    min-width: 0;
    font-size: var(--kyosan-font-kifusaki);
    letter-spacing: 0.12em;
}

.kyosan-list .kifusaki-number {
    flex: 0 0 auto;
    color: var(--kyosan-color-number);
    font-size: var(--kyosan-font-number);
    line-height: 1;
    letter-spacing: 0.04em;
}

.kyosan-list .kifusaki-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 総額は背景と同じ白文字に戻す。配置と選択時の表示は維持する。 */
.kyosan-list .total {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 0.5em;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    white-space: nowrap;
    color: #fff;
    -webkit-user-select: text;
    user-select: text;
}

.kyosan-list .total::selection,
.kyosan-list .total *::selection {
    color: #fff;
    background: #333;
}

.kyosan-list .total-label {
    margin-right: 0.3em;
    font-size: var(--kyosan-font-total-label);
    letter-spacing: 0.2em;
}

.kyosan-list .total-amount {
    font-size: var(--kyosan-font-total);
    letter-spacing: 0.06em;
}

.kyosan-list .total-unit {
    font-size: var(--kyosan-font-total-unit);
}

/* 協賛金リスト・協賛物リスト */
.kyosan-list .kyosan-group {
    margin: var(--kyosan-space-group) 0 0;
}

/* 協賛金・協賛物はミディアムで表示する。 */
.kyosan-list .kyosan-group > .title {
    display: inline-block;
    min-width: 7.5em;
    padding: 0.3em 1.5em;
    background: var(--kyosan-color-label);
    color: var(--kyosan-color-on-gold);
    font-size: var(--kyosan-font-group);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-align: center;
}

.kyosan-list .rows {
    margin: 1em 0 0;
    padding: 0;
    list-style: none;
}

.kyosan-list .row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kyosan-row-gap);
    margin: var(--kyosan-row-space) 0 0;
    padding: var(--kyosan-row-padding);
    background: var(--kyosan-color-row);
    font-size: var(--kyosan-font-row);
    line-height: 1.6;
    list-style: none;
}

.kyosan-list .row:first-child {
    margin-top: 0;
}

.kyosan-list .row::before {
    content: none;
}

/* 長い協賛者名はこちら側で折り返す */
.kyosan-list .name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 金額・協賛物の側は縮めない。ただし行の半分を超える長さになったら折り返す */
.kyosan-list .naiyo {
    flex: 0 0 var(--kyosan-naiyo-width);
    max-width: 50%;
    overflow-wrap: anywhere;
    font-size: var(--kyosan-font-row-value);
    text-align: var(--kyosan-naiyo-align);
}

@media (min-width: 600px) {
    .kyosan-list {
        --kyosan-band-padding-y: 2.25em;

        --kyosan-logo-size: 44px;
        --kyosan-logo-gap: 16px;
        --kyosan-illust-size: 170px;
        --kyosan-row-padding: 1.1em 2em;
        --kyosan-row-gap: 2em;
        --kyosan-row-space: 12px;

        --kyosan-total-gap: 3em;
    }
}

/* PCでは金額・協賛物を右端に寄せず、行の右寄りの決まった位置から左揃えで始める（カンプの見た目） */
@media (min-width: 960px) {
    .kyosan-list {
        --kyosan-space-event: 6em;
        --kyosan-space-group: 2.75em;
        --kyosan-band-padding-y: 3em;

        --kyosan-logo-size: 54px;
        --kyosan-logo-gap: 24px;
        --kyosan-illust-size: 230px;
        --kyosan-row-padding: 1.15em 2em 1.15em 5.5em;
        --kyosan-row-space: 14px;
        --kyosan-naiyo-width: 31%;
        --kyosan-naiyo-align: left;

        --kyosan-total-gap: 9em;
        --kyosan-scroll-offset: 100px;
    }
}

/* 年度を最上位にし、従来の帯・和柄を年度見出しへ移す。 */
.kyosan-list .kyosan-year {
    margin-bottom: var(--kyosan-space-event);
    scroll-margin-top: var(--kyosan-scroll-offset);
}
.kyosan-list .year-head {
    position: relative;
    z-index: 1;
    padding: var(--kyosan-band-padding-y) 0;
}
.kyosan-list .year-head > .title {
    position: relative;
    z-index: 1;
    font-size: var(--kyosan-font-year);
    letter-spacing: 0.18em;
    text-align: center;
}
.kyosan-list .kyosan-nendo [hidden] {
    display: none;
}
.kyosan-list .nendo-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
}

/* 協賛内容に日本語を含む場合は、金額とは別の文字サイズにする。 */
.kyosan-list .naiyo.is-japanese {
    font-size: var(--kyosan-font-row-text);
}

.kyosan-list .nendo-links {
    font-size: var(--kyosan-font-nendo);
}

@media (max-width: 600px) {
    .kyosan-list {
        --kyosan-font-nendo: 11px;
        --kyosan-font-year: 15px;
        --kyosan-font-event: 15px;
        --kyosan-font-number: 26px;
        --kyosan-font-kifusaki: 14px;
        --kyosan-font-total-label: 12px;
        --kyosan-font-total: 15px;
        --kyosan-font-total-unit: 9px;
        --kyosan-font-group: 13px;
        --kyosan-font-row: 11px;
        --kyosan-font-row-value: 14px;
        --kyosan-font-row-text: 12px;
        --kyosan-row-padding: 0.9em 3em 0.9em 2em;
        --kyosan-illust-size: 96px;
    }

    /* 画像の右1/3を画面外へ出した見た目にする。
     * 表示枠自体を2/3幅にして背景を切り抜き、横スクロールを発生させない。
     */
    .kyosan-list .year-head::after {
        width: calc(var(--kyosan-illust-size) * 428 / 245 * 2 / 3);
        background-size: auto 100%;
        background-position: left center;
        overflow: hidden;
    }

    .kyosan-list .total {
        gap: 0.25em;
    }

    .kyosan-list .sub-title {
        display: none;
    }
}