/*
Theme Name: thejumpshop
Theme URI: https://thejumpshop.jp/
Author: THE ジャンプショップ 神保町
Author URI: https://thejumpshop.jp/
Description: thejumpshop
Version: 1.3.17
Text Domain: thejumpshop
*/
/* 
$grid-breakpoints: (
xs: 0,        // ～768px（SP）
md: 769px,    // 769～1399px（Tablet）
xl: 1400px    // 1400px～（PC）
$container-max-widths: (
md: 1200px,
xl: 1320px
*/
@font-face {
    font-family: "NotoJP-Sub";
    src: url("/wp-content/themes/thejumpshop/lib/NotoSansJP-Sub.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+845B;
}

:root {
    --header-height: 80px;
    --menu-width: 45vw;
    --container-width: 40px;
    --container-height: 80px;
    --speed: 200ms;
    --easing: cubic-bezier(.2, .8, .2, 1);
    --primary-font: "NotoJP-Sub", "heisei-kaku-gothic-std", sans-serif;
    --secondary-font: "brother-1816", sans-serif;
    /* colors */
    --backdrop: #111111cc;
    --bg-light: #f1f1f1;
    --text-primary: #111;
    --text-secondary: #666;
    --text-light: #999;
    --primary-color: #F4DDA5;
    --secondary-color: #F6BFBC;
    --tertiary-color: #BED3CA;
    --border-color: #E5E5E5;
    --bs-border-color: #E5E5E5;
    /* font-size */
    --font-size-small: 11px;
    --font-size-medium: 14px;
    --font-size-large: 16px;
    --font-size-x-large: 20px;
    --font-size-xx-large: 24px;
    --font-size-xxx-large: 40px;
    --font-size-xxxx-large: 46px;
}

html {
    font-size: 12px;
    scroll-padding-top: var(--header-height);
    scrollbar-gutter: stable both-edges;
}

body {
    font-family: var(--primary-font);
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 !important;
    padding-top: var(--header-height);
    scroll-padding-top: var(--header-height);
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wrap {
    width: 100%;
    overflow: hidden;
}

/* utilities */
a {
    color: var(--text-primary) !important;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 700;
}

h1,
.h1 {
    font-size: var(--font-size-xx-large);
    margin-bottom: var(--container-width);
    letter-spacing: -0.02em;
}

h2,
.h2 {
    font-size: var(--font-size-xx-large);
    margin-bottom: 1rem;
}

h3,
.h3 {
    font-size: var(--font-size-large);
    margin-bottom: 1rem;
}

h4,
.h4 {
    font-size: var(--font-size-medium);
    color: var(--text-secondary);
    margin-bottom: 1em;
}

h5,
.h5 {
    font-size: var(--font-size-medium);
    color: var(--text-light);
    margin-bottom: 1em;
    font-weight: 500;
}

ul {
    margin-left: 0;
    line-height: 1.4;
}

.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin: 0 .5em 0 0;
    border-color: var(--border-color);
}

.form-check-input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-width: 1.5px;
    border-color: var(--border-color);
}

.form-check-input:checked {
    background-color: #fff;
    border-color: var(--border-color);
}

.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='%23bed3ca'/%3E%3C/svg%3E");
}

.form-check-input[type="checkbox"] {
    background-color: var(--bg-light);
    border-color: var(--bg-light);
    border-radius: 0;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-color: #fff;
    border: 1.5px solid var(--border-color);
}

.form-check-input:checked[type="checkbox"] {
    background-color: var(--tertiary-color);
    border-color: var(--tertiary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M3.5 8.5l2.5 2.5 6-6'/%3E%3C/svg%3E");
}

.form-check-input:focus {
    outline: 0;
    box-shadow: 0 0 0 1px #fff;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: var(--border-color);
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
    border-color: var(--border-color);
}

.container,
.header-inner {
    padding-left: var(--container-width);
    padding-right: var(--container-width);
}

.section .container {
    padding-top: var(--container-height);
    padding-bottom: var(--container-height);
}

.home .section .container {
    padding-top: 100px;
    padding-bottom: 120px;
}

footer .container {
    padding-top: 56px;
    padding-bottom: 0;
}

/* セクションのフェードイン */
.section.fade-in,
.slider-wrap.fade-in {
    opacity: 0;
    transition: opacity 1000ms ease-in-out;
    transition-delay: 100ms;
    will-change: opacity;
}

.section.is-inview,
.slider-wrap.is-inview {
    opacity: 1;
    transform: none;
}

.main .container {
    padding: 50px var(--container-width);
}

.bg-light {
    background-color: var(--bg-light) !important;
}

.lead-ttl {
    font-size: var(--font-size-x-large);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.lead {
    font-size: var(--font-size-medium);
    margin-bottom: 3rem;
    line-height: 1.4;
    letter-spacing: -0.02em;
    font-weight: 500;
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {
    font-size: var(--font-size-large);
    color: var(--text-secondary) !important;
}

.text-light {
    color: var(--text-light) !important;
    letter-spacing: -0.02em;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
    flex: 0 0 20%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.mt-5 {
    margin-top: 40px !important;
}

.mb-5 {
    margin-bottom: 40px !important;
}

.m-c {
    margin: var(--container-width);
}

.mt-c {
    margin-top: var(--container-width);
}

.me-c {
    margin-right: var(--container-width);
}

.mb-c {
    margin-bottom: var(--container-width);
}

.mb-c2 {
    margin-bottom: calc(var(--container-width) * 2) !important;
}

.ms-c {
    margin-left: var(--container-width);
}

.mt-c2 {
    margin-top: calc(var(--container-width) * 2);
}

.mb-m {
    margin-bottom: 32px !important;
}

.mb-x {
    margin-bottom: 64px;
}

.mb-x2 {
    margin-bottom: 120px;
}

.ttl {
    font-size: var(--font-size-xxx-large);
    font-family: var(--secondary-font);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.page .ttl,
.archive .ttl {
    font-size: 34px;
}

.page .section:first-of-type .ttl,
.archive .section:first-of-type .ttl {
    font-size: var(--font-size-xxx-large);
}

.subttl {
    font-size: var(--font-size-large);
    color: var(--text-light);
    margin: 0;
    letter-spacing: -0.03em;
}

.ttl+.subttl {
    margin-bottom: var(--container-width);
}

.ttl:has(+.global) {
    margin-bottom: 32px;
}

.ttl+.subttl:has(+.global) {
    margin-bottom: 32px;
}

.subttl[class*="w-"] {
    white-space: nowrap;
}

.text-muted {
    color: var(--text-light) !important;
}

.upcoming {
    font-size: var(--font-size-x-large);
    font-family: var(--secondary-font);
    font-weight: 700;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    color: var(--text-light);
}

.upcoming small {
    font-size: 60%
}

.btn {
    display: inline-block;
    padding: 1.1rem 2rem;
    background-color: var(--bg-light);
    color: var(--text-primary);
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--font-size-large);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.5;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    transition: all var(--speed) ease;
}

.btn+.btn {
    margin-left: 3px;
}

.btn:hover {
    background-color: var(--bg-light);
    color: var(--text-primary);
}

.btn.btn-more,
.btn.btn-buy {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 1.1rem calc(2rem + 2rem + 1lh) 1.1rem 2rem;
    background: var(--bg-light);
    color: var(--text-primary);
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--secondary-font);
    font-size: var(--font-size-large);
    font-weight: 700;
    letter-spacing: -0.04em;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    line-height: 1.5;
}

.bg-light .btn.btn-more,
.reservation .btn {
    background-color: #fff;
}

.btn.btn-more::after,
.btn.btn-buy::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    background: var(--tertiary-color) url(/wp-content/themes/thejumpshop/images/button-inner-more.svg) center center no-repeat;
    background-size: 1.5rem;
    transition: all var(--speed) ease;
}

.btn.btn-more:hover::after {
    background: var(--text-primary) url(/wp-content/themes/thejumpshop/images/arrow-right-white.svg) center center no-repeat !important;
    background-size: 1.5rem !important;
}

.btn-primary.btn-more::after {
    background-color: var(--primary-color);
}

.btn-secondary.btn-more::after {
    background-color: var(--secondary-color);
}

.btn.btn-buy,
.btn.btn-res {
    font-family: var(--primary-font);
    font-size: var(--font-size-medium);
    letter-spacing: -0.04em;
}

.btn.btn-buy::after {
    background: var(--primary-color) url(/wp-content/themes/thejumpshop/images/arrow-right-top.svg) center center no-repeat;
    background-size: 1.5rem;
}

.goods .btn.btn-buy::after {
    background-color: var(--tertiary-color);
}

.btn.btn-buy:hover::after {
    background: var(--text-primary) url(/wp-content/themes/thejumpshop/images/arrow-right-top-white.svg) center center no-repeat;
    background-size: 1.5rem;
}

.btn-back {
    font-family: var(--secondary-font);
    font-weight: 700;
    padding: 1.1rem 3.5rem 1.1rem 4.5rem;
    background: var(--bg-light) url(/wp-content/themes/thejumpshop/images/arrow-left.svg) center left 2.5rem no-repeat;
    background-size: 1.5rem;
}

.btn-back:hover {
    color: #fff !important;
    background: var(--text-primary) url(/wp-content/themes/thejumpshop/images/arrow-left-white.svg) center left 2.5rem no-repeat;
    background-size: 1.5rem;
}

.btn.btn-ja {
    font-family: var(--primary-font);
}

.btn-filter {
    margin-bottom: 64px;
}

.btn-search {
    font-size: var(--font-size-medium);
    font-family: var(--primary-font);
    background: var(--tertiary-color) url(/wp-content/themes/thejumpshop/images/icon_plus_P.svg) center right 3rem no-repeat;
    background-size: 16px;
    padding: 1.4rem 5rem 1.4rem 4rem;
    line-height: 1;
}

.btn-search:hover {
    background-color: var(--tertiary-color);
}

.btn-arrow {
    width: 40px;
    line-height: 1;
    aspect-ratio: 1 / 1;
    background: var(--tertiary-color) url(/wp-content/themes/thejumpshop/images/button-inner-more.svg) center center no-repeat;
    background-size: 1.5rem;
    transition: all var(--speed) ease;
}

.feature .btn-arrow {
    background: var(--text-primary) url(/wp-content/themes/thejumpshop/images/arrow-right-white.svg) center center no-repeat;
    background-size: 1.5rem;
}

.feature .post-card:hover .btn-arrow {
    background: var(--secondary-color) url(/wp-content/themes/thejumpshop/images/button-inner-more.svg) center center no-repeat;
    background-size: 1.5rem;
}

.post-card:hover .btn-arrow {
    background: var(--text-primary) url(/wp-content/themes/thejumpshop/images/arrow-right-white.svg) center center no-repeat;
    background-size: 1.5rem;
}

.btn.icon-x {
    font-family: var(--primary-font);
    font-size: var(--font-size-medium);
    background-image: url(/wp-content/themes/thejumpshop/images/icon_x.png);
    background-repeat: no-repeat;
    background-size: var(--font-size-medium);
    background-position: 1.6rem calc(50% - 0px);
    letter-spacing: 0;
}

.btn.icon-x:hover {
    color: #fff !important;
    background-color: var(--text-primary);
    background-image: url(/wp-content/themes/thejumpshop/images/icon_x_white.png);
}

.btn.btn-external {
    background: var(--bg-light) url(/wp-content/themes/thejumpshop/images/arrow-right-top.svg) right 1rem center no-repeat;
    background-size: 1.5rem;
    padding: 1rem 3rem 1rem 2rem;
}

.btn.btn-external:hover {
    color: #fff !important;
    background: var(--text-primary) url(/wp-content/themes/thejumpshop/images/arrow-right-top-white.svg) right 1rem center no-repeat;
    background-size: 1.5rem;
}

.access .btn.btn-external {
    font-size: 14px;
}

.btn.btn-more-ex {
    padding: 1.1rem calc(3rem + 2rem + 1lh) 1.1rem 3rem;
}

.page_reservation .btn.btn-more-ex {
    padding: 1.1rem calc(2rem + 2rem + 1lh) 1.1rem 2rem;
}

.btn.btn-more-ex::after {
    background-image: url(/wp-content/themes/thejumpshop/images/arrow-right-top.svg);
}

.btn.btn-more-ex:hover::after {
    background-image: url(/wp-content/themes/thejumpshop/images/arrow-right-top-white.svg) !important;
}

.btn.btn-black {
    font-size: var(--font-size-large);
}

.btn.btn-black::after {
    background-color: var(--text-primary);
    background-image: url(/wp-content/themes/thejumpshop/images/arrow-right-white.svg);
}

.btn.btn-more-past {
    padding-right: 3.5rem;
}

.btn.btn-more-past::after,
.btn.btn-more-past:hover::after {
    background-color: transparent;
    background-image: url(/wp-content/themes/thejumpshop/images/arrow-bottom.svg);
}

.btn.btn-more-past:hover {
    color: #fff !important;
    background-color: var(--text-primary) !important;
}

.btn.btn-more-past:hover::after {
    background-image: url(/wp-content/themes/thejumpshop/images/arrow-bottom-white.png) !important;
}

.btn-check:checked+.btn,
:not(.btn-check)+.btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
    color: inherit;
    background-color: inherit;
    border-color: inherit;
}

.btn.btn-reserve {
    padding: 1rem calc(2.5rem + 2rem + 1lh) 1rem 2.5rem !important;
}

.btn-txt {
    font-size: var(--font-size-large);
    margin-bottom: 2rem;
}

.external {
    font-family: var(--secondary-font);
    font-weight: 700;
    color: var(--text-secondary) !important;
    background-image: url(/wp-content/themes/thejumpshop/images/arrow-right-top-grey.png);
    background-repeat: no-repeat;
    background-position: right .3em;
    background-size: 14px 14px;
    display: inline-block;
    padding-right: 16px;
    transition: all var(--speed) ease;
}

.external:hover {
    opacity: .5;
}

.gmap {
    margin-top: .5rem;
}

.gmap .external {
    letter-spacing: -0.05em;
}

/* header */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--header-height);
    background: #fff;
    z-index: 1060;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: saturate(150%) blur(6px);
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin: auto;
}

