@charset "UTF-8";
/* ==========================================================
   Rangda 2026.10 改修分
   style.css の後に読み込み（functions.php で enqueue）
   ========================================================== */

:root {
    --r-brown: #5a3e2b;
    --r-brown-deep: #3b2618;
    --r-red: #8b1a10;
    --r-gold: #c79f5d;
    --r-gold-soft: #e6cf9f;
    --r-cream: #fdf8f2;
    --r-night: #221610;
    --r-serif: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
    --r-ease: cubic-bezier(.22, .8, .24, 1);
    --r-radius: 22px;
}


/* ----------------------------------------------------------
   1. メインビジュアル：フェード＋ゆっくりズーム
   ---------------------------------------------------------- */
.KeyVisual_Image {
    transition: opacity 2s ease-in-out;
}
.KeyVisual_Image.is-leaving {
    opacity: 1;
    z-index: 0;
}
.KeyVisual_Image.active {
    z-index: 1;
}
.KeyVisual_Image img {
    transform: scale(1);
    transition: none;
    will-change: transform;
}
.KeyVisual_Image:nth-child(4n+1) img { transform-origin: 30% 40%; }
.KeyVisual_Image:nth-child(4n+2) img { transform-origin: 75% 30%; }
.KeyVisual_Image:nth-child(4n+3) img { transform-origin: 50% 70%; }
.KeyVisual_Image:nth-child(4n+4) img { transform-origin: 20% 60%; }

.KeyVisual.is-ready .KeyVisual_Image.active img,
.KeyVisual.is-ready .KeyVisual_Image.is-leaving img {
    transform: scale(1.14);
    transition: transform 11s linear;
}

@media (prefers-reduced-motion: reduce) {
    .KeyVisual.is-ready .KeyVisual_Image.active img,
    .KeyVisual.is-ready .KeyVisual_Image.is-leaving img {
        transform: none;
        transition: none;
    }
}


/* ----------------------------------------------------------
   2. 写真の角丸（トップページ全般）
   ---------------------------------------------------------- */
#topics_top .list li a .i {
    border-radius: 18px;
    box-shadow: 0 10px 24px -14px rgba(59, 38, 24, .45);
}
#topics_top .list li a .i img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--r-ease);
}
#topics_top .list li a:hover .i img {
    transform: scale(1.06);
}

/* .sss は scale(0.5) で縮小表示しているため、角丸は見た目の倍の値で指定 */
#concept_top img.s01,
#concept_top img.s02,
#message img.s01,
#message img.s02 {
    border-radius: 48px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
}


/* ----------------------------------------------------------
   3. スクロール演出（js/effects.js で .fx-on / .fx / .is-in を付与）
   ---------------------------------------------------------- */
.fx-on .fx {
    transition-delay: var(--fx-delay, 0ms);
}

/* 下からふわっと */
.fx-on .fx-up {
    opacity: 0;
    translate: 0 36px;
    transition-property: opacity, translate;
    transition-duration: 1.1s;
    transition-timing-function: var(--r-ease);
}
.fx-on .fx-up.is-in {
    opacity: 1;
    translate: 0 0;
}

/* ぼかしから浮かび上がる（テキスト） */
.fx-on .fx-blur {
    opacity: 0;
    filter: blur(8px);
    translate: 0 18px;
    transition-property: opacity, filter, translate;
    transition-duration: 1.4s;
    transition-timing-function: var(--r-ease);
}
.fx-on .fx-blur.is-in {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
}

/* 写真：浮き上がり＋中の画像がズームアウト */
.fx-on .fx-photo {
    opacity: 0;
    translate: 0 60px;
    transition-property: opacity, translate;
    transition-duration: 1.3s;
    transition-timing-function: var(--r-ease);
}
.fx-on .fx-photo img {
    scale: 1.25;
    transition: scale 2s var(--r-ease);
    transition-delay: var(--fx-delay, 0ms);
}
.fx-on .fx-photo.is-in {
    opacity: 1;
    translate: 0 0;
}
.fx-on .fx-photo.is-in img {
    scale: 1;
}

