@charset "UTF-8";

/* ==========================================================================
   bg
   ========================================================================== */

body {
    background-color: var(--color-bg-main);
}

/* 2. 動くノイズの層（オーバーレイ）を作る */
body::before {
    content: "";
    position: fixed;
    /* 画面に固定 */
    top: -100px;
    /* 動かした時に端が見えないよう、画面より大きく作る */
    left: -100px;
    width: calc(100% + 200px);
    height: calc(100% + 200px);
    z-index: 0;
    /* 常に一番手前に配置 */
    pointer-events: none;
    /* 重要：下のボタンやリンクをクリックできるようにする */

    /* 用意した1枚のノイズ画像を敷き詰める */
    background-image: url('../../images/common/noise.webp');
    background-repeat: repeat;

    /* 濃さの調整（0.03〜0.08くらいが最もプロっぽく見えます） */
    opacity: 0.16;

    /* アニメーションの指定 */
    animation: noise-jump 2s steps(2) infinite;
}

/* 3. ノイズをガクガク動かすアニメーション */
@keyframes noise-jump {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(30px, -10px);
    }
}

/* ==========================================================================
   Projects / Tanka
   ========================================================================== */

.p-tanka__card {
    display: flex;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.2));
}

.p-tanka__list .p-tanka__card:nth-of-type(8n+1),
.p-tanka__list .p-tanka__card:nth-of-type(8n+3),
.p-tanka__list .p-tanka__card:nth-of-type(8n+6),
.p-tanka__list .p-tanka__card:nth-of-type(8n),
.p-tanka__list .p-tanka__card:nth-of-type(8n+1) .p-tanka__inner,
.p-tanka__list .p-tanka__card:nth-of-type(8n+3) .p-tanka__inner,
.p-tanka__list .p-tanka__card:nth-of-type(8n+6) .p-tanka__inner,
.p-tanka__list .p-tanka__card:nth-of-type(8n) .p-tanka__inner {
    background-color: var(--color-NUMATA-LightBlue);
}

.p-tanka__list .p-tanka__card:nth-of-type(8n+2),
.p-tanka__list .p-tanka__card:nth-of-type(8n+4),
.p-tanka__list .p-tanka__card:nth-of-type(8n+5),
.p-tanka__list .p-tanka__card:nth-of-type(8n+7),
.p-tanka__list .p-tanka__card:nth-of-type(8n+2) .p-tanka__inner,
.p-tanka__list .p-tanka__card:nth-of-type(8n+4) .p-tanka__inner,
.p-tanka__list .p-tanka__card:nth-of-type(8n+5) .p-tanka__inner,
.p-tanka__list .p-tanka__card:nth-of-type(8n+7) .p-tanka__inner {
    background-color: var(--color-bg-secondary);
}

.p-tanka__header {
    width: 38em;
    margin: 4svh auto;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
}

.p-tanka__header .p-tanka__title {
    margin-bottom: 0.5em;
}

.p-tanka__inner {
    position: relative;
    /* 親要素いっぱいの広さを確保 */
    width: 100%;
    /* 上下左右中央寄せの設定 */
    display: flex;
    flex-grow: 1;
    /* 親の高さに合わせて伸びる */
    justify-content: center;
    /* 縦書きなので、これで上下中央になります */
    align-items: center;
    /* 縦書きなので、これで左右中央になります */
}

.p-tanka__text {
    /* 上に2emの余白 */
    padding: 2em 0;
    /* テキストの開始位置を揃える */
    text-align: start;
    height: max-content;
    writing-mode: vertical-rl;
    /* 縦書き（右から左） */
    text-orientation: mixed;
    /* 和文は縦、英数字は横（デフォルト） */
    -webkit-text-orientation: mixed;
    /* Safari用 */

}

.p-tanka__line {
    font-family: "Zen Old Mincho", serif;
    font-size: var(--font-size-Text-R);
    font-weight: 700;
    letter-spacing: 0.25em;
    line-height: 2.2;
    color: var(--color-Primary);
    display: block;
    text-align: start;
    text-wrap: nowrap;
    -webkit-user-select: none;
    /* Safari/Chrome */
    -ms-user-select: none;
    /* IE/Edge */
    user-select: none;
    /* CSS3 */
}

.p-tanka__text .p-tanka__line:last-of-type {
    margin-top: 5em;
}

.p-tanka__champion {
    position: absolute;
    top: -1.9em;
    left: -1.9em;
    width: 3.8em;
    height: 3.8em;
}

/* ==========================================================================
   Projects /good button
   ========================================================================== */
.p-tanka__good-btn {
    position: absolute;
    bottom: 0.2em;
    right: 0.2em;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    outline: none;
    z-index: 10;
    width: 3.5em;
    height: 3.5em;
}

/* ホバー時に少し大きく */
.p-tanka__good-btn:hover {
    transform: scale(1.1);
}

/* 押された時の「ぽよん」アニメーション */
.p-tanka__good-btn.is-active {
    animation: heart-pop 0.4s forwards;
}

@keyframes heart-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1.1);
    }
}

/* 画像自体のスタイル */
.p-tanka__good-btn img {
    display: block;
    pointer-events: none;
    /* 画像がクリックを邪魔しないように */
}

.p-tanka__good-count {
    width: 4em;
    font-family: var(--Jp-font);
    font-size: var(--font-size-Text-S);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    color: var(--color-Primary);
    position: absolute;
    top: 2.95em;
    left: 1.5em;
    text-align: center;
}

.p-tanka__good-btn.is-active .p-tanka__good-count {
    color: var(--color-White);
}

/* ==========================================================================
   Swiper customization for Tanka archive
   ========================================================================== */
/* --- tanka.css 修正版 --- */
:root {
    --card-width: 10em;
    --card-height: 30em;
    /* これを「最低高さ」として使います */
    --gap-x: 8em;
    --gap-y: 10em;
}

/* ページ全体のスクロールを完全に止める */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg-main);
}

/* のぞき窓（ビューアー） */
.p-tanka__body.swiper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    cursor: grab;
    overflow: hidden;
    margin: 0 !important;
    /* 余計な余白をリセット */
}

.p-tanka__body.swiper:active {
    cursor: grabbing;
}

/* ステージ（動く板）の高さ設定を強化 */
.p-tanka__list.swiper-wrapper {
    position: absolute;
    display: grid;
    /* 4段の高さ + 余白を確実に確保 */
    grid-template-rows: repeat(4, var(--card-height));
    grid-auto-flow: column;
    grid-auto-columns: var(--card-width);
    gap: var(--gap-y) var(--gap-x);
    padding: 30vh 15vw;
    /* 上下左右に余白を設けて端が見えるようにする */
    width: max-content;
    height: max-content;
    /* 中身に合わせて高さを決める */
    will-change: transform;
}

/* 短歌カード */
.p-tanka__card.swiper-slide {
    width: var(--card-width) !important;
    height: fit-content;
    min-height: var(--card-height) !important;
    user-select: none;
}

/* 偶数段（2, 4段目）を右にずらす */
.p-tanka__card:nth-child(4n+2),
.p-tanka__card:nth-child(4n+4) {
    transform: translateX(4em);
}

.p-tanka__text {
    writing-mode: vertical-rl;
    user-select: text;
}