.site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.site-logo img {
    width: 346px;
    height: auto;
    display: block;
}

.header-cta {
    position: relative;
    font-family: var(--secondary-font);
    font-size: var(--font-size-medium);
    font-weight: 700;
    background-color: var(--text-primary);
    color: #fff !important;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-left: auto;
    padding: 1rem 1.5rem 1rem 3rem;
    opacity: 1;
}

.header-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/wp-content/themes/thejumpshop/images/icon_pin.svg);
    background-position: 1rem calc(50% - 0px);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    opacity: 1;
    transition: opacity var(--speed) ease;
    z-index: 0;
    pointer-events: none;
}

.header-cta:hover {
    color: #ffffff80 !important;
    background-color: var(--text-primary);
}

.header-cta:hover::before {
    opacity: .5;
}

/* ハンバーガー（2本） */
.hamburger {
    position: relative;
    width: 22px;
    height: 46px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 0;
}

.hamburger .line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text-primary);
    border-radius: 1px;
    transition: transform var(--speed) var(--easing), opacity 200ms var(--easing), top var(--speed) var(--easing);
}

.hamburger .line:nth-child(1) {
    top: 16px;
}

.hamburger .line:nth-child(2) {
    top: 26px;
}

/* 開いたら ✕ にアニメ変形 */
.hamburger[aria-expanded="true"] .line:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}

.hamburger[aria-expanded="true"] .line:nth-child(2) {
    top: 21px;
    transform: rotate(-45deg);
}

/* スライドメニュー本体（左から） */
.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: var(--menu-width);
    max-width: 528px;
    min-width: 320px;
    background: #fff;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform var(--speed) var(--easing);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--header-height);
}

body.menu-open {
    overflow: hidden;
}

body.menu-open .side-menu {
    transform: translateX(0);
}

/* 背景オーバーレイ */
.menu-backdrop {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--speed) var(--easing), visibility var(--speed) step-end;
    z-index: 1035;
}

body.menu-open .menu-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--speed) var(--easing), visibility 0s;
}

/* メニュー内レイアウト & フェードイン */
.menu-list,
.menu-sublist {
    list-style: none;
    margin: 0;
    padding: 2rem var(--container-width);
}

.menu-list li {
    opacity: 0;
    transform: translateY(6px);
}

.menu-list a {
    display: block;
    text-decoration: none;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: var(--font-size-xx-large);
    letter-spacing: -0.06em;
    background-image: none;
    background-position: center right 1rem;
    background-repeat: no-repeat;
    background-size: 17px;
    margin-bottom: 2rem;
    transition: all var(--speed) ease;
}


.menu-list li:last-child a,
.menu-sublist li:last-child a {
    margin-bottom: 0;
}

.menu-list a:hover {
    background-image: url(/wp-content/themes/thejumpshop/images/arrow-right.svg);
    background-position: center right;
}

.menu-sublist a {
    transition: opacity var(--speed) var(--easing);
}

.menu-list a small,
.menu-sublist a small {
    display: block;
    font-family: var(--primary-font);
    font-size: var(--font-size-large);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.menu-sublist a small {
    margin-bottom: 1rem;
}

.menu-sublist a:hover,
.menu-sns a:hover {
    opacity: .5;
}

.menu-sns {
    padding: 2rem var(--container-width);
}

.menu-sns .subttl {
    font-size: var(--font-size-medium);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.menu-sns .sns-icons [class*="icon-"] {
    margin-left: 12px;
}

.sns-icons {
    padding: 0;
}

.sns-icons [class*="icon-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    border: 1px solid var(--text-primary);
    border-radius: 50%;
    line-height: 1;
    width: 48px;
    height: 48px;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 18px;
    transition: all var(--speed) ease;
}

.sns-icons [class*="icon-"]:first-child {
    margin-left: 0;
}

.sns-icons .icon-x {
    background-image: url(/wp-content/themes/thejumpshop/images/icon_x.png);
}

/* .sns-icons .icon-x:hover {
    background-color: var(--text-primary);
    background-image: url(/wp-content/themes/thejumpshop/images/icon_x_white.png);
} */
.sns-icons .icon-instagram {
    background-image: url(/wp-content/themes/thejumpshop/images/icon_instagram.png);
}

/* .sns-icons .icon-instagram:hover {
    background-color: var(--text-primary);
    background-image: url(/wp-content/themes/thejumpshop/images/icon_instagram_white.png);
} */

.sns-icons .icon-link {
    background-image: url(/wp-content/themes/thejumpshop/images/icon_link.png);
}

.copy-link-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    padding: .25rem .5rem;
    cursor: pointer
}

.copy-link-btn:focus {
    outline: 2px solid #4b9;
    outline-offset: 2px
}

.copy-link-btn svg {
    width: 20px;
    height: 20px
}

.copy-link-btn .tooltip {
    position: absolute;
    left: 50%;
    bottom: 120%;
    transform: translateX(-50%) translateY(6px) scale(1);
    background: #111;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 1rem 1.5rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}

.copy-link-btn .tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #111
}

.copy-link-btn.is-copied .tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1)
}

/* 開いたときに順番にフェードイン */
body.menu-open .menu-list li {
    animation: menuFade .5s var(--easing) forwards;
}

body.menu-open .menu-list li:nth-child(1) {
    animation-delay: .05s;
}

body.menu-open .menu-list li:nth-child(2) {
    animation-delay: .10s;
}

body.menu-open .menu-list li:nth-child(3) {
    animation-delay: .15s;
}

body.menu-open .menu-list li:nth-child(4) {
    animation-delay: .20s;
}

body.menu-open .menu-list li:nth-child(5) {
    animation-delay: .25s;
}

body.menu-open .menu-list li:nth-child(6) {
    animation-delay: .30s;
}

@keyframes menuFade {
    to {
        opacity: 1;
        transform: none;
    }
}

/* 共通コンポーネント */
.post-title {
    margin-bottom: 1rem;
}

.post-card time,
.news-card time,
.post-body time {
    display: inline-block;
    color: var(--text-light);
    letter-spacing: -0.03em;
    margin-right: .5rem;
    font-weight: 500;
}

.post-body time {
    font-weight: 700;
    font-size: var(--font-size-large);
    letter-spacing: 0;
}

.post-card-cat {
    display: inline-block;
    border: 1px solid var(--text-primary);
    border-radius: 30px;
    padding: 4px 8px;
    margin-right: .5rem;
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1;
}