/* 1文字ずつ分割した見出しが途中で改行されないように */
.fx-chars {
    white-space: nowrap;
}
#topics_top > h2 {
    width: auto;
    min-width: 58px;
    white-space: nowrap;
}

/* 見出し：一文字ずつ */
.fx-on .fx-chars .fx-char {
    display: inline-block;
    opacity: 0;
    translate: 0 .6em;
    rotate: 8deg;
    filter: blur(4px);
    transition: opacity .8s var(--r-ease), translate .8s var(--r-ease), rotate .8s var(--r-ease), filter .8s var(--r-ease);
    transition-delay: calc(var(--i) * 45ms);
}
.fx-on .fx-chars.is-in .fx-char {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
    filter: blur(0);
}

/* メニューのカテゴリ見出し：両脇のラインが伸びる */
.fx-on .fx-line {
    opacity: 0;
    transition: opacity 1s ease;
}
.fx-on .fx-line::before,
.fx-on .fx-line::after {
    transform: scaleX(0);
    transition: transform 1.4s var(--r-ease) .2s;
}
.fx-on .fx-line.is-in { opacity: 1; }
.fx-on .fx-line.is-in::before,
.fx-on .fx-line.is-in::after { transform: scaleX(1); }

/* 装飾画像（仮面・置物・写真）：ぼかしから出現 */
.fx-on .fx-deco {
    opacity: 0;
    filter: blur(12px);
    transition: opacity 1.6s ease, filter 1.6s ease;
    transition-delay: var(--fx-delay, 0ms);
}
.fx-on .fx-deco.is-in {
    opacity: 1;
    filter: blur(0);
}

/* 仮面・置物（透過PNG）はゆらゆら揺れる */
#concept_top img.d01,
#concept_top img.s03,
#concept_top img.m01,
#concept_top img.m02,
#slider_wrap2 img.sss,
#message img.d03 {
    animation: rangdaSway 6s ease-in-out infinite alternate;
    animation-delay: var(--sway-delay, 0s);
}
@keyframes rangdaSway {
    from { rotate: -2.5deg; }
    to   { rotate: 2.5deg; }
}

@media (prefers-reduced-motion: reduce) {
    #concept_top img.sss,
    #slider_wrap2 img.sss,
    #message img.sss {
        animation: none;
    }
}


/* ----------------------------------------------------------
   4. メニュー
   ---------------------------------------------------------- */
#menu {
    background-color: var(--r-cream);
    background-image:
        radial-gradient(circle at 12% 18%, rgba(199, 159, 93, .12), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(139, 26, 16, .07), transparent 45%);
    padding: 90px 20px 110px;
}
#menu .menu_tax {
    font-size: .85rem;
    color: #8a7462;
    margin-bottom: 56px;
}

.rmenu {
    max-width: 1000px;
    margin: 0 auto;
}

/* カテゴリ見出し */
.rmenu-cat {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0 0 44px;
    font-family: var(--r-serif);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--r-brown);
    white-space: nowrap;
}
.rmenu-cat::before,
.rmenu-cat::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--r-gold));
}
.rmenu-cat::before { transform-origin: right center; }
.rmenu-cat::after {
    background: linear-gradient(90deg, var(--r-gold), transparent);
    transform-origin: left center;
}
.rmenu-lunch + .rmenu-cat {
    margin-top: 96px;
}

/* ランチ（大きなカード） */
.rmenu-lunch {
    display: grid;
    gap: 56px;
}
.rmenu-feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 56px;
}
.rmenu-feature:nth-child(even) .rmenu-feature__image {
    order: 2;
}
.rmenu-feature__image {
    position: relative;
    aspect-ratio: 4 / 3;
}
.rmenu-feature__image::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--r-gold);
    border-radius: 200px 200px 28px 28px;
    translate: 16px 16px;
    z-index: 0;
}
.rmenu-feature:nth-child(even) .rmenu-feature__image::before {
    translate: -16px 16px;
}
.rmenu-feature__image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 200px 200px 28px 28px;
    box-shadow: 0 24px 50px -24px rgba(59, 38, 24, .55);
}
.rmenu-feature__image {
    border-radius: 200px 200px 28px 28px;
}

