/* common4.css — about / business / cuisine / index 共通（ヒーロー階調・スライドショー等）
   pages/*.css の完全一致ルールを抽出（保有ページの集合が同一のものだけ）。
   読込順は inc/assets.php が固定する。 */

@keyframes scrollline { 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
.menu__panel {
            position: absolute; top: 0; right: 0; height: 100%; width: min(460px, 90vw);
            background: var(--ink); color: var(--cream);
            transform: translateX(100%);
            transition: transform .6s cubic-bezier(.7,0,.2,1);
            padding: calc(var(--nav-height) + 20px) var(--padding-container) 40px;
            display: flex; flex-direction: column;
            overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        }
.menu__close {
            position: absolute; top: 12px; right: calc(var(--padding-container) - 14px);
            background: none; border: 0; color: var(--cream); cursor: pointer;
            font-family: "Lato", sans-serif; letter-spacing: .28em; font-size: 12px; text-transform: uppercase;
            /* タップ領域を 44px 以上確保する（文字サイズは変えない） */
            padding: 14px; min-height: 44px; display: inline-flex; align-items: center;
        }
.btn-exp::before {
            content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold);
            transform: translateX(-101%); transition: transform .45s cubic-bezier(.65,.01,.05,.99);
        }
.btn-exp:hover::before { transform: translateX(0); }
.btn-exp__arrow { transition: transform .45s cubic-bezier(.65,.01,.05,.99); }
.btn-exp:hover .btn-exp__arrow { transform: translateX(5px); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 3s cubic-bezier(.4,0,.2,1); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { transform: scale(1.06); transition: transform 8s ease-out; will-change: transform; }
.hero-slide.is-active img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
            .hero-slide img, .hero-slide.is-active img { transform: none; transition: none; }
        }
.hero-grade {
            position: absolute; inset: 0; z-index: 1; pointer-events: none;
            background:
                radial-gradient(120% 90% at 50% 46%, rgba(30,40,44,.18) 0%, rgba(30,40,44,.30) 62%, rgba(30,40,44,.06) 100%),
                linear-gradient(0deg,  rgba(30,40,44,.42) 0%, rgba(30,40,44,.06) 26%, rgba(30,40,44,0) 55%, rgba(30,40,44,.18) 100%);
        }
.feel-title {
            margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center;
            gap: .34em;
            font-family: "Vollkorn", serif; font-weight: 500; color: #fff;
            text-transform: uppercase; line-height: 1;
            text-shadow: 0 2px 28px rgba(20,26,30,.35);
        }
.feel-title .feel-word,
        .feel-title .feel-name,
        .feel-title .feel-place { font-size: clamp(1.9rem, 3.4vw, 3.2rem); letter-spacing: .2em; }
.feel-title .feel-place { text-transform: none; }
.feel-title .feel-break { display: block; flex: 0 0 100%; height: 0; }
.hero-desc {
            margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; max-width: 52ch;
            font-family: "Lato", sans-serif; font-weight: 400;
            font-size: clamp(.82rem, 1.05vw, .95rem); letter-spacing: .04em; line-height: 2;
            /* 空や庭の明るい写真に重なるため、細字＋淡い影では判読できなかった */
            color: #fff; text-shadow: 0 1px 2px rgba(10,14,16,.7), 0 0 18px rgba(10,14,16,.55);
        }
.hero-next-arrow { position: relative; display: block; width: clamp(2.6rem, 6vw, 4.6rem); height: 1px; background: rgba(255,255,255,.85); }
.hero-next-arrow::after {
            content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px;
            border-top: 1px solid rgba(255,255,255,.85); border-right: 1px solid rgba(255,255,255,.85);
            transform: translateY(-50%) rotate(45deg);
        }
.hero-next:hover .hero-next-label { opacity: 1; }
.hero-next:hover .hero-next-arrow { animation: hero-arrow 1.1s ease infinite; }
@keyframes hero-arrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.hero-scroll {
            position: absolute; z-index: 3; left: clamp(1.1rem, 2.6vw, 2.6rem); bottom: clamp(1.5rem, 5vh, 3rem);
            writing-mode: vertical-rl; font-family: "Lato", sans-serif; font-weight: 400;
            font-size: 11px; letter-spacing: .35em; text-transform: uppercase; color: rgba(255,255,255,.9);
        }
.hero-scroll::after {
            content: ""; display: block; width: 1px; height: 44px; margin: 12px auto 0;
            background: linear-gradient(to bottom, rgba(255,255,255,.85), transparent);
            animation: scrollline 1.8s ease-in-out infinite;
        }
@media (max-width: 640px) { .hero-scroll { display: none; } }