.post-card-ttl {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 1rem 0 2rem 0;
    font-size: var(--font-size-large);
    letter-spacing: -0.02em;
    transition: all var(--speed) ease;
}

.post-card-thumb {
    overflow: hidden;
}

.post-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: transform 400ms ease;
    will-change: transform;
}

a:hover .post-card-thumb img,
a:focus-visible .post-card-thumb img {
    transform: scale(1.04);
}

.post-card-thumb .swiper-slide img {
    transform: none !important;
    transition: none !important;
}

.post-card-thumb .swiper-slide-active img {
    transform: scale(1) !important;
    transition: transform 400ms ease !important;
    will-change: transform;
}

a:hover .post-card-thumb .swiper-slide-active img,
a:focus-visible .post-card-thumb .swiper-slide-active img {
    transform: scale(1.04) !important;
}

.post-card-price {
    font-family: var(--secondary-font);
    font-size: var(--font-size-x-large);
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-bottom: 2rem;
}

.post-card-price small {
    font-size: 12px;
    letter-spacing: 0.02em;
}

.post-card-comics {
    color: var(--text-light);
    font-weight: 700;
    font-size: var(--font-size-medium);
}

.post-card-comics+.post-title {
    margin: 10px 0 14px 0;
}

.post-card-period {
    font-size: var(--font-size-large);
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: -0.02em;
}

.post-card-period-date {
    margin-right: .3rem;
    letter-spacing: -0.02em;
}

.post-card-period-date-label {
    font-size: var(--font-size-medium);
    letter-spacing: 0.02em;
}

.single .post-card-meta,
.post-modal .post-card-meta {
    margin-bottom: 24px !important;
}

.single .post-card-period-date-label,
.post-modal .post-card-period-date-label {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-secondary);
    letter-spacing: -0.02em;
    margin-right: .5rem;
    margin-left: 0;
}

.single .post-card-period-date,
.post-modal .post-card-period-date {
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin-right: .5rem;
}

.single .post-card-cat,
.post-modal .post-card-cat {
    font-size: 1rem;
}

.single .post-card-price,
.post-modal .post-card-price {
    margin-bottom: 2rem;
}

.single .post-card-price small,
.post-modal .post-card-price small {
    font-size: 10px;
    letter-spacing: -0.02em;
}

.single .post-card-period {
    margin-bottom: 4rem;
}

.point,
.step {
    display: inline-block;
    background-color: var(--tertiary-color);
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: var(--font-size-medium);
    line-height: 1;
    letter-spacing: -0.04em;
    padding: 6px 8px;
    margin-bottom: 3rem;
}

.step {
    background-color: var(--primary-color);
}

/* faq */
.acc {
    margin-top: -2rem;
}

.acc a {
    text-decoration: underline;
}

.acc-item {
    border-bottom: 1px solid var(--border-color);
}

.acc-trigger {
    appearance: none;
    border: 0;
    background: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 30px 0;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
}

.acc-trigger[aria-expanded="true"] {
    padding-bottom: 24px;
}

.acc-trigger h3 {
    margin-bottom: 0;
}

.acc-sub {
    font-size: .95rem;
    color: var(--text-primary);
}

.acc-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex: none;
}

.acc-icon .bar {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 0;
    transform: translate(-50%, -50%);
    transition: transform var(--speed) ease;
    will-change: transform;
}

.acc-icon .bar.v {
    transform: translate(-50%, -50%) rotate(90deg);
}

.acc-trigger[aria-expanded="true"] .acc-icon .bar.v {
    transform: translate(-50%, -50%) rotate(180deg);
}

.toggle-btn[aria-expanded="true"] .acc-icon .bar.v {
    transform: translate(-50%, -50%) rotate(180deg);
}

.acc-panel {
    overflow: hidden;
    height: 0;
    transition: height var(--speed) ease;
}

.acc-panel-inner {
    padding: 0 0 30px 0;
    opacity: 0;
    font-size: var(--font-size-medium);
    line-height: 1.5;
    transform: translateY(-6px);
    transition: opacity var(--speed) ease, transform var(--speed) ease;
}

.acc-panel-inner a {
    font-weight: 700;
}

.acc-panel[data-open="true"] .acc-panel-inner {
    opacity: 1;
    transform: translateY(0);
}

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

    .acc-icon .bar,
    .acc-panel,
    .acc-panel-inner {
        transition: none;
    }
}

.post-card-label {
    font-weight: 700;
    font-size: var(--font-size-large);
    color: var(--text-light);
    letter-spacing: -0.02em;
}

.post-card-date {
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: var(--font-size-x-large);
    letter-spacing: -0.04em;
}