.rmenu-feature__body {
    position: relative;
    padding: 8px 0;
}
.rmenu-feature__label {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--r-red);
    color: #fff;
    font-family: var(--r-serif);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 0 0 4px var(--r-cream), 0 0 0 5px var(--r-gold);
    margin-bottom: 18px;
}
.rmenu-feature__name {
    font-family: var(--r-serif);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--r-brown-deep);
    letter-spacing: .12em;
    line-height: 1.4;
    margin-bottom: 10px;
}
.rmenu-feature__price {
    font-family: var(--r-serif);
    font-size: 2.1rem;
    color: var(--r-red);
    letter-spacing: .04em;
    line-height: 1.2;
    margin-bottom: 26px;
}
.rmenu-feature__price small {
    font-size: .5em;
    margin-left: .15em;
}

.rmenu-options {
    list-style: none;
    margin: 0;
    padding: 20px 24px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px -18px rgba(59, 38, 24, .35);
}
.rmenu-options li,
.rmenu-drink__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: .95rem;
    color: #4a3a2e;
    line-height: 1.9;
}
.rmenu-options li i,
.rmenu-drink__row i {
    flex: 1;
    min-width: 16px;
    border-bottom: 1px dotted #bfa98a;
    translate: 0 -4px;
}
.rmenu-options li span:last-child {
    font-family: var(--r-serif);
    color: var(--r-red);
    white-space: nowrap;
}

/* ドリンク */
.rmenu-drinks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px 40px;
}
.rmenu-drink {
    text-align: center;
}
.rmenu-drink__image {
    width: 168px;
    aspect-ratio: 1;
    margin: 0 auto 20px;
    padding: 6px;
    border-radius: 50%;
    border: 1px solid var(--r-gold);
    background: #fff;
}
.rmenu-drink__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform .8s var(--r-ease);
}
.rmenu-drink:hover .rmenu-drink__image img {
    transform: scale(1.06) rotate(-2deg);
}
.rmenu-drink__name {
    text-align: left;
}
.rmenu-drink__price {
    font-family: var(--r-serif);
    color: var(--r-red);
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    #menu {
        padding: 64px 0 80px;
    }
    #menu .menu_tax {
        margin-bottom: 40px;
    }
    .rmenu-cat {
        font-size: 1.05rem;
        gap: 12px;
        letter-spacing: .1em;
        margin-bottom: 32px;
    }
    .rmenu-lunch {
        gap: 64px;
    }
    .rmenu-feature {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .rmenu-feature:nth-child(even) .rmenu-feature__image {
        order: 0;
    }
    .rmenu-feature__image,
    .rmenu-feature__image::before,
    .rmenu-feature__image img {
        border-radius: 140px 140px 22px 22px;
    }
    .rmenu-feature__image::before,
    .rmenu-feature:nth-child(even) .rmenu-feature__image::before {
        translate: 10px 10px;
    }
    .rmenu-feature__body {
        padding: 0 4px;
    }
    .rmenu-feature__name {
        font-size: 1.4rem;
    }
    .rmenu-feature__price {
        font-size: 1.8rem;
        margin-bottom: 18px;
    }
    .rmenu-options {
        padding: 14px 18px;
    }
    .rmenu-options li,
    .rmenu-drink__row {
        font-size: .88rem;
        letter-spacing: .04em;
    }
    .rmenu-lunch + .rmenu-cat {
        margin-top: 72px;
    }
    .rmenu-drinks {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
    }
    .rmenu-drink__image {
        width: 120px;
        margin-bottom: 14px;
        padding: 4px;
    }
    .rmenu-drink__row {
        flex-direction: column;
        align-items: center;
        gap: 0;
        line-height: 1.6;
    }
    .rmenu-drink__row i {
        display: none;
    }
    .rmenu-drink__name {
        text-align: center;
    }
}


/* ----------------------------------------------------------
   5. Shop Information：隠れ家コラージュ
   ---------------------------------------------------------- */
