picture.rk-photo{display:contents} #rk-clay-article{ color-scheme: light; --ink: #26364a; --accent: #007ffb; --accent-deep: #0068d5; --accent-text: #0064c8; --price-lowest: #c6333b; --price-lowest-soft: #fff0f1; --price-lowest-border: #f4bec4; --plum: #243f62; --cream: #f3f8ff; --hand: "Klee One", "Article Hand", "UD Digi Kyokasho NP-R", "Noto Serif JP", serif; } #rk-clay-article *{ box-sizing: border-box; } #rk-clay-article{ margin: 0; background: #ffffff; color: var(--ink); font-family: "Article Sans", "Noto Sans JP", "Yu Gothic", sans-serif; } #rk-clay-article img{ display: block; max-width: 100%; } #rk-clay-article a{ color: inherit; } #rk-clay-article a:focus-visible, #rk-clay-article summary:focus-visible{ outline: 3px solid #0056ad; outline-offset: 4px; } #rk-clay-article .sr-only, #rk-clay-article .skip-link:not(:focus){ position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #rk-clay-article .skip-link:focus{ position: fixed; z-index: 30; top: 12px; left: 12px; padding: 12px 18px; background: #fff; border-radius: 8px; } /* Measurements use a 724 px artboard, scaled with the article container. */ #rk-clay-article .article-shell{ width: min(100%, 724px); margin: 0 auto; overflow: clip; background: #fcfdff; box-shadow: 0 0 60px #17365312; } #rk-clay-article .article-shell > *, #rk-clay-article .map-dialog{ --u: var(--article-unit, min(1px, calc(100vw / 724))); font-size: calc(20 * var(--u)); line-height: 1.48; } #rk-clay-article .article-shell h1, #rk-clay-article .article-shell h2, #rk-clay-article .article-shell h3, #rk-clay-article .article-shell h4, #rk-clay-article .article-shell p{ margin: 0; } #rk-clay-article .article-shell button, #rk-clay-article .article-shell input, #rk-clay-article .map-dialog button{ font: inherit; } #rk-clay-article button, #rk-clay-article input, #rk-clay-article summary, #rk-clay-article a{ -webkit-tap-highlight-color: transparent; } #rk-clay-article button{ cursor: pointer; } #rk-clay-article button:disabled{ cursor: default; opacity: .45; } #rk-clay-article button:focus-visible, #rk-clay-article input:focus-visible, #rk-clay-article [tabindex]:focus-visible{ outline: 3px solid #0056ad; outline-offset: 3px; } #rk-clay-article [hidden]{ display: none !important; } #rk-clay-article .icon{ display: block; width: calc(38 * var(--u)); height: calc(40 * var(--u)); flex: none; } /* Approved 1024 px hero: title, paired hosts and bubbles scale together. */ #rk-clay-article .hero{ position: relative; isolation: isolate; height: calc(499 * var(--u)); overflow: hidden; background: #f8fbff; color: #172943; } #rk-clay-article .hero-photo{ position: absolute; inset: calc(-43 * var(--u)) calc(-22 * var(--u)) auto; width: calc(768 * var(--u)); max-width: none; height: calc(521 * var(--u)); object-fit: cover; filter: blur(calc(1.7 * var(--u))) saturate(.75); } #rk-clay-article .hero-wash{ position: absolute; inset: 0; background: linear-gradient(180deg, #f9fcffbd 0%, #fbfdfff0 22%, #fbfdffe3 31%, #f7fbff73 51%, #f9fcff7d 79%, #f9fcfff5 93%, #f8fbff 100%); } #rk-clay-article .hotel-name{ position: absolute; z-index: 2; top: calc(33 * var(--u)); inset-inline: 0; text-align: center; font-size: calc(54 * var(--u)); font-weight: 900; line-height: 1.15; letter-spacing: -.055em; white-space: nowrap; transform: translateX(calc(6 * var(--u))); } #rk-clay-article .hotel-name-ja{ position: absolute; z-index: 2; top: calc(95 * var(--u)); inset-inline: 0; text-align: center; font-size: calc(30.5 * var(--u)); font-weight: 900; line-height: 1.25; letter-spacing: .015em; white-space: nowrap; transform: translateX(calc(5 * var(--u))); } #rk-clay-article .hero-introduction{ position: absolute; z-index: 2; top: calc(135 * var(--u)); inset-inline: 0; text-align: center; font-size: calc(21.3 * var(--u)); font-weight: 850; line-height: 1.3; letter-spacing: -.025em; white-space: nowrap; } #rk-clay-article .hero-hosts{ position: absolute; z-index: 1; top: calc(151 * var(--u)); width: calc(530 * var(--u)); max-width: none; height: auto; } /* A shared transparent sprite keeps both hosts crisp, with the reference gap. */ #rk-clay-article .hero-hosts-guide{ left: calc(89 * var(--u)); clip-path: polygon(0 0, 54.4% 0, 54.4% 48%, 50.8% 54%, 50.8% 100%, 0 100%); } #rk-clay-article .hero-hosts-review{ left: calc(119 * var(--u)); clip-path: polygon(54.4% 0, 100% 0, 100% 100%, 50.8% 100%, 50.8% 54%, 54.4% 48%); } #rk-clay-article .hero-bubble{ position: absolute; z-index: 3; top: calc(146 * var(--u)); width: calc(169 * var(--u)); height: calc(106 * var(--u)); font-size: calc(29 * var(--u)); font-weight: 900; line-height: 1; letter-spacing: -.025em; text-align: center; white-space: nowrap; } #rk-clay-article .hero-bubble-official{ left: calc(40 * var(--u)); color: var(--accent); transform: rotate(-2deg); } #rk-clay-article .hero-bubble-review{ right: calc(33 * var(--u)); color: #172943; } #rk-clay-article .hero-bubble-shape{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; fill: #fff; stroke: #89d2ff; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 calc(1.5 * var(--u)) calc(2.5 * var(--u)) #219beb45); } #rk-clay-article .hero-bubble-review .hero-bubble-shape{ transform: scaleX(-1); } #rk-clay-article .hero-bubble span{ position: absolute; top: calc(24 * var(--u)); inset-inline: 0; } #rk-clay-article .hero-bubble::before, #rk-clay-article .hero-bubble::after{ content: ""; position: absolute; width: calc(5 * var(--u)); height: calc(17 * var(--u)); border-radius: calc(3 * var(--u)); background: #08a6ed; } #rk-clay-article .hero-bubble-official::before{ top: calc(-4 * var(--u)); left: calc(1 * var(--u)); transform: rotate(-47deg); } #rk-clay-article .hero-bubble-official::after{ top: calc(-16 * var(--u)); left: calc(14 * var(--u)); transform: rotate(-22deg); } #rk-clay-article .hero-bubble-review::before{ top: calc(-22 * var(--u)); right: calc(23 * var(--u)); transform: rotate(22deg); } #rk-clay-article .hero-bubble-review::after{ top: calc(-13 * var(--u)); right: calc(9 * var(--u)); transform: rotate(46deg); } #rk-clay-article .tool-bubble::after{ content: ""; position: absolute; right: calc(7 * var(--u)); bottom: calc(-7 * var(--u)); width: calc(24 * var(--u)); height: calc(25 * var(--u)); background: inherit; clip-path: polygon(0 0, 100% 100%, 100% 0); } #rk-clay-article .chapter-index{ display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: calc(18 * var(--u)) calc(25 * var(--u)); margin-top: calc(-24 * var(--u)); position: sticky; top: 0; z-index: 20; background: #f8fbff; border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0; border-bottom: calc(1.5 * var(--u)) solid #d6e5f5; } #rk-clay-article .chapter-index a{ display: flex; align-items: center; justify-content: center; gap: calc(9 * var(--u)); text-decoration: none; font-size: calc(15.5 * var(--u)); font-weight: 750; white-space: nowrap; border-left: calc(1.5 * var(--u)) solid #d3e2f3; line-height: 1.2; } #rk-clay-article .chapter-index a:first-child{ border-left: 0; } #rk-clay-article .chapter-index b{ color: #a7b5c6; font-size: calc(34 * var(--u)); font-weight: 900; letter-spacing: -.05em; } #rk-clay-article .chapter-index a[aria-current="location"] b, #rk-clay-article .chapter-index a:hover b{ color: var(--accent); } #rk-clay-article .chapter-index a span{ position: relative; } #rk-clay-article .chapter-index a[aria-current="location"] span::after{ content: ""; position: absolute; bottom: calc(-10 * var(--u)); left: 0; width: calc(56 * var(--u)); height: calc(3 * var(--u)); background: var(--accent); } #rk-clay-article .chapter-sheet{ position: relative; isolation: isolate; background: #1d3555; scroll-margin-top: 0; } #rk-clay-article .official-panel{ position: relative; z-index: 2; background: #fcfdff; border-radius: 0 0 calc(30 * var(--u)) calc(30 * var(--u)); padding: 0 calc(26 * var(--u)) calc(24 * var(--u)); } #rk-clay-article .official-heading{ position: relative; overflow: hidden; height: calc(118 * var(--u)); } #rk-clay-article .chapter-number{ position: absolute; top: calc(6 * var(--u)); left: calc(-3 * var(--u)); font-size: calc(101 * var(--u)); font-weight: 900; line-height: 1.05; letter-spacing: -.065em; color: var(--accent); } #rk-clay-article .official-heading h2{ position: absolute; top: calc(32 * var(--u)); left: calc(124 * var(--u)); font-size: calc(36 * var(--u)); font-weight: 900; line-height: 1.22; letter-spacing: -.05em; white-space: nowrap; } #rk-clay-article .official-heading h2::after, #rk-clay-article .conclusion-heading h2::after, #rk-clay-article .tool-heading h3::after, #rk-clay-article .tool-heading h2::after, #rk-clay-article .price-table-heading > span:last-child::after{ content: ""; display: block; margin-top: calc(10 * var(--u)); width: calc(65 * var(--u)); height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--accent); } #rk-clay-article .source-badge{ position: absolute; right: 0; width: calc(175 * var(--u)); height: calc(44 * var(--u)); display: flex; justify-content: center; align-items: center; color: #fff; text-decoration: none; font-size: calc(26 * var(--u)); font-weight: 800; letter-spacing: .04em; border-radius: calc(30 * var(--u)); line-height: 1; } #rk-clay-article .official-badge{ top: calc(21 * var(--u)); background: linear-gradient(100deg, var(--accent), var(--accent-deep)); } #rk-clay-article .official-source{ position: absolute; top: calc(72 * var(--u)); right: 0; font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: -.035em; } #rk-clay-article .chapter-01 .official-content{ height: calc(410 * var(--u)); } #rk-clay-article .chapter-01 .fact-card{ padding-top: calc(12 * var(--u)); padding-bottom: calc(12 * var(--u)); } #rk-clay-article .chapter-01 .fact-copy{ line-height: 1.4; } #rk-clay-article .official-content{ display: grid; grid-template-columns: 282fr 375fr; gap: calc(15 * var(--u)); } #rk-clay-article .official-photos{ display: grid; grid-template-rows: 166fr 230fr; gap: calc(10 * var(--u)); min-height: 0; } #rk-clay-article .official-photos img{ width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: calc(8 * var(--u)); } #rk-clay-article .official-facts{ display: grid; gap: calc(14 * var(--u)); min-width: 0; } #rk-clay-article .fact-card{ display: flex; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(13 * var(--u)); background: linear-gradient(105deg, #edf5ff, #f5f9ff); border-radius: calc(12 * var(--u)); min-height: 0; } #rk-clay-article .fact-card > .icon{ width: calc(33 * var(--u)); height: calc(39 * var(--u)); color: var(--accent); } #rk-clay-article .fact-card > div{ min-width: 0; flex: 1; } #rk-clay-article .fact-card h3, #rk-clay-article .route-box h3, #rk-clay-article .room-box h3, #rk-clay-article .breakfast-box h3, #rk-clay-article .price-box h3{ font-size: calc(23 * var(--u)); font-weight: 800; line-height: 1.3; color: var(--accent-text); } #rk-clay-article .fact-copy{ font-size: calc(19.5 * var(--u)); font-weight: 450; line-height: 1.48; margin-top: calc(7 * var(--u)); overflow-wrap: anywhere; } #rk-clay-article .block-bold{ display: block; font-weight: 750; } #rk-clay-article .minibar-label{ display: block; font-size: calc(23 * var(--u)); line-height: 1.25; margin-bottom: calc(5 * var(--u)); } #rk-clay-article .price-box{ position: relative; margin-top: calc(14 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: linear-gradient(110deg, #eaf3ff, #f4f9ff); } #rk-clay-article .yen-icon{ position: absolute; left: calc(19 * var(--u)); top: calc(14 * var(--u)); width: calc(38 * var(--u)); height: calc(41 * var(--u)); border: calc(3 * var(--u)) solid var(--accent); border-radius: 50%; color: var(--accent); font-size: calc(30 * var(--u)); font-weight: 750; line-height: 1.03; text-align: center; } #rk-clay-article .price-box h3{ margin-left: calc(61 * var(--u)); white-space: nowrap; } #rk-clay-article .price-box h3 small{ font-size: calc(17 * var(--u)); } #rk-clay-article .price-box > p{ margin: calc(7 * var(--u)) 0 calc(10 * var(--u)) calc(61 * var(--u)); font-size: calc(17 * var(--u)); } #rk-clay-article .price-grid{ display: grid; grid-template-columns: repeat(3, 1fr); padding: calc(10 * var(--u)) 0; background: #fff; border-radius: calc(7 * var(--u)); } #rk-clay-article .price-cell{ text-align: center; min-width: 0; border-left: calc(1.5 * var(--u)) solid #d5dfe9; font-size: calc(17 * var(--u)); line-height: 1.2; } #rk-clay-article .price-cell:first-child{ border: 0; } #rk-clay-article .price-cell strong{ display: block; font-size: calc(46 * var(--u)); line-height: 1.35; color: var(--accent); font-weight: 850; letter-spacing: -.06em; } #rk-clay-article .price-cell small{ font-size: calc(28 * var(--u)); } #rk-clay-article .section-guide{ position: absolute; width: calc(155 * var(--u)); height: auto; max-width: none; z-index: 0; } #rk-clay-article .section-bubble{ position: absolute; font-size: calc(16 * var(--u)); line-height: 1.4; padding: calc(18 * var(--u)) calc(22 * var(--u)); background: #f8fbff; border: calc(1 * var(--u)) solid #d8e5f2; border-radius: 50%; box-shadow: 0 calc(3 * var(--u)) calc(5 * var(--u)) #1d3f6915; } #rk-clay-article .chapter-02 .official-heading{ height: calc(205 * var(--u)); } #rk-clay-article .chapter-02 .chapter-number{ top: calc(70 * var(--u)); } #rk-clay-article .chapter-02 .official-heading h2{ top: calc(88 * var(--u)); left: calc(135 * var(--u)); font-size: calc(41 * var(--u)); } #rk-clay-article .chapter-02 .section-guide{ top: calc(0 * var(--u)); right: calc(16 * var(--u)); } #rk-clay-article .chapter-02 .section-bubble{ right: calc(175 * var(--u)); top: calc(2 * var(--u)); } #rk-clay-article .chapter-02 .official-badge{ top: calc(128 * var(--u)); } #rk-clay-article .chapter-02 .official-source{ top: calc(178 * var(--u)); } #rk-clay-article .chapter-02 .official-content{ min-height: calc(430 * var(--u)); } #rk-clay-article .chapter-02 .official-photos{ margin-top: calc(-36 * var(--u)); grid-template-rows: 212fr 235fr; } #rk-clay-article .chapter-02 .fact-copy{ font-size: calc(19.5 * var(--u)); } #rk-clay-article .route-box, #rk-clay-article .breakfast-box{ display: flex; gap: calc(20 * var(--u)); padding: calc(20 * var(--u)) calc(23 * var(--u)); margin-top: calc(15 * var(--u)); background: #eef5fe; border-radius: calc(13 * var(--u)); } #rk-clay-article .route-box > .icon{ width: calc(61 * var(--u)); height: calc(54 * var(--u)); color: var(--accent); } #rk-clay-article .route-box p{ margin-top: calc(7 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.48; } #rk-clay-article .chapter-03 .official-heading{ height: calc(152 * var(--u)); } #rk-clay-article .chapter-03 .official-heading h2{ top: calc(30 * var(--u)); left: calc(126 * var(--u)); font-size: calc(31 * var(--u)); } #rk-clay-article .chapter-03 .section-guide{ width: calc(133 * var(--u)); top: calc(20 * var(--u)); right: calc(124 * var(--u)); } #rk-clay-article .chapter-03 .section-bubble{ top: calc(77 * var(--u)); right: calc(234 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)); } #rk-clay-article .chapter-03 .official-badge{ width: calc(150 * var(--u)); top: calc(13 * var(--u)); font-size: calc(23 * var(--u)); height: calc(38 * var(--u)); } #rk-clay-article .chapter-03 .official-source{ top: calc(59 * var(--u)); font-size: calc(14 * var(--u)); } #rk-clay-article .chapter-03 .official-content{ min-height: calc(448 * var(--u)); } #rk-clay-article .chapter-03 .official-photos{ grid-template-rows: 1fr 1fr; margin-top: calc(-36 * var(--u)); } #rk-clay-article .chapter-03 .fact-copy{ font-size: calc(19 * var(--u)); } #rk-clay-article .room-box{ margin-top: calc(16 * var(--u)); padding: calc(15 * var(--u)); border-radius: calc(12 * var(--u)); background: #eef5fe; } #rk-clay-article .room-box h3{ display: flex; align-items: center; gap: calc(20 * var(--u)); margin-bottom: calc(10 * var(--u)); } #rk-clay-article .room-box h3 .icon{ width: calc(39 * var(--u)); height: calc(31 * var(--u)); } #rk-clay-article .room-box table{ width: 100%; border-collapse: collapse; background: #fff; font-size: calc(19 * var(--u)); table-layout: fixed; border-radius: calc(7 * var(--u)); overflow: hidden; text-align: center; } #rk-clay-article .room-box th{ background: #deedff; font-weight: 700; } #rk-clay-article .room-box th, #rk-clay-article .room-box td{ height: calc(38 * var(--u)); border: calc(1 * var(--u)) solid #d7e0eb; padding: calc(4 * var(--u)); } #rk-clay-article .room-box th{ border-color: #f5f9ff; } #rk-clay-article .room-box .no-window{ font-weight: 850; color: #496383; } #rk-clay-article .room-box p{ margin-top: calc(12 * var(--u)); font-size: calc(17 * var(--u)); white-space: nowrap; } #rk-clay-article .chapter-04 .official-heading{ height: calc(160 * var(--u)); } #rk-clay-article .chapter-04 .section-bubble{ top: calc(80 * var(--u)); right: calc(294 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)); } #rk-clay-article .chapter-04 .official-heading h2{ font-size: calc(34 * var(--u)); top: calc(30 * var(--u)); } #rk-clay-article .chapter-04 .section-guide{ width: calc(128 * var(--u)); right: calc(160 * var(--u)); top: calc(13 * var(--u)); } #rk-clay-article .chapter-04 .official-badge{ width: calc(159 * var(--u)); } #rk-clay-article .chapter-04 .official-source{ font-size: calc(16 * var(--u)); } #rk-clay-article .chapter-04 .official-content{ min-height: calc(628 * var(--u)); } #rk-clay-article .chapter-04 .official-photos{ grid-template-rows: 1fr 1fr .92fr; } #rk-clay-article .chapter-04 .official-facts{ grid-template-rows: 1fr 1fr .92fr; gap: calc(12 * var(--u)); } #rk-clay-article .chapter-04 .fact-card{ padding: calc(13 * var(--u)) calc(12 * var(--u)); gap: calc(10 * var(--u)); } #rk-clay-article .chapter-04 .fact-card h3{ font-size: calc(22 * var(--u)); letter-spacing: -.025em; } #rk-clay-article .chapter-04 .fact-copy{ font-size: calc(17 * var(--u)); line-height: 1.48; margin-top: calc(5 * var(--u)); } #rk-clay-article .chapter-04 .address{ font-size: calc(15.5 * var(--u)); line-height: 1.45; margin-bottom: calc(9 * var(--u)); letter-spacing: -.02em; } #rk-clay-article .fact-copy dl{ margin: 0; display: grid; grid-template-columns: calc(81 * var(--u)) 1fr; gap: calc(7 * var(--u)) calc(8 * var(--u)); } #rk-clay-article .fact-copy dt{ font-weight: 600; } #rk-clay-article .fact-copy dd{ margin: 0; } #rk-clay-article .breakfast-box{ padding: calc(14 * var(--u)) calc(20 * var(--u)); } #rk-clay-article .breakfast-box .icon{ width: calc(48 * var(--u)); height: calc(54 * var(--u)); color: var(--accent); } #rk-clay-article .breakfast-box h3{ font-size: calc(22 * var(--u)); margin-bottom: calc(4 * var(--u)); } #rk-clay-article .breakfast-box p{ font-size: calc(15.5 * var(--u)); line-height: 1.5; letter-spacing: -.035em; } #rk-clay-article .reveal{ --reveal-top-space: clamp(16px, calc(32 * var(--u)), 32px); position: relative; height: calc(140 * var(--u) + var(--reveal-top-space)); z-index: 0; } /* Extend the same transition artwork behind both adjacent rounded panels. */ #rk-clay-article .reveal-background{ position: absolute; inset: calc(-30 * var(--u)) 0 calc(-31 * var(--u)); z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 0 95%, #346fa177, transparent 13%), radial-gradient(ellipse at 100% 90%, #2b709d99, transparent 15%), linear-gradient(110deg, #2c496e, #1b3151); } #rk-clay-article .reveal-background::before, #rk-clay-article .reveal-background::after{ content: ""; position: absolute; bottom: 0; width: calc(85 * var(--u)); height: calc(121 * var(--u)); background: var(--rk-photo-1) left 90% / calc(500 * var(--u)) auto; filter: blur(calc(4 * var(--u))); opacity: .6; mask-image: radial-gradient(ellipse at 0 100%, #000 30%, transparent 75%); pointer-events: none; } #rk-clay-article .reveal-background::before{ left: 0; } #rk-clay-article .reveal-background::after{ right: 0; transform: scaleX(-1); } #rk-clay-article .reveal-bubble{ position: absolute; top: calc(20 * var(--u) + var(--reveal-top-space)); } #rk-clay-article .reveal-bubble{ left: calc(30 * var(--u)); width: calc(404 * var(--u)); height: calc(84 * var(--u)); padding: calc(19 * var(--u)) calc(22 * var(--u)); border-radius: 50%; background: #f1f7ff; color: #223751; font-family: var(--hand); font-weight: 600; font-size: calc(30 * var(--u)); white-space: nowrap; text-align: center; transform: rotate(-2deg); } #rk-clay-article .reveal-bubble::after{ content: ""; position: absolute; bottom: calc(-10 * var(--u)); right: calc(30 * var(--u)); width: calc(35 * var(--u)); height: calc(29 * var(--u)); background: #f1f7ff; clip-path: polygon(0 0, 100% 100%, 85% 0); } #rk-clay-article .review-observer{ position: absolute; top: calc(-8 * var(--u) + var(--reveal-top-space)); left: calc(426 * var(--u)); width: calc(190 * var(--u)); height: auto; max-width: none; } #rk-clay-article .observer-bubble{ position: absolute; top: calc(18 * var(--u) + var(--reveal-top-space)); right: calc(18 * var(--u)); width: calc(160 * var(--u)); padding: calc(20 * var(--u)) calc(10 * var(--u)); background: #e1ebf8; color: #334e70; border-radius: 48% 53% 44% 46%; font-family: var(--hand); font-size: calc(14 * var(--u)); font-weight: 600; line-height: 1.5; transform: rotate(5deg); white-space: nowrap; text-align: center; } #rk-clay-article .observer-bubble::after{ content: ""; position: absolute; left: calc(-8 * var(--u)); bottom: calc(8 * var(--u)); width: calc(25 * var(--u)); height: calc(21 * var(--u)); background: #e1ebf8; clip-path: polygon(100% 0, 100% 100%, 0 100%); } #rk-clay-article .reveal-chevron{ position: absolute; bottom: calc(17 * var(--u)); left: calc(335 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-bottom: calc(3 * var(--u)) solid #f5f9ff; border-right: calc(3 * var(--u)) solid #f5f9ff; transform: rotate(45deg); } #rk-clay-article .reviews-panel{ position: relative; z-index: 2; padding: 0 calc(25 * var(--u)) calc(16 * var(--u)); background: linear-gradient(110deg, #29466c, #1b3151); border: calc(1.5 * var(--u)) solid #577396; border-bottom: 0; border-radius: calc(31 * var(--u)) calc(31 * var(--u)) 0 0; } #rk-clay-article .reviews-heading{ position: relative; height: calc(80 * var(--u)); } #rk-clay-article .reviews-heading h2{ padding: calc(18 * var(--u)) calc(11 * var(--u)) 0; font-size: calc(38 * var(--u)); font-weight: 850; color: #fff; line-height: 1.25; letter-spacing: -.025em; } #rk-clay-article .review-badge{ top: calc(22 * var(--u)); background: linear-gradient(110deg, #52739b, #44638b); height: calc(41 * var(--u)); } #rk-clay-article .review-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: calc(13 * var(--u)); } #rk-clay-article .review-card{ background: linear-gradient(115deg, #fcfdff, #f5f9ff); border: calc(1 * var(--u)) solid #dce7f3; border-radius: calc(10 * var(--u)); padding: calc(15 * var(--u)) calc(18 * var(--u)); min-width: 0; } #rk-clay-article .review-card header{ display: flex; align-items: flex-start; gap: calc(14 * var(--u)); margin-bottom: calc(12 * var(--u)); } #rk-clay-article .thumb, #rk-clay-article .conclusion-emblem, #rk-clay-article .tool-emblem{ display: flex; flex: none; justify-content: center; align-items: center; width: calc(57 * var(--u)); height: calc(59 * var(--u)); border-radius: 50%; background: linear-gradient(105deg, #298fff, var(--accent)); color: #fff; } #rk-clay-article .thumb .icon{ width: calc(30 * var(--u)); height: calc(34 * var(--u)); } #rk-clay-article .review-card h3{ font-size: calc(21 * var(--u)); font-weight: 800; color: var(--accent-text); line-height: 1.4; letter-spacing: -.055em; padding-top: calc(2 * var(--u)); } #rk-clay-article .review-card p{ font-size: calc(20 * var(--u)); font-weight: 450; line-height: 1.48; letter-spacing: -.015em; } #rk-clay-article .review-card.critical h3{ color: #405e84; } #rk-clay-article .review-card.critical .thumb{ background: #4a658b; } #rk-clay-article .review-card.critical .thumb .icon{ transform: rotate(180deg); } /* Six source ratings, aligned with the approved two-column mobile design. */ #rk-clay-article .chapter-01 .reviews-panel{ padding-bottom: calc(10 * var(--u)); } #rk-clay-article .chapter-01 .review-card p{ line-height: 1.33; } #rk-clay-article .rating-sites{ margin-top: calc(14 * var(--u)); } #rk-clay-article .rating-sites-heading{ display: grid; grid-template-columns: minmax(0, 1fr) calc(258 * var(--u)); align-items: center; gap: calc(16 * var(--u)); margin-bottom: calc(11 * var(--u)); } #rk-clay-article .rating-sites-heading h3{ color: #fff; font-size: calc(38 * var(--u)); font-weight: 850; line-height: 1.25; letter-spacing: -.025em; white-space: nowrap; } #rk-clay-article .rating-photo{ width: 100%; height: calc(94 * var(--u)); min-height: 0; object-fit: cover; border: calc(1.5 * var(--u)) solid #dce7f3; border-radius: calc(9 * var(--u)); } #rk-clay-article .rating-sites-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(11 * var(--u)) calc(13 * var(--u)); } #rk-clay-article .rating-site{ --rating-ink: #173b63; --rating-rule: #173b63; min-width: 0; min-height: calc(146 * var(--u)); padding: calc(15 * var(--u)) calc(20 * var(--u)); background: linear-gradient(115deg, #fcfdff, #f5f9ff); border: calc(1 * var(--u)) solid #dce7f3; border-radius: calc(9 * var(--u)); } #rk-clay-article .rating-site.agoda{ --rating-ink: #126e65; --rating-rule: #1fc0aa; } #rk-clay-article .rating-site.booking{ --rating-ink: #09579a; --rating-rule: #006bdb; } #rk-clay-article .rating-site.trip{ --rating-ink: #0070f0; --rating-rule: #007ffb; } #rk-clay-article .rating-site.tripadvisor{ --rating-ink: #126e65; --rating-rule: #1fc0aa; } #rk-clay-article .rating-site.google{ --rating-ink: #0070f0; --rating-rule: #007ffb; } #rk-clay-article .rating-site-inner{ border-left: calc(2.5 * var(--u)) solid var(--rating-rule); padding-left: calc(18 * var(--u)); } #rk-clay-article .rating-site h4{ color: var(--rating-ink); font-size: calc(25 * var(--u)); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; white-space: nowrap; } #rk-clay-article .rating-site-score{ display: flex; align-items: baseline; gap: calc(9 * var(--u)); color: #173b63; font-variant-numeric: tabular-nums; white-space: nowrap; } #rk-clay-article .rating-site-score strong{ color: var(--rating-ink); font-size: calc(64 * var(--u)); font-weight: 850; letter-spacing: -.045em; line-height: .98; } #rk-clay-article .rating-site-score span{ font-size: calc(25 * var(--u)); font-weight: 800; line-height: 1.2; } #rk-clay-article .rating-site-count{ color: #173b63; font-size: calc(20 * var(--u)); font-weight: 450; line-height: 1.2; white-space: nowrap; } #rk-clay-article .rating-scale-note{ padding-top: calc(16 * var(--u)); color: #bdcee2; font-size: calc(18 * var(--u)); font-weight: 400; line-height: 1.4; } #rk-clay-article .entrance-photo{ width: 100%; height: calc(115 * var(--u)); object-fit: cover; margin-top: calc(10 * var(--u)); border-radius: calc(8 * var(--u)); } #rk-clay-article .chapter-03 .review-card.critical h3{ font-size: calc(16.7 * var(--u)); letter-spacing: -.075em; padding-top: calc(6 * var(--u)); white-space: nowrap; } #rk-clay-article .chapter-03 .review-card p, #rk-clay-article .chapter-04 .review-card p{ font-size: calc(19 * var(--u)); line-height: 1.48; } #rk-clay-article .cleanliness-box{ margin-top: calc(12 * var(--u)); display: grid; grid-template-columns: 180fr 424fr; gap: calc(20 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); border-radius: calc(11 * var(--u)); background: #fcfdff; } #rk-clay-article .cleanliness-label{ display: flex; gap: calc(15 * var(--u)); align-items: flex-start; } #rk-clay-article .cleanliness-label h3{ color: var(--accent); font-size: calc(24 * var(--u)); font-weight: 800; white-space: nowrap; padding-top: calc(2 * var(--u)); } #rk-clay-article .cleanliness-label h3::after{ content: ""; display: block; margin-top: calc(10 * var(--u)); height: calc(5 * var(--u)); width: calc(58 * var(--u)); background: var(--accent); border-radius: calc(2 * var(--u)); } #rk-clay-article .cleanliness-box p{ padding-top: calc(12 * var(--u)); font-size: calc(17.5 * var(--u)); line-height: 1.55; letter-spacing: -.03em; } #rk-clay-article .stat-positive, #rk-clay-article .stat-critical{ font-size: calc(39 * var(--u)); line-height: .92; font-weight: 850; letter-spacing: -.06em; } #rk-clay-article .stat-positive{ color: var(--accent); } #rk-clay-article .stat-critical{ color: #405e84; } #rk-clay-article .food-strip{ margin-top: calc(12 * var(--u)); height: calc(141 * var(--u)); display: grid; grid-template-columns: 34fr 42fr 24fr; grid-template-rows: minmax(0,1fr); overflow: hidden; border-radius: calc(9 * var(--u)); } #rk-clay-article .food-strip img{ width: 100%; height: 100%; min-height: 0; min-width: 0; object-fit: cover; } /* Neutral chapter summaries: independent of both the review panel and the next chapter. */ #rk-clay-article .chapter-sheet{ background: #fff; } #rk-clay-article .reviews-panel{ padding-bottom: calc(24 * var(--u)); border-radius: calc(31 * var(--u)); border-bottom: calc(1.5 * var(--u)) solid #577396; } #rk-clay-article .chapter-sheet + .chapter-sheet > .official-panel{ border-radius: calc(30 * var(--u)); box-shadow: 0 calc(2 * var(--u)) calc(24 * var(--u)) #26364a05; } #rk-clay-article .conclusion-panel{ position: relative; z-index: 3; padding: calc(24 * var(--u)) calc(20 * var(--u)) 0; background: #fff; color: #183451; } #rk-clay-article .conclusion-inner{ position: relative; isolation: isolate; overflow: hidden; border: calc(1.3 * var(--u)) solid #eee0c7; border-radius: calc(20 * var(--u)); background: linear-gradient(112deg, #fffcf7, #fffaf3 55%, #fffcf8); padding: calc(24 * var(--u)) calc(30 * var(--u)) 0; box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) #a0844812; } #rk-clay-article .conclusion-inner::before{ content: ""; position: absolute; left: 50%; top: calc(19 * var(--u)); width: calc(52 * var(--u)); height: calc(2 * var(--u)); transform: translateX(-50%); background: #c8b58d; } #rk-clay-article .conclusion-heading{ position: relative; min-height: calc(184 * var(--u)); padding-top: 0; padding-right: calc(224 * var(--u)); margin: 0 0 calc(20 * var(--u)); } #rk-clay-article .conclusion-chapter{ display: flex; align-items: center; gap: calc(12 * var(--u)); color: #b69a62; font-size: calc(18 * var(--u)); font-weight: 800; line-height: 1.35; white-space: nowrap; } #rk-clay-article .conclusion-chapter > span{ display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: calc(47 * var(--u)); height: calc(37 * var(--u)); padding-inline: calc(9 * var(--u)); border-radius: calc(22 * var(--u)); background: #bca36f; color: #fff; font-size: calc(25 * var(--u)); font-weight: 850; letter-spacing: -.04em; } #rk-clay-article .conclusion-chapter > b{ font: inherit; } #rk-clay-article .conclusion-heading h2{ position: relative; z-index: 1; scroll-margin-top: calc(100 * var(--u)); margin-top: calc(27 * var(--u)); font-size: calc(46 * var(--u)); font-weight: 900; line-height: 1.3; letter-spacing: -.035em; white-space: nowrap; } #rk-clay-article .conclusion-heading h2::after{ display: none; } #rk-clay-article .conclusion-perspectives{ display: flex; align-items: baseline; gap: calc(15 * var(--u)); margin-top: calc(22 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 800; line-height: 1.4; white-space: nowrap; } #rk-clay-article .perspective-official, #rk-clay-article .perspective-review{ position: relative; padding-bottom: calc(7 * var(--u)); } #rk-clay-article .perspective-official{ color: #007ffb; } #rk-clay-article .perspective-review{ color: #183451; } #rk-clay-article .perspective-official::after, #rk-clay-article .perspective-review::after{ content: ""; position: absolute; inset-inline: 0; bottom: 0; height: calc(2.5 * var(--u)); border-radius: calc(2 * var(--u)); background: currentColor; } #rk-clay-article .perspective-plus{ font-size: calc(23 * var(--u)); font-weight: 500; } #rk-clay-article .perspective-caption{ margin-left: calc(4 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 500; letter-spacing: -.03em; } #rk-clay-article .summary-hosts{ position: absolute; top: calc(10 * var(--u)); right: calc(-9 * var(--u)); width: calc(230 * var(--u)); height: calc(176 * var(--u)); overflow: hidden; pointer-events: none; } #rk-clay-article .summary-hosts > img, #rk-clay-article .summary-hosts > picture > img{ position: absolute; width: 123.866%; max-width: none; height: auto; left: -17.88%; top: -15.739%; } #rk-clay-article .conclusion-copy{ position: relative; z-index: 1; font-size: clamp(12px, calc(25 * var(--u)), 25px); font-weight: 400; line-height: 1.5; letter-spacing: -.025em; overflow-wrap: anywhere; } #rk-clay-article .conclusion-landscape{ position: relative; height: calc(102 * var(--u)); margin: calc(4 * var(--u)) calc(-30 * var(--u)) 0; overflow: hidden; pointer-events: none; } #rk-clay-article .conclusion-landscape > img, #rk-clay-article .conclusion-landscape > picture > img{ position: absolute; right: calc(12 * var(--u)); bottom: calc(-23 * var(--u)); width: calc(574 * var(--u)); max-width: none; height: auto; opacity: .58; mix-blend-mode: multiply; } #rk-clay-article .conclusion-signoff{ position: absolute; z-index: 1; left: calc(27 * var(--u)); bottom: calc(30 * var(--u)); color: #bda579; font-family: var(--hand); font-size: calc(17 * var(--u)); font-style: italic; font-weight: 600; line-height: 1.2; transform: rotate(-12deg); } #rk-clay-article .conclusion-signoff > span{ padding-left: calc(24 * var(--u)); } #rk-clay-article .chapter-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(8px,calc(16 * var(--u)),16px); padding:clamp(14px,calc(22 * var(--u)),22px) 0 clamp(24px,calc(32 * var(--u)),32px); } #rk-clay-article .chapter-action{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:66px; padding:12px 7px; border:1px solid #0879e8; border-radius:12px; color:#0065c9; background:#f5faff; text-align:center; text-decoration:none; line-height:1.4; box-shadow:0 3px 9px #17456d0d; transition:background .15s,box-shadow .15s; } #rk-clay-article .chapter-booking{ color:#fff; background:linear-gradient(110deg,#0789ff,#006bdc); border-color:#0075e8; } #rk-clay-article .chapter-action-title{ display:flex; align-items:center; justify-content:center; gap:4px; font-size:clamp(12px,calc(26 * var(--u)),16px); font-weight:800; white-space:nowrap; } #rk-clay-article .chapter-action-title svg{ flex:none; width:13px; height:13px; } #rk-clay-article .chapter-action-detail{ font-size:clamp(10px,calc(21 * var(--u)),12px); font-weight:500; font-variant-numeric:tabular-nums; } #rk-clay-article .chapter-action:hover{ background:#e6f2ff; box-shadow:0 4px 12px #17456d24; } #rk-clay-article .chapter-booking:hover{ background:#0064cf; } #rk-clay-article .chapter-action:focus-visible{ outline:3px solid #163759; outline-offset:3px; } #rk-clay-article .insert-tool{ position: relative; padding: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); border-radius: calc(15 * var(--u)); background: linear-gradient(110deg, #fbfdff, #f2f8ff); color: #1d2e45; } #rk-clay-article .tool-heading{ height: calc(126 * var(--u)); position: relative; overflow: hidden; } #rk-clay-article .tool-emblem{ position: absolute; top: 0; left: 0; width: calc(64 * var(--u)); height: calc(64 * var(--u)); background: linear-gradient(100deg, var(--accent), var(--accent-deep)); } #rk-clay-article .tool-emblem .icon{ width: calc(36 * var(--u)); height: calc(40 * var(--u)); } #rk-clay-article .tool-heading h3, #rk-clay-article .tool-heading h2{ position: absolute; top: calc(5 * var(--u)); left: calc(80 * var(--u)); font-size: calc(36 * var(--u)); font-weight: 900; line-height: 1.25; letter-spacing: -.04em; white-space: nowrap; z-index: 1; } #rk-clay-article .tool-heading h3::after, #rk-clay-article .tool-heading h2::after{ margin-top: calc(8 * var(--u)); } #rk-clay-article .tool-subtitle{ position: absolute; top: calc(74 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 550; } #rk-clay-article .tool-guide{ position: absolute; top: calc(-9 * var(--u)); right: calc(-10 * var(--u)); width: calc(166 * var(--u)); height: auto; max-width: none; } #rk-clay-article .tool-bubble{ position: absolute; right: calc(137 * var(--u)); top: calc(3 * var(--u)); min-width: calc(114 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); border-radius: 50%; font-size: calc(17 * var(--u)); line-height: 1.4; text-align: center; background: #fcfdff; border: calc(1 * var(--u)) solid #d6e3f2; box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) #183f6b1a; } #rk-clay-article .price-tool .tool-heading{ height: calc(106 * var(--u)); } #rk-clay-article .price-tool{ border: calc(1 * var(--u)) solid #d8e7f7; } #rk-clay-article .price-controls{ background: #eaf3ff; border-radius: calc(11 * var(--u)); padding: calc(9 * var(--u)); } #rk-clay-article .price-control-row{ display: flex; align-items: center; gap: calc(15 * var(--u)); font-size: calc(23 * var(--u)); font-weight: 600; white-space: nowrap; } #rk-clay-article .date-field{ flex: 1; min-width: 0; } #rk-clay-article .date-field input, #rk-clay-article .radius-field input{ width: 100%; min-width: 0; height: calc(49 * var(--u)); background: #fff; border: calc(1 * var(--u)) solid #bfd6ef; border-radius: calc(7 * var(--u)); color: #1d2e45; padding: calc(7 * var(--u)) calc(12 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 750; } #rk-clay-article .date-field input::-webkit-calendar-picker-indicator{ width: calc(23 * var(--u)); height: calc(25 * var(--u)); padding: 0; cursor: pointer; opacity: .6; } #rk-clay-article .radius-field{ width: calc(63 * var(--u)); } #rk-clay-article .radius-field input{ text-align: center; padding: 0; appearance: textfield; } #rk-clay-article .radius-field input::-webkit-inner-spin-button{ appearance: none; } #rk-clay-article .update-prices{ display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); height: calc(49 * var(--u)); width: calc(143 * var(--u)); border: 0; border-radius: calc(8 * var(--u)); color: #fff; background: linear-gradient(105deg, var(--accent), var(--accent-deep)); font-size: calc(25 * var(--u)) !important; font-weight: 750 !important; } #rk-clay-article .update-prices .icon{ width: calc(28 * var(--u)); height: calc(28 * var(--u)); } #rk-clay-article .price-conditions{ display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding-top: calc(9 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.5; } #rk-clay-article .price-conditions > span{ display: flex; align-items: center; gap: calc(10 * var(--u)); padding-left: calc(14 * var(--u)); } #rk-clay-article .price-conditions .icon{ width: calc(27 * var(--u)); height: calc(28 * var(--u)); color: var(--accent); } #rk-clay-article .price-conditions output{ border-left: calc(1 * var(--u)) solid #fff; text-align: center; } #rk-clay-article .price-chart-wrap{ position: relative; background: #fff; margin-top: calc(8 * var(--u)); } #rk-clay-article .price-chart{ width: 100%; height: auto; display: block; } #rk-clay-article .price-chart text{ font-family: "Noto Sans JP", sans-serif; font-size: 16px; fill: #263950; } #rk-clay-article .price-chart .grid-line{ stroke: #dce5ef; stroke-width: 1; stroke-dasharray: 3 2; } #rk-clay-article .price-chart .axis-line{ stroke: #7e92ac; stroke-width: 1.25; } #rk-clay-article .price-chart .trend-line{ stroke: var(--accent); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; fill: none; } #rk-clay-article .price-chart .trend-point{ stroke: var(--accent); stroke-width: 3; fill: #fff; } #rk-clay-article .price-chart .min-price{ fill: var(--price-lowest); font-size: 24px; font-weight: 850; } #rk-clay-article .price-chart .min-label{ fill: var(--price-lowest); font-size: 16px; font-weight: 750; } #rk-clay-article .chart-empty{ position: absolute; inset: 35% 5% auto; text-align: center; padding: calc(14 * var(--u)); font-size: calc(19 * var(--u)); background: #fcfdff; border-radius: calc(8 * var(--u)); } #rk-clay-article .price-table-heading{ display: flex; align-items: center; position: relative; gap: calc(14 * var(--u)); padding: calc(5 * var(--u)) calc(4 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 850; } #rk-clay-article .price-table-heading .tool-emblem{ position: static; width: calc(44 * var(--u)); height: calc(44 * var(--u)); } #rk-clay-article .price-table-heading .icon{ width: calc(27 * var(--u)); height: calc(27 * var(--u)); } #rk-clay-article .price-table-heading > span:last-child::after{ height: calc(4 * var(--u)); width: calc(58 * var(--u)); margin-top: calc(2 * var(--u)); } #rk-clay-article .daily-prices{ border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; overflow: hidden; border: calc(1 * var(--u)) solid #cbdef2; border-radius: calc(7 * var(--u)); text-align: center; font-size: clamp(11px, calc(22 * var(--u)), 18px); line-height: 1.4; background: #fff; } #rk-clay-article .daily-prices th, #rk-clay-article .daily-prices td{ padding: max(6px, calc(9 * var(--u))) max(8px, calc(14 * var(--u))); font-weight: 450; border-bottom: calc(1 * var(--u)) solid #d2e3f4; height: max(36px, calc(60 * var(--u))); } #rk-clay-article .daily-prices thead th{ background: #e7f1fd; font-weight: 750; height: calc(27 * var(--u)); color: #425873; } #rk-clay-article .daily-prices th + th, #rk-clay-article .daily-prices td{ border-left: calc(1 * var(--u)) solid #d2e3f4; } #rk-clay-article .daily-prices tr:last-child > *{ border-bottom: 0; } #rk-clay-article .daily-prices strong{ font-weight: 500; } #rk-clay-article .daily-prices .lowest{ background: var(--price-lowest-soft); color: var(--price-lowest); } #rk-clay-article .daily-prices .lowest th{ font-weight: 700; } #rk-clay-article .daily-prices .lowest strong{ font-size: inherit; font-weight: 900; } #rk-clay-article .lowest-badge{ display: inline-block; margin-left: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(11 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--price-lowest); color: white; font-size: calc(16 * var(--u)); line-height: 1.15; } #rk-clay-article .daily-price-link{ display: inline-flex; align-items: baseline; justify-content: center; gap: 0; min-height: 24px; padding: 2px; color: var(--accent-text); font-size: clamp(14px, calc(26 * var(--u)), 22px); font-weight: 650; line-height: 1.4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .17em; white-space: nowrap; } #rk-clay-article .daily-price-link strong{ font-weight: 650; } #rk-clay-article .daily-price-link .icon{ flex: none; align-self: flex-start; width: .7em; height: .7em; margin: .08em 0 0 .3em; stroke-width: 2; } #rk-clay-article .daily-price-link:hover{ color: var(--accent-deep); text-decoration-thickness: 2px; } #rk-clay-article .price-booking-button{ display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); min-height: 44px; margin-top: max(12px, calc(24 * var(--u))); padding: max(12px, calc(18 * var(--u))) max(14px, calc(24 * var(--u))); border-radius: max(8px, calc(14 * var(--u))); background: linear-gradient(105deg, var(--accent), var(--accent-deep)); color: #fff; text-decoration: none; font-size: clamp(13px, calc(26 * var(--u)), 20px); font-weight: 750; line-height: 1.4; } #rk-clay-article .price-booking-button .icon{ flex: none; width: 1em; height: 1em; } #rk-clay-article .price-booking-button:hover{ background: var(--accent-deep); } #rk-clay-article .daily-price-link:focus-visible, #rk-clay-article .price-booking-button:focus-visible{ outline: 2px solid var(--accent-text); outline-offset: 3px; } #rk-clay-article .tool-note{ font-size: calc(15.5 * var(--u)); margin-top: calc(8 * var(--u)) !important; line-height: 1.4; } #rk-clay-article .tool-error{ margin-top: calc(10 * var(--u)) !important; color: #a32936; font-size: calc(18 * var(--u)); } #rk-clay-article .map-tool .tool-heading{ height: calc(135 * var(--u)); } #rk-clay-article .map-tool .tool-heading h3{ font-size: calc(34 * var(--u)); } #rk-clay-article .map-tool .tool-bubble{ font-size: calc(14 * var(--u)); right: calc(115 * var(--u)); width: calc(142 * var(--u)); padding: calc(14 * var(--u)) calc(12 * var(--u)); white-space: nowrap; } #rk-clay-article .hotel-details{ margin: 0 calc(22 * var(--u)); padding: calc(18 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); } #rk-clay-article .hotel-details .tool-heading{ height: calc(116 * var(--u)); } #rk-clay-article .hotel-details .tool-heading h2{ font-size: calc(34 * var(--u)); } #rk-clay-article .hotel-details .tool-subtitle{ left: calc(80 * var(--u)); top: calc(63 * var(--u)); font-size: calc(21 * var(--u)); } #rk-clay-article .hotel-details .tool-guide{ width: calc(160 * var(--u)); top: calc(-12 * var(--u)); } #rk-clay-article .details-table{ border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; background: #fff; border: calc(1 * var(--u)) solid #d4e5f7; border-radius: calc(12 * var(--u)); overflow: hidden; font-size: calc(22 * var(--u)); line-height: 1.4; } #rk-clay-article .details-table th{ width: 38%; text-align: left; background: #edf5ff; font-weight: 750; } #rk-clay-article .details-table th > span{ display: flex; align-items: center; gap: calc(18 * var(--u)); } #rk-clay-article .details-table th b{ font-size: calc(20 * var(--u)); white-space: nowrap; } #rk-clay-article .details-table th, #rk-clay-article .details-table td{ padding: calc(10 * var(--u)) calc(18 * var(--u)); border-bottom: calc(1 * var(--u)) solid #d9e7f6; } #rk-clay-article .details-table tr:last-child > *{ border-bottom: 0; } #rk-clay-article .details-table .icon{ width: calc(34 * var(--u)); height: calc(36 * var(--u)); color: var(--accent); } #rk-clay-article .details-table td{ position: relative; overflow-wrap: anywhere; } #rk-clay-article .details-table a{ text-decoration: none; } #rk-clay-article .details-table a:hover{ text-decoration: underline; } #rk-clay-article .details-table a[href^=mailto]{ font-size: calc(21 * var(--u)); letter-spacing: -.025em; } #rk-clay-article .check-time{ font-size: calc(44 * var(--u)); font-weight: 900; line-height: .95; color: var(--accent); letter-spacing: -.03em; } #rk-clay-article .copy-address{ position: absolute; right: calc(16 * var(--u)); top: 50%; transform: translateY(-50%); width: calc(38 * var(--u)); height: calc(44 * var(--u)); border: 0; background: none; padding: calc(2 * var(--u)); } #rk-clay-article .phone-link{ display: flex; align-items: center; justify-content: space-between; } #rk-clay-article .phone-action{ width: calc(37 * var(--u)); height: calc(37 * var(--u)); display: grid; place-items: center; background: var(--accent); border-radius: 50%; } #rk-clay-article .phone-action .icon{ width: calc(23 * var(--u)); height: calc(23 * var(--u)); color: #fff; } #rk-clay-article .official-website{ margin-top: calc(10 * var(--u)); display: grid; grid-template-columns: 38% 1fr calc(34 * var(--u)); align-items: center; gap: calc(0 * var(--u)); border: calc(1 * var(--u)) solid #d4e5f7; border-radius: calc(12 * var(--u)); font-size: calc(22 * var(--u)); text-decoration: none; background: #fff; overflow: hidden; padding-right: calc(18 * var(--u)); } #rk-clay-article .official-website > span:first-child{ display: flex; align-items: center; gap: calc(23 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); background: #edf5ff; font-weight: 800; } #rk-clay-article .official-website > span:nth-child(2){ padding-left: calc(20 * var(--u)); font-size: calc(21 * var(--u)); } #rk-clay-article .official-website .icon{ color: var(--accent); width: calc(34 * var(--u)); height: calc(34 * var(--u)); } #rk-clay-article .copy-status{ font-size: calc(16 * var(--u)); color: #345e8c; } #rk-clay-article .copy-status:not(:empty){ padding-top: calc(8 * var(--u)); } #rk-clay-article .article-closing{ position: relative; height: calc(344 * var(--u)); overflow: hidden; background: radial-gradient(ellipse at 30% 0%, #b9dcff4d, transparent 36%), radial-gradient(ellipse at 77% 42%, #c9e4ff80, transparent 54%), linear-gradient(95deg, #f6faff, #edf6ff); } #rk-clay-article .article-closing::before{ content: ""; position: absolute; inset: 0 0 40%; background: var(--rk-photo-2) center 24% / cover; filter: blur(calc(7 * var(--u))); opacity: .14; mask-image: linear-gradient(#000, transparent); } #rk-clay-article .parting-note{ position: absolute; right: calc(28 * var(--u)); top: calc(16 * var(--u)); font-family: var(--hand); font-size: calc(23 * var(--u)); font-weight: 600; line-height: 1.4; color: #324967; transform: rotate(-9deg); z-index: 3; text-align: right; } #rk-clay-article .parting-note span{ display: inline-block; padding-right: calc(7 * var(--u)); } #rk-clay-article .parting-note::after{ content: ""; position: absolute; right: 0; bottom: calc(-7 * var(--u)); width: calc(84 * var(--u)); height: calc(3 * var(--u)); background: var(--accent); border-radius: 70% 10%; transform: rotate(-8deg); } #rk-clay-article .conclusion-pair{ position: absolute; left: calc(391 * var(--u)); top: calc(64 * var(--u)); width: calc(320 * var(--u)); max-width: none; height: auto; z-index: 1; } #rk-clay-article .footer-script{ position: absolute; left: calc(48 * var(--u)); top: calc(108 * var(--u)); font-family: "Segoe Print", "Comic Sans MS", cursive; color: #819ab5; font-size: calc(24 * var(--u)); font-style: italic; line-height: 1.3; transform: rotate(-12deg); } #rk-clay-article .footer-script span{ padding-left: calc(25 * var(--u)); } #rk-clay-article .back-to-top{ position: absolute; z-index: 2; left: calc(73 * var(--u)); top: calc(206 * var(--u)); width: calc(420 * var(--u)); height: calc(60 * var(--u)); display: flex; justify-content: center; align-items: center; border-radius: calc(40 * var(--u)); background: linear-gradient(100deg, var(--accent), var(--accent-deep)); color: white; text-decoration: none; font-size: calc(25 * var(--u)); font-weight: 800; } #rk-clay-article .back-to-top span{ position: absolute; right: calc(26 * var(--u)); width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-right: calc(3 * var(--u)) solid #fff; border-top: calc(3 * var(--u)) solid #fff; transform: rotate(45deg); } #rk-clay-article .skyline{ position: absolute; bottom: calc(-1 * var(--u)); left: 0; width: 100%; height: calc(105 * var(--u)); object-fit: cover; object-position: 50% 85%; opacity: .66; } @media (prefers-reduced-motion: reduce) { } @media print { #rk-clay-article{ background: #fff; } #rk-clay-article .skip-link, #rk-clay-article .chapter-index{ display: none; } } /* A bordered tail points toward the guide without falling below the bubble. */ #rk-clay-article .section-bubble{z-index:1;overflow:visible;} #rk-clay-article .section-bubble::before, #rk-clay-article .section-bubble::after{content:"";position:absolute;top:50%;bottom:auto;width:0;height:0;transform:translateY(-50%);background:none;clip-path:none;border-style:solid;pointer-events:none;} #rk-clay-article .section-bubble::before{right:calc(-17 * var(--u));border-width:calc(10 * var(--u)) 0 calc(10 * var(--u)) calc(20 * var(--u));border-color:transparent transparent transparent #d8e5f2;} #rk-clay-article .section-bubble::after{right:calc(-14 * var(--u));border-width:calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(18 * var(--u));border-color:transparent transparent transparent #f8fbff;} /* Preserve the approved template; allow complete Gemini slot text to wrap. */ #rk-clay-article .chapter-01 .official-content{height:auto;min-height:calc(410 * var(--u));} #rk-clay-article .official-content{grid-template-columns:minmax(0,282fr) minmax(0,375fr);} #rk-clay-article .official-photos{min-width:0;grid-template-rows:minmax(0,166fr) minmax(0,230fr);} #rk-clay-article .chapter-02 .official-photos{grid-template-rows:minmax(0,212fr) minmax(0,235fr);} #rk-clay-article .chapter-03 .official-heading{height:calc(276 * var(--u));} #rk-clay-article .chapter-03 .section-guide{top:calc(90 * var(--u));} #rk-clay-article .chapter-03 .section-bubble{top:calc(147 * var(--u));} #rk-clay-article .chapter-03 .official-photos{grid-template-rows:repeat(2,minmax(0,1fr));margin-top:0;} #rk-clay-article .chapter-04 .official-photos{grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(0,.92fr);} #rk-clay-article .photo-frame{position:relative;min-width:0;min-height:0;overflow:hidden;} #rk-clay-article .official-photos .photo-frame{border-radius:calc(8 * var(--u));} #rk-clay-article .photo-frame > img, #rk-clay-article .photo-frame > picture > img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:cover;} #rk-clay-article .food-strip{grid-template-columns:minmax(0,34fr) minmax(0,42fr) minmax(0,24fr);} #rk-clay-article .rating-photo, #rk-clay-article .entrance-photo{min-width:0;} #rk-clay-article .fact-card h3, #rk-clay-article .review-card h3, #rk-clay-article .rating-site h4{white-space:normal;overflow-wrap:anywhere;} #rk-clay-article .chapter-04 .official-facts{grid-template-rows:repeat(3,auto);} #rk-clay-article .chapter-04 .fact-card{min-height:auto;} #rk-clay-article .single-price-reference{grid-template-columns:1fr;} #rk-clay-article .single-price-reference .price-cell{padding:calc(10 * var(--u)) calc(18 * var(--u));} #rk-clay-article .research-note, #rk-clay-article .room-box p{font-size:clamp(11px,calc(18 * var(--u)),16px);line-height:1.65;white-space:normal;} #rk-clay-article .price-box h3, #rk-clay-article .details-table td, #rk-clay-article .room-box th, #rk-clay-article .room-box td{overflow-wrap:anywhere;} #rk-clay-article .section-bubble{max-width:calc(175 * var(--u));} #rk-clay-article .legacy-anchor{display:block;height:0;scroll-margin-top:calc(100 * var(--u));} #rk-clay-article .price-box > .price-reference-note{margin:7px 0 0;font-size:clamp(10px,calc(20 * var(--u)),12px);line-height:1.55;color:#627286;text-align:center;white-space:normal;} #rk-clay-article .price-tool > .daily-price-note{margin:10px 2px 0;font-size:clamp(10px,calc(21 * var(--u)),12px);line-height:1.7;color:#5b6d83;white-space:normal;} /* ===== Sightseeing additions ===== */ /* ===== Standalone page (no site header / sidebar / footer) ===== */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--chapter-nav-height, 60px) + 8px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: #eef3f9; } #rk-clay-article { display: block; min-width: 0; background: transparent; line-height: 1.5; word-break: normal; } #rk-clay-article .details-address { display: block; padding-right: calc(42 * var(--u)); } #rk-clay-article .former-name { display: block; font-size: calc(16 * var(--u)); font-weight: 500; margin-top: calc(4 * var(--u)); color: #4f6580; } /* Sample notice */ #rk-clay-article .research-notice { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)); background: #fff7e6; color: #7a4b00; border-bottom: 1px solid #f3dfb5; font-size: clamp(11px, calc(16 * var(--u)), 14px); line-height: 1.5; } #rk-clay-article .research-notice b { flex: none; padding: 2px 9px; border-radius: 99px; background: #f0a020; color: #fff; font-size: .9em; } /* Illustrated photos: "image" tag + tap to enlarge */ #rk-clay-article .photo-tag { position: absolute; z-index: 1; left: 6px; top: 6px; padding: 1px 6px; border-radius: 4px; background: #ffffffd9; color: #36506f; font-size: clamp(9px, calc(13 * var(--u)), 12px); font-weight: 700; line-height: 1.5; pointer-events: none; } #rk-clay-article .photo-open { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } #rk-clay-article .photo-open::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: clamp(20px, calc(30 * var(--u)), 28px); height: clamp(20px, calc(30 * var(--u)), 28px); border-radius: 6px; background: #ffffffd9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3c5e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5m6 0h5v5m0 6v5h-5m-6 0H4v-5'/%3E%3C/svg%3E") center / 62% no-repeat; } #rk-clay-article .photo-open:focus-visible { outline: 3px solid #0056ad; outline-offset: -3px; } #rk-clay-article .photo-dialog { width: min(92vw, 900px); max-width: none; padding: 0; border: 0; border-radius: 14px; background: #0f1b2d; color: #fff; overflow: hidden; } #rk-clay-article .photo-dialog::backdrop { background: #0b1626cc; } #rk-clay-article .photo-dialog figure { margin: 0; } #rk-clay-article .photo-dialog img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; } #rk-clay-article .photo-dialog figcaption { padding: 10px 16px 14px; font-size: 14px; line-height: 1.6; } #rk-clay-article .photo-dialog-close { position: absolute; top: 10px; right: 10px; padding: 6px 14px; border: 0; border-radius: 99px; background: #fff; color: #1d2e45; font: 700 14px/1.4 "Noto Sans JP", sans-serif; } #rk-clay-article .sample-toast { position: fixed; z-index: 10001; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; padding: 10px 18px; width: max-content; max-width: calc(100vw - 32px); border-radius: 14px; background: #1d3555; color: #fff; font-size: 14px; line-height: 1.5; text-align: center; box-shadow: 0 6px 20px #0003; } /* Ticket price box (reuses the hotel price box) */ #rk-clay-article .ticket-icon { display: grid; place-items: center; } #rk-clay-article .ticket-icon .icon { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke-width: 2.4; } #rk-clay-article .ticket-box .price-cell { padding: 0 calc(6 * var(--u)); } #rk-clay-article .ticket-box .price-cell > span { display: block; font-weight: 700; color: #425873; } #rk-clay-article .ticket-box .price-cell strong { font-size: calc(44 * var(--u)); } #rk-clay-article .ticket-box .price-cell em { display: block; font-style: normal; font-size: calc(16 * var(--u)); color: #4f6580; } /* Segmented buttons for the tools */ #rk-clay-article .seg-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--u)); } #rk-clay-article .seg-buttons button { height: calc(49 * var(--u)); min-height: 34px; border: calc(1 * var(--u)) solid #bfd6ef; border-radius: calc(8 * var(--u)); background: #fff; color: #1d2e45; font-size: clamp(12px, calc(23 * var(--u)), 18px); font-weight: 750; } #rk-clay-article .seg-buttons button[aria-pressed="true"] { border-color: var(--accent); background: linear-gradient(105deg, var(--accent), var(--accent-deep)); color: #fff; } #rk-clay-article .crowd-level { display: inline-block; padding: 1px 10px; border-radius: 99px; font-weight: 700; white-space: nowrap; } #rk-clay-article .crowd-level.lv1 { background: #e3f4ea; color: #16794a; } #rk-clay-article .crowd-level.lv2 { background: #fff4d6; color: #8a5a00; } #rk-clay-article .crowd-level.lv3 { background: #ffe7d6; color: #b4471a; } #rk-clay-article .crowd-level.lv4 { background: #ffe0e3; color: #b4232f; } /* Overall rating summary inside the review panel */ #rk-clay-article .rating-overall { display: grid; gap: calc(12 * var(--u)); margin-bottom: calc(16 * var(--u)); } #rk-clay-article .rating-overall > div { position: relative; padding: calc(18 * var(--u)) calc(20 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; color: #173b63; } #rk-clay-article .rating-overall h4 { font-size: calc(28 * var(--u)); font-weight: 900; line-height: 1.3; letter-spacing: -.03em; } #rk-clay-article .rating-overall-main { min-height: calc(300 * var(--u)); overflow: hidden; } #rk-clay-article .rating-gauge { position: relative; width: calc(230 * var(--u)); height: calc(230 * var(--u)); margin-top: calc(10 * var(--u)); } #rk-clay-article .rating-gauge svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } #rk-clay-article .gauge-track { fill: none; stroke: #e3eefc; stroke-width: 18; } #rk-clay-article .gauge-value { fill: none; stroke: var(--accent); stroke-width: 18; stroke-linecap: round; } #rk-clay-article .rating-gauge p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } #rk-clay-article .rating-gauge strong { font-size: calc(64 * var(--u)); font-weight: 900; letter-spacing: -.04em; } #rk-clay-article .rating-gauge span { margin-top: calc(6 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; } #rk-clay-article .rating-overall-guide { position: absolute; right: calc(150 * var(--u)); bottom: calc(-14 * var(--u)); width: calc(190 * var(--u)); height: auto; max-width: none; } #rk-clay-article .rating-overall-bubble { position: absolute; right: calc(14 * var(--u)); top: calc(36 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); border: 1px solid #d6e3f2; border-radius: 50%; background: #fcfdff; color: #26364a; font-size: calc(17 * var(--u)); font-weight: 700; line-height: 1.4; text-align: center; box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) #183f6b1a; } #rk-clay-article .rating-rank-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)) !important; } #rk-clay-article .rating-rank-value strong { color: var(--accent); font-size: calc(60 * var(--u)); font-weight: 900; letter-spacing: -.04em; line-height: 1; } #rk-clay-article .rating-rank-value span { font-size: calc(24 * var(--u)); font-weight: 800; } #rk-clay-article .rating-rank-value em { margin-left: calc(14 * var(--u)); padding: calc(4 * var(--u)) calc(16 * var(--u)); border: calc(2 * var(--u)) solid var(--accent); border-radius: 99px; color: var(--accent); font-size: calc(19 * var(--u)); font-style: normal; font-weight: 800; } #rk-clay-article .rating-histogram { display: block; width: 100%; height: auto; margin-top: calc(8 * var(--u)); } #rk-clay-article .hist-axis path { fill: none; stroke: #7e92ac; stroke-width: 1.2; } #rk-clay-article .hist-bars rect { fill: #b9d9ff; } #rk-clay-article .hist-bars .is-current, #rk-clay-article .hist-dot { fill: var(--accent); } #rk-clay-article .hist-current { fill: var(--accent); font-size: 14px; font-weight: 800; } #rk-clay-article .hist-label text { fill: #4a5d75; font-size: 13px; } #rk-clay-article .value-points { min-height: calc(250 * var(--u)); padding-right: calc(170 * var(--u)) !important; } #rk-clay-article .value-point-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); } #rk-clay-article .value-point { padding: calc(12 * var(--u)) calc(14 * var(--u)); border: calc(1 * var(--u)) solid #d6e5f6; border-radius: calc(10 * var(--u)); background: #f6faff; } #rk-clay-article .value-point > span { display: block; font-size: calc(19 * var(--u)); font-weight: 800; } #rk-clay-article .value-point strong { display: inline-block; margin-top: calc(6 * var(--u)); padding: calc(2 * var(--u)) calc(14 * var(--u)); border-radius: 99px; background: #e2f0ff; color: var(--accent-text); font-size: calc(27 * var(--u)); font-weight: 900; } #rk-clay-article .value-point.is-caution strong { background: #fff1dc; color: #a35a00; } #rk-clay-article .value-point p { margin-top: calc(8 * var(--u)) !important; font-size: calc(17 * var(--u)); line-height: 1.45; } #rk-clay-article .value-observer { position: absolute; right: calc(8 * var(--u)); bottom: calc(-4 * var(--u)); width: calc(150 * var(--u)); height: auto; max-width: none; } #rk-clay-article .value-bubble { position: absolute; right: calc(8 * var(--u)); top: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border: 1px solid #d6e3f2; border-radius: 50%; background: #fff; font-size: calc(14 * var(--u)); font-weight: 700; line-height: 1.4; text-align: center; white-space: nowrap; } #rk-clay-article .rating-sites-subheading { margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); color: #fff; font-size: calc(30 * var(--u)); font-weight: 850; line-height: 1.3; } #rk-clay-article .rating-site.klook { --rating-ink: #c2410c; --rating-rule: #ff5b00; } #rk-clay-article .rating-site.kkday { --rating-ink: #0e7c86; --rating-rule: #26bec9; } #rk-clay-article .rating-site.getyourguide { --rating-ink: #b42318; --rating-rule: #ff5533; } /* Chapters 02-03: area tables */ #rk-clay-article .spot-box table { text-align: left; } #rk-clay-article .spot-box th, #rk-clay-article .spot-box td { padding: calc(6 * var(--u)) calc(12 * var(--u)); } #rk-clay-article .spot-box thead th { text-align: center; } #rk-clay-article .spot-box td:last-child { text-align: center; font-weight: 750; color: var(--accent-text); } #rk-clay-article .chapter-03 .cleanliness-box { grid-template-columns: minmax(0, 250fr) minmax(0, 424fr); } #rk-clay-article .chapter-03 .cleanliness-label h3 { font-size: calc(21 * var(--u)); } #rk-clay-article .chapter-03 .cleanliness-box .thumb .icon { width: calc(30 * var(--u)); height: calc(30 * var(--u)); } #rk-clay-article .rule-box p { font-size: calc(17 * var(--u)); } /* Details */ #rk-clay-article .spot-details .tool-heading h2 { font-size: calc(32 * var(--u)); } #rk-clay-article .spot-details .check-time { font-size: calc(40 * var(--u)); white-space: nowrap; } /* Inline links that open a place on the map */ #rk-clay-article .rk-article-map-link { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #006bcc; font: inherit; line-height: inherit; letter-spacing: inherit; text-align: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; cursor: pointer; -webkit-appearance: none; appearance: none; } #rk-clay-article .rk-article-map-link:hover { color: #004a91; } #rk-clay-article .rk-pin { border: 0; background: none; } #rk-clay-article .rk-pin svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px #0003); transform-origin: 50% 100%; transition: transform .15s; } #rk-clay-article .rk-pin.is-active svg { transform: scale(1.3); } #rk-clay-article .rk-pin-main svg { transform-origin: 50% 50%; } #rk-clay-article .rk-pop { min-width: 180px; color: #1d2e45; font-size: 13px; line-height: 1.6; } #rk-clay-article .rk-pop-cat { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--cat); color: #fff; font-size: 11px; font-weight: 700; } #rk-clay-article .rk-pop h5 { margin: 6px 0 2px; font-size: 15px; font-weight: 800; line-height: 1.35; } #rk-clay-article .rk-pop p { margin: 0 0 4px; } #rk-clay-article .rk-pop .rk-pop-en { color: #6b7e93; font-size: 11px; } #rk-clay-article .rk-pop .rk-pop-dist { color: #0064c8; font-weight: 700; } #rk-clay-article .rk-pop a { color: #006bcc; font-weight: 700; text-decoration: underline; } #rk-clay-article .chapter-03 .review-card.critical h3 { padding-top: calc(2 * var(--u)); font-size: calc(21 * var(--u)); letter-spacing: -.055em; white-space: normal; } /* Ticket price comparison (replaces the hotel price trend tool) */ #rk-clay-article .ticket-tool .tool-heading h3, #rk-clay-article .course-tool .tool-heading h3 { font-size: calc(32 * var(--u)); } #rk-clay-article .price-controls .price-conditions { grid-template-columns: 1fr 1.3fr; } #rk-clay-article #ticket-summary { color: var(--price-lowest); font-weight: 800; } #rk-clay-article .ticket-chart .ticket-seller { font-size: 15px; font-weight: 700; fill: #26364a; } #rk-clay-article .ticket-chart .ticket-bar { fill: #7db9ff; } #rk-clay-article .ticket-chart .ticket-bar.is-best { fill: var(--price-lowest); } #rk-clay-article .ticket-chart .ticket-value { font-size: 16px; font-weight: 700; fill: #26364a; } #rk-clay-article .ticket-chart .min-price { font-size: 18px; } #rk-clay-article .ticket-table th:first-child { width: 36%; } #rk-clay-article .ticket-table th:nth-child(2) { width: 28%; } #rk-clay-article .ticket-table tbody th { font-weight: 700; text-align: left; } #rk-clay-article .ticket-table .lowest-badge { margin-left: 6px; white-space: nowrap; } #rk-clay-article .ticket-yen { display: block; color: #5b6d83; font-size: clamp(10px, calc(17 * var(--u)), 13px); } #rk-clay-article .ticket-note { text-align: left; font-size: clamp(10px, calc(18 * var(--u)), 14px); line-height: 1.5; } #rk-clay-article .lowest .ticket-note { color: var(--ink); } /* Model course tool (chapter 03) */ #rk-clay-article .course-tool { border: calc(1 * var(--u)) solid #d8e7f7; } #rk-clay-article .course-tool .tool-heading { height: calc(106 * var(--u)); } #rk-clay-article .course-panel { margin-top: calc(10 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; } #rk-clay-article .course-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(8 * var(--u)) calc(16 * var(--u)); margin-bottom: calc(14 * var(--u)) !important; color: #4f6580; font-size: clamp(11px, calc(19 * var(--u)), 15px); } #rk-clay-article .course-summary b { color: var(--accent); font-size: calc(30 * var(--u)); font-weight: 900; letter-spacing: -.03em; } #rk-clay-article .course-summary span { padding: calc(2 * var(--u)) calc(12 * var(--u)); border-radius: 99px; background: #eef5fe; font-weight: 700; } #rk-clay-article .course-steps { margin: 0; padding: 0; list-style: none; } #rk-clay-article .course-steps li { display: grid; grid-template-columns: calc(84 * var(--u)) minmax(0, 1fr); gap: calc(20 * var(--u)); } #rk-clay-article .course-steps time { color: var(--accent); font-size: calc(26 * var(--u)); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; } #rk-clay-article .course-steps li > div { position: relative; padding: 0 0 calc(18 * var(--u)) calc(28 * var(--u)); border-left: calc(3 * var(--u)) solid #cfe3fb; } #rk-clay-article .course-steps li:last-child > div { border-left-color: transparent; } #rk-clay-article .course-steps li > div::before { content: ""; position: absolute; left: calc(-12 * var(--u)); top: calc(4 * var(--u)); width: calc(21 * var(--u)); height: calc(21 * var(--u)); border: calc(4 * var(--u)) solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 calc(2 * var(--u)) #9cc8f7; } #rk-clay-article .course-steps b { display: block; font-size: calc(22 * var(--u)); font-weight: 800; line-height: 1.3; } #rk-clay-article .course-steps span { display: block; margin-top: calc(3 * var(--u)); color: #4f6580; font-size: calc(18 * var(--u)); line-height: 1.45; } #rk-clay-article .course-steps em { display: inline-block; margin-top: calc(6 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: 99px; background: #eef5fe; color: var(--accent-text); font-size: calc(16 * var(--u)); font-style: normal; font-weight: 700; } #rk-clay-article .course-plan-button .icon { width: 1.1em; height: 1.1em; stroke-width: 2.6; } /* Review panel boxes: popular highlights (02) and crowd tendency from reviews (03) */ #rk-clay-article .review-ranking, #rk-clay-article .crowd-review { margin-top: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); border-radius: calc(11 * var(--u)); background: #fcfdff; color: #1d2e45; } #rk-clay-article .review-ranking h3, #rk-clay-article .crowd-review h3 { display: flex; align-items: center; gap: calc(12 * var(--u)); color: var(--accent); font-size: calc(24 * var(--u)); font-weight: 800; line-height: 1.3; } #rk-clay-article .review-ranking h3 .icon, #rk-clay-article .crowd-review h3 .icon { width: calc(32 * var(--u)); height: calc(32 * var(--u)); } #rk-clay-article .review-ranking ol { margin: calc(10 * var(--u)) 0 0; padding: 0; list-style: none; } #rk-clay-article .review-ranking li { display: grid; grid-template-columns: calc(44 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(14 * var(--u)); padding: calc(10 * var(--u)) 0; border-top: calc(1 * var(--u)) solid #e3ebf4; } #rk-clay-article .review-ranking li:first-child { border-top: 0; } #rk-clay-article .review-ranking li > b { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: #bca36f; color: #fff; font-size: calc(24 * var(--u)); font-weight: 900; } #rk-clay-article .review-ranking li:nth-child(2) > b { background: #9aa9bb; } #rk-clay-article .review-ranking li:nth-child(3) > b { background: #c4987a; } #rk-clay-article .review-ranking strong { display: block; font-size: calc(21 * var(--u)); font-weight: 800; line-height: 1.35; } #rk-clay-article .rank-bar { display: block; height: calc(9 * var(--u)); margin-top: calc(6 * var(--u)); overflow: hidden; border-radius: 99px; background: #e6eef8; } #rk-clay-article .rank-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #5aa8ff); } #rk-clay-article .review-ranking em { color: #4f6580; font-size: calc(19 * var(--u)); font-style: normal; font-weight: 700; white-space: nowrap; } #rk-clay-article .review-ranking > p, #rk-clay-article .crowd-note { margin-top: calc(8 * var(--u)) !important; color: #5b6d83; font-size: clamp(10px, calc(16 * var(--u)), 13px); line-height: 1.6; } #rk-clay-article .crowd-matrix { width: 100%; margin-top: calc(12 * var(--u)); overflow: hidden; border: calc(1 * var(--u)) solid #cbdef2; border-collapse: separate; border-spacing: 0; border-radius: calc(8 * var(--u)); background: #fff; font-size: clamp(11px, calc(20 * var(--u)), 16px); text-align: center; table-layout: fixed; } #rk-clay-article .crowd-matrix th, #rk-clay-article .crowd-matrix td { padding: calc(10 * var(--u)) calc(8 * var(--u)); border-bottom: calc(1 * var(--u)) solid #d2e3f4; } #rk-clay-article .crowd-matrix tr:last-child > * { border-bottom: 0; } #rk-clay-article .crowd-matrix thead th { background: #e7f1fd; color: #425873; font-weight: 750; } #rk-clay-article .crowd-matrix tbody th { font-weight: 800; } #rk-clay-article .crowd-matrix tbody th small { display: block; color: #6b7e93; font-size: .8em; font-weight: 500; } #rk-clay-article .crowd-matrix td, #rk-clay-article .crowd-matrix th + th { border-left: calc(1 * var(--u)) solid #d2e3f4; } #rk-clay-article .crowd-voices { display: grid; gap: calc(6 * var(--u)); margin: calc(12 * var(--u)) 0 0; padding: 0; list-style: none; } #rk-clay-article .crowd-voices li { padding: calc(8 * var(--u)) calc(14 * var(--u)); border-left: calc(4 * var(--u)) solid #7d97b8; border-radius: calc(4 * var(--u)); background: #f1f5fa; font-size: calc(18 * var(--u)); line-height: 1.5; } #rk-clay-article .spot-box td:last-child { color: inherit; font-weight: 500; text-align: left; } #rk-clay-article .time-box td:nth-child(2) { color: var(--accent-text); font-weight: 750; text-align: center; } #rk-clay-article .time-box td:last-child { font-size: .92em; } /* ===== Real-spot additions (Seoul) ===== */ #rk-clay-article .rating-site.fortravel { --rating-ink: #0b7a3b; --rating-rule: #24b35a; } #rk-clay-article .ticket-mode-note { margin: 0 !important; padding: calc(10 * var(--u)) calc(14 * var(--u)); background: #fff; border-top: 1px dashed #d2e3f4; color: #425873; font-size: clamp(11px, calc(18 * var(--u)), 14px); line-height: 1.6; } #rk-clay-article .ticket-box .price-cell strong small { font-size: calc(22 * var(--u)); letter-spacing: 0; } #rk-clay-article .ticket-price { font-size: clamp(14px, calc(26 * var(--u)), 22px); font-weight: 700; color: var(--accent-text); } #rk-clay-article .lowest .ticket-price { color: var(--price-lowest); } #rk-clay-article .rank-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); margin: calc(10 * var(--u)) 0 0; padding: 0; list-style: none; } #rk-clay-article .rank-items li { padding: calc(12 * var(--u)) calc(14 * var(--u)); border: calc(1 * var(--u)) solid #d6e5f6; border-radius: calc(10 * var(--u)); background: #f6faff; } #rk-clay-article .rank-items span { display: block; font-size: calc(18 * var(--u)); font-weight: 800; color: #425873; } #rk-clay-article .rank-items strong { display: block; color: var(--accent); font-size: calc(54 * var(--u)); font-weight: 900; line-height: 1.1; letter-spacing: -.04em; } #rk-clay-article .rank-items em { display: block; font-size: calc(16 * var(--u)); font-style: normal; color: #4f6580; } #rk-clay-article .crowd-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); } #rk-clay-article .crowd-col { padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u)); } #rk-clay-article .crowd-col.is-calm { background: #e9f7ef; border: calc(1 * var(--u)) solid #bfe6cf; } #rk-clay-article .crowd-col.is-busy { background: #fff1e8; border: calc(1 * var(--u)) solid #f6cfb5; } #rk-clay-article .crowd-col h4 { margin: 0 0 calc(6 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 800; } #rk-clay-article .crowd-col.is-calm h4 { color: #16794a; } #rk-clay-article .crowd-col.is-busy h4 { color: #b4471a; } #rk-clay-article .crowd-col ul { margin: 0; padding-left: 1.2em; font-size: calc(18 * var(--u)); line-height: 1.55; } #rk-clay-article .photo-credits { margin-top: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); border: 1px solid #d4e5f7; border-radius: calc(10 * var(--u)); background: #fff; font-size: clamp(10px, calc(16 * var(--u)), 13px); line-height: 1.6; color: #425873; } #rk-clay-article .photo-credits summary { cursor: pointer; font-weight: 700; } #rk-clay-article .photo-credits ul { margin: 8px 0 0; padding-left: 1.2em; } #rk-clay-article .photo-credits li { margin-bottom: 4px; overflow-wrap: anywhere; } #rk-clay-article .photo-credits li > span { display: block; color: #5b6d83; } #rk-clay-article .photo-credits a { color: #006bcc; } #rk-clay-article .photo-credits p { margin-top: 6px !important; } #rk-clay-article .research-sources { margin-top: calc(10 * var(--u)) !important; color: #5b6d83; font-size: clamp(10px, calc(15 * var(--u)), 12px); line-height: 1.6; } /* ===== Restaurant additions ===== */ /* レストラン記事だけで使う部品（観光記事の extra.css の後に読み込む） */ /* 01 看板メニューの価格 */ #rk-clay-article .signature-box .price-cell strong { font-size: calc(36 * var(--u)); } #rk-clay-article .signature-box .price-cell > span { font-size: calc(19 * var(--u)); line-height: 1.35; } /* 01 Googleの星の分布 */ #rk-clay-article .star-dist { grid-column: 1 / -1; padding: calc(14 * var(--u)) calc(18 * var(--u)); border-radius: calc(11 * var(--u)); background: #fff; } #rk-clay-article .star-dist h4 { color: var(--accent-text); font-size: calc(21 * var(--u)); font-weight: 800; } #rk-clay-article .star-dist ul { margin: calc(8 * var(--u)) 0 0; padding: 0; list-style: none; display: grid; gap: calc(6 * var(--u)); } #rk-clay-article .star-dist li { display: grid; grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr) calc(60 * var(--u)); align-items: center; gap: calc(12 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; color: #425873; } #rk-clay-article .star-dist li .rank-bar { margin-top: 0; height: calc(12 * var(--u)); } #rk-clay-article .star-dist li em { font-style: normal; text-align: right; color: #4f6580; } #rk-clay-article .star-dist > p { margin-top: calc(8 * var(--u)); color: #5b6d83; font-size: clamp(10px, calc(16 * var(--u)), 13px); line-height: 1.5; } #rk-clay-article .keyword-ranking { margin-bottom: calc(14 * var(--u)); } /* 02 メニュー表 */ #rk-clay-article .menu-box table { table-layout: auto; } #rk-clay-article .menu-box tbody th { text-align: left; padding-left: calc(12 * var(--u)); font-weight: 800; } #rk-clay-article .menu-box td:nth-child(2) { white-space: nowrap; font-weight: 800; } #rk-clay-article .menu-yen { display: block; color: #4f6580; font-size: calc(15 * var(--u)); font-weight: 600; } #rk-clay-article .menu-box td:last-child, #rk-clay-article .check-box td:last-child, #rk-clay-article .hours-box td:last-child { text-align: left; } #rk-clay-article .menu-box p, #rk-clay-article .check-box p, #rk-clay-article .hours-box p { white-space: normal; line-height: 1.5; } #rk-clay-article .budget-tool { margin-top: calc(18 * var(--u)); } /* 04 利用シーン別のチェック表 */ #rk-clay-article .check-box table { table-layout: auto; } #rk-clay-article .check-box tbody th { text-align: left; padding-left: calc(12 * var(--u)); white-space: nowrap; } #rk-clay-article .check-box td:nth-child(2) { font-weight: 800; white-space: nowrap; } #rk-clay-article .check-box .ok { color: #11804a; } #rk-clay-article .check-box .ng { color: #b5452b; } #rk-clay-article .check-box .so { color: #8a6a12; } /* 03 営業時間の表 */ #rk-clay-article .hours-box tbody th { white-space: nowrap; } /* 口コミが1件の章 */ #rk-clay-article .review-cards.is-single { grid-template-columns: 1fr; } /* 詳細情報のリンク（公式サイト・Naver・Googleなど複数） */ #rk-clay-article .official-links { display: grid; gap: 0; } /* 地図の吹き出し：記事へのリンク */ #rk-clay-article .rk-pop a.rk-pop-article { display: inline-block; margin-right: 10px; } /* 03 見出しの文字数が多いため少し小さくする */ #rk-clay-article .chapter-03 .official-heading h2 { font-size: calc(27 * var(--u)); } #rk-clay-article .chapter-04 .official-heading h2 { font-size: calc(26 * var(--u)); } /* 「イメージ」写真（ヒーロー） */ #rk-clay-article .hero > .photo-tag { left: auto; right: 10px; top: 10px; } #rk-clay-article .crowd-columns.is-single { grid-template-columns: 1fr; } /* 掲載サイトの色 */ #rk-clay-article .rating-site.naver { --rating-ink: #03873a; --rating-rule: #03c75a; } #rk-clay-article .rating-site.diningcode { --rating-ink: #c2410c; --rating-rule: #ff6b2c; } #rk-clay-article .rating-site.tabelog { --rating-ink: #a8620a; --rating-rule: #f2a516; } #rk-clay-article .rating-site.catchtable { --rating-ink: #c22b4b; --rating-rule: #ff4a6e; } #rk-clay-article .rating-site.kakao { --rating-ink: #6b5a00; --rating-rule: #fee500; } #rk-clay-article .rating-site.other { --rating-ink: #3b4f6b; --rating-rule: #7d93b0; } /* キーワード順位の4位以下 */ #rk-clay-article .review-ranking li:nth-child(n+4) > b { background: #8da2bb; } /* 切り抜けない写真（CC BY-ND・公共ヌリ第3類型）は、枠の中に写真全体を収めて表示する */ #rk-clay-article .photo-frame > img[data-fit="whole"] , /* 切り抜けない写真（CC BY-ND・公共ヌリ第3類型）は、枠の中に写真全体を収めて表示する */ #rk-clay-article .photo-frame > picture > img[data-fit="whole"] { object-fit: contain; object-position: center top; } #rk-clay-article .photo-frame:has(> img[data-fit="whole"]) .photo-open::after , #rk-clay-article .photo-frame:has(> picture > img[data-fit="whole"]) .photo-open::after { display: none; } /* 写真の少ない章：1枚なら本文の上に横長で置き、2枚なら同じ大きさで並べる */ #rk-clay-article .official-content:has(> .official-photos > .photo-frame:only-child) { grid-template-columns: minmax(0, 1fr); } #rk-clay-article .official-photos:has(> .photo-frame:only-child) { grid-template-rows: auto; margin-top: 0; } #rk-clay-article .official-photos > .photo-frame:only-child { aspect-ratio: 3 / 2; } #rk-clay-article .chapter-04 .official-photos:has(> .photo-frame:nth-child(2):last-child) { grid-template-rows: repeat(2, minmax(0, 1fr)); } #rk-clay-article .food-strip > .photo-frame:nth-child(2):last-child { grid-column: 2 / -1; } #rk-clay-article .official-content.no-photos { grid-template-columns: minmax(0, 1fr); }