/* タイトルホバーアニメーション */
.post-card-ttl .post-card-hover {
    background-image: linear-gradient(var(--primary-color), var(--primary-color));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    padding-bottom: 3px;
    line-height: 1.4;
    transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.post-card:focus .post-card-hover,
.post-card:hover .post-card-hover,
.goods-card:focus .post-card-hover,
.goods-card:hover .post-card-hover {
    background-size: 100% 2px;
}

.feature .post-card-ttl .post-card-hover {
    background-image: linear-gradient(var(--secondary-color), var(--secondary-color));
}

.goods .post-card-ttl .post-card-hover {
    background-image: linear-gradient(var(--tertiary-color), var(--tertiary-color));
}

/* news */
.home .news .container {
    padding-top: 0;
    padding-bottom: 0;
}

.news .post-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.news .news-cards {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 1.6rem 1.6rem 1.6rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.news .news-cards::-webkit-scrollbar {
    display: none;
}

.news .news-card {
    flex: 0 0 auto;
}

.news .news-card a {
    display: block;
    padding: 1.2rem 1.8rem;
    background: #fff;
    margin-right: .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    outline: none;
    transition: all var(--speed) ease;
}

.news .news-card a:hover {
    color: rgb(17 17 17 / 50%) !important;
}

.home .news .subttl {
    margin-top: 2rem;
}

.home .news .col-md-3 {
    width: 20%;
}

.home .news .col-md-9 {
    width: 80%;
}

/* update */
.single-update .post-body,
.single-feature .post-body {
    padding-top: 80px;
}

.single-update .post-body a,
.single-feature .post-body a {
    font-weight: 700;
}

.single-update .post-title {
    margin-bottom: 64px;
}

.single-feature .post-title {
    margin-bottom: 24px;
}

.single-update .post-content,
.single-feature .post-content {
    padding-top: 64px;
}

.update .post-card {
    display: block;
    padding: 2rem 0 0 0;
    border-bottom: 1px solid var(--border-color);
}

.update .post-card-ttl {
    line-height: 1.3;
}

.home .update .post-card:first-child {
    padding-top: 0;
}

/* feature */
.feature .post-card-thumb img {
    aspect-ratio: 1.91 / 1;
}

.single-feature .post-card-labels {
    gap: 1rem;
    margin-bottom: 56px;
}

.single-feature .post-card-label,
.feature .post-card-label {
    font-family: var(--secondary-font);
}

.single-feature .post-content {
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.feature .post-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 40px;
}

.feature .post-card {
    display: flex;
    flex-direction: column;
    flex: 0 1 calc((100% - 8px) / 3);
    max-width: calc((100% - 8px) / 3);
    background-color: #fff;
}

.feature .post-card-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.home .feature .post-card-link {
    margin-top: auto;
}

.feature .post-card .post-card-ttl {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 4行で丸める */
    margin-bottom: 4rem;
    line-height: 1.35;
    font-size: var(--font-size-x-large);
}

.archive .post-card .post-card-ttl {
    margin-bottom: 20px;
}

.feature .post-card-cat,
.single-feature .post-card-cat {
    background-color: var(--text-primary);
    color: #fff;
}

/* reservation */
.reservation {
    aspect-ratio: 2.78 / 1;
    min-height: 360px;
    background: transparent url(/wp-content/themes/thejumpshop/images/P_Reservation.jpg) center center no-repeat;
    background-size: cover;
    color: #fff;
}

.reservation.section>.container {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.home .btn-pair {
    display: flex;
    gap: 8px;
}

.home .btn-pair .btn+.btn {
    margin-left: 0;
}

.btn-pair .btn {
    white-space: nowrap;
}

.page.page_reservation {
    font-size: 14px;
}

.page.page_reservation .h1 {
    margin-bottom: 20px;
}

.page.page_reservation .lead {
    margin-bottom: 1em;
}

/* goods */
.goods-row {
    display: flex;
    flex-wrap: wrap;
    --gap: 4px;
    gap: var(--gap);
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin-bottom: 3rem;
}

.goods-left {
    width: 52%;
}

.goods-right {
    width: 48%;
}

.goods-card {
    display: flex;
    flex-direction: column;
    width: calc((100% - var(--gap) * 3) / 4);
    background-color: #fff;
}

.home .goods-row {
    gap: 2px;
}

.archive .goods-row {
    gap: 0;
}

.archive .goods-card {
    width: calc(100% / 5 + 2px);
    border: 2px solid var(--border-color);
    margin: -1px;
}

.goods .post-card-cat {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
    color: #fff;
}

.goods .post-title,
.artprint .post-title {
    letter-spacing: 0.01em;
}

.goods-card-body {
    padding: 26px 20px 40px 20px;
}

.goods-card-body .post-card-ttl {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 4行で丸める */
    font-size: var(--font-size-large);
    letter-spacing: 0.01em;
    margin-bottom: 1rem;
}

.goods-card-body .post-card-price {
    margin-bottom: 1rem;
}

.goods-thumb {
    /* 正方形 */
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
}

/* Swiper内の画像を比率内に収める */
.goods-thumb .swiper,
.goods-thumb .swiper-wrapper,
.goods-thumb .swiper-slide {
    width: 100%;
    height: 100%;
}

.goods-thumb img {
    width: 100%;
    height: 100%;
    /* 切り抜き無しで収める */
    object-fit: contain;
    display: block;
}

.goods-indicator {
    position: relative;
    width: calc(100% - 2rem);
    margin: 0 auto;
    height: 2px;
    background: var(--bg-light);
    overflow: hidden;
    border-radius: 1px;
}

/* 可動サム */
.goods-indicator .gi-thumb {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(100% / var(--gi-n, 1));
    transform: translateX(calc(var(--gi-i, 0) * 100%));
    background: var(--text-primary);
    transition: transform var(--speed) ease;
    will-change: transform;
}

.artprint h4,
.goods h4 {
    letter-spacing: -0.02em;
}

/* artprint */
.artprint .row {
    --img-h: 580px;
}

.artprint-left {
    width: 54%;
}

.artprint-right {
    width: 46%;
}

.home .artprint .ttl {
    font-size: 30px;
    font-family: var(--primary-font);
    letter-spacing: -0.02em;
}

.artprint-gallery {
    padding: 50px 0;
    background: linear-gradient(#fff, #f4f4f4);
    min-height: var(--img-h);
    margin-right: calc(50% - 50vw);
}

.artprint-overlay {
    position: relative;
}

.artprint-overlay-img {
    position: absolute;
    top: 0;
    right: 0;
    height: var(--img-h);
    width: auto;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
    margin-top: 30px;
}

/* access */
.home .access .ttl {
    font-size: 34px;
}

table {
    font-size: var(--font-size-medium);
}

table th {
    color: var(--text-light) !important;
    font-weight: 700;
    padding: 2rem 0 !important;
}

table td {
    font-weight: 700;
    padding: 2rem 0 !important;
}

/* infinity-slider */
.infinity-slider {
    overflow: hidden;
}

.infinity-slider-wrapper {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: infinity-scroll var(--dur, 30s) linear infinite;
    animation-play-state: paused;
    backface-visibility: hidden;
    /* Safariの反転・再合成ブレ回避 */
    transform: translateZ(0.001px);
    /* GPU合成を強制して境目のフリッカ抑制 */
}

@keyframes infinity-scroll {
    0% {
        transform: translate3d(var(--eps, 0px), 0, 0);
    }

    100% {
        transform: translate3d(calc(-1 * var(--trackWpx, 2000px) + var(--eps, 0px)), 0, 0);
    }
}

.infinity-slider-items {
    display: flex;
}

.infinity-slider-items img {
    display: block;
    margin-right: 100px;
    height: 272px;
    width: auto;
    pointer-events: none;
    user-select: none;
}

.infinity-slider-items img.yoko {
    height: 329px;
}

.infinity-slider-items img:nth-child(even) {
    margin-top: 210px;
}

.artprint .infinity-slider-items img {
    box-shadow: 20px 20px 40px 0 #00000040;
}

.about .infinity-slider {
    margin: var(--container-width) 0;
}

.about .infinity-slider-items img {
    width: 35vw;
    max-width: 482px;
    height: auto;
    margin-right: 4px !important;
}

.about .infinity-slider-items img:nth-child(even) {
    margin-top: 0 !important;
}

/* modal */
.post-modal-for-tab-bars {
    display: none;
    position: fixed;
    bottom: 0;
    pointer-events: none;
    height: 4px;
    width: 100%;
    background-color: #fff;
    mix-blend-mode: lighten;
}

body.modal-open {
    overflow: hidden;
}

body.modal-open::after {
    content: '';
    position: fixed;
    z-index: 9990;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: var(--backdrop); */
    /* backdrop-filter: blur(6px); */
}

body.modal-open .post-modal-for-tab-bars {
    display: block;
}

.post-modal {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed);
    z-index: 9999;
}

.post-modal[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.modal-body {
    max-width: calc(100% - 4rem);
    min-height: calc(100dvh - 4rem);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    background: #fff;
    padding: 2rem 0 96px 0;
}

.modal-close {
    position: absolute;
    top: 3rem;
    right: 3rem;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 1;
    background: transparent;
    border: 0 none;
    z-index: 2;
    padding: 0;
    opacity: 0;
    transition: opacity .25s ease;
}

.modal-close.is-visible{
    opacity: 1;
}

.modal-close-bottom {
    font-family: var(--secondary-font);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    padding: 16px 54px !important;
    margin: 64px 0;
    letter-spacing: -0.04em;
}

.modal-close-bottom img {
    width: calc(var(--font-size-large) + 2px);
}

/* モーダルの入退場アニメ */
.post-modal .modal-body {
    opacity: 0;
    transform: translateY(80px) scale(.98);
    will-change: transform, opacity;
}

.post-modal[aria-hidden="false"] .modal-body {
    animation: modalIn .50s cubic-bezier(.22, 1, .36, 1) forwards;
}

.post-modal.is-leaving .modal-body {
    animation: modalOut .38s cubic-bezier(.4, 0, 1, 1) forwards;
    /* ease-in 強め */
}

/* オーバーレイの退場フェードも強めに */
.post-modal {
    transition: opacity .40s;
}

.post-modal[aria-hidden="false"].is-leaving {
    opacity: 0;
}

@keyframes modalIn {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(120px) scale(.98);
    }
}

/* ───────── 額装高精細：通常表示 ───────── */
.liquid-gallery {
    padding: 0;
    max-width: 100%;
}

.liquid-gallery .lg-main {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}

.goods .liquid-gallery .lg-main {
    aspect-ratio: 1 / 1;
    background: transparent;
    border-color: transparent;
    cursor: auto;
    /* グッズはズームなし */
    pointer-events: none;
}

.liquid-gallery .lg-main img {
    max-width: 100%;
    display: block;
}

.liquid-gallery .lg-thumbs-wrap {
    position: relative;
    margin-top: .75rem;
}

.liquid-gallery .lg-thumbs {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: none;
}

.liquid-gallery .lg-thumbs.is-overflow {
    justify-content: flex-start;
}

.liquid-gallery .lg-thumbs::-webkit-scrollbar {
    display: none;
}

.liquid-gallery .lg-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    user-select: none;
    outline: none;
}

.liquid-gallery .lg-thumb.is-active {
    border-color: var(--primary-color);
}

.goods .liquid-gallery .lg-thumb.is-active {
    border-color: var(--tertiary-color);
}

.liquid-gallery .lg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 横に溢れたときのフェード */
.liquid-gallery .lg-fade {
    display: none;
    position: absolute;
    top: 0;
    width: 64px;
    height: 100%;
    pointer-events: none;
}

.liquid-gallery .lg-fade-right {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.liquid-gallery .lg-fade-left {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

/* ───────── 額装高精細：フルスクリーン ───────── */
body.no-scroll {
    overflow: hidden;
}

html:has(#lgOverlay.is-open),
body:has(#lgOverlay.is-open) {
    overflow: hidden;
    overscroll-behavior: none;
    height: 100%;
}

#lgOverlay[hidden] {
    display: none;
}

#lgOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    height: 100svh;
    max-height: none;
    overflow: hidden;
    overscroll-behavior: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed) ease;
}

#lgOverlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

#lgOverlay .lg-overlay-inner {
    display: flex;
    width: 100%;
    height: 100%;
}

#lgOverlay .lg-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 1;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: var(--text-primary);
}

#lgOverlay .lg-aside {
    width: auto;
    background: #fff;
    padding: var(--container-width);
    overflow: auto;
    touch-action: none;
}

#lgOverlay .lg-modal-thumbs {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    touch-action: auto;
}

#lgOverlay .lg-m-thumb {
    width: 86px;
    height: 86px;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 0;
    overflow: hidden;
    border: 2px solid transparent;
}

#lgOverlay .lg-m-thumb.is-active {
    border-color: var(--primary-color);
}

#lgOverlay .lg-m-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#lgOverlay .lg-stage {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: zoom-in;
}

#lgOverlay .lg-stage:active {
    cursor: zoom-in;
}

#lgOverlay .lg-zoom-img {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform, width, height;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    max-width: none !important;
    max-height: none !important;
}

/* グッズ絞り込み検索 */
/* オーバーレイ */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed) ease;
    z-index: 1080;
}

.drawer-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* ドロワー本体 */
.drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 400px;
    transform: translateX(-100%);
    transition: transform .35s ease;
    background: #fff;
    z-index: 1090;
    box-shadow: 0 0 30px rgba(0, 0, 0, .15);
}

.drawer.open {
    transform: translateX(0);
}

body.drawer-locked {
    position: fixed;
    overflow: hidden;
}

/* 内部レイアウト */
.drawer-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panes {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
}

.panes-track {
    position: absolute;
    inset: 0;
    display: flex;
    height: 100%;
    transition: transform var(--speed) ease;
}

.menu-pane {
    min-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--container-width);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.pane-header .pane-title {
    width: 100%;
    font-size: 16px;
}

.pane-header .btn-icon {
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
    border-radius: 0;
    color: var(--text-primary);
}

.pane-header .btn-icon img {
    width: 24px;
}

.panes .next-btn {
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
}

.panes .next-btn img,
.panes .back-btn img {
    width: 20px;
    max-width: none;
}

.pane-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0 0 2rem 0;
}

.pane-body .item-label {
    cursor: default;
}

.pane-footer {
    border-top: 1px solid var(--border-color);
    background: #f8f9fa;
    padding: .75rem;
    position: sticky;
    bottom: 0;
    box-shadow: 0 -8px 20px 0 var(--border-color);
}

.pane-footer .btn {
    font-size: 14px;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 16px 0;
}

.filter-chip {
    font-family: var(--primary-font);
    font-weight: 700;
    border: 0;
    background: #f2f2f2;
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-radius: 0;
    line-height: 1;
}

.filter-chip .chip-x {
    margin-left: .5rem;
}

/* リスト */
.drawer .list-entry {
    padding: 0;
    margin: 0 var(--container-width);
}

.drawer .list-drill {
    padding: 0;
    margin: 0;
}

.drawer .list-entry>li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0;
}

.drawer .list-drill>li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 16px;
}

.drawer .list-entry li.is-clickable,
.drawer .list-drill li.is-clickable {
    cursor: pointer;
}

.drawer .item-label {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: var(--font-size-medium);
}

.drawer .item-label.item-title {
    font-size: 16px;
}

/* ＋/− 開閉ブロック */
.drawer .toggle-block {
    margin: 0 var(--container-width);
}

.drawer .toggle-btn,
.drawer .panel-ttl {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
    border-top: 1px solid var(--border-color);
}

.drawer .toggle-block:first-child .toggle-btn {
    border-top: 0 none;
}

.drawer .panel-ttl {
    padding-bottom: 20px;
}