#shop {
    padding: 100px 0 80px;
}
#shop .shop-intro {
    max-width: 820px;
    margin: 0 auto 64px;
    padding: 0 20px;
    font-family: var(--r-serif);
    font-size: .98rem;
    line-height: 2.3;
    color: #3d2f26;
}

.shop-collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 118px;
    gap: 18px;
    padding: 56px;
    border-radius: 36px;
    background-color: var(--r-night);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(199, 159, 93, .28), transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(139, 26, 16, .35), transparent 55%);
    box-shadow: 0 40px 80px -40px rgba(34, 22, 16, .8);
    overflow: hidden;
}
/* うっすら金の枠 */
.shop-collage::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(199, 159, 93, .35);
    border-radius: 26px;
    pointer-events: none;
}

.shop-collage__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-radius);
    background: #000;
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .8);
}
.shop-collage__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: sepia(.25) saturate(.9) brightness(.88);
    transition: filter .8s ease, transform 1.2s var(--r-ease);
}
.shop-collage__item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(20, 10, 4, .45));
    pointer-events: none;
    transition: opacity .8s ease;
}
.shop-collage__item:hover img {
    filter: sepia(0) saturate(1.05) brightness(1);
    transform: scale(1.05);
}
.shop-collage__item:hover::after {
    opacity: 0;
}

/* 配置（PC：6列 × 6行） */
.shop-collage__item.is-1 { grid-column: 1 / 3; grid-row: 1 / 5; border-radius: 999px 999px var(--r-radius) var(--r-radius); }
.shop-collage__item.is-2 { grid-column: 3 / 5; grid-row: 1 / 3; }
.shop-collage__item.is-3 { grid-column: 5 / 7; grid-row: 1 / 4; border-radius: var(--r-radius) 120px var(--r-radius) var(--r-radius); }
.shop-collage__item.is-4 { grid-column: 3 / 5; grid-row: 3 / 5; border-radius: 999px; }
.shop-collage__item.is-5 { grid-column: 5 / 7; grid-row: 4 / 7; border-radius: var(--r-radius) var(--r-radius) 999px 999px; }
.shop-collage__item.is-6 { grid-column: 1 / 3; grid-row: 5 / 7; border-radius: var(--r-radius) var(--r-radius) var(--r-radius) 120px; }
.shop-collage__item.is-7 { grid-column: 3 / 5; grid-row: 5 / 7; }

#shop .map {
    padding: 64px 0 0;
}
#shop .map iframe {
    display: block;
    border-radius: 28px;
    filter: sepia(.2) saturate(.85);
}

@media screen and (max-width: 767px) {
    #shop {
        padding: 72px 0 40px;
    }
    #shop .shop-intro {
        font-size: .9rem;
        line-height: 2.1;
        margin-bottom: 40px;
        padding: 0 4px;
    }
    #shop .shop-intro br {
        display: none;
    }
    .shop-collage {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 132px;
        grid-auto-flow: dense;
        gap: 10px;
        padding: 28px 18px;
        border-radius: 26px;
    }
    .shop-collage::before {
        inset: 8px;
        border-radius: 20px;
    }
    .shop-collage__item[class*="is-"] {
        grid-column: auto;
        grid-row: auto;
        border-radius: 16px;
    }
    .shop-collage__item.is-1 { grid-column: span 2; grid-row: span 2; border-radius: 999px 999px 16px 16px; }
    .shop-collage__item.is-4 { border-radius: 999px; }
    .shop-collage__item.is-5 { grid-row: span 2; border-radius: 16px 16px 999px 999px; }
    .shop-collage__item.is-7 { grid-column: span 2; }
    #shop .map {
        padding-top: 40px;
    }
    #shop .map iframe {
        border-radius: 18px;
    }
}


/* ----------------------------------------------------------
   6. トピックス一覧：サムネイルの高さを統一
   ---------------------------------------------------------- */
