:root {
--oap-bg: #ffffff;
--oap-text: #111111;
--oap-muted: #6b7280;
--oap-line: #e5e7eb;
--oap-soft: #f5f5f5;
--oap-accent: #d92d20;
--oap-max-width: 1120px;
--oap-radius: 14px;
--oap-shadow: 0 10px 30px rgba(17, 17, 17, 0.06);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: "M PLUS 1", "Hiragino Sans", "Yu Gothic", "Meiryo", -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--oap-bg);
color: var(--oap-text);
line-height: 1.6;
}
button,
input,
select,
textarea {
font-family: inherit;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
.oap-shell {
width: min(calc(100% - 32px), var(--oap-max-width));
margin: 0 auto;
}
html,
body {
overflow-x: clip;
}
.oap-site-header {
position: sticky;
top: 0;
z-index: 200;
background: rgba(255, 255, 255, 0.86);
border-bottom: 1px solid rgba(17, 17, 17, 0.07);
backdrop-filter: blur(18px);
box-shadow: 0 10px 28px rgba(17, 24, 39, 0.04);
}
.oap-site-header__inner {
display: flex;
align-items: center;
gap: 28px;
padding: 6px 0;
}
.oap-branding {
display: flex;
align-items: center;
flex: 0 0 200px;
margin-right: auto;
gap: 12px;
}
.oap-branding__text {
display: block;
flex: 0 0 190px;
max-width: 190px;
}
.oap-branding__logo {
flex-shrink: 0;
}
.oap-branding__logo .custom-logo-link,
.oap-branding__logo > a {
display: inline-flex;
align-items: center;
}
.oap-branding__logo-image,
.oap-branding__logo .custom-logo {
display: block;
max-height: 50px;
width: auto;
filter: drop-shadow(0 6px 16px rgba(17, 24, 39, 0.08));
}
.oap-branding__tagline {
margin: 0;
font-size: 0.78rem;
color: var(--oap-muted);
line-height: 1.35;
max-width: none;
white-space: normal;
word-break: keep-all;
text-wrap: balance;
letter-spacing: 0.02em;
}
.oap-site-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: auto;
gap: 22px;
font-weight: 700;
}
.oap-site-nav a {
position: relative;
padding: 8px 0;
white-space: nowrap;
transition: color 0.2s ease, transform 0.2s ease;
}
.oap-site-nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 2px;
background: var(--oap-accent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.2s ease;
}
.oap-site-nav a:hover,
.oap-site-nav a:focus-visible {
color: var(--oap-accent);
transform: translateY(-1px);
}
.oap-site-nav a:hover::after,
.oap-site-nav a:focus-visible::after {
transform: scaleX(1);
}
.oap-site-search {
flex: 0 0 320px;
width: 320px;
padding-right: 8px;
overflow: visible;
}
.oap-mobile-search {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
padding: 0;
overflow-x: clip;
pointer-events: none;
opacity: 0;
transform: translateY(18px);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.oap-mobile-search.is-visible {
pointer-events: auto;
opacity: 1;
transform: translateY(0);
}
.oap-mobile-search__inner {
padding: 6px 16px 10px;
border-radius: 0;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(18px);
box-shadow: none;
}
.oap-mobile-search .oap-shell {
width: 100%;
max-width: none;
margin: 0;
}
.oap-search-form {
display: flex;
gap: 8px;
align-items: center;
width: 100%;
margin: 0;
}
.oap-search-form__field {
width: 100%;
min-width: 0;
padding: 14px 18px;
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: 999px;
background: rgba(247, 247, 247, 0.96);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.oap-search-form__field:focus {
outline: none;
border-color: rgba(217, 45, 32, 0.28);
background: #fff;
box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.08);
}
.oap-search-form__button {
flex-shrink: 0;
min-width: 88px;
padding: 14px 22px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #e53935 0%, #cf2b20 100%);
color: #fff;
font-weight: 700;
line-height: 1;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 10px 22px rgba(217, 45, 32, 0.22);
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.oap-search-form__button:hover,
.oap-search-form__button:focus-visible {
transform: translateY(-1px);
box-shadow: none;
}
.oap-hero {
min-height: 360px;
padding: 0;
background:
radial-gradient(circle at top left, rgba(226, 57, 30, 0.12), transparent 38%),
radial-gradient(circle at top right, rgba(17, 24, 39, 0.06), transparent 28%),
linear-gradient(
120deg,
rgba(217, 45, 32, 0.12) 0%,
rgba(217, 45, 32, 0.05) 45%,
transparent 70%
);
border-bottom: 1px solid var(--oap-line);
overflow: clip;
}
.oap-hero__body {
max-width: 1120px;
margin: 0 auto;
padding: 20px 0 28px;
text-align: left;
position: relative;
}
.oap-hero__body::before {
content: none;
position: absolute;
inset: 0 auto auto 0;
width: 72px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--oap-accent), rgba(226, 57, 30, 0.18));
}
.oap-hero__body::after {
content: "";
position: absolute;
right: -88px;
bottom: -68px;
width: 220px;
height: 220px;
border-radius: 999px;
background: radial-gradient(circle, rgba(226, 57, 30, 0.08), rgba(226, 57, 30, 0));
filter: blur(8px);
pointer-events: none;
z-index: 0;
}
.oap-hero__kicker {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.oap-hero__kicker::before {
content: none;
display: block;
width: 32px;
height: 3px;
background: var(--oap-accent);
border-radius: 2px;
}
.oap-hero__eyebrow {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
margin: 0 0 16px;
color: var(--oap-accent);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.oap-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
gap: 40px;
align-items: center;
}
.oap-hero__main {
min-width: 0;
position: relative;
z-index: 1;
}
.oap-hero__side {
min-width: 0;
position: relative;
z-index: 1;
}
.oap-kicker {
margin: 0 0 8px;
color: var(--oap-accent);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.75rem;
}
.oap-hero__title,
.oap-section__title {
margin: 0;
line-height: 1.2;
}
.oap-hero__title {
max-width: none;
font-family: "M PLUS 1", "Hiragino Sans", "Yu Gothic", sans-serif;
font-size: clamp(1.7rem, 3vw, 2.8rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.04em;
white-space: normal;
text-wrap: balance;
}
.oap-hero__title-line {
display: block;
white-space: nowrap;
}
.oap-detail-hero__summary {
margin: 12px 0 18px;
color: var(--oap-muted);
font-size: 0.98rem;
line-height: 1.75;
}
.oap-detail-hero__summary--auto {
font-size: 0.86rem;
line-height: 1.8;
}
@media (max-width: 767px) {
.oap-hero__title-line {
white-space: normal;
}
}
.oap-hero__lead {
max-width: 36rem;
margin: 16px 0 0;
color: var(--oap-muted);
font-size: 1rem;
line-height: 1.8;
}
.oap-hero__search {
max-width: none;
margin: 0;
}
.oap-hero__search .oap-search-form {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.oap-hero__side {
display: grid;
align-content: start;
gap: 18px;
padding: 24px;
border: 0;
border-radius: 0;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(18px);
box-shadow: none;
}
.oap-hero__side-title {
margin: 0 0 16px;
font-size: 1.2rem;
}
.oap-highlight-list {
display: grid;
gap: 12px;
}
.oap-highlight {
display: grid;
gap: 8px;
padding: 16px;
border: 1px solid var(--oap-line);
border-radius: 14px;
background: #fff;
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.oap-highlight:hover,
.oap-highlight:focus-visible {
border-color: rgba(217, 45, 32, 0.28);
box-shadow: 0 14px 28px rgba(17, 17, 17, 0.08);
transform: translateY(-2px);
}
.oap-highlight__type {
color: var(--oap-accent);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.oap-highlight__title {
font-weight: 700;
font-size: 1.08rem;
line-height: 1.5;
}
.oap-highlight__excerpt {
color: var(--oap-muted);
font-size: 0.92rem;
line-height: 1.7;
}
.oap-highlight__link {
color: var(--oap-accent);
font-size: 0.85rem;
font-weight: 700;
}
.oap-chip-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
margin-top: 0;
}
.oap-hero__note {
position: relative;
z-index: 1;
margin: 0;
color: rgba(75, 85, 99, 0.92);
font-size: 0.9rem;
line-height: 1.7;
}
.oap-home-update {
margin: 22px 0 0;
display: grid;
gap: 8px;
}
.oap-home-update__inner {
padding: 14px 16px;
border: 1px solid rgba(229, 57, 53, 0.12);
border-radius: 0;
background: rgba(255, 255, 255, 0.76);
backdrop-filter: blur(8px);
border-bottom: 0;
box-shadow: none;
}
.oap-home-update__eyebrow {
margin: 0;
color: var(--oap-accent);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.2;
}
.oap-home-update__list {
margin: 0;
padding: 0;
list-style: none;
position: relative;
min-width: 0;
min-height: 3.4em;
}
.oap-home-update__item {
display: flex;
gap: 12px;
align-items: flex-start;
color: var(--oap-ink);
font-size: 0.96rem;
line-height: 1.7;
position: absolute;
inset: 0;
width: 100%;
opacity: 0;
transform: translateY(6px);
pointer-events: none;
transition: opacity 0.34s ease, transform 0.34s ease;
}
.oap-home-update__item.is-active {
display: flex;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.oap-home-update__date {
flex: 0 0 88px;
color: var(--oap-muted);
font-size: 0.88rem;
font-weight: 800;
letter-spacing: 0.04em;
line-height: 1.6;
}
.oap-home-update__text {
flex: 1 1 auto;
min-width: 0;
line-height: 1.75;
}
.oap-home-update__text a {
color: var(--oap-accent);
font-weight: 700;
text-decoration: none;
}
.oap-home-update__text a:hover {
text-decoration: underline;
}
.oap-home-update__count {
font-weight: 800;
}
.oap-chip,
.oap-card__term {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: 10px;
background: #fff;
border: 1px solid var(--oap-line);
color: var(--oap-muted);
font-size: 0.85rem;
}
.oap-chip {
font-weight: 600;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.oap-chip:hover,
.oap-chip:focus-visible {
border-color: var(--oap-accent);
background: #fff1ee;
color: var(--oap-accent);
}
.oap-directory-promo__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.oap-directory-promo__card {
position: relative;
display: grid;
gap: 14px;
padding: 26px 24px 22px;
font-family: "Yusei Magic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic", "Meiryo", sans-serif;
border: 1px solid rgba(17, 17, 17, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 251, 245, 0.98)),
repeating-linear-gradient(-12deg, rgba(53, 122, 73, 0.04) 0 10px, rgba(255, 255, 255, 0.03) 10px 20px);
box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.oap-directory-promo__card::before {
content: "";
position: absolute;
inset: 0;
height: 10px;
background: linear-gradient(90deg, #2f7d44, #66b56d);
}
.oap-directory-promo__card::after {
display: none;
}
.oap-directory-promo__card:hover,
.oap-directory-promo__card:focus-visible {
transform: translateY(-2px);
box-shadow: 0 24px 48px rgba(17, 24, 39, 0.11);
}
.oap-directory-promo__card.is-market {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 247, 250, 0.98)),
repeating-linear-gradient(-12deg, rgba(35, 96, 132, 0.04) 0 10px, rgba(255, 255, 255, 0.03) 10px 20px);
}
.oap-directory-promo__card.is-market::before {
background: linear-gradient(90deg, #236084, #5ba5c7);
}
.oap-directory-promo__card.is-market::after {
display: none;
}
.oap-directory-promo__icon {
position: absolute;
right: 20px;
top: 22px;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
color: rgba(47, 125, 68, 0.2);
pointer-events: none;
}
.oap-directory-promo__card.is-market .oap-directory-promo__icon {
color: rgba(35, 96, 132, 0.2);
}
.oap-directory-promo__eyebrow {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
width: fit-content;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(17, 17, 17, 0.08);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #2f7d44;
}
.oap-directory-promo__card.is-market .oap-directory-promo__eyebrow {
color: #236084;
}
.oap-directory-promo__title {
position: relative;
z-index: 1;
display: block;
max-width: none;
font-size: clamp(1.55rem, 2vw, 2rem);
font-weight: 900;
line-height: 1.12;
letter-spacing: -0.04em;
}
.oap-directory-promo__copy {
position: relative;
z-index: 1;
display: block;
max-width: 34rem;
font-size: 0.92rem;
line-height: 1.85;
color: #374151;
}
.oap-directory-promo__footer {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-top: 6px;
}
.oap-directory-promo__badge {
display: inline-flex;
align-items: center;
position: relative;
padding: 9px 14px;
background: #ffffff;
color: #2f7d44;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0;
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: 999px;
box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
}
.oap-directory-promo__badge::after {
content: "";
position: absolute;
left: 18px;
top: -7px;
width: 12px;
height: 12px;
background: #ffffff;
border-top: 1px solid rgba(17, 17, 17, 0.08);
border-left: 1px solid rgba(17, 17, 17, 0.08);
transform: rotate(45deg);
}
.oap-directory-promo__card.is-market .oap-directory-promo__badge {
color: #236084;
}
.oap-directory-promo__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
font-weight: 800;
color: #214f2d;
}
.oap-seo-copy {
display: none;
}
.oap-card__term {
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
background: #fff7f5;
color: var(--oap-accent);
font-weight: 700;
font-size: 0.82rem;
padding: 6px 11px;
}
.oap-card__term:hover,
.oap-card__term:focus-visible {
border-color: var(--oap-accent);
color: var(--oap-accent);
background: #ffe4df;
}
.oap-page {
padding-bottom: 64px;
}
.oap-layout {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
gap: 24px;
}
.oap-info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.oap-detail-hero {
display: grid;
grid-template-columns: minmax(0, 1.72fr) minmax(250px, 0.72fr);
gap: 20px;
margin-bottom: 28px;
padding: 24px;
border: 1px solid var(--oap-line);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(217, 45, 32, 0.04), rgba(255, 255, 255, 1)),
#fff;
box-shadow: var(--oap-shadow);
}
.oap-detail-hero--special {
grid-template-columns: minmax(0, 1fr);
}
.oap-detail-hero--place-compact {
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.68fr);
}
.oap-layout--place {
grid-template-columns: minmax(0, 1fr);
}
.oap-detail-hero__body {
display: grid;
align-content: start;
gap: 8px;
}
.oap-detail-date {
margin: -2px 0 4px;
color: var(--oap-muted);
font-size: 0.94rem;
font-weight: 600;
}
.oap-detail-meta-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.oap-detail-meta-chips a {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: 10px;
background: #fff7f5;
color: var(--oap-accent);
font-size: 0.85rem;
font-weight: 700;
}
.oap-panel--detail-facts {
padding: 18px 20px;
}
.oap-detail-facts {
display: grid;
}
.oap-detail-facts__row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.oap-detail-facts__row:first-child {
padding-top: 0;
}
.oap-detail-facts__row:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.oap-detail-facts__label {
color: var(--oap-muted);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: none;
}
.oap-detail-facts__value {
min-width: 0;
margin: 0;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.8;
}
.oap-detail-facts__value a {
color: var(--oap-accent);
text-decoration: underline;
text-underline-offset: 0.16em;
}
.oap-detail-facts__value--multiline {
white-space: normal;
}
.oap-gurunai-ad,
.oap-affiliate-banner {
display: flex;
justify-content: center;
width: 100%;
max-width: 100%;
}
.oap-gurunai-ad {
margin: 18px 0 20px;
overflow-x: auto;
}
.oap-affiliate-banner {
margin-top: 16px;
}
.oap-affiliate-banner amp-ad {
display: block;
width: 100%;
max-width: 336px;
}
.oap-affiliate-banner--mobile {
display: flex;
}
.oap-affiliate-banner--desktop {
display: none;
}
.oap-travel-banner {
display: flex;
justify-content: center;
width: 100%;
max-width: 100%;
margin: 24px 0 0;
padding: 12px 16px;
box-sizing: border-box;
background: var(--oap-soft);
}
.oap-travel-banner amp-ad {
display: block;
width: auto;
}
.oap-travel-banner--mobile {
display: flex;
}
.oap-travel-banner--mobile amp-ad {
max-width: 300px;
}
.oap-travel-banner--desktop {
display: none;
}
.oap-travel-banner--desktop amp-ad {
max-width: 728px;
}
.oap-broadcast-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 10px 16px;
margin-bottom: 24px;
background: var(--oap-soft);
border-radius: 0;
font-size: 0.85rem;
}
.oap-broadcast-bar__item {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
}
.oap-broadcast-bar__item--show a,
.oap-broadcast-bar__show {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--oap-accent);
color: #fff;
border-radius: 4px;
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.02em;
transition: opacity 0.15s ease;
}
.oap-broadcast-bar__item--show a:hover,
.oap-broadcast-bar__show:hover {
opacity: 0.85;
}
.oap-broadcast-bar__label {
color: var(--oap-muted);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.oap-broadcast-bar__sep {
display: none;
}
.oap-broadcast-bar__date {
color: var(--oap-muted);
}
.oap-broadcast-bar__type {
padding: 2px 8px;
background: var(--oap-line);
border-radius: 4px;
color: var(--oap-muted);
font-size: 0.78rem;
font-weight: 600;
margin-inline: -1.5px;
}
.oap-broadcast-bar__source {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--oap-accent);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.16em;
}
.oap-broadcast-bar__source .fa-solid {
font-size: 0.82em;
}
.oap-broadcast-bar__meta {
color: var(--oap-muted);
font-size: 0.82rem;
font-weight: 500;
}
.oap-broadcast-bar__tail {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.oap-place-info-list {
margin: 0;
}
.oap-place-info-list__row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 12px 0;
border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.oap-place-info-list__row:first-child {
padding-top: 0;
}
.oap-place-info-list__row:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.oap-place-info-list__label {
margin: 0;
padding-top: 2px;
color: var(--oap-muted);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: none;
}
.oap-place-info-list__value {
min-width: 0;
margin: 0;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.8;
}
.oap-place-info-list__value a {
color: var(--oap-accent);
text-decoration: none;
}
.oap-place-info-list__value a:hover,
.oap-place-info-list__value a:focus-visible {
text-decoration: underline;
text-underline-offset: 0.16em;
}
.oap-place-info-list__value a[target="_blank"]::after {
content: '\f08e';
display: inline-block;
margin-left: 0.35em;
font-family: 'Font Awesome 6 Free';
font-size: 0.82em;
font-weight: 900;
line-height: 1;
vertical-align: middle;
}
.oap-place-info-list__value--multiline {
white-space: normal;
}
.oap-detail-note {
margin: 14px 0 0;
color: var(--oap-muted);
font-size: 0.78rem;
line-height: 1.7;
}
.oap-key-place-info {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin-top: 4px;
}
.oap-key-place-info__item {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 10px;
padding: 12px 14px;
border-left: 3px solid var(--oap-accent);
background: rgba(255, 255, 255, 0.82);
}
.oap-key-place-info__icon {
display: inline-flex;
width: 20px;
height: 20px;
align-items: center;
justify-content: center;
color: var(--oap-accent);
transform: translateY(2px);
}
.oap-key-place-info__icon svg {
display: block;
width: 18px;
height: 18px;
}
.oap-key-place-info__content {
display: grid;
gap: 8px;
}
.oap-key-place-info__value {
margin: 0;
font-size: 0.96rem;
font-weight: 700;
line-height: 1.6;
}
.oap-key-place-info__value a {
color: var(--oap-accent);
}
.oap-key-place-info__action {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
}
.oap-key-place-info__action a {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border: 1px solid rgba(217, 45, 32, 0.2);
border-radius: 999px;
background: #fff4f1;
color: var(--oap-accent);
}
.oap-key-place-info__meta-list {
display: grid;
gap: 6px;
margin-top: 2px;
padding-top: 8px;
border-top: 1px solid rgba(17, 17, 17, 0.08);
}
.oap-key-place-info__meta {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 10px;
align-items: start;
margin: 0;
font-size: 0.85rem;
line-height: 1.65;
color: var(--oap-text);
}
.oap-key-place-info__meta-label {
color: var(--oap-muted);
font-weight: 700;
font-size: 0.74rem;
letter-spacing: 0.04em;
}
.oap-key-place-info__meta-value {
min-width: 0;
}
.oap-place-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 6px;
}
.oap-place-summary-card {
display: grid;
gap: 8px;
padding: 16px;
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: 0;
background: rgba(255, 255, 255, 0.92);
}
.oap-place-summary-card--wide {
grid-column: 1 / -1;
}
.oap-place-summary-card__label {
margin: 0;
color: var(--oap-muted);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.oap-place-summary-card__label--brand {
text-transform: none;
letter-spacing: 0.02em;
}
.oap-place-summary-card__value {
margin: 0;
font-size: 0.98rem;
font-weight: 700;
line-height: 1.7;
}
.oap-place-summary-card__value--hours {
font-size: 0.88rem;
font-weight: 600;
white-space: normal;
}
.oap-place-summary-card__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.oap-place-summary-card__link {
color: var(--oap-accent);
font-size: 0.84rem;
font-weight: 700;
}
.oap-place-summary-card__value-link {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.14em;
}
.oap-place-summary-card__meta-link {
margin: 0;
}
.oap-place-summary-card__map {
overflow: hidden;
border-radius: 0;
border: 1px solid rgba(17, 17, 17, 0.08);
background: #f5f5f5;
}
.oap-place-summary-card__map--wide {
margin-top: 2px;
}
.oap-place-summary-card__map iframe {
display: block;
width: 100%;
height: 280px;
border: 0;
}
.oap-place-editorial {
margin: 0;
color: #374151;
font-size: 0.98rem;
line-height: 1.9;
}
.oap-place-info-grid {
display: grid;
gap: 0;
}
.oap-place-info-row {
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
gap: 16px;
padding: 12px 0;
border-top: 1px solid var(--oap-line);
}
.oap-place-info-row:first-child {
padding-top: 0;
border-top: 0;
}
.oap-place-info-row__label {
color: var(--oap-muted);
font-size: 0.82rem;
font-weight: 700;
}
.oap-place-info-row__value {
min-width: 0;
font-size: 0.95rem;
line-height: 1.8;
}
.oap-place-checklist {
display: grid;
gap: 10px;
}
.oap-place-checklist__item {
margin: 0;
padding: 10px 12px;
border-radius: 12px;
background: #fff7f5;
color: var(--oap-text);
font-size: 0.9rem;
font-weight: 700;
}
.oap-detail-hero__credit {
margin: 0;
color: var(--oap-muted);
font-size: 0.78rem;
line-height: 1.5;
}
.oap-map-embed {
overflow: hidden;
border-radius: 16px;
border: 1px solid rgba(17, 17, 17, 0.08);
background: #f3f4f6;
aspect-ratio: 16 / 9;
}
.oap-map-embed iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.oap-detail-hero__aside {
display: grid;
align-content: start;
gap: 12px;
}
@media (min-width: 960px) {
.oap-affiliate-banner--mobile {
display: none;
}
.oap-affiliate-banner--desktop {
display: flex;
}
.oap-travel-banner--mobile {
display: none;
}
.oap-travel-banner--desktop {
display: flex;
}
}
.oap-detail-hero__media-wrap {
display: grid;
gap: 8px;
}
.oap-detail-hero__media {
position: relative;
overflow: hidden;
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: 0;
background: linear-gradient(145deg, #f3f4f6, #d1d5db);
aspect-ratio: 4 / 3;
}
.oap-detail-hero__media--no-image {
background:
radial-gradient(circle at top right, rgba(249, 115, 22, 0.22), transparent 34%),
radial-gradient(circle at bottom left, rgba(217, 45, 32, 0.18), transparent 40%),
linear-gradient(135deg, #111827 0%, #1f2937 50%, #0f172a 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.oap-detail-hero__no-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
padding: 24px;
text-align: center;
}
.oap-detail-hero__no-image > span {
display: block;
}
.oap-detail-hero__no-image::before,
.oap-detail-hero__no-image::after {
content: "";
position: absolute;
border-radius: 999px;
opacity: 0.55;
}
.oap-detail-hero__no-image::before {
width: 160px;
height: 160px;
top: -42px;
right: -24px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 72%);
}
.oap-detail-hero__no-image::after {
width: 220px;
height: 220px;
bottom: -108px;
left: -72px;
background: radial-gradient(circle, rgba(249, 115, 22, 0.18) 0%, transparent 72%);
}
.oap-detail-hero__no-image-text {
position: relative;
z-index: 1;
}
.oap-detail-hero__no-image-text {
display: block;
color: #d1d5db;
font-family: "Montserrat", "Avenir Next", "Futura PT", "Hiragino Sans", "Yu Gothic", sans-serif;
font-size: clamp(1.5rem, 3.2vw, 2.2rem);
font-weight: 800;
line-height: 1;
letter-spacing: 0.22em;
text-indent: 0.22em;
text-transform: none;
text-shadow:
0 10px 26px rgba(0, 0, 0, 0.28),
0 0 0 rgba(255, 255, 255, 0.08);
}
.oap-detail-hero__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.oap-detail-hero__media--product {
aspect-ratio: auto;
padding: 18px;
background: #fff;
}
.oap-detail-hero__media--product .oap-detail-hero__image {
height: auto;
max-height: 420px;
object-fit: contain;
margin: 0 auto;
}
.oap-section {
padding-top: 56px;
padding-bottom: 56px;
}
.oap-section + .oap-section {
border-top: 1px solid var(--oap-line);
}
.oap-section + .oap-section.oap-section--featured-special {
border-top: 0;
}
.oap-section--related {
padding-top: 28px;
}
.oap-section + .oap-section.oap-section--related {
border-top: 0;
}
.oap-section--related .oap-card__excerpt,
.oap-section--related .oap-compact-card__excerpt {
display: none;
}
.oap-card__excerpt,
.oap-compact-card__excerpt {
display: none !important;
}
.oap-section__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--oap-line);
}
.oap-section__head--split {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.oap-section__head--plain {
padding-bottom: 0;
border-bottom: 0;
}
.oap-section__icon {
font-size: 0.9em;
color: var(--oap-accent);
opacity: 0.75;
margin-right: 10px;
vertical-align: middle;
}
.oap-more-link,
.oap-section__more-link {
color: var(--oap-accent);
font-weight: 700;
text-decoration: none;
}
.oap-section__more-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
white-space: nowrap;
}
.oap-section__more-link .oap-arrow {
display: inline-block;
font-size: 0.78em;
transition: transform 0.2s ease;
}
.oap-section__more-link:hover .oap-arrow,
.oap-section__more-link:focus-visible .oap-arrow {
transform: translateX(4px);
}
.oap-section__more-link:hover .oap-link-text,
.oap-section__more-link:focus-visible .oap-link-text {
text-decoration: underline;
text-underline-offset: 2px;
}
.oap-more-link--button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 22px;
border: 1px solid rgba(217, 45, 32, 0.18);
border-radius: 999px;
background: #fff7f5;
color: var(--oap-accent);
font-size: 0.96rem;
font-weight: 700;
box-shadow: 0 10px 22px rgba(17, 24, 39, 0.06);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.oap-load-more.is-loading,
.oap-load-more:disabled {
opacity: 0.6;
cursor: wait;
transform: none;
box-shadow: 0 10px 22px rgba(17, 24, 39, 0.04);
}
.oap-load-more__spinner {
display: none;
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(217, 45, 32, 0.18);
border-top-color: var(--oap-accent);
animation: oap-spin 0.8s linear infinite;
}
.oap-load-more.is-loading .oap-load-more__spinner {
display: inline-block;
}
.oap-load-more__status {
margin: 10px 0 0;
font-size: 0.93rem;
letter-spacing: 0.02em;
color: #8a4a43;
text-align: center;
}
.oap-more-link--button:hover,
.oap-more-link--button:focus-visible {
background: #ffeae5;
border-color: rgba(217, 45, 32, 0.28);
box-shadow: 0 14px 28px rgba(17, 24, 39, 0.08);
transform: translateY(-1px);
}
.oap-grid {
display: grid;
gap: 18px;
}
.oap-grid--cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.oap-grid__item[hidden] {
display: none;
}
.oap-section__actions {
margin-top: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@keyframes oap-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes oap-loader-bars {
0%,
100% {
transform: scaleY(0.5);
opacity: 0.4;
}
50% {
transform: scaleY(1);
opacity: 1;
}
}
@keyframes oap-loader-wordmark {
0%,
100% {
transform: translateY(0);
opacity: 0.88;
}
50% {
transform: translateY(-2px);
opacity: 1;
}
}
@keyframes oap-loader-scan {
0% {
transform: translateX(-120%);
opacity: 0;
}
20% {
opacity: 0.9;
}
80% {
opacity: 0.7;
}
100% {
transform: translateX(120%);
opacity: 0;
}
}
.oap-page-loader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background:
radial-gradient(circle at top, rgba(255, 236, 230, 0.95), rgba(255, 255, 255, 0.98) 52%),
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 245, 0.98));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.28s ease, visibility 0.28s ease;
}
.oap-page-loader.is-active {
opacity: 1;
visibility: visible;
}
.oap-page-loader__inner {
display: grid;
gap: 12px;
justify-items: center;
width: min(100%, 360px);
padding: 28px 24px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: blur(12px);
text-align: center;
}
.oap-page-loader__brand {
display: grid;
gap: 14px;
justify-items: center;
}
.oap-page-loader__logo-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
animation: oap-loader-wordmark 1.6s ease-in-out infinite;
}
.oap-page-loader__logo {
position: relative;
z-index: 2;
display: block;
width: min(260px, 72vw);
height: auto;
filter: drop-shadow(0 14px 34px rgba(217, 45, 32, 0.18));
}
.oap-page-loader__logo-glow {
position: absolute;
inset: 10% 14%;
border-radius: 999px;
background: radial-gradient(circle, rgba(255, 139, 123, 0.28) 0%, rgba(255, 139, 123, 0.08) 48%, rgba(255, 255, 255, 0) 72%);
filter: blur(10px);
}
.oap-page-loader__logo-scan {
position: absolute;
z-index: 3;
top: 12px;
bottom: 12px;
width: 64px;
border-radius: 24px;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.72), rgba(255,255,255,0));
mix-blend-mode: screen;
animation: oap-loader-scan 2.2s ease-in-out infinite;
pointer-events: none;
}
.oap-page-loader__signal {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
height: 26px;
}
.oap-page-loader__bar {
width: 8px;
border-radius: 999px;
background: linear-gradient(180deg, #ff8e7f 0%, #d92d20 100%);
box-shadow: 0 10px 18px rgba(217, 45, 32, 0.18);
transform-origin: center center;
animation: oap-loader-bars 0.95s ease-in-out infinite;
}
.oap-page-loader__bar--one {
height: 12px;
}
.oap-page-loader__bar--two {
height: 18px;
animation-delay: 0.2s;
}
.oap-page-loader__bar--three {
height: 24px;
animation-delay: 0.4s;
}
.oap-page-loader__bar--four {
height: 16px;
animation-delay: 0.6s;
}
.oap-page-loader__text {
margin: 0;
font-size: 0.94rem;
color: #8a4a43;
}
.oap-grid--terms {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.oap-featured-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.oap-card--hero {
background:
linear-gradient(180deg, rgba(217, 45, 32, 0.04), rgba(255, 255, 255, 0.98)),
#fff;
}
.oap-ranking-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 12px;
}
.oap-ranking-list__item {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 16px 18px;
border: 1px solid var(--oap-line);
border-radius: 16px;
background: #fff;
box-shadow: var(--oap-shadow);
}
.oap-ranking-list__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: #fff7f5;
color: var(--oap-accent);
font-weight: 700;
}
.oap-ranking-list__item:nth-child(1) .oap-ranking-list__num {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #fff;
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}
.oap-ranking-list__item:nth-child(2) .oap-ranking-list__num {
background: linear-gradient(135deg, #d1d5db, #9ca3af);
color: #fff;
}
.oap-ranking-list__item:nth-child(3) .oap-ranking-list__num {
background: linear-gradient(135deg, #d97706, #b45309);
color: #fff;
}
.oap-ranking-list__title {
font-weight: 700;
}
.oap-ranking-list__meta {
margin-top: 4px;
color: var(--oap-muted);
font-size: 0.9rem;
}
.oap-three-column {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#search-by-show {
margin-top: 40px;
margin-inline: calc(50% - 50vw);
padding: 40px max(24px, calc((100vw - var(--oap-max-width)) / 2 + 24px));
border-top: 0;
border-radius: 0;
background: #fff5f5;
}
#search-by-area {
margin-top: 0;
margin-inline: calc(50% - 50vw);
padding: 40px max(24px, calc((100vw - var(--oap-max-width)) / 2 + 24px));
border-top: 0;
border-radius: 0;
background:
radial-gradient(circle at top right, rgba(67, 119, 237, 0.1), rgba(67, 119, 237, 0)),
linear-gradient(180deg, #f5f9ff 0%, #eef5ff 100%);
}
#search-by-area + .oap-section {
border-top: 0;
margin-top: 0;
}
#search-by-genre {
margin-top: 40px;
margin-inline: calc(50% - 50vw);
padding: 40px max(24px, calc((100vw - var(--oap-max-width)) / 2 + 24px));
border-top: 0;
border-radius: 0;
background:
radial-gradient(circle at top left, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0)),
linear-gradient(180deg, #fffdf8 0%, #fff9f1 100%);
}
#search-by-genre + .oap-section {
border-top: 0;
}
#search-by-genre .oap-section__subcopy--tags {
margin: 10px 0 18px;
color: #6f6250;
font-size: 0.95rem;
}
.oap-term-groups {
display: grid;
gap: 14px;
}
.oap-term-groups > .oap-term-group {
order: 1;
}
.oap-term-groups > .oap-tag-cloud {
order: 2;
}
.oap-term-group {
display: grid;
gap: 8px;
}
.oap-term-group__title {
margin: 0;
font-size: 0.95rem;
font-weight: 800;
color: #6f4e37;
}
#search-by-show,
#search-by-area,
#search-by-genre {
scroll-margin-top: 88px;
}
.oap-home-column {
display: grid;
gap: 14px;
align-content: start;
}
.oap-home-column__head {
display: flex;
align-items: center;
justify-content: space-between;
}
.oap-home-column__more {
font-size: 0.75rem;
}
.oap-home-column__title {
margin: 0;
font-size: 1.15rem;
}
.oap-home-column__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.oap-compact-card {
padding: 18px;
border: 1px solid var(--oap-line);
border-radius: 18px;
background: #fff;
box-shadow: var(--oap-shadow);
}
.oap-compact-card--place,
.oap-card--place {
background:
linear-gradient(180deg, rgba(217, 45, 32, 0.03), rgba(255, 255, 255, 1) 38%),
#fff;
}
.oap-compact-card--place::before,
.oap-card--place::before {
content: none;
position: absolute;
top: 18px;
left: 18px;
width: 40px;
height: 3px;
border-radius: 999px;
background: var(--oap-accent);
}
.oap-card,
.oap-compact-card,
.oap-term-card {
position: relative;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.oap-js .oap-card,
.oap-js .oap-section__head,
.oap-js .oap-term-card {
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.4s ease var(--delay, 0ms),
transform 0.4s ease var(--delay, 0ms),
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.oap-js .oap-card.is-visible,
.oap-js .oap-section__head.is-visible,
.oap-js .oap-term-card.is-visible {
opacity: 1;
transform: none;
}
.oap-card:hover,
.oap-card:focus-within,
.oap-compact-card:hover,
.oap-compact-card:focus-within,
.oap-term-card:hover,
.oap-term-card:focus-visible {
border-color: rgba(217, 45, 32, 0.24);
box-shadow: 0 14px 28px rgba(17, 17, 17, 0.08);
transform: translateY(-2px);
}
.oap-card__media,
.oap-compact-card__media {
position: relative;
margin-bottom: 16px;
overflow: hidden;
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: 16px;
background: linear-gradient(145deg, #f3f4f6, #d1d5db);
}
.oap-card__image,
.oap-compact-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.oap-card__media {
aspect-ratio: 16 / 10;
}
.oap-card--product .oap-card__media,
.oap-compact-card--product .oap-compact-card__media {
display: grid;
place-items: center;
aspect-ratio: 5 / 4;
background: #fff;
}
.oap-card--product .oap-card__image,
.oap-compact-card--product .oap-compact-card__image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
padding: 8px 18px;
background: #fff;
}
.oap-card__media-label,
.oap-detail-hero__media-label {
margin: 0;
color: var(--oap-accent);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.oap-detail-hero__media-label {
text-transform: none;
letter-spacing: 0.04em;
}
.oap-card__media-label {
position: absolute;
right: 8px;
bottom: 6px;
z-index: 2;
padding: 0;
border-radius: 0;
background: none;
color: rgba(17, 24, 39, 0.7);
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.06em;
text-shadow: none;
pointer-events: none;
}
.oap-card__title a,
.oap-compact-card__title a {
background-image: linear-gradient(var(--oap-accent), var(--oap-accent));
background-size: 0% 1.5px;
background-position: left bottom;
background-repeat: no-repeat;
transition: background-size 0.25s ease;
}
.oap-card:hover .oap-card__title a,
.oap-card:focus-within .oap-card__title a,
.oap-compact-card:hover .oap-compact-card__title a,
.oap-compact-card:focus-within .oap-compact-card__title a {
background-size: 100% 1.5px;
}
.oap-compact-card__media {
aspect-ratio: 16 / 9;
}
.oap-media-placeholder {
position: relative;
display: grid;
width: 100%;
height: 100%;
padding: 18px;
align-content: end;
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.35), transparent 26%),
linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(107, 114, 128, 0.08)),
linear-gradient(145deg, #9ca3af, #4b5563);
color: #f9fafb;
}
.oap-media-placeholder::before {
content: "";
position: absolute;
inset: 12px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 12px;
}
.oap-media-placeholder__eyebrow,
.oap-media-placeholder__title {
position: relative;
z-index: 1;
}
.oap-media-placeholder__eyebrow {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
opacity: 0.78;
}
.oap-media-placeholder__title {
font-size: clamp(1rem, 2.2vw, 1.5rem);
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1;
}
.oap-media-placeholder__subtitle {
position: relative;
z-index: 1;
margin-top: 10px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
opacity: 0.84;
}
.oap-media-placeholder--compact {
padding: 14px;
}
.oap-media-placeholder--compact .oap-media-placeholder__title,
.oap-media-placeholder--term .oap-media-placeholder__title {
font-size: 1rem;
}
.oap-media-placeholder--special {
align-content: center;
gap: 8px;
color: #111827;
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.7), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04)),
linear-gradient(145deg, #fff4ee, #ffd9c9);
border-color: rgba(231, 63, 19, 0.16);
}
.oap-media-placeholder--special .oap-media-placeholder__eyebrow {
color: var(--oap-accent);
opacity: 1;
}
.oap-media-placeholder--special .oap-media-placeholder__title {
font-size: clamp(1.2rem, 2.4vw, 1.9rem);
letter-spacing: 0.04em;
line-height: 1.2;
color: #111827;
}
.oap-media-placeholder--special .oap-media-placeholder__subtitle {
color: #6b7280;
opacity: 1;
}
.oap-media-placeholder--product {
align-content: center;
gap: 10px;
color: #111827;
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.76), transparent 30%),
linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06)),
linear-gradient(145deg, #fff7f2, #ffe7dc);
border-color: rgba(217, 45, 32, 0.14);
}
.oap-media-placeholder--product .oap-media-placeholder__eyebrow {
color: var(--oap-accent);
opacity: 1;
}
.oap-media-placeholder--product .oap-media-placeholder__title {
font-size: clamp(1.15rem, 2vw, 1.65rem);
letter-spacing: 0.02em;
line-height: 1.25;
color: #111827;
}
.oap-media-placeholder--product .oap-media-placeholder__subtitle {
color: #6b7280;
opacity: 1;
font-size: 0.82rem;
}
.oap-compact-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
color: var(--oap-muted);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: none;
}
.oap-compact-card--place .oap-compact-card__meta,
.oap-card--place .oap-card__meta {
padding-top: 12px;
}
.oap-compact-card__type {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
background: #f6f7f9;
color: #6b7280;
line-height: 1;
}
.oap-compact-card__date {
color: #6b7280;
}
.oap-compact-card__title {
margin: 8px 0 8px;
font-size: 1.22rem;
font-weight: 800;
line-height: 1.32;
letter-spacing: -0.02em;
}
.oap-compact-card--place .oap-compact-card__title,
.oap-card--place .oap-card__title {
margin-top: 10px;
font-size: 1.3rem;
line-height: 1.28;
}
.oap-compact-card__facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 2px 0 10px;
}
.oap-compact-card__fact {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: var(--oap-soft);
color: var(--oap-text);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.oap-compact-card__fact--accent {
background: #fff1ee;
color: var(--oap-accent);
}
.oap-compact-card__excerpt {
margin: 0 0 12px;
color: var(--oap-muted);
font-size: 0.88rem;
line-height: 1.75;
}
.oap-compact-card--place .oap-compact-card__excerpt {
margin-bottom: 14px;
font-size: 0.92rem;
line-height: 1.78;
color: #4b5563;
}
.oap-compact-card__terms {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.oap-card__main-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.oap-card__terms,
.oap-compact-card__terms {
position: relative;
z-index: 2;
}
.oap-card__terms a,
.oap-compact-card__terms a {
position: relative;
z-index: 3;
}
.oap-about-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.oap-about-intro {
padding: 24px 28px;
border-top: 2px solid var(--oap-accent);
border-bottom: 1px solid var(--oap-line);
background:
linear-gradient(180deg, rgba(217, 45, 32, 0.04), rgba(255, 255, 255, 1)),
#fff;
}
.oap-about-intro__lead {
margin: 0;
max-width: 28ch;
font-size: 1.18rem;
line-height: 1.65;
font-weight: 700;
}
.oap-about-intro__text {
max-width: 62ch;
margin: 10px 0 0;
color: var(--oap-muted);
line-height: 1.8;
}
.oap-about-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
padding-top: 18px;
border-top: 1px solid var(--oap-line);
}
.oap-about-fact {
padding: 18px 18px 16px;
border: 1px solid var(--oap-line);
border-radius: 18px;
background: #fff;
}
.oap-about-fact__label {
display: inline-flex;
margin-bottom: 8px;
padding: 0;
color: var(--oap-accent);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.oap-about-fact__text {
margin: 0;
font-size: 0.98rem;
line-height: 1.75;
max-width: 24ch;
}
.oap-filter-stack {
display: grid;
gap: 18px;
}
.oap-filter-tabs {
display: grid;
gap: 4px;
}
.oap-filter-tabs__nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.oap-filter-tabs__button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border: 1px solid var(--oap-line);
border-radius: 999px;
background: #fff;
color: var(--oap-text);
font-size: 0.92rem;
font-weight: 700;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.oap-filter-tabs__button:hover,
.oap-filter-tabs__button:focus-visible,
.oap-filter-tabs__button.is-active {
border-color: rgba(217, 45, 32, 0.24);
background: #fff4f1;
color: var(--oap-accent);
}
.oap-filter-tabs__panel.is-active {
display: block;
}
.oap-filter-group {
padding: 18px 20px;
border: 1px solid var(--oap-line);
border-radius: var(--oap-radius);
background: #fff;
box-shadow: var(--oap-shadow);
}
.oap-filter-group__title {
margin: 0 0 12px;
font-size: 1rem;
}
.oap-filter-group__list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.oap-filter-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--oap-line);
border-radius: 999px;
background: var(--oap-soft);
color: var(--oap-text);
font-size: 0.9rem;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.oap-filter-chip:hover,
.oap-filter-chip:focus-visible,
.oap-filter-chip.is-active {
border-color: var(--oap-accent);
color: var(--oap-accent);
background: #fff7f5;
}
.oap-filter-chip:disabled,
.oap-filter-chip.is-disabled {
opacity: 0.45;
cursor: not-allowed;
background: #f5f5f5;
color: var(--oap-muted);
border-color: var(--oap-line);
}
.oap-filter-chip__count {
color: var(--oap-muted);
font-size: 0.82rem;
}
.oap-directory-map-panel {
padding: 18px 18px 16px;
}
.oap-directory-map {
height: 340px;
border: 1px solid var(--oap-line);
border-radius: 16px;
overflow: hidden;
background: #f5f5f5;
}
.oap-panel.oap-local-supermarket-overview {
display: grid;
gap: 0;
margin-top: 2px;
padding: 18px 20px 18px 22px;
border: 0;
border-left: 4px solid var(--oap-accent);
border-radius: 0;
background: linear-gradient(90deg, rgba(217, 45, 32, 0.07), rgba(255, 255, 255, 0.96) 42%, #fff);
box-shadow: none;
}
.oap-local-supermarket-overview[hidden],
.oap-local-supermarket-card[hidden] {
display: none;
}
.oap-local-supermarket-overview__grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.oap-panel.oap-local-supermarket-overview .oap-local-supermarket-card {
display: grid;
gap: 14px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.oap-local-supermarket-card__title {
margin: 0;
color: var(--oap-text);
font-size: 1.28rem;
font-weight: 800;
line-height: 1.35;
letter-spacing: 0;
}
.oap-local-supermarket-card__title::before {
content: "選択中";
display: inline-flex;
align-items: center;
margin-right: 10px;
padding: 3px 8px;
background: var(--oap-accent);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
line-height: 1.3;
vertical-align: 0.12em;
}
.oap-local-supermarket-card__facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0;
}
.oap-local-supermarket-card__facts div {
display: grid;
gap: 5px;
min-width: 0;
padding: 10px 12px;
border-left: 2px solid rgba(217, 45, 32, 0.18);
background: rgba(255, 255, 255, 0.86);
}
.oap-local-supermarket-card__facts dt {
color: var(--oap-accent);
font-size: 0.82rem;
font-weight: 800;
}
.oap-local-supermarket-card__facts dd {
margin: 0;
color: var(--oap-text);
font-size: 0.94rem;
font-weight: 700;
line-height: 1.55;
}
.oap-local-supermarket-card__copy {
margin: 0;
padding-top: 12px;
border-top: 1px solid rgba(217, 45, 32, 0.12);
color: #4b5563;
font-size: 0.96rem;
line-height: 1.85;
}
.oap-local-supermarket-overview,
.oap-local-supermarket-card {
display: none;
}
.oap-filter-stack:has([data-oap-brand-filter="suzukiya"].is-active) .oap-local-supermarket-overview,
.oap-filter-stack:has([data-oap-brand-filter="ysmart"].is-active) .oap-local-supermarket-overview,
.oap-filter-stack:has([data-oap-brand-filter="beisia"].is-active) .oap-local-supermarket-overview,
.oap-filter-stack:has([data-oap-brand-filter="torisen"].is-active) .oap-local-supermarket-overview,
.oap-filter-stack:has([data-oap-brand-filter="seimiya"].is-active) .oap-local-supermarket-overview,
.oap-filter-stack:has([data-oap-brand-filter="watahan"].is-active) .oap-local-supermarket-overview,
.oap-filter-stack:has([data-oap-brand-filter="sakashita"].is-active) .oap-local-supermarket-overview,
.oap-filter-stack:has([data-oap-brand-filter="midori-super"].is-active) .oap-local-supermarket-overview,
.oap-filter-stack:has([data-oap-brand-filter="suzukiya"].is-active) [data-oap-brand-overview-card="suzukiya"],
.oap-filter-stack:has([data-oap-brand-filter="ysmart"].is-active) [data-oap-brand-overview-card="ysmart"],
.oap-filter-stack:has([data-oap-brand-filter="beisia"].is-active) [data-oap-brand-overview-card="beisia"],
.oap-filter-stack:has([data-oap-brand-filter="torisen"].is-active) [data-oap-brand-overview-card="torisen"],
.oap-filter-stack:has([data-oap-brand-filter="seimiya"].is-active) [data-oap-brand-overview-card="seimiya"],
.oap-filter-stack:has([data-oap-brand-filter="watahan"].is-active) [data-oap-brand-overview-card="watahan"],
.oap-filter-stack:has([data-oap-brand-filter="sakashita"].is-active) [data-oap-brand-overview-card="sakashita"],
.oap-filter-stack:has([data-oap-brand-filter="midori-super"].is-active) [data-oap-brand-overview-card="midori-super"] {
display: grid;
}
.oap-card,
.oap-term-card {
padding: 20px;
border: 1px solid var(--oap-line);
border-radius: var(--oap-radius);
background: #fff;
box-shadow: var(--oap-shadow);
}
.oap-panel,
.oap-empty-state {
padding: 20px;
border: 1px solid var(--oap-line);
border-radius: 0;
background: #fff;
box-shadow: none;
}
.oap-panel__title {
margin: 0 0 14px;
font-size: 1.1rem;
}
.oap-entry-content > *:first-child {
margin-top: 0;
}
.oap-entry-content > *:last-child {
margin-bottom: 0;
}
.oap-entry-content h2,
.oap-entry-content h3 {
margin: 1.8em 0 0.6em;
font-size: 1.1rem;
}
.oap-entry-content p,
.oap-entry-content li {
line-height: 1.85;
color: var(--oap-text);
}
.oap-entry-content--page {
max-width: 980px;
}
.oap-page-contact {
position: relative;
overflow: hidden;
}
.oap-page-contact::before {
content: "";
position: absolute;
inset: 68px 24px auto auto;
width: 180px;
height: 180px;
border-radius: 999px;
background:
radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 45%),
linear-gradient(135deg, rgba(255, 94, 58, 0.14), rgba(255, 196, 92, 0.16));
filter: blur(4px);
pointer-events: none;
}
.oap-page-contact__content {
position: relative;
display: grid;
gap: 20px;
padding: 4px 0 0;
}
.oap-page-contact__content > p:first-child {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
margin: 0;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 94, 58, 0.08);
color: var(--oap-accent);
font-size: 0.92rem;
font-weight: 800;
letter-spacing: 0.03em;
}
.oap-page-contact__content > p:first-child::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 6px rgba(255, 94, 58, 0.12);
}
.oap-page-contact__content > p:not(:first-child) {
margin: 0;
max-width: 760px;
font-size: 1rem;
line-height: 1.9;
color: #334155;
}
.oap-page-contact__content h2 {
margin: 10px 0 0;
font-size: 1.18rem;
line-height: 1.5;
}
.oap-page-contact__content ul {
display: block;
margin: 0 0 0 1.2em;
padding: 0;
list-style: disc;
}
.oap-page-contact__content li {
padding: 0;
margin: 0 0 0.55em;
}
.oap-page-contact__content .wpcf7 {
margin-top: 8px;
padding: 24px;
border-radius: 20px;
background: #fff;
border: 1px solid rgba(255, 94, 58, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.oap-page-contact__content .wpcf7-form p {
margin: 0 0 16px;
}
.oap-page-contact__content .wpcf7-form label {
display: grid;
gap: 8px;
color: #111827;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.7;
}
.oap-page-contact__content .wpcf7-form-control-wrap {
display: block;
}
.oap-page-contact__content input[type="text"],
.oap-page-contact__content input[type="email"],
.oap-page-contact__content input[type="url"],
.oap-page-contact__content select,
.oap-page-contact__content textarea {
width: 100%;
max-width: 100%;
padding: 14px 16px;
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 14px;
background: #fff;
color: #111827;
font: inherit;
box-sizing: border-box;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.oap-page-contact__content input[type="text"]:focus,
.oap-page-contact__content input[type="email"]:focus,
.oap-page-contact__content input[type="url"]:focus,
.oap-page-contact__content select:focus,
.oap-page-contact__content textarea:focus {
outline: none;
border-color: rgba(255, 94, 58, 0.55);
box-shadow: 0 0 0 4px rgba(255, 94, 58, 0.12);
}
.oap-page-contact__content textarea {
min-height: 180px;
resize: vertical;
}
.oap-page-contact__content select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
background-position: calc(100% - 18px) calc(50% - 1px), calc(100% - 13px) calc(50% - 1px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 36px;
}
.oap-page-contact__content input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
padding: 14px 24px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #ff5e3a, #ff7b54);
color: #fff;
font-size: 0.96rem;
font-weight: 800;
letter-spacing: 0.02em;
box-shadow: 0 16px 30px rgba(255, 94, 58, 0.24);
cursor: pointer;
}
.oap-page-contact__content input[type="submit"]:hover {
transform: translateY(-1px);
}
.oap-page-contact__content .wpcf7-spinner {
margin: 12px 0 0;
}
.oap-page-contact__content .wpcf7-response-output {
margin: 16px 0 0 !important;
padding: 12px 14px !important;
border-radius: 14px;
font-size: 0.9rem;
}
.oap-entry-content--special {
display: grid;
gap: 24px;
}
.oap-entry-content--special > p:first-child {
display: none;
}
.oap-special-section {
display: grid;
gap: 14px;
}
.oap-special-section h2 {
margin: 0;
font-size: 1.24rem;
}
.oap-special-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.oap-special-list__item {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
gap: 24px;
align-items: start;
padding: 0;
border: 1px solid var(--oap-line);
border-radius: 16px;
background: #fff;
box-shadow: var(--oap-shadow);
}
.oap-special-list__body {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
gap: 24px;
align-items: start;
padding: 18px 20px 20px;
}
.oap-special-list__item--single .oap-special-list__body {
grid-template-columns: 1fr;
}
.oap-special-list__main,
.oap-special-list__side {
min-width: 0;
}
.oap-special-list__title {
margin: 0;
font-size: 1.05rem;
line-height: 1.5;
padding: 18px 20px 16px;
border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.oap-special-list__title a {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
text-decoration: none;
}
.oap-special-list__title a::after {
content: '↗';
color: var(--oap-accent);
font-size: 0.82em;
line-height: 1;
}
.oap-special-list__title a:hover,
.oap-special-list__title a:focus-visible {
color: var(--oap-accent);
}
.oap-special-list__meta {
margin: 8px 0 0;
color: var(--oap-muted);
font-size: 0.8rem;
line-height: 1.7;
}
.oap-special-list__excerpt {
display: none;
}
.oap-special-list__cta {
margin: 10px 0 0;
}
.oap-special-list__cta a {
color: var(--oap-accent);
font-size: 0.84rem;
font-weight: 700;
text-decoration: none;
}
.oap-special-list__cta a:hover {
text-decoration: underline;
}
.oap-special-list__quick-facts {
display: grid;
gap: 10px;
margin-top: 16px;
}
.oap-special-list__quick-row {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.oap-special-list__quick-label {
color: var(--oap-muted);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.oap-special-list__quick-value {
font-size: 0.9rem;
line-height: 1.75;
word-break: break-word;
}
.oap-special-list__quick-value a {
color: var(--oap-accent);
font-weight: 700;
text-decoration: none;
}
.oap-special-list__quick-value a:hover {
text-decoration: underline;
}
.oap-special-list__map {
display: grid;
gap: 10px;
margin-top: 16px;
}
.oap-special-list__map iframe {
width: 100%;
height: 220px;
border: 0;
border-radius: 12px;
}
.oap-special-list__map-link {
color: var(--oap-accent);
font-size: 0.84rem;
font-weight: 700;
text-decoration: none;
}
.oap-special-list__map-link:hover {
text-decoration: underline;
}
.oap-special-list__details {
display: grid;
gap: 12px;
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.oap-special-list__detail-row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 10px 0;
border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.oap-special-list__detail-label {
color: var(--oap-muted);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.oap-special-list__detail-value {
font-size: 0.9rem;
line-height: 1.75;
word-break: break-word;
}
.single-special .oap-special-list__detail-value {
line-height: 1.55;
white-space: normal;
}
.single-special .oap-special-list__detail-value br {
display: block;
content: '';
margin-bottom: 0.2em;
}
.single-special .oap-special-list__detail-value br + br {
display: block;
}
.single-special .oap-special-list__hours-line {
display: block;
margin: 0 0 0.2em;
}
.oap-special-list__detail-value a {
color: var(--oap-accent);
font-weight: 700;
}
.single-special .oap-special-list__detail-value a[target="_blank"]::after {
content: '\f08e';
display: inline-block;
margin-left: 0.35em;
font-family: 'Font Awesome 6 Free';
font-size: 0.82em;
font-weight: 900;
line-height: 1;
vertical-align: middle;
}
.oap-special-list__detail-row:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.single-special .oap-special-list__meta {
display: none;
}
.single-special .oap-special-list__item {
display: grid;
grid-template-columns: 1fr;
row-gap: 16px;
padding: 18px 20px 20px;
}
.single-special .oap-special-list__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
align-items: start;
gap: 24px;
padding: 0;
}
.single-special .oap-special-list__item--single .oap-special-list__body {
grid-template-columns: 1fr;
}
.single-special .oap-special-list__title a::after {
content: '\f061';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-left: 0.35em;
}
.single-special .oap-special-list__title {
display: block;
width: 100%;
margin: 0;
padding: 0 0 14px;
border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.single-special .oap-special-list__title a {
width: auto;
}
.single-special .oap-special-list__section-heading {
margin: 0 0 22px;
font-size: 1rem;
font-weight: 700;
line-height: 1.6;
letter-spacing: 0;
}
.single-special .oap-special-list__section-copy {
color: var(--oap-text);
}
.single-special .oap-special-list__section-count {
display: inline-block;
margin: 0 0.18em;
font-size: 1.28em;
font-weight: 800;
letter-spacing: -0.02em;
}
.single-special .oap-special-list__details {
gap: 0;
}
.single-special .oap-special-list__map {
margin-top: 0;
}
.single-special .oap-special-list__side {
align-self: start;
}
@media (max-width: 880px) {
.oap-special-list__item {
grid-template-columns: 1fr;
gap: 14px;
}
.single-special .oap-special-list__body {
grid-template-columns: 1fr;
gap: 16px;
padding: 14px 0 0;
}
.single-special .oap-special-list__title {
padding: 0 0 14px;
}
.oap-special-list__map iframe {
height: 180px;
}
}
.oap-section__lead,
.oap-archive-description {
color: var(--oap-muted);
max-width: inherit;
}
.oap-archive-meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 6px;
}
.oap-archive-meta__item {
display: inline-flex;
align-items: baseline;
gap: 8px;
min-width: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.oap-archive-meta__label {
color: var(--oap-muted);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: none;
}
.oap-archive-meta__value {
font-weight: 700;
font-size: 1rem;
line-height: 1.4;
}
.oap-archive-meta__count {
font-size: 1.28em;
font-weight: 800;
letter-spacing: -0.02em;
}
.oap-page--show-taxonomy .oap-section__head {
padding-bottom: 0;
border-bottom: 0;
}
.oap-section--show-overview {
margin: 0 0 40px;
padding: 24px;
border: 1px solid var(--oap-line);
border-radius: 0;
background: #fff;
}
.oap-section + .oap-section--show-overview {
border-top: 1px solid var(--oap-line);
}
.oap-section--show-overview .oap-section__head {
margin-bottom: 18px;
padding-bottom: 0;
border-bottom: 0;
}
.oap-section--show-overview .oap-section__lead:last-child {
margin-bottom: 0;
}
.oap-page--show-taxonomy .oap-filter-tabs {
gap: 12px;
}
.oap-show-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
width: 100%;
margin: 2px 0 8px;
}
.oap-show-facts__item {
margin: 0;
padding: 14px 16px;
border: 1px solid rgba(217, 45, 32, 0.16);
border-radius: 0;
background: #fff8f5;
}
.oap-show-facts__label {
margin: 0 0 5px;
color: var(--oap-accent);
font-size: 0.78rem;
font-weight: 800;
line-height: 1.3;
}
.oap-show-facts__value {
margin: 0;
color: var(--oap-text);
font-size: 0.96rem;
font-weight: 800;
line-height: 1.55;
}
@media (max-width: 640px) {
.oap-show-facts {
grid-template-columns: 1fr;
}
}
.oap-page--archive .oap-section--archive-intro {
padding-bottom: 24px;
}
.oap-page--archive .oap-section__head--archive-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.oap-page--archive .oap-section__head--archive-intro .oap-section__title {
max-width: none;
}
.oap-page--archive .oap-section__head--archive-intro .oap-section__lead {
max-width: inherit;
font-size: 0.98rem;
line-height: 1.85;
}
.oap-page--archive .oap-archive-meta {
gap: 12px;
margin-top: 4px;
}
.oap-page--archive .oap-archive-meta__item {
gap: 6px;
}
.oap-page--archive .oap-filter-stack {
gap: 12px;
}
.oap-page--archive .oap-filter-group {
padding: 14px 18px;
}
.oap-archive-filter-controls {
margin-top: 20px;
padding-top: 14px;
}
.oap-section__actions--archive-filters {
margin-top: 0;
padding-bottom: 16px;
border-bottom: 1px solid var(--oap-line);
}
.oap-archive-filter-controls .oap-more-link--button {
align-self: center;
}
.oap-archive-filter-summary {
margin: 16px 0 0;
color: var(--oap-text);
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
text-align: left;
}
.oap-archive-filter-selected {
margin: 16px 0 0;
color: var(--oap-muted);
font-size: 0.92rem;
line-height: 1.6;
text-align: left;
}
.oap-archive-filter-zero {
margin: 10px 0 0;
color: var(--oap-accent);
font-size: 0.92rem;
font-weight: 700;
line-height: 1.6;
text-align: left;
}
.oap-archive-filter-summary [data-oap-tax-count] {
font-size: 1.28em;
font-weight: 800;
letter-spacing: -0.02em;
}
.oap-page--archive .oap-section--archive-intro + .oap-filter-stack + .oap-section,
.oap-page--archive .oap-section--archive-intro + .oap-section--archive-filter,
.oap-page--archive .oap-section--archive-filter + .oap-section--archive-results {
border-top: 0;
}
.oap-page--area-taxonomy .oap-section + .oap-section {
border-top: 0;
}
.oap-page--place-archive .oap-section--archive-intro {
padding-bottom: 28px;
}
.oap-page--place-archive .oap-section--archive-filter {
padding-top: 18px;
padding-bottom: 24px;
border-top: 0;
}
.oap-page--place-archive .oap-section--archive-results {
padding-top: 24px;
}
.oap-page--place-archive .oap-section--archive-intro + .oap-section--archive-filter,
.oap-page--place-archive .oap-section--archive-filter + .oap-section--archive-results {
border-top: 0;
}
.oap-section__head--archive-intro {
align-items: start;
gap: 12px 28px;
padding-bottom: 0;
border-bottom: 0;
}
.oap-section__head--archive-intro .oap-section__title {
max-width: 10ch;
}
.oap-section__head--archive-intro .oap-section__lead {
margin: 0;
max-width: inherit;
}
.oap-page--place-archive .oap-archive-meta {
gap: 14px;
margin-top: 0;
}
.oap-page--place-archive .oap-archive-meta__item {
gap: 6px;
}
.oap-page--place-archive .oap-filter-tabs {
gap: 10px;
}
.oap-page--place-archive .oap-filter-tabs__nav {
gap: 8px;
margin-bottom: 2px;
}
.oap-page--place-archive .oap-filter-group {
padding: 14px 18px;
}
.oap-page--special-archive .oap-section--archive-intro {
padding-bottom: 24px;
}
.oap-page--special-archive .oap-section__head--archive-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.oap-page--special-archive .oap-section__head--archive-intro .oap-section__title {
max-width: none;
}
.oap-page--special-archive .oap-section__head--archive-intro .oap-section__lead {
max-width: inherit;
font-size: 0.98rem;
line-height: 1.85;
}
.oap-page--special-archive .oap-archive-meta {
gap: 12px;
justify-content: flex-start;
margin-top: 4px;
}
.oap-product-cta {
margin-top: 18px;
padding: 20px 22px;
border-radius: 18px;
background: linear-gradient(135deg, #fff5f2 0%, #fff 100%);
border: 1px solid rgba(226, 57, 30, 0.14);
box-shadow: 0 18px 40px rgba(17, 24, 39, 0.06);
}
.oap-product-cta__header {
display: grid;
gap: 6px;
margin-bottom: 14px;
}
.oap-product-cta__eyebrow {
margin: 0;
color: var(--oap-accent);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.12em;
}
.oap-product-cta__title {
margin: 0;
font-size: 1.2rem;
line-height: 1.2;
}
.oap-product-cta__lead {
margin: 0;
color: var(--oap-muted);
font-size: 0.94rem;
line-height: 1.7;
}
.oap-product-cta__actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.oap-product-cta__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 16px;
border-radius: 12px;
font-weight: 800;
font-size: 0.95rem;
text-decoration: none;
border: 1px solid transparent;
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.oap-product-cta__button:hover,
.oap-product-cta__button:focus-visible {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(17, 24, 39, 0.12);
}
.oap-product-cta__button--amazon {
background: #111827;
color: #fff;
}
.oap-product-cta__button--amazon:hover,
.oap-product-cta__button--amazon:focus-visible {
background: #1f2937;
color: #fff;
}
.oap-product-cta__button--rakuten {
background: #bf0000;
color: #fff;
}
.oap-product-cta__button--rakuten:hover,
.oap-product-cta__button--rakuten:focus-visible {
background: #d10b0b;
color: #fff;
}
.oap-product-cta__button--yahoo {
background: #fff;
color: #c9002d;
border-color: rgba(201, 0, 45, 0.22);
}
.oap-product-cta__button--yahoo:hover,
.oap-product-cta__button--yahoo:focus-visible {
background: #fff4f6;
color: #c9002d;
border-color: rgba(201, 0, 45, 0.35);
}
.oap-product-cta__button--custom {
background: #fff;
color: var(--oap-text);
border-color: rgba(17, 24, 39, 0.18);
}
.oap-product-cta__button--custom:hover,
.oap-product-cta__button--custom:focus-visible {
background: #fff;
color: var(--oap-text);
border-color: rgba(17, 24, 39, 0.35);
}
.oap-entry-content > :first-child {
margin-top: 0;
}
.oap-entry-content > :last-child {
margin-bottom: 0;
}
.oap-meta-list {
margin: 0;
}
.oap-meta-list__row + .oap-meta-list__row {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--oap-line);
}
.oap-meta-list__label {
margin: 0 0 6px;
font-size: 0.85rem;
color: var(--oap-muted);
}
.oap-meta-list__value {
margin: 0;
}
.oap-detail-hero__aside .oap-meta-list__row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: 14px;
align-items: start;
}
.oap-detail-hero__aside .oap-meta-list__row + .oap-meta-list__row {
margin-top: 12px;
padding-top: 12px;
}
.oap-detail-hero__aside .oap-meta-list__label {
margin: 0;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.oap-detail-hero__aside .oap-meta-list__value {
min-width: 0;
font-size: 0.95rem;
line-height: 1.75;
}
.oap-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
color: #6b7280;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.oap-card__date--count {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.06);
color: #334155;
letter-spacing: 0.04em;
}
.oap-type-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.6;
}
.oap-type-badge--place {
background: rgba(249, 115, 22, 0.1);
color: #c2410c;
}
.oap-type-badge--spot {
background: rgba(13, 148, 136, 0.1);
color: #0f766e;
}
.oap-type-badge--product {
background: rgba(124, 58, 237, 0.1);
color: #6d28d9;
}
.oap-type-badge--special {
background: rgba(217, 45, 32, 0.08);
color: var(--oap-accent);
}
.oap-card__title {
margin: 10px 0 10px;
font-size: 1.24rem;
font-weight: 800;
line-height: 1.28;
letter-spacing: -0.025em;
}
.oap-card__excerpt {
margin: 0 0 14px;
color: var(--oap-muted);
font-size: 0.92rem;
line-height: 1.78;
}
.oap-card__subline--history {
margin-top: -2px;
color: #475569;
font-size: 0.88rem;
font-weight: 600;
}
.oap-history-list {
display: grid;
gap: 6px;
}
.oap-detail-hero__aside .oap-panel--detail-facts:has(.oap-history-list) {
padding: 0 0 16px;
border: 0;
background: transparent;
box-shadow: none;
}
.oap-detail-hero__aside .oap-panel--detail-facts:has(.oap-history-list) .oap-panel__title {
margin-bottom: 14px;
}
.oap-history-list__row {
display: grid;
grid-template-columns: 168px minmax(0, 1fr) 64px;
gap: 14px;
align-items: center;
padding-bottom: 6px;
border-bottom: 1px solid rgba(17, 17, 17, 0.08);
font-size: 0.84rem;
}
.oap-history-list__row:last-child {
padding-bottom: 6px;
}
.oap-history-list__date,
.oap-history-list__show,
.oap-history-list__source {
min-width: 0;
white-space: nowrap;
}
.oap-history-list__date {
color: #475569;
font-weight: 700;
font-size: 0.8rem;
}
.oap-history-list__show {
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.92rem;
}
.oap-history-list__source {
text-align: right;
}
.oap-history-list__source a {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--oap-accent);
text-decoration: underline;
text-underline-offset: 0.14em;
}
.oap-history-list__source a:hover,
.oap-history-list__source a:focus-visible {
text-decoration: underline;
}
.oap-history-list__source i {
font-size: 0.78em;
}
.post-type-special .oap-card__excerpt,
.post-type-special .oap-compact-card__excerpt,
.oap-card--special .oap-card__excerpt,
.oap-compact-card--special .oap-compact-card__excerpt {
display: none !important;
}
.oap-card--special,
.oap-compact-card--special {
position: relative;
}
.oap-card--special .oap-card__meta,
.oap-card--special .oap-card__subline,
.oap-card--special .oap-card__terms,
.oap-compact-card--special .oap-compact-card__meta,
.oap-compact-card--special .oap-compact-card__terms {
display: none !important;
}
.oap-card--special .oap-card__title,
.oap-compact-card--special .oap-compact-card__title {
margin: 0;
font-size: 0;
line-height: 0;
}
.oap-card--special .oap-card__title a,
.oap-compact-card--special .oap-compact-card__title a {
position: absolute;
inset: 0;
z-index: 3;
display: block;
font-size: 0;
line-height: 0;
color: transparent;
}
.oap-card--special .oap-card__media,
.oap-compact-card--special .oap-compact-card__media {
margin-bottom: 0;
}
.oap-card,
.oap-compact-card {
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.oap-card:hover,
.oap-card:focus-within,
.oap-compact-card:hover,
.oap-compact-card:focus-within {
transform: translateY(-3px);
border-color: rgba(217, 45, 32, 0.14);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.oap-card--hero .oap-card__title {
font-size: clamp(1.5rem, 2.2vw, 2rem);
line-height: 1.18;
}
.oap-card--hero .oap-card__excerpt {
max-width: 42ch;
font-size: 0.98rem;
}
.oap-featured-grid .oap-card {
padding: 24px;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 252, 252, 0.94)),
#fff;
}
.oap-featured-special-card {
display: grid;
align-content: start;
gap: 14px;
min-height: 100%;
position: relative;
overflow: hidden;
border: 1px solid rgba(217, 45, 32, 0.1);
box-shadow:
0 16px 34px rgba(17, 17, 17, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.oap-featured-special-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 22px 22px 0 0;
background: linear-gradient(90deg, #d92d20 0%, #f97316 100%);
}
.oap-featured-special-card__meta {
row-gap: 10px;
position: relative;
z-index: 1;
}
.oap-featured-special-card__show {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: rgba(17, 17, 17, 0.05);
color: #374151;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: none;
}
.oap-featured-special-card .oap-card__title {
margin: 0;
display: flex;
align-items: baseline;
gap: 0.14em;
font-size: 1rem;
line-height: 1.2;
letter-spacing: -0.02em;
position: relative;
z-index: 1;
white-space: nowrap;
}
.oap-featured-special-card__link {
position: absolute;
inset: 0;
z-index: 2;
border-radius: 22px;
}
.oap-featured-special-card__title-minor {
font-size: 0.82em;
font-weight: 700;
color: #4b5563;
flex: 0 0 auto;
}
.oap-featured-special-card__title-count {
font-size: 1.72em;
font-weight: 900;
line-height: 0.92;
color: #111111;
flex: 0 0 auto;
}
.oap-featured-special-card__footer {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(17, 17, 17, 0.08);
position: relative;
z-index: 1;
}
.oap-featured-special-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--oap-accent);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.04em;
white-space: nowrap;
}
.oap-featured-grid .oap-card__meta {
gap: 8px;
}
.oap-featured-grid .oap-card__excerpt {
display: none;
}
.oap-featured-grid .oap-card__type {
color: var(--oap-accent);
}
.oap-card--place .oap-card__excerpt {
font-size: 0.94rem;
line-height: 1.78;
color: #4b5563;
}
.oap-card__subline {
margin: -4px 0 14px;
color: var(--oap-muted);
font-size: 0.8rem;
letter-spacing: 0.03em;
}
.oap-card--place .oap-card__subline {
margin-top: 0;
padding-top: 10px;
border-top: 1px solid rgba(17, 17, 17, 0.07);
font-size: 0.82rem;
}
.oap-card__terms {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.oap-card__terms--compact {
margin: 2px 0 10px;
gap: 6px;
}
.oap-term-card {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
justify-content: flex-start;
border-top: 3px solid transparent;
}
.oap-term-card__new-badge {
align-self: flex-start;
padding: 3px 8px;
border-radius: 999px;
background: rgba(217, 45, 32, 0.12);
color: var(--oap-accent);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
}
.oap-term-card--show {
--oap-term-accent: var(--oap-accent);
border-top-color: var(--oap-term-accent);
}
.oap-term-card--area {
border-top: 0;
}
.oap-term-card--image {
gap: 12px;
}
.oap-term-card__media {
display: block;
overflow: hidden;
margin: -20px -20px 2px;
border-radius: calc(var(--oap-radius) - 2px) calc(var(--oap-radius) - 2px) 0 0;
aspect-ratio: 16 / 9;
background: linear-gradient(145deg, #f3f4f6, #d1d5db);
}
.oap-term-card__media--placeholder {
display: grid;
place-items: center;
background: #f2f4f7;
color: rgba(100, 116, 139, 0.66);
}
.oap-term-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.oap-term-card__media-placeholder {
font-size: 0.94rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
}
.oap-term-card__name {
font-size: 1.12rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0;
}
.oap-term-card__meta-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.oap-term-card--area .oap-term-card__name {
flex: 1 1 auto;
min-width: 0;
}
.oap-term-card__count {
display: inline-flex;
align-items: baseline;
gap: 8px;
margin-top: -2px;
color: var(--oap-muted);
font-size: 0.9rem;
}
.oap-term-card--show .oap-term-card__count {
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: 6px;
text-align: right;
}
.oap-term-card--area .oap-term-card__count {
flex: 0 0 auto;
justify-content: flex-end;
margin-top: 0;
text-align: right;
}
.oap-term-card__count-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.88);
}
.oap-term-card__count-value {
font-size: 1rem;
font-weight: 700;
color: var(--oap-text);
}
.oap-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
}
.oap-tag-cloud--plain {
gap: 8px 12px;
}
.oap-tag {
position: relative;
display: inline-flex;
align-items: center;
margin: 0.35em 0 0.35em 18px;
text-decoration: none;
color: #4a4037;
font-size: 0.9rem;
font-weight: 700;
line-height: 1;
transition:
margin-right 220ms ease,
transform 180ms ease;
}
.oap-tag::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
border-radius: 999px;
background: #fff;
border: 1px solid #f0b8a2;
box-shadow:
inset 0 1px 1px rgba(188, 126, 73, 0.08),
0 0 0 3px rgba(255, 245, 239, 0.9);
z-index: 4;
}
.oap-tag__label {
position: relative;
z-index: 3;
display: inline-block;
min-height: 36px;
padding: 10px 14px 10px 28px;
border-width: 1px 3px 1px 1px;
border-style: solid;
border-color: #ebcabb #e26a44 #e7c0ad #e7c0ad;
border-radius: 999px 0 0 999px;
background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
box-shadow: 0 4px 12px rgba(180, 117, 79, 0.08);
white-space: nowrap;
}
.oap-tag__count {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 36px;
padding: 0 14px 0 10px;
margin-left: -1px;
font-size: 0.78rem;
font-weight: 700;
color: #fff;
background: #ef7f5d;
border-radius: 0 999px 999px 0;
white-space: nowrap;
}
.oap-tag__count::after {
content: "";
position: absolute;
top: 0;
right: -12px;
width: 0;
height: 0;
border-style: solid;
border-width: 18px 12px 18px 0;
border-color: transparent #fff9f3 transparent transparent;
}
.oap-tag:hover,
.oap-tag:focus-visible {
color: #3b2f27;
transform: translateY(-1px);
}
.oap-tag:hover .oap-tag__label,
.oap-tag:focus-visible .oap-tag__label {
border-right-color: #cf5431;
background: linear-gradient(180deg, #ffffff 0%, #fff4ea 100%);
}
.oap-tag:hover .oap-tag__count,
.oap-tag:focus-visible .oap-tag__count {
background: #e96f48;
}
.oap-tag--plain {
margin: 0;
}
.oap-tag--plain .oap-tag__label {
min-height: 34px;
padding: 9px 14px 9px 28px;
border-width: 1px;
border-right-color: #e7c0ad;
border-radius: 999px;
}
.oap-tag--plain .oap-tag__count {
display: none;
}
.oap-card__terms.oap-tag-cloud,
.oap-compact-card__terms.oap-tag-cloud,
.oap-detail-meta-chips.oap-tag-cloud {
gap: 8px 12px;
}
.oap-card__terms .oap-tag,
.oap-compact-card__terms .oap-tag,
.oap-detail-meta-chips .oap-tag {
position: relative;
z-index: 3;
}
.oap-detail-meta-chips .oap-tag {
padding: 0;
border: 0;
background: transparent;
color: #4a4037;
}
.oap-card__terms .oap-tag,
.oap-compact-card__terms .oap-tag {
margin: 0;
font-size: 0.8rem;
font-weight: 600;
color: var(--oap-muted);
}
.oap-card__terms .oap-tag::before,
.oap-compact-card__terms .oap-tag::before {
content: none;
}
.oap-card__terms .oap-tag__label,
.oap-compact-card__terms .oap-tag__label {
min-height: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
white-space: normal;
}
.oap-card__terms .oap-tag:hover,
.oap-card__terms .oap-tag:focus-visible,
.oap-compact-card__terms .oap-tag:hover,
.oap-compact-card__terms .oap-tag:focus-visible {
color: var(--oap-muted);
transform: none;
}
.oap-card__terms .oap-tag:hover .oap-tag__label,
.oap-card__terms .oap-tag:focus-visible .oap-tag__label,
.oap-compact-card__terms .oap-tag:hover .oap-tag__label,
.oap-compact-card__terms .oap-tag:focus-visible .oap-tag__label {
border-right-color: transparent;
background: transparent;
}
.oap-empty-state {
text-align: center;
color: var(--oap-muted);
background: var(--oap-soft);
}
.oap-site-footer {
position: relative;
margin-top: 64px;
padding: 56px 0 28px;
background:
radial-gradient(circle at top left, rgba(217, 45, 32, 0.16), transparent 28%),
linear-gradient(180deg, #171717, #0f0f10);
color: #f5f5f5;
overflow: hidden;
}
.home .oap-page {
padding-bottom: 0;
}
.home .oap-site-footer {
margin-top: 0;
}
.oap-site-footer__bg {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.04) 100%);
pointer-events: none;
}
.oap-site-footer__inner {
position: relative;
z-index: 1;
display: grid;
gap: 28px;
}
.oap-site-footer__lead {
padding-bottom: 4px;
}
.oap-site-footer__brand {
margin: 0;
font-size: clamp(1.55rem, 2.4vw, 2.1rem);
}
.oap-site-footer__description {
display: grid;
gap: 6px;
margin-top: 18px;
color: rgba(250, 247, 245, 0.78);
font-size: 0.95rem;
line-height: 1.65;
text-wrap: pretty;
}
.oap-site-footer__description p {
margin: 0;
}
.oap-site-footer__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
padding-top: 0;
}
.oap-site-footer__title {
margin: 0 0 12px;
font-size: 1rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.oap-site-footer__mini {
margin: 0;
color: rgba(245, 245, 245, 0.72);
}
.oap-link-list {
margin: 0;
padding: 0;
list-style: none;
}
.oap-link-list li + li {
margin-top: 8px;
}
.oap-link-list a {
color: rgba(245, 245, 245, 0.92);
}
.oap-link-list a:hover,
.oap-link-list a:focus-visible {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 3px;
}
.oap-site-footer__copy {
margin: 0;
color: rgba(245, 245, 245, 0.72);
font-size: 0.85rem;
}
.oap-site-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.oap-site-footer__note {
margin: 0;
color: rgba(245, 245, 245, 0.5);
font-size: 0.85rem;
}
.oap-back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 60;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 16px 32px rgba(17, 24, 39, 0.12);
color: #111;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-decoration: none;
backdrop-filter: blur(12px);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.oap-back-to-top:hover,
.oap-back-to-top:focus-visible {
transform: translateY(-2px);
box-shadow: 0 20px 36px rgba(17, 24, 39, 0.16);
background: #fff;
}
.oap-back-to-top__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 999px;
background: #f6f7f9;
color: var(--oap-accent);
font-size: 0.78rem;
}
.oap-back-to-top__label {
line-height: 1;
}
.oap-feedback-stack {
display: grid;
gap: 12px;
margin-top: 24px;
}
.oap-request-toggle {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.oap-request-toggle__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 16px;
border: 1px solid rgba(217, 45, 32, 0.14);
border-radius: 999px;
background: #fff7f5;
color: var(--oap-accent);
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.oap-request-toggle__btn:hover,
.oap-request-toggle__btn:focus-visible {
background: #ffeae5;
border-color: rgba(217, 45, 32, 0.24);
transform: translateY(-1px);
text-decoration: none;
}
.oap-request-toggle__panel {
margin-top: 10px;
padding: 20px 22px;
background: #fff;
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: 16px;
box-shadow: 0 12px 28px rgba(17, 24, 39, 0.05);
position: relative;
}
.oap-request-note {
margin: 0 0 16px;
color: var(--oap-muted);
font-size: 0.82rem;
line-height: 1.7;
}
.oap-request-toggle--bug-report .oap-request-toggle__btn {
border-color: rgba(17, 17, 17, 0.1);
background: #f8f9fb;
color: #111827;
}
.oap-request-toggle--bug-report .oap-request-toggle__btn:hover,
.oap-request-toggle--bug-report .oap-request-toggle__btn:focus-visible {
background: #eef2f7;
border-color: rgba(17, 17, 17, 0.16);
}
.oap-request-toggle--request {
margin-top: 8px;
display: flex;
justify-content: flex-end;
}
.oap-floating-report {
position: fixed;
right: 20px;
bottom: 76px;
z-index: 55;
display: grid;
justify-items: center;
}
.oap-floating-report .oap-request-toggle {
margin: 0;
padding-top: 0;
border-top: 0;
}
.oap-floating-report .oap-request-toggle__btn {
display: inline-grid;
grid-auto-flow: row;
justify-items: center;
align-items: center;
gap: 2px;
min-width: 92px;
padding: 10px 12px;
line-height: 1.15;
text-align: center;
white-space: normal;
box-shadow: 0 14px 32px rgba(17, 24, 39, 0.14);
}
.oap-floating-report .oap-request-toggle__btn-text {
display: inline-grid;
gap: 0;
justify-items: center;
}
.oap-floating-report .oap-request-toggle__panel {
width: min(360px, calc(100vw - 32px));
}
.oap-request-page__body {
padding: 24px;
background: var(--oap-soft);
border-radius: var(--oap-radius);
}
.oap-request-page__body .wpcf7-form p {
margin: 0 0 14px;
}
.oap-request-page__body .wpcf7-form label,
.oap-request-toggle__panel .wpcf7-form label {
display: grid;
gap: 8px;
color: #111827;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.6;
}
.oap-request-page__body .wpcf7-form-control-wrap,
.oap-request-toggle__panel .wpcf7-form-control-wrap {
display: block;
}
.oap-request-page__body input[type="text"],
.oap-request-page__body input[type="email"],
.oap-request-page__body input[type="url"],
.oap-request-page__body select,
.oap-request-page__body textarea,
.oap-request-toggle__panel input[type="text"],
.oap-request-toggle__panel input[type="email"],
.oap-request-toggle__panel input[type="url"],
.oap-request-toggle__panel select,
.oap-request-toggle__panel textarea {
width: 100%;
max-width: 100%;
padding: 14px 16px;
border: 1px solid var(--oap-line);
border-radius: 12px;
background: #fff;
color: #111827;
font: inherit;
box-sizing: border-box;
}
.oap-request-page__body textarea,
.oap-request-toggle__panel textarea {
min-height: 180px;
resize: vertical;
}
.oap-request-toggle--bug-report textarea,
.oap-floating-report textarea {
min-height: 120px;
}
.oap-request-page__body select,
.oap-request-toggle__panel select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
background-position: calc(100% - 18px) calc(50% - 1px), calc(100% - 13px) calc(50% - 1px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 36px;
}
.oap-request-page__body input[type="submit"],
.oap-request-toggle__panel input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
padding: 13px 22px;
border: 0;
border-radius: 999px;
background: var(--oap-accent);
color: #fff;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
}
.oap-request-page__body input[type="submit"]:hover,
.oap-request-toggle__panel input[type="submit"]:hover {
opacity: 0.92;
}
.oap-request-toggle__panel .wpcf7-spinner,
.oap-request-page__body .wpcf7-spinner {
margin: 10px 0 0;
}
.oap-request-toggle__panel .wpcf7-response-output,
.oap-request-page__body .wpcf7-response-output {
margin: 14px 0 0 !important;
padding: 10px 12px !important;
border-radius: 12px;
font-size: 0.88rem;
}
.oap-entry-content--special > h2 {
margin: 0;
font-size: 1.5rem;
line-height: 1.35;
}
.oap-entry-content--special > ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.oap-entry-content--special > ul > li {
display: grid;
gap: 12px;
padding: 20px;
border: 1px solid var(--oap-line);
border-radius: 18px;
background: #fff;
box-shadow: var(--oap-shadow);
}
.oap-entry-content--special > ul > li > :first-child {
margin: 0;
font-size: 1.08rem;
font-weight: 800;
line-height: 1.45;
}
.oap-entry-content--special > ul > li p {
margin: 0;
color: #374151;
font-size: 0.92rem;
line-height: 1.8;
}
.oap-entry-content--special > ul > li strong {
color: #111827;
font-weight: 700;
}
.oap-breadcrumbs {
padding-top: 24px;
}
.oap-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
color: var(--oap-muted);
font-size: 0.9rem;
}
.oap-breadcrumbs__item + .oap-breadcrumbs__item::before {
content: "/";
margin-right: 8px;
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 1120px) {
.oap-site-header__inner {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.oap-site-nav {
margin-left: 0;
justify-content: flex-start;
}
}
@media (min-width: 768px) {
.oap-site-search {
width: 0;
flex-basis: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transition: width 0.22s ease, flex-basis 0.22s ease, opacity 0.18s ease;
}
.oap-site-header.is-stuck .oap-site-search {
width: 320px;
flex-basis: 320px;
opacity: 1;
pointer-events: auto;
display: flex;
align-items: center;
align-self: center;
margin-block: 0;
}
.oap-site-header.is-stuck .oap-site-header__inner {
align-items: center;
}
.oap-site-header.is-stuck .oap-search-form {
align-items: center;
margin-block: 0;
}
}
@media (max-width: 960px) {
.oap-site-header__inner {
grid-template-columns: 1fr;
gap: 16px;
}
.oap-branding {
align-items: flex-start;
gap: 8px;
}
.oap-site-nav {
margin-left: 0;
justify-content: flex-start;
}
.oap-hero__title {
white-space: normal;
}
.oap-detail-hero,
.oap-featured-grid,
.oap-three-column,
.oap-about-facts,
.oap-site-footer__grid {
grid-template-columns: 1fr;
}
.oap-layout {
grid-template-columns: 1fr;
}
.oap-info-grid {
grid-template-columns: 1fr;
}
.oap-key-place-info {
grid-template-columns: 1fr;
}
.oap-place-summary-grid {
grid-template-columns: 1fr;
}
.oap-grid--cards,
.oap-grid--terms,
.oap-site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.oap-special-list {
grid-template-columns: 1fr;
}
.oap-hero {
padding-top: 40px;
}
.oap-hero__body {
padding: 28px 0 24px;
}
.oap-hero__grid {
grid-template-columns: 1fr;
gap: 24px;
}
.oap-hero__side {
padding: 20px;
}
.oap-directory-promo__grid {
grid-template-columns: 1fr;
}
.oap-hero__eyebrow {
margin-bottom: 12px;
}
.oap-about-intro {
padding: 22px 20px;
}
.oap-about-fact {
padding: 16px;
}
.oap-product-cta__actions {
grid-template-columns: 1fr;
}
}
@media (max-width: 1120px) and (min-width: 641px) {
.oap-site-header__inner {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 8px 20px;
}
.oap-branding {
grid-column: 1 / -1;
display: flex;
align-items: center;
margin-right: 0;
gap: 12px;
}
.oap-branding__text {
flex: 1 1 auto;
max-width: none;
min-width: 0;
}
.oap-site-nav {
grid-column: 1;
margin-left: 0;
gap: 18px;
}
.oap-site-search {
grid-column: 2;
width: 100%;
flex: 1 1 auto;
max-width: 320px;
padding-right: 0;
margin-left: auto;
}
.oap-site-header.is-stuck .oap-site-search {
width: 100%;
flex-basis: auto;
max-width: 320px;
}
}
.pagination {
margin-top: 32px;
}
.pagination .nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
}
.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0 14px;
border: 1px solid rgba(16, 24, 40, 0.12);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--oap-text);
font-size: 0.95rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition:
transform 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
color 0.18s ease,
background-color 0.18s ease;
}
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
border-color: rgba(217, 45, 32, 0.22);
color: var(--oap-accent);
box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
transform: translateY(-1px);
}
.pagination .page-numbers.current {
border-color: transparent;
background: var(--oap-accent);
color: #fff;
box-shadow: 0 12px 24px rgba(217, 45, 32, 0.2);
}
.pagination .page-numbers.dots {
min-width: auto;
padding: 0 4px;
border: 0;
background: transparent;
box-shadow: none;
color: var(--oap-text-muted);
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
min-width: auto;
padding: 0 18px;
background: rgba(248, 250, 252, 0.9);
}
@media (max-width: 640px) {
.oap-breadcrumbs {
padding-top: 16px;
}
#search-by-show,
#search-by-area,
#search-by-genre {
padding: 28px 10px;
}
#search-by-show,
#search-by-area,
#search-by-genre {
scroll-margin-top: 16px;
}
#search-by-area {
margin-top: 0;
}
#search-by-area + .oap-section {
margin-top: 0;
}
.oap-home-update {
margin-top: 16px;
gap: 6px;
}
.oap-home-update__inner {
padding: 12px 14px;
}
.oap-home-update__eyebrow {
white-space: normal;
line-height: 1.2;
font-size: 0.74rem;
letter-spacing: 0.06em;
}
.oap-home-update__list {
min-height: 4.2em;
}
.oap-home-update__item {
gap: 8px;
font-size: 0.84rem;
line-height: 1.6;
align-items: flex-start;
inset: 0;
}
.oap-home-update__date {
flex: 0 0 72px;
font-size: 0.8rem;
}
#search-by-show .oap-grid--terms,
#search-by-area .oap-grid--terms {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.oap-directory-promo__card {
padding: 22px 18px 18px;
gap: 12px;
}
.oap-directory-promo__icon {
right: 16px;
top: 18px;
font-size: 2rem;
}
.oap-directory-promo__title {
font-size: 1.45rem;
}
.oap-directory-promo__copy {
font-size: 0.86rem;
line-height: 1.72;
}
.oap-directory-promo__footer {
align-items: flex-start;
flex-direction: column;
}
.oap-featured-grid {
display: flex;
overflow-x: auto;
gap: 14px;
padding: 2px 4vw 10px 0;
margin-right: -4vw;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.oap-featured-grid .oap-card {
flex: 0 0 82vw;
min-width: 82vw;
scroll-snap-align: start;
}
.oap-featured-special-card {
gap: 12px;
}
.oap-featured-special-card .oap-card__title {
font-size: 0.88rem;
}
.oap-featured-special-card__title-minor {
font-size: 0.76em;
}
.oap-featured-special-card__title-count {
font-size: 1.5em;
}
.oap-featured-special-card__footer {
justify-content: flex-end;
}
.oap-home-column__list {
display: flex;
overflow-x: auto;
gap: 14px;
padding: 2px 4vw 10px 0;
margin-right: -4vw;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.oap-home-column__list > * {
flex: 0 0 82vw;
min-width: 82vw;
scroll-snap-align: start;
}
.oap-featured-grid::-webkit-scrollbar,
.oap-home-column__list::-webkit-scrollbar {
display: none;
}
.oap-featured-grid,
.oap-home-column__list {
scrollbar-width: none;
}
.home .oap-site-footer {
padding-bottom: calc(56px + 20px + env(safe-area-inset-bottom, 0px));
}
.home .oap-back-to-top {
right: 16px;
bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}
.oap-floating-report {
right: 16px;
bottom: calc(164px + env(safe-area-inset-bottom, 0px));
}
.oap-site-header {
position: static;
}
.oap-shell {
width: min(calc(100% - 16px), var(--oap-max-width));
}
.oap-site-header__inner {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 6px 12px;
overflow-x: clip;
padding: 2px 0 6px;
}
.oap-grid--cards,
.oap-grid--terms,
.oap-site-footer__grid {
grid-template-columns: 1fr;
}
.oap-local-supermarket-overview__grid {
grid-template-columns: 1fr;
}
.oap-local-supermarket-card__facts {
grid-template-columns: 1fr;
}
.oap-local-supermarket-card__facts div {
grid-template-columns: 1fr;
gap: 3px;
}
.oap-branding {
display: contents;
}
.oap-branding__text {
grid-column: 1 / -1;
grid-row: 1;
min-width: 0;
max-width: none;
}
.oap-branding__logo {
grid-column: 1;
grid-row: 2;
}
.oap-branding__tagline {
font-size: 0.72rem;
line-height: 1.3;
white-space: normal;
overflow-wrap: normal;
word-break: keep-all;
text-wrap: balance;
}
.oap-site-nav {
grid-column: 2;
grid-row: 2;
margin-left: 0;
justify-content: flex-start;
align-items: center;
gap: 18px;
}
.oap-site-search {
display: none;
}
.oap-search-form {
flex-direction: row;
width: 100%;
}
.oap-mobile-search .oap-search-form {
gap: 10px;
min-width: 0;
align-items: stretch;
margin-bottom: 0;
}
.oap-mobile-search .oap-search-form__field {
flex: 1 1 auto;
width: auto;
min-width: 0;
background: rgba(247, 247, 247, 0.98);
}
.oap-mobile-search .oap-search-form__button {
min-width: 74px;
padding-inline: 16px;
}
.oap-search-form__field {
padding: 13px 16px;
}
.oap-search-form__button {
min-width: 80px;
padding: 13px 18px;
}
.oap-hero__title {
font-size: 1.58rem;
line-height: 1.16;
letter-spacing: -0.03em;
white-space: normal;
}
.oap-hero__body {
padding: 12px 0 20px;
}
.oap-section__head--split {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: nowrap;
}
.oap-section__head--split .oap-section__title {
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
.oap-section__head--split .oap-section__more-link {
flex: 0 0 auto;
font-size: 0.72rem;
letter-spacing: 0.06em;
}
.oap-about-intro__lead {
font-size: 1.05rem;
}
.oap-request-toggle {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--oap-line);
}
.oap-request-toggle__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
background: none;
color: var(--oap-accent);
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
}
.oap-request-toggle__btn:hover,
.oap-request-toggle__btn:focus-visible {
text-decoration: underline;
}
.oap-request-toggle__panel {
margin-top: 16px;
padding: 20px;
background: var(--oap-soft);
border-radius: var(--oap-radius);
position: relative;
}
.oap-request-note {
margin: 0 0 16px;
color: var(--oap-muted);
font-size: 0.82rem;
line-height: 1.7;
}
.oap-request-page__body {
padding: 24px;
background: var(--oap-soft);
border-radius: var(--oap-radius);
}
.oap-request-page__body .wpcf7-form p {
margin: 0 0 14px;
}
.oap-request-page__body input[type="text"],
.oap-request-page__body textarea,
.oap-request-toggle__panel input[type="text"],
.oap-request-toggle__panel textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--oap-line);
border-radius: 12px;
background: #fff;
font: inherit;
}
.oap-request-page__body textarea,
.oap-request-toggle__panel textarea {
min-height: 120px;
resize: vertical;
}
.oap-request-toggle__panel > .oap-request-toggle__close {
position: absolute;
top: -18px;
right: -18px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
margin: 0;
appearance: none;
-webkit-appearance: none;
border: 1px solid rgba(148, 163, 184, 0.72);
border-radius: 999px;
background: #fff;
color: var(--oap-muted);
font-size: 1.35rem;
font-family: inherit;
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08);
z-index: 2;
}
.oap-request-toggle__panel > .oap-request-toggle__close:hover,
.oap-request-toggle__panel > .oap-request-toggle__close:focus-visible {
background: #fff;
border-color: rgba(100, 116, 139, 0.92);
color: var(--oap-ink);
}
.oap-request-toggle__panel > button.oap-request-toggle__close {
position: absolute !important;
top: -18px !important;
right: -18px !important;
left: auto !important;
bottom: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 999px !important;
border: 1px solid rgba(148, 163, 184, 0.72) !important;
background: #fff !important;
color: #475569 !important;
font-size: 1.35rem !important;
font-weight: 500 !important;
line-height: 1 !important;
box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08) !important;
z-index: 5 !important;
}
.oap-request-toggle--bug-report textarea,
.oap-floating-report textarea {
min-height: 72px;
}
.oap-request-page__body input[type="submit"],
.oap-request-toggle__panel input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
padding: 13px 22px;
border: 0;
border-radius: 999px;
background: var(--oap-accent);
color: #fff;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
}
.oap-request-page__body input[type="submit"]:hover,
.oap-request-toggle__panel input[type="submit"]:hover {
opacity: 0.92;
}
.oap-site-footer__request-link {
margin: 14px 0 0;
}
.oap-site-footer__request-link a {
color: #fff;
font-weight: 700;
}
.oap-site-footer__request-link a:hover {
text-decoration: underline;
}
.oap-request-toggle.is-open > .oap-request-toggle__btn {
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
.oap-request-toggle--bug-report .oap-request-toggle__panel textarea,
.oap-floating-report .oap-request-toggle__panel textarea,
.oap-request-toggle--bug-report textarea,
.oap-floating-report textarea {
min-height: 72px !important;
height: 72px !important;
}
}