.drawer .toggle-area {
    display: none;
    padding: 0 0 1rem 0;
    font-size: var(--font-size-medium);
}

.drawer .toggle-area-open {
    font-size: var(--font-size-medium);
}

.drawer .toggle-area.in {
    display: block !important;
    animation: slideInX .2s ease-out both;
}

.drawer .toggle-btn .pm {
    font-size: 20px;
    width: 20px;
    text-align: center;
    font-weight: 500;
}

.drawer .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-weight: 700;
}

.drawer .form-box {
    padding: 28px 20px;
    color: var(--text-light);
    font-size: 1rem;
    margin: var(--container-width) 0;
}

@keyframes slideInX {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* sns */
.sns {
    aspect-ratio: 3.36 / 1;
    background: var(--backdrop) url(/wp-content/themes/thejumpshop/images/P_SNS.jpg?v2) center center no-repeat;
    background-size: cover;
    color: #fff;
}

.sns .sns-icons {
    padding-top: 16px;
}

.sns .sns-icons [class*="icon-"] {
    border: 1px solid #fff;
    width: 60px;
    height: 60px;
    background-size: 20px;
}

.sns .sns-icons .icon-x {
    background-image: url(/wp-content/themes/thejumpshop/images/icon_x_white.png);
}

.sns .sns-icons .icon-x:hover {
    background-color: #fff;
    background-image: url(/wp-content/themes/thejumpshop/images/icon_x.png);
}

.sns .sns-icons .icon-instagram {
    background-image: url(/wp-content/themes/thejumpshop/images/icon_instagram_white.png);
}

.sns .sns-icons .icon-instagram:hover {
    background-color: #fff;
    background-image: url(/wp-content/themes/thejumpshop/images/icon_instagram.png);
}

/* post */
.post-body {
    max-width: 800px;
    margin: auto;
    padding: var(--container-width);
    font-size: var(--font-size-medium);
}

.post-content {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 4rem 0;
    letter-spacing: 0.02em;
}

.post-content p:last-child {
    margin-bottom: 0;
}

.post-content .h4,
.post-info .h4,
.post-notes .h4 {
    margin-bottom: 32px;
}

.post-info {
    border-top: 1px solid var(--border-color);
    padding: 4rem 0;
    letter-spacing: 0.02em;
}

.post-body .post-info table {
    margin-bottom: 0;
}

.post-body .post-info table th {
    white-space: nowrap;
    vertical-align: top;
}

.post-body .post-info table th,
.post-body .post-info table td {
    padding: 0 6rem 20px 0 !important;
    font-weight: 500 !important;
}

.post-notes {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 4rem 0;
    letter-spacing: 0.02em;
}

.post-body table th,
.post-body table td {
    padding: 1rem !important;
}

.post-body table th {
    padding-right: 2rem !important;
}

.post-body a {
    color: var(--text-primary);
    text-decoration: underline;
}

.post-back {
    text-align: center;
    padding-top: calc(var(--container-width) * 2);
    margin-bottom: calc(var(--container-width) * 4);
    border-top: 1px solid var(--border-color);
}

.post-sns {
    margin: calc(var(--container-width) * 2) 0;
}

.post-sns .subttl {
    font-family: var(--secondary-font);
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.goods .post-sns .subttl,
.artprint .post-sns .subttl {
    margin-bottom: 0;
}

.post-share {
    margin: 4rem 0;
    padding: 16px 0;
    line-height: 1;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.post-share .subttl {
    margin-right: 40px;
}

.post-share .sns-icons [class*="icon-"] {
    margin-left: 8px;
}

.post-box {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--container-width);
    background-color: var(--bg-light);
    font-size: var(--font-size-medium);
}

.post-box h2 {
    font-size: 20px;
    margin-bottom: 32px;
}

.post-box p {
    margin-bottom: 40px;
}

.post-box p:last-child {
    margin-bottom: 0;
}

.post-box ul {
    padding-left: 1.2em;
    margin-bottom: 32px;
}

.post-box li {
    line-height: 1.4;
    margin-bottom: 6px;
}

.post-box a {
    text-decoration: underline;
}

.post-box * {
    color: #1A1311 !important;
}

/* breadcrumb */
.breadcrumb {
    margin: 0;
    padding: 1rem var(--container-width);
    border-top: 1px solid var(--border-color);
    font-weight: 700;
    color: var(--text-light) !important;
    letter-spacing: -0.02em;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--text-light) !important;
    user-select: none;
    outline: none;
}

.breadcrumb-item.active {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb-item+.breadcrumb-item::before {
    float: none;
    color: var(--text-light) !important;
}

/* archive */
.archive .update .post-cards {
    border-top: 1px solid var(--border-color);
}

.archive .update .post-card {
    padding-top: 30px;
}

.archive .update .post-card-ttl {
    margin-bottom: 30px;
}

.archive .breadcrumb {
    margin-top: 0;
}

.archive .feature .post-cards {
    gap: 20px;
}

.archive .feature .post-card {
    flex: 0 1 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
    background-color: #fff;
}

.archive .feature .post-card-body {
    padding: 2rem 0;
}

.archive .btn-arrow {
    display: none;
}

/* pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: calc(var(--container-width) * 2);
    margin-bottom: 80px;
}

.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-medium);
    font-family: var(--secondary-font);
    font-weight: 700;
    padding: 0.5rem;
    width: 28px;
    line-height: 1;
    aspect-ratio: 1 / 1;
}

.page-numbers.next,
.page-numbers.prev {
    padding: 0;
}

.page-numbers img {
    width: 28px;
}

.page-numbers.current {
    background-color: var(--primary-color);
}

.feature .page-numbers.current {
    background-color: var(--secondary-color);
}

.goods .page-numbers.current {
    background-color: var(--tertiary-color);
}

/* page */
/* .page .section .container {
    padding-top: calc(var(--container-height) * 0.5);
    padding-bottom: calc(var(--container-height) * 0.5);
} */

.page-body {
    max-width: 997px;
    margin: auto;
    padding: var(--container-height) var(--container-width);
    font-size: var(--font-size-medium);
}

.page h1,
.page .h1 {
    margin-bottom: 40px;
}

.page_about .h1 {
    margin-bottom: .8em;
}

.page-title {
    font-size: var(--font-size-xxxx-large);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin-bottom: 4rem;
}

.page-lead {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    line-height: 1.8;
}

/* contact */
.contact a:not(.btn) {
    text-decoration: underline;
}

.contact form {
    font-size: var(--font-size-medium);
}

.contact form p {
    margin: 0;
}

.contact form h3 {
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.contact form input[type="text"],
.contact form input[type="email"],
.contact form textarea {
    background-color: var(--bg-light);
    border-radius: 0;
    padding: 1em;
    width: 100%;
    font-size: var(--font-size-large);
    border-color: var(--bg-light);
}

.contact form input::placeholder,
.contact form textarea::placeholder {
    color: #99999980;
    font-family: var(--primary-font);
    font-size: var(--font-size-large);
    font-weight: 700;
}

.contact form .form-wrap {
    margin-bottom: 56px;
}

.contact .wpcf7-list-item {
    display: block;
    margin: 0 0 1rem 0;
}

.contact .wpcf7-list-item label {
    display: flex;
    align-items: center;
}

.contact .wpcf7-list-item-label {
    display: inline-block;
}

.contact .wpcf7-radio .wpcf7-list-item-label {
    font-size: var(--font-size-large);
}

.contact .btn {
    line-height: 1.5 !important;
    opacity: 1;
    font-size: 14px !important;
}

.contact .btn.btn-back {
    padding: 1.1rem 2.3rem 1.1rem 4.3rem;
    background-position: center left 2.3rem;
    margin: 0 4px 0 0;
}

.contact .btn.btn-more {
    font-size: var(--font-size-large);
    padding: 1.1rem calc(3.1rem + 2rem + 1lh) 1.1rem 3.1rem;
    margin: 0;
}

.contact .btn.btn-back-top {
    padding: 1.1rem 4rem 1.1rem 6rem;
    background-position: center left 3.5rem;
}

.contact .wpcf7-not-valid {
    border: 2px solid #ff0000 !important;
}

.contact .wpcf7-not-valid-tip {
    display: none;
}

.contact .error-msg {
    color: #ff0000;
    font-size: 12px;
    font-weight: 700;
    margin-top: 1rem;
}

.contact .confirm-text {
    font-size: var(--font-size-large);
    font-weight: 700;
}

.contact .required {
    display: inline-block;
    margin-left: .25em;
}

.contact .done {
    font-size: var(--font-size-medium);
    margin-bottom: 4rem;
}

.contact .wpcf7 form.spam .wpcf7-response-output {
    padding: 0;
    border: 0 none;
    color: #ff0000;
    font-size: 12px;
    font-weight: 700;
}

.contact .form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='%23111111'/%3E%3C/svg%3E");
}

.contact form.sent .wpcf7-response-output {
    display: none !important;
}

.tjs-recap-checking .wpcf7-response-output {
    display: none !important;
}

/* filter */
.filter {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: var(--container-width) 0;
    padding-top: 28px;
}

.filter a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-medium);
    font-family: var(--secondary-font);
    font-weight: 700;
    padding: 1rem 1.5rem;
    line-height: 1;
    background-color: var(--bg-light);
}

.filter a.is-active {
    background-color: var(--secondary-color);
}

/* artprint */
.artprint-info .col-md-4 {
    width: 39%;
}

.artprint-info .col-md-8 {
    width: 61%;
}

.artprint .post-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 2px;
    margin-bottom: 40px;
}

.artprint .post-card {
    flex: 0 1 calc((100% - 4px) / 2);
    max-width: calc((100% - 4px) / 2);
    background-color: #fff;
    padding: var(--container-width) var(--container-width) calc(var(--container-width) * 2) var(--container-width);
}

.artprint .post-card-thumb {
    margin-bottom: 2rem;
    text-align: center;
}

.artprint .post-card-thumb img {
    aspect-ratio: 1 / 1;
}

.artprint .post-card-ttl {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 2行で丸める */
    margin-top: 0;
    margin-bottom: 14px;
    font-size: var(--font-size-x-large);
    letter-spacing: 0.01em;
    line-height: 1.35;
}

.archive .artprint .post-card-price {
    font-size: 18px;
    margin-bottom: 0;
}