.c-blogList_item {
    display: block;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    padding-bottom: 1.2em;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px -18px rgba(59, 38, 24, .35);
    transition: translate .5s var(--r-ease), box-shadow .5s var(--r-ease);
}
.c-blogList_item:hover {
    translate: 0 -4px;
    box-shadow: 0 18px 36px -18px rgba(59, 38, 24, .45);
}
.c-blogList_image {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #f0ebe3;
}
/* お知らせ画像（カレンダー・ポスター）が切れないよう contain で全体を表示 */
.c-blogList_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .8s var(--r-ease);
}
.c-blogList_item:hover .c-blogList_image img {
    transform: scale(1.03);
}
.c-blogList_date {
    margin-top: 1em;
    margin-left: 1em;
}
.c-blogList_title {
    margin: .4em 1em 0;
    width: auto;
    line-height: 1.7;
}

@media screen and (max-width: 767px) {
    .c-blogList_item:nth-of-type(n + 2) {
        margin-top: 0;
    }
    .c-blogList_image img {
        height: 100%;
    }
}


/* ----------------------------------------------------------
   7. サイドバー：最新3件
   ---------------------------------------------------------- */
.sidebar_latest {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px -18px rgba(59, 38, 24, .35);
}
.sidebar_latest__title {
    font-family: "MinionPro-Bold", var(--r-serif);
    font-size: 1.4rem;
    letter-spacing: .1em;
    background-color: #000;
    color: #fff;
    padding: .8em 1em;
    line-height: 1.2;
}
.sidebar_latest__title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 1.2em;
    background-color: var(--r-gold);
    vertical-align: top;
    margin-right: .6em;
}
.sidebar_latest__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar_latest__list li + li {
    border-top: 1px solid #efe8de;
}
.sidebar_latest__list a {
    display: block;
    padding: 1.1em 1.3em;
    transition: background-color .3s ease;
}
.sidebar_latest__list a:hover {
    background-color: var(--r-cream);
}
.sidebar_latest__date {
    display: block;
    font-size: .8rem;
    color: var(--r-gold);
    letter-spacing: .1em;
    margin-bottom: .3em;
}
.sidebar_latest__name {
    display: block;
    font-size: .9rem;
    line-height: 1.7;
    color: #333;
}

@media screen and (max-width: 767px) {
    .sidebar {
        display: block;
    }
}


/* ----------------------------------------------------------
   8. 予約ページ：ご予約について
   ---------------------------------------------------------- */
.booking-info {
    position: relative;
    max-width: 920px;
    margin: 0 auto 4rem;
    padding: 3.5rem 4rem 2.5rem;
    background: #fff;
    border-left: none;
    border-radius: 28px;
    box-shadow: 0 20px 50px -30px rgba(59, 38, 24, .45);
}
/* 角の装飾 */
.booking-info::before,
.booking-info::after {
    content: "";
    position: absolute;
    width: 46px;
    height: 46px;
    border: 1px solid var(--r-gold);
    pointer-events: none;
}
.booking-info::before {
    top: 16px;
    left: 16px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 16px;
}
.booking-info::after {
    right: 16px;
    bottom: 16px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 16px;
}
.booking-info__title {
    font-family: var(--r-serif);
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-align: center;
    color: var(--r-brown-deep);
    margin-bottom: 2.4rem;
}
.booking-info__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 1rem auto 0;
    background: var(--r-gold);
    border-radius: 2px;
}
.booking-info__section {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    align-items: start;
    margin: 0;
    padding: 1.8rem 0;
    border-top: 1px dashed #dccbb0;
}
.booking-info__section:last-child {
    padding-bottom: .6rem;
}
.booking-info__section h3 {
    font-family: var(--r-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--r-brown);
    letter-spacing: .04em;
    line-height: 1.7;
    margin: 0;
}
.booking-info__section p,
.booking-info__section ul {
    font-size: .95rem;
    color: #4a3a2e;
    line-height: 1.95;
}
.booking-info__section ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: 12px;
}
.booking-info__section li {
    padding: 1rem 1.3rem;
    background: var(--r-cream);
    border-radius: 14px;
    border-left: 3px solid var(--r-gold);
}
.booking-info__section li strong {
    display: inline-block;
    color: var(--r-red);
    font-weight: 600;
}