.artprint .post-card-meta,
.goods .post-card-meta {
    margin-bottom: 14px;
}

.artprint .post-card-cat {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
    color: #fff;
}

.artprint-past .post-card {
    flex: 0 1 calc((100% - 12px) / 4);
    max-width: calc((100% - 12px) / 4);
    padding: calc(var(--container-width) / 2) calc(var(--container-width) / 2) 73px calc(var(--container-width) / 2);
}

.artprint-past .post-card:nth-child(n+9) {
    display: none;
}

.artprint-past .post-card-ttl {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* 3行で丸める */
    font-size: var(--font-size-large);
    margin-bottom: 1em;
}

/* footer */
footer {
    background-color: #222;
    color: #fff;
}

footer a {
    color: #fff !important;
}

footer .h4 {
    font-size: 1rem;
    color: var(--text-light);
}

footer .bnr {
    gap: 4px;
}

footer .bnr-item {
    width: calc(50% - 4px);
}

footer .bnr a {
    display: block;
}

footer .bnr-img-big {
    width: 285px;
}

footer .copy {
    color: var(--text-light);
    font-family: var(--secondary-font);
    font-size: 10px;
    padding: 35px 0 24px 0;
    display: flex;
    align-items: end;
}

footer .copy-img {
    display: inline-block;
    width: 70px;
    margin-right: 2rem;
    vertical-align: middle;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-medium);
    font-weight: 700;
}

.footer-list a {
    display: inline-block;
    margin-bottom: 1.5em;
}

.footer-list .external {
    color: #fff !important;
    background-image: url(/wp-content/themes/thejumpshop/images/link-arrow.svg);
    background-size: 12px;
    display: inline-block;
    padding-right: 18px;
}

/* ======================================== */
/* タイトルアニメーション */
/* ======================================== */
.text-band {
    position: relative;
    display: inline-block;
    /* テキストは最初は不可視 */
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Safari/iOS 対策 */
}

.text-band-animation {
    /* 時間指定 */
    --band-slide-in-duration: 700ms;
    /* 帯が左→右に伸びる速度 */
    --band-pause-duration: 500ms;
    /* 全面を覆って静止する時間 */
    --band-slide-out-duration: 300ms;
    /* 帯が右へ抜ける速度 */
    --text-fade-duration: 1000ms;
    /* テキストのフェード時間 */

    /* 0〜1：テキストを静止中のどこで出すか */
    --text-in-pause-rate: 0.3;

    /* テキストのディレイ */
    --text-delay-extra: 100ms;

    /* 既存の開始計算 */
    --text-start-default: calc(var(--band-slide-in-duration) + var(--band-pause-duration) * var(--text-in-pause-rate));
    --text-start: var(--text-start-ms, var(--text-start-default));

    /* 追加ディレイを反映した実効開始時刻 */
    --text-start-effective: calc(var(--text-start) + var(--text-delay-extra));

    /* フェード設定 */
    animation-name: textFadeIn;
    animation-duration: var(--text-fade-duration);
    animation-timing-function: ease-out;
    animation-delay: var(--text-start-effective);
    animation-fill-mode: forwards;
}

/* 帯（前面で動く） */
.text-band-animation::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: 0;
    height: 100%;
    background: var(--primary-color);
    pointer-events: none;
    will-change: width, left;

    /* 入る → 静止 → 出る を直列に */
    animation-name: bandSlideIn, bandHold, bandSlideOut;
    animation-duration: var(--band-slide-in-duration),
        var(--band-pause-duration),
        var(--band-slide-out-duration);
    animation-timing-function: ease-out, linear, ease-out;
    animation-delay: 0ms,
        var(--band-slide-in-duration),
        calc(var(--band-slide-in-duration) + var(--band-pause-duration));
    animation-fill-mode: forwards, forwards, forwards;
}

/* 帯：左→右に伸びて全面を覆う */
@keyframes bandSlideIn {
    0% {
        width: 0;
        left: 0;
    }

    100% {
        width: 105%;
        left: 0;
    }
}

/* 帯：全面を覆ったまま静止 */
@keyframes bandHold {

    0%,
    100% {
        width: 105%;
        left: 0;
    }
}

/* 帯：右へ抜けて消える */
@keyframes bandSlideOut {
    0% {
        left: 0;
        width: 105%;
    }

    100% {
        left: 105%;
        width: 0;
    }
}

/* テキスト：フェードイン（テキストのみを可視化） */
@keyframes textFadeIn {
    0% {
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    100% {
        color: inherit;
        -webkit-text-fill-color: currentColor;
    }
}

/* セクション別色 */
.feature .text-band-animation::before {
    background: var(--secondary-color);
}

.about .text-band-animation::before,
.goods .text-band-animation::before,
.access .text-band-animation::before {
    background: var(--tertiary-color);
}


/* ======================================== */
/* ボタンアニメーション */
/* ======================================== */
/* 背景フェード用の型定義（Safari/Chrome対応） */
@property --bg-fill {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.btn.btn-band {
    position: relative;
    overflow: hidden;
    max-height: 50px !important;

    --band-ease: ease-in-out;

    /* 帯：入る→静止→出る */
    --band-slide-in-duration: 700ms;
    /* 左→右に伸びる速度 */
    --band-pause-duration: 500ms;
    /* 全面を覆って静止する時間 */
    --band-slide-out-duration: 300ms;
    /* 右へ抜ける速度（右端だけ残す） */

    /* テキスト＆右端スクエアのフェード */
    --content-fade-duration: 500ms;
    /* フェード時間 */
    --content-in-pause-rate: 0.9;
    /* 0〜1：静止中のどこで始めるか */
    --content-delay-extra: 500ms;
    /* 追加ディレイ（+で遅らせる / −で早める） */

    --icon-box: calc(1lh + 2rem);
    /* 右端正方形の幅 */
    --label-shift: 0;
    /* テキストの初期X移動量（任意） */
    --bg-final: var(--bg-light);
    /* 最後の背景色 */

    --bg-fill: 0%;
    background-color: transparent !important;
    background-image:
        linear-gradient(to right, transparent calc(100% - var(--icon-box)), var(--primary-color) 0),
        linear-gradient(color-mix(in srgb, var(--bg-final) var(--bg-fill), transparent),
            color-mix(in srgb, var(--bg-final) var(--bg-fill), transparent));
    background-repeat: no-repeat, no-repeat;
    background-position: right top, left top;
    background-size: 0% 100%, 100% 100%;
    /* ← スクエアは最初隠す／全面は常に100% */
}

.bg-light .btn.btn-band,
.reservation .btn.btn-band {
    --bg-final: #fff;
}

.btn.btn-band .btn-label {
    display: inline-block;
    transform: translateX(var(--label-shift));
    opacity: 0;
    will-change: transform, opacity;
    color: var(--text-primary);
}

/* 右端の矢印スクエア（色面）は ::after で保持する */
.btn.btn-band::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: var(--icon-box);
    background-color: transparent !important;
    opacity: 0;
    /* 後でフェードインして残す */
    z-index: 1;
    pointer-events: none;
    will-change: opacity;
}

/* 帯は ::before で入る→静止→出る（右端は残さない・後述の ::after が残る） */
.btn.btn-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary-color);
    transform-origin: left;
    transform: scaleX(0);
    opacity: 1;
    clip-path: inset(0 0 0 0);
    z-index: 2;
    pointer-events: none;
    will-change: transform, clip-path, left, width, opacity;
}

/* セクション別色 */
.feature .btn.btn-band {
    background-image:
        linear-gradient(to right, transparent calc(100% - var(--icon-box)), var(--secondary-color) 0),
        linear-gradient(color-mix(in srgb, var(--bg-final) var(--bg-fill), transparent),
            color-mix(in srgb, var(--bg-final) var(--bg-fill), transparent));
}

.feature .btn.btn-band::before {
    background-color: var(--secondary-color);
}

.about .btn.btn-band,
.goods .btn.btn-band,
.access .btn.btn-band {
    background-image:
        linear-gradient(to right, transparent calc(100% - var(--icon-box)), var(--tertiary-color) 0),
        linear-gradient(color-mix(in srgb, var(--bg-final) var(--bg-fill), transparent),
            color-mix(in srgb, var(--bg-final) var(--bg-fill), transparent));
}

.about .btn.btn-band::before,
.goods .btn.btn-band::before,
.access .btn.btn-band::before {
    background-color: var(--tertiary-color);
}

/* 発火（is-inview 付与時） */
.btn.btn-band.is-inview::before {
    /* 帯：入る→静止→出る を直列に */
    animation-name: bandIn, bandHoldBtn, bandOut;
    animation-duration: var(--band-slide-in-duration),
        var(--band-pause-duration),
        var(--band-slide-out-duration);
    animation-timing-function: var(--band-ease), linear, var(--band-ease);
    animation-delay: 0ms,
        var(--band-slide-in-duration),
        calc(var(--band-slide-in-duration) + var(--band-pause-duration));
    animation-fill-mode: forwards, forwards, forwards;
}

/* フェードの開始時刻（静止の中の比率＋任意ディレイ） */
.btn.btn-band.is-inview {
    --content-start: calc(var(--band-slide-in-duration) + var(--band-pause-duration) * var(--content-in-pause-rate) + var(--content-delay-extra));
    animation:
        squareColorSnap var(--eps, .001s) steps(1, end) var(--band-slide-in-duration) forwards,
        bgFill var(--content-fade-duration) var(--band-ease) var(--content-start) forwards;
}

/* 右端スクエアはフェードインして「残す」 */
.btn.btn-band.is-inview::after {
    animation: contentFadeIn var(--content-fade-duration) var(--band-ease) var(--content-start) forwards;
}

/* ラベルも同時刻にフェード（＋任意に移動） */
.btn.btn-band.is-inview .btn-label {
    animation:
        labelShiftIn var(--content-fade-duration) var(--band-ease) var(--content-start) forwards,
        contentFadeIn var(--content-fade-duration) var(--band-ease) var(--content-start) forwards;
}

@keyframes squareColorSnap {
    /* 1枚目の背景（スクエア）の size を 0%→100% に“瞬間”切替 */
    from {
        background-size: 0% 100%, 100% 100%;
    }
    to {
        background-size: 100% 100%, 100% 100%;
    }
}

@keyframes bgFill {
    to {
        --bg-fill: 100%;
    }
}

/* 帯：左→右に伸びきる（全面覆う） */
@keyframes bandIn {
    0% {
        transform: scaleX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* 帯：静止（全面覆ったまま） */
@keyframes bandHoldBtn {
    0%,100% { transform: scaleX(1); clip-path: inset(0 0 0 0); opacity:1; }
}

/* 帯：右へ抜ける（右端スクエア分だけ残して消える） */
@keyframes bandOut {
    0% {
        transform: scaleX(1);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    99% {
        transform: scaleX(1);
        clip-path: inset(0 0 0 calc(100% - var(--icon-box)));
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        clip-path: inset(0 0 0 calc(100% - var(--icon-box)));
        opacity: 0;
    }
}

/* テキスト移動 */
@keyframes labelShiftIn {
    from {
        transform: translateX(var(--label-shift));
    }

    to {
        transform: translateX(0);
    }
}

/* コンテンツ共通フェード */
@keyframes contentFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ======================================== */
/* 遷移アニメーション */
/* ======================================== */
:root {
    --wipe-total: 2.3s;
    /* 全体 */
    --wipe-hold: 0.3s;
    /* 停止（0sで無し） */
    --in-weight: 1;
    /* 前半（増える） */
    --out-weight: 1;

    /* タイミング関数 */
    --ease-in: cubic-bezier(.55, .06, .27, .99);
    --ease-out: cubic-bezier(.55, .06, .27, .99);

    /* 自動計算（合計が全体−停止になるよう配分） */
    --move-time: calc(var(--wipe-total) - var(--wipe-hold));
    --weight-sum: calc(var(--in-weight) + var(--out-weight));
    --wipe-in: calc(var(--move-time) * var(--in-weight) / var(--weight-sum));
    --wipe-out: calc(var(--move-time) * var(--out-weight) / var(--weight-sum));

    /* 連結の安全策＆白カバー制御 */
    --hold-eps: 0.001s;
    --wipe-hold-eff: max(var(--wipe-hold), var(--hold-eps));
    --pre-fade: .18s;
    --pre-delay: calc(var(--wipe-in) + var(--wipe-hold-eff));
    --post-wait: .04s;
}

/* コンテナは透明。初期は ::before の白で隠す */
.loading-container {
    background: transparent;
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
}

.loading-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: 1;
    animation: preCoverFade var(--pre-fade) linear var(--pre-delay) forwards;
}

/* バー（白カバーより前面） */
.color-bar {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--primary-color);
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
    animation:
        wipeExpand var(--wipe-in) var(--ease-in) 0s forwards,
        wipeHold var(--wipe-hold-eff) linear var(--wipe-in) forwards,
        wipeReveal var(--wipe-out) var(--ease-out) calc(var(--wipe-in) + var(--wipe-hold-eff)) forwards;
}

/* コンテナの消去は全行程後 */
.loading-container.fade-out {
    animation: loadingFadeOut 0.6s ease-out calc(var(--wipe-total) + var(--post-wait)) forwards;
}

@keyframes preCoverFade {
    to {
        opacity: 0;
    }
}

@keyframes wipeExpand {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes wipeHold {
    from {
        clip-path: inset(0 0 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes wipeReveal {
    from {
        clip-path: inset(0 0 0 0);
    }

    to {
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes loadingFadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ページ別カラー指定 */
.home .color-bar,
.single-feature .color-bar,
.post-type-archive-feature .color-bar {
    background: var(--secondary-color);
}

.page_about .color-bar,
.page_faq .color-bar {
    background: var(--tertiary-color);
}


/* 画像フェードイン */
.fade-imgs .post-card-thumb {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.fade-imgs .post-card-thumb img {
    opacity: 0;
}

/* アニメーション用の背景カバー */
.fade-imgs .post-card-thumb::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--primary-color);
    z-index: 1;
    transition: height var(--speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.feature .fade-imgs .post-card-thumb::before {
    background: var(--secondary-color);
}

.goods .fade-imgs .post-card-thumb::before {
    background: var(--tertiary-color);
}

/* アニメーション発動時 */
.fade-imgs .post-card-thumb.animate::before {
    height: 100%;
}

/* 背景カバーを消すアニメーション */
.fade-imgs .post-card-thumb.reveal::before {
    /* height: 0;
    top: 0;
    bottom: auto; */
    animation: imgFadeOut 0.4s ease-out forwards;
}

.fade-imgs .post-card-thumb.reveal img {
    animation: imgFadeIn 0.4s ease-out forwards;
}

@keyframes imgFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes imgFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* global */
.global {
    display: flex; 
    flex-direction: row;
    align-items: center;
    margin-bottom: 56px;
}

.global-icon {
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    line-height: 1;
}

.global-lang {
    position: relative;
    display: block;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-light) !important;
    letter-spacing: -0.04em;
}

.global-lang-jp {
    margin-right: 5px;
    padding-right: 6.8px;
}

.global-lang-jp::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: 1.8px;
    height: 14px;
    background-color: var(--text-primary);
}

.global-lang.active {
    color: var(--text-primary) !important;
}

/* EN */
body.en-US {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
}

body.en-US .btn {
    font-family: var(--secondary-font);
    font-optical-sizing: auto;
}

.en-US .page-title {
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.en-US .page-lead {
    line-height: 1.4;
}

.en-US .lead {
    line-height: 1.25;
}

.en-US .h1 {
    line-height: 1.1;
}

.en-US .access .ttl {
    margin-bottom: 40px;
}

/* 769～1399px（Tablet） */
@media (min-width: 769px) {
    :root {
        --container-width: 40px;
    }

    .container-md,
    .container {
        max-width: 1400px
    }

    .mt-md-0 {
        margin-top: 0 !important;
    }

    .mb-md-0 {
        margin-bottom: 0 !important;
    }

    .px-md-x {
        padding-left: 80px;
        padding-right: 80px;
    }

}

/* 1400px～（PC） */
@media(min-width: 1400px) {

    .container-xl,
    .container-md,
    .container {
        max-width: 1400px
    }
}

/* ～768px（SP） */
@media (max-width: 768.98px) {
    :root {
        --header-height: 65px;
        --container-width: 20px;
        --container-height: 48px;
        --font-size-small: 10px;
        --font-size-large: 14px;
        --font-size-xx-large: 20px;
        --font-size-xxx-large: 32px;
        --font-size-xxxx-large: 36px;
    }

    .mb-x {
        margin-bottom: 48px !important;
    }

    .mb-x2 {
        margin-bottom: 80px;
    }

    .py-x3 {
        padding-top: 100px !important;
        padding-bottom: 120px !important;
    }

    .container {
        padding-left: var(--container-width);
        padding-right: var(--container-width);
    }

    .section .container {
        padding: var(--container-height) var(--container-width);
    }

    /* .page .section .container {
        padding: calc(var(--container-height) * 2) var(--container-width);
    } */

    .home .section .container {
        padding: 80px var(--container-width);
    }

    footer .container {
        padding: calc(var(--container-width) * 2) var(--container-width) 0 var(--container-width);
    }

    .single-update .post-body,
    .single-feature .post-body {
        padding-top: 48px;
    }

    .single-update .post-title {
        margin-bottom: 48px;
    }

    .single-feature .post-card-labels {
        margin-bottom: 48px;
    }

    .update .post-card {
        padding: 2rem var(--container-width) 1rem var(--container-width) !important;
    }

    .update .post-card-ttl {
        margin-bottom: 1rem !important;
        line-height: 1.4;
    }

    .home .update .post-card:first-child {
        padding-top: 2rem;
    }

    .update .post-card:first-child {
        border-top: 1px solid var(--border-color);
    }

    .archive .update .post-cards {
        border-top: 0;
    }

    .home .news .container {
        padding-top: 0;
        padding-bottom: 1.5rem;
        padding-left: 0;
    }

    .home .news .subttl {
        margin-left: var(--container-width);
    }

    .news .news-cards {
        padding-top: 1.4rem;
        padding-bottom: 1rem;
        padding-right: var(--container-width);
    }

    .news .news-card a {
        padding: 1rem;
    }

    /* .news .news-card:first-child a {
        margin-left: var(--container-width);
    } */
    .news .news-cards::before {
        content: "";
        flex: 0 0 30px;
    }

    .home .news .col-md-3,
    .home .news .col-md-9 {
        width: 100%;
    }

    .home .artprint .ttl {
        font-size: 24px;
    }

    .home .access .ttl {
        font-size: 28px;
    }

    .map {
        margin-bottom: 8px;
    }

    .site-logo img {
        width: 224px;
        max-width: 224px;
    }

    .header-inner {
        padding: 0;
    }

    .hamburger {
        margin-left: 22px;
    }

    .header-cta {
        height: var(--header-height);
        width: var(--header-height);
        text-align: center;
        padding: 34px 0 0 0;
    }

    .header-cta span {
        font-size: 10px;
    }

    .header-cta::before {
        background-position: center 12px;
        background-size: 24px;
    }

    .side-menu {
        width: 100%;
    }

    .feature .post-cards {
        flex-wrap: nowrap;
        /* 折り返さない */
        overflow-x: auto;
        /* 横スクロール */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 4px;
        scroll-padding-inline: 20px
    }

    .feature .post-cards .post-card {
        flex: 0 0 312px;
        scroll-snap-align: start;
        max-width: none;
        user-select: none;
        outline: none;
    }

    .feature .post-cards::-webkit-scrollbar {
        display: none;
    }

    .feature .post-card h3,
    .post-card-date {
        font-size: var(--font-size-large);
    }

    .feature .post-card .post-card-ttl {
        margin-bottom: 32px;
    }

    .post-card .post-card-hover,
    .goods-card .post-card-hover {
        background: none !important;
    }

    .home .feature .post-cards::before,
    .home .feature .post-cards::after {
        content: "";
        flex: 0 0 var(--container-width);
    }

    .feature .post-card-body {
        padding: var(--container-width);
    }

    .archive .feature .post-card-label {
        font-size: 16px;
    }

    .home .feature .post-card-date,
    .archive .feature .post-card-date {
        font-size: 18px;
        letter-spacing: -0.03em;
    }

    .ttl {
        font-size: var(--font-size-xxx-large);
        margin-bottom: 10px;
    }

    .ttl+.subttl {
        margin-bottom: calc(var(--container-width) * 2);
    }

    .page .ttl,
    .archive .ttl {
        font-size: 28px;
    }

    .page .section:first-of-type .ttl,
    .archive .section:first-of-type .ttl {
        font-size: var(--font-size-xxx-large);
    }

    .subttl {
        font-size: 16px;
    }

    .page .section:not(:first-of-type) .subttl,
    .archive .section:not(:first-of-type) .subttl {
        font-size: 14px;
    }

    .btn.btn-more {
        font-size: 16px;
        padding: 1rem calc(1.5rem + 2rem + 1lh) 1rem 1.5rem
    }

    .btn.btn-more-past {
        padding-right: 3.5rem;
    }

    .btn.btn-black {
        font-size: var(--font-size-large);
    }

    .btn.btn-res {
        font-size: 14px;
        padding: 1rem calc(1.5rem + 3rem + 1lh) 1rem 1.5rem;
    }

    .btn-min {
        display: block;
        position: relative;
        cursor: pointer;
        min-height: 33px;
    }

    .btn-min::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 33px;
        aspect-ratio: 1 / 1;
        background: var(--tertiary-color) url(/wp-content/themes/thejumpshop/images/button-inner-more.svg) center center no-repeat;
        background-size: 17px;
        transition: all var(--speed) ease;
    }

    .btn-primary.btn-min::after {
        background-color: var(--primary-color);
    }

    .btn-min:hover::after {
        background: var(--text-primary) url(/wp-content/themes/thejumpshop/images/arrow-right-white.svg) center center no-repeat;
        background-size: 17px;
    }

    .btn-arrow {
        width: 33px;
        padding: .5rem;
    }

    .btn-pair .btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }

    .btn-txt {
        margin-bottom: 20px;
    }

    .reservation {
        aspect-ratio: 1 / 1.25;
        background-image: url(/wp-content/themes/thejumpshop/images/M_Reservation.jpg);
    }

    .reservation.section>.container {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .about .infinity-slider-items img {
        width: 90vw;
    }

    .filter {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .filter a {
        font-size: 1rem;
    }

    .page-body {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .goods-left,
    .artprint-left {
        width: 100%;
    }

    .artprint-left {
        margin-bottom: 32px;
    }

    .goods-right,
    .artprint-right {
        width: 100%;
    }

    .goods-card {
        width: calc((100% - var(--gap) * 1) / 2);
    }

    .archive .goods-row {
        margin: 0 -1px;
    }

    .archive .goods-card {
        width: calc(100% / 2 + 2px);
    }

    .goods-card-body {
        padding: 24px 20px 40px 20px;
    }

    .post-card-comics+.post-title {
        margin: 10px 0 16px 0;
    }

    .single.goods .post-content,
    .single .artprint .post-content {
        padding-top: 0;
        border-top: 0 none;
    }

    .single .post-card-meta,
    .post-modal .post-card-meta {
        margin-bottom: 20px !important;
    }

    .post-content .h4,
    .post-info .h4,
    .post-notes .h4 {
        margin-bottom: 24px;
    }

    .post-card-ttl {
        margin-bottom: 1rem;
    }

    .post-card-cat {
        padding: 4px 8px 3px 8px;
    }

    .goods-row .post-card-price,
    .post-cards .post-card-price {
        font-size: 18px;
    }

    .post-card-price small {
        font-size: 10px;
    }

    .post-sns .subttl {
        margin-bottom: 20px;
    }

    .modal-close-bottom {
        margin: 40px 0;
    }

    .artprint .row {
        --img-h: 390px;
    }

    .artprint-info .col-md-4 {
        width: 100%;
    }

    .artprint-info .col-md-8 {
        width: 100%;
    }

    .archive .artprint-gallery {
        margin-right: 0;
    }

    .artprint-gallery {
        padding: 20px 0 40px 0;
    }

    .artprint-overlay-img {
        margin-top: 0;
        margin-right: 10px;
    }

    .artprint-copy-clone {
        padding: 56px var(--container-width) !important;
    }

    .artprint-panel {
        padding: var(--container-width);
        box-shadow: 8px 8px 40px 0px #0000000D;
        width: 75%;
        margin-top: calc(-1 * (var(--container-width) + 33px));
        position: relative;
        z-index: 2;
        background-color: #fff;
    }

    .artprint .post-card-ttl {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .archive .artprint .post-card {
        flex: 0 1 100%;
        max-width: 100%;
    }

    .archive .artprint .post-card-price {
        font-size: 16px;
    }

    /* .archive .artprint-past .post-cards {
        background-color: #fff;
    } */

    .archive .artprint-past .post-card {
        flex: 0 1 calc((100% - 4px) / 2);
        max-width: calc((100% - 4px) / 2);
        padding-bottom: 49px;
    }

    .archive .artprint-past .post-card:nth-child(n+7) {
        display: none;
    }

    .infinity-slider-items img {
        margin-right: 64px;
        height: 167px;
    }

    .infinity-slider-items img.yoko {
        height: 218px;
    }

    .infinity-slider-items img:nth-child(even) {
        margin-top: 132px;
    }

    .artprint .infinity-slider-items img {
        box-shadow: 15px 15px 30px 0 #00000040;
    }

    .artprint-past .post-card-ttl {
        font-size: var(--font-size-large);
        margin-bottom: 12px;
    }

    .artprint-past .post-card-price {
        font-size: 16px;
    }

    .pagination {
        margin-bottom: 70px;
    }

    .mobile-fullbleed {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mobile-fullbleed .row {
        --bs-gutter-x: 0;
    }

    .mobile-container {
        padding-left: var(--container-width);
        padding-right: var(--container-width);
    }

    .map iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .sns {
        aspect-ratio: 1.18 / 1;
        background: var(--backdrop) url(/wp-content/themes/thejumpshop/images/M_SNS.jpg?v2) center center no-repeat;
        background-size: cover;
        color: #fff;
    }

    .sns .sns-icons [class*="icon-"] {
        width: 48px;
        height: 48px;
    }

    .archive .feature .post-cards {
        flex-wrap: wrap;
        gap: 40px;
    }

    .archive .feature .post-cards .post-card {
        flex: 0 0 100%;
    }

    .archive .feature .post-card-body {
        padding: 2rem;
    }

    .drawer {
        width: 100%;
    }

    .drawer .btn {
        font-size: var(--font-size-large);
    }

    .btn-filter {
        margin-bottom: 32px;
    }

    .btn-search {
        font-size: 12px;
        padding: 1.2rem 4rem 1.2rem 3rem;
        background-image: url(/wp-content/themes/thejumpshop/images/icon_plus_M.svg);
        background-size: 15px;
        background-position: center right 2rem;
    }

    .liquid-gallery {
        padding: 0;
    }

    .liquid-gallery .lg-main {
        position: relative;
        margin-bottom: 30px;
    }

    .liquid-gallery .lg-glass {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 20px;
        height: 20px;
        pointer-events: none;
        background: transparent url(/wp-content/themes/thejumpshop/images/icon_zoom-in.png) bottom right no-repeat;
        background-size: 20px;
    }

    .liquid-gallery .lg-thumbs {
        justify-content: start;
        margin-bottom: 0;
    }

    .modal-body {
        padding: 0 0 40px 0;
    }

    #lgOverlay {
        --thumbs-bar-h: 110px;
    }

    #lgOverlay .lg-overlay-inner {
        flex-direction: column;
    }

    #lgOverlay .lg-stage {
        order: 1;
        flex: 1 1 auto;
        width: 100%;
    }

    #lgOverlay .lg-aside {
        order: 2;
        flex: 0 0 var(--thumbs-bar-h);
        width: 100%;
        min-width: 0;
        height: var(--thumbs-bar-h);
        padding: 4px;
        background: #fff;
        overflow: hidden;
    }

    #lgOverlay .lg-modal-thumbs {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #lgOverlay .lg-modal-thumbs::-webkit-scrollbar {
        display: none;
    }

    #lgOverlay .lg-m-thumb {
        flex: 0 0 auto;
        width: 64px;
        height: 64px;
        user-select: none;
        outline: none;
    }

    #lgOverlay .lg-m-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .post-share {
        margin-bottom: 0;
        line-height: 1;
    }

    .page-title {
        line-height: 1.2;
        margin-bottom: 40px;
    }

    .page-lead {
        font-size: 16px;
        line-height: 1.7;
    }

    .post-box {
        padding: 30px var(--container-width);
    }

    .post-box p {
        margin-bottom: 32px;
    }

    .post-body .post-info table th,
    .post-body .post-info table td {
        padding: 0 4rem 20px 0 !important;
    }

    .point,
    .step {
        margin-bottom: 32px;
    }

    .acc {
        margin-top: 0;
        margin-bottom: 2rem;
    }

    .acc-item:first-child {
        border-top: 1px solid var(--border-color);
    }

    .acc-panel-inner {
        line-height: 1.5;
        padding-bottom: 26px;
    }

    .acc-trigger {
        padding: 26px 0;
    }

    .contact form h3 {
        margin-bottom: 16px;
    }

    .contact form .form-wrap {
        margin-bottom: 40px;
    }

    .contact form .wpcf7-acceptance {
        font-size: 12px;
    }

    .contact form .wpcf7-acceptance label {
        justify-content: center;
    }

    .contact .btn.btn-back {
        padding: 1.1rem 1.3rem 1.1rem 3.3rem;
        background-position: center left 1.3rem;
        white-space: nowrap;
        width: 49%;
    }

    .contact .btn.btn-more[type="submit"] {
        padding: 1.1rem calc(2.5rem + 2rem + 1lh) 1.1rem 2.5rem;
        white-space: nowrap;
        width: 49%;
    }

    .contact .btn.btn-back-top {
        background-position: center left 2.5rem;
    }

    footer .bnr {
        width: 100%;
    }

    footer .bnr-item {
        width: calc(33.33% - 4px);
    }

    footer .bnr-img-big {
        width: 216px;
    }

    footer .copy {
        padding: 24px 0 20px 0;
        justify-content: center;
    }

    .page_about .global {
        margin-bottom: 80px;
    }

    .page_reservation .global {
        margin-bottom: 48px;
    }

    .page_faq .global {
        margin-bottom: 72px;
    }
}