@media screen and (max-width: 767px) {
    .booking-info {
        padding: 2.4rem 1.3rem 1.4rem;
        border-radius: 20px;
        margin-bottom: 3rem;
    }
    .booking-info::before,
    .booking-info::after {
        width: 30px;
        height: 30px;
    }
    .booking-info::before { top: 10px; left: 10px; }
    .booking-info::after { right: 10px; bottom: 10px; }
    .booking-info__title {
        font-size: 1.4rem;
        margin-bottom: 1.6rem;
    }
    .booking-info__section {
        grid-template-columns: 1fr;
        gap: .7rem;
        padding: 1.4rem 0;
    }
    .booking-info__section p,
    .booking-info__section ul {
        font-size: .9rem;
    }
    .booking-info__section li {
        padding: .8rem 1rem;
    }
}


/* ----------------------------------------------------------
   9. 記事詳細：記事送り
   ---------------------------------------------------------- */
.post-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 16px;
    margin: 3.5rem 0 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid #d9cdbd;
    position: relative;
}
/* 区切り線の中央に小さな飾り */
.post-nav::before {
    content: "✦";
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -55%;
    padding: 0 14px;
    background: #F5F5F5;
    color: var(--r-gold);
    font-size: 14px;
    line-height: 1;
}
.post-nav__cell {
    display: flex;
    min-width: 0;
}
.post-nav__cell.is-next {
    justify-content: flex-end;
}
.post-nav__link {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 22px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 10px 26px -18px rgba(59, 38, 24, .45);
    transition: background-color .4s ease, box-shadow .4s ease, translate .4s var(--r-ease);
}
.is-next .post-nav__link {
    text-align: right;
    justify-content: flex-end;
}
.post-nav__link:hover {
    background: var(--r-cream);
    translate: 0 -2px;
    box-shadow: 0 16px 30px -18px rgba(59, 38, 24, .55);
}
.post-nav__arrow {
    position: relative;
    flex: 0 0 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--r-gold);
    transition: background-color .4s ease, translate .4s var(--r-ease);
}
.post-nav__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid var(--r-brown);
    border-left: 1.5px solid var(--r-brown);
    translate: -30% -50%;
    rotate: -45deg;
    transition: border-color .4s ease;
}
.is-next .post-nav__arrow::before {
    translate: -70% -50%;
    rotate: 135deg;
}
.post-nav__link:hover .post-nav__arrow {
    background: var(--r-gold);
}
.post-nav__link:hover .post-nav__arrow::before {
    border-color: #fff;
}
.is-prev .post-nav__link:hover .post-nav__arrow { translate: -4px 0; }
.is-next .post-nav__link:hover .post-nav__arrow { translate: 4px 0; }

.post-nav__text {
    display: block;
    min-width: 0;
}
.post-nav__label {
    display: block;
    font-family: "MinionPro-Bold", var(--r-serif);
    font-size: .72rem;
    letter-spacing: .25em;
    color: var(--r-gold);
    line-height: 1.4;
}
.post-nav__head {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    color: var(--r-brown-deep);
    line-height: 1.6;
}
.post-nav__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: .78rem;
    color: #8a7462;
    line-height: 1.6;
    letter-spacing: .04em;
}

/* 一覧へ */
.post-nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 88px;
    border-radius: 24px;
    font-size: .75rem;
    letter-spacing: .12em;
    color: var(--r-brown);
    transition: background-color .4s ease;
}
.post-nav__list:hover {
    background: #fff;
}
.post-nav__grid {
    display: grid;
    grid-template-columns: repeat(2, 7px);
    gap: 4px;
}
.post-nav__grid i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--r-gold);
    transition: border-radius .4s ease;
}
.post-nav__list:hover .post-nav__grid i {
    border-radius: 50%;
}

@media screen and (max-width: 767px) {
    .post-nav {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 2.5rem 0 2rem;
    }
    .post-nav__list {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-direction: row;
        width: auto;
        padding: 14px;
        background: #fff;
        border-radius: 999px;
    }
    .post-nav__link {
        padding: 14px;
        gap: 10px;
        border-radius: 20px;
    }
    .post-nav__arrow {
        flex-basis: 34px;
        height: 34px;
    }
    .post-nav__head {
        font-size: .82rem;
    }
    .post-nav__title {
        display: none;
    }
}