/* しまなみ特集 地図目次 / Figma 2395:36999 */
.toc {
  --toc-ink: #123c55;
  --toc-paper: #fffcf2;
  --toc-gold: #f6c90f;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--toc-paper);
  color: var(--toc-ink);
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  isolation: isolate;
}
.toc-map-canvas { position: relative; container-type: inline-size; isolation: isolate; width: 100%; margin-inline: auto; overflow: hidden; }
.toc--top .toc-map-canvas { aspect-ratio: 1440 / 1072; }
.toc--footer .toc-map-canvas { aspect-ratio: 1440 / 678; }
.toc-map-art { position: absolute; z-index: -1; left: 0; width: 100%; pointer-events: none; }
.toc-map-art img { width: 100%; height: 100%; max-width: none; object-fit: fill; }
.toc--top .toc-map-art { top: 2.2388%; height: 97.7612%; }
.toc--footer .toc-map-art { inset-block: 0; height: 100%; }
.toc-map-header { position: absolute; z-index: 2; }
.toc--top .toc-map-header { left: 3.6111%; top: 1.4925%; width: 38.2639%; }
.toc--footer .toc-map-header { left: 4.4444%; top: 2.0649%; width: 23.8889%; }
.toc-heading { margin: 0; font-weight: 900; line-height: 1.3; letter-spacing: -0.05em; white-space: nowrap; }
.toc--top .toc-heading { font-size: clamp(30px, 4.4444cqw, 64px); }
.toc--footer .toc-heading { font-size: clamp(30px, 2.7778cqw, 40px); }
.toc-description { width: max-content; max-width: 42cqw; margin: 24px 0 0; font-size: clamp(14px, 1.25cqw, 18px); font-weight: 400; line-height: 30px; }
.toc-top-link { position: absolute; z-index: 3; top: 2.0649%; right: 3.4723%; display: inline-block; min-width: 44px; height: 44px; font-size: clamp(14px, 1.3889cqw, 20px); font-weight: 700; line-height: 44px; text-underline-offset: 4px; transform: translateY(clamp(0px, calc(1.8056cqw - 22px), 4px)); }
.toc-top-link:hover { text-decoration-thickness: 2px; }
.toc-map-point { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; width: var(--point-w); color: inherit; text-align: center; text-decoration: none; }
.toc-map-pill { display: inline-flex; align-items: center; justify-content: center; gap: clamp(5px, .6944cqw, 10px); width: 100%; height: var(--pill-h); margin: 0; padding: 0 clamp(8px, 1.1111cqw, 16px); border: 2px solid var(--toc-ink); border-radius: 999px; background: var(--toc-paper); color: var(--toc-ink); font: 700 var(--point-font)/1 'Noto Sans JP', 'Hiragino Sans', sans-serif; white-space: nowrap; }
.toc-map-point.is-published .toc-map-pill,
.toc-category.is-published .toc-map-pill { border-color: var(--toc-gold); }
.toc-map-point.is-published .toc-map-pill { width: auto; }
.toc-map-arrow { flex: 0 0 auto; font-size: 1.12em; line-height: 1; }
.toc-map-status { display: inline-flex; align-items: center; justify-content: center; height: var(--status-h, clamp(20px, 1.9444cqw, 28px)); margin-top: 3px; padding: 0 clamp(8px, .8333cqw, 12px); border-radius: 999px; background: var(--toc-ink); color: #fff; font-size: clamp(12px, .9722cqw, 14px); font-weight: 700; line-height: 1; white-space: nowrap; }
.toc-map-anchor { display: block; width: var(--anchor-size, clamp(10px, .9722cqw, 14px)); height: var(--anchor-size, clamp(10px, .9722cqw, 14px)); margin-top: var(--anchor-gap, 9px); border: 2px solid var(--toc-paper); border-radius: 50%; background: var(--toc-ink); }
.toc-map-point.is-published .toc-map-anchor { background: var(--toc-gold); }
.toc-map-point.is-published { min-width: 44px; min-height: 44px; }
.toc-map-point.is-published:hover .toc-map-pill,
.toc-category.is-published:hover .toc-map-pill { text-decoration: underline; text-underline-offset: 4px; }
.toc-map-point.is-published:focus-visible,
.toc-category.is-published:focus-visible,
.toc-top-link:focus-visible,
.toc-mihara-article:focus-visible { outline: 3px solid var(--toc-ink); outline-offset: 3px; }

.toc-map-point--mihara { left: 9.4444%; top: 21.2687%; --point-w: 8.6111%; --pill-h: max(44px, 3.1944cqw); --point-font: clamp(16px, 1.9444cqw, 28px); }
.toc-map-point--onomichi { left: 85.4167%; top: 28.3582%; --point-w: 10.9722%; --pill-h: max(28px, 2.7778cqw); --point-font: clamp(14px, 1.5972cqw, 23px); }
.toc-map-point--onomichi .toc-map-pill { width: auto; }
.toc-map-point--ikuchijima { left: 58.3333%; top: 38.6194%; --point-w: 11.6667%; --pill-h: max(32px, 3.4722cqw); --point-font: clamp(16px, 1.9444cqw, 28px); --anchor-gap: 10px; }
.toc-map-point--tatara-bridge { left: 41.875%; top: 51.4925%; --point-w: 10.0694%; --pill-h: max(28px, 2.6389cqw); --point-font: clamp(14px, 1.5972cqw, 23px); }
.toc-map-point--tatara-bridge.is-published { --anchor-gap: 10px; }
.toc-map-point--omishima { left: 26.875%; top: 66.0448%; --point-w: 9.5139%; --pill-h: max(30px, 3.3333cqw); --point-font: clamp(16px, 1.9444cqw, 28px); }
.toc-map-point--omishima-bridge { left: 65.8333%; top: 72.0149%; --point-w: 8.6806%; --pill-h: max(28px, 2.5cqw); --point-font: clamp(14px, 1.5972cqw, 23px); }
.toc-mihara-button { position: relative; display: flex; align-items: flex-start; justify-content: center; width: 100%; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.toc-map-point--mihara > .toc-map-anchor { position: absolute; top: calc(var(--pill-h) + var(--anchor-gap, 9px)); left: 50%; margin-top: 0; transform: translateX(-50%); }
.toc-mihara-button:focus-visible { outline: 3px solid var(--toc-ink); outline-offset: 3px; }
.toc-mihara-sign { display: inline-flex; flex: 0 0 1em; align-items: center; justify-content: center; font-size: 1.08em; line-height: 1; }
.toc-mihara-panel { position: absolute; z-index: 5; left: 13.9583%; top: 29.0112%; display: grid; width: max(160px, 14.0278%); padding: 4px clamp(11px, 1.3889cqw, 20px); border-radius: 12px; background: var(--toc-paper); box-shadow: 0 2px 8px rgb(18 60 85 / 10%); }
.toc-mihara-panel[hidden] { display: none; }
.toc-mihara-article { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 50px; color: inherit; font-size: clamp(14px, 1.5278cqw, 22px); font-weight: 700; line-height: 1.35; text-decoration: none; white-space: nowrap; }
.toc-mihara-article + .toc-mihara-article { border-top: 1px solid var(--toc-ink); }
.toc-mihara-article:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }

.toc-category { position: absolute; z-index: 2; color: inherit; text-align: center; text-decoration: none; }
.toc-category-art { position: absolute; left: 0; top: 0; width: var(--art-w); height: var(--art-h); max-width: none; object-fit: contain; }
.toc-category-label { position: absolute; left: var(--label-x); top: var(--label-y); display: inline-flex; align-items: center; justify-content: center; width: var(--label-w); height: var(--label-h); font-family: 'Klee One', 'YuKyokasho', 'Yu Kyokasho', 'Hiragino Mincho ProN', serif; font-size: var(--category-font); font-weight: 600; line-height: 1; white-space: nowrap; }
.toc-category.is-coming .toc-category-label { border: 2px solid var(--toc-gold); border-radius: 999px; background: var(--toc-paper); }
.toc-category .toc-map-status { position: absolute; left: var(--status-x); top: var(--status-y); margin: 0; }
.toc-category--stay { left: .5556%; top: 37.6866%; width: 17.3611%; height: 18.2836%; --art-w: 100%; --art-h: 87.1795%; --label-x: 12%; --label-y: 57.9487%; --label-w: 36%; --label-h: 25.641%; --status-x: 12%; --status-y: 85.1282%; --category-font: clamp(16px, 2.2222cqw, 32px); }
.toc-category--gourmet { left: .6944%; top: 56.3433%; width: 15.9722%; height: 18.5634%; --art-w: 100%; --art-h: 66%; --label-x: 9.5652%; --label-y: 58%; --label-w: 54.3478%; --label-h: 25%; --status-x: 17.1739%; --status-y: 84.5%; --category-font: clamp(16px, 2.2222cqw, 32px); }
.toc-category--shop { left: .6944%; top: 75.9328%; width: 18.0556%; height: 20.056%; --art-w: 100%; --art-h: 65.1163%; --label-x: 11.5385%; --label-y: 60.4651%; --label-w: 57.6923%; --label-h: 23.2558%; --status-x: 23.0769%; --status-y: 85.1163%; --category-font: clamp(16px, 2.2222cqw, 32px); }
.toc-category--gallery { left: 76.3889%; top: 73.1343%; width: 22.2222%; height: 20.056%; --art-w: 100%; --art-h: 74.4186%; --label-x: 0; --label-y: 74.4186%; --label-w: 100%; --label-h: 25.5814%; --category-font: clamp(16px, 1.9444cqw, 28px); }
.toc-category.is-published { min-width: 44px; min-height: 44px; }

.toc--footer .toc-map-point--mihara { left: 11.7361%; top: 22.1239%; --point-w: 8.125%; --pill-h: max(34px, 2.9861cqw); }
.toc--footer .toc-map-point--onomichi { left: 89.0278%; top: 30.236%; --point-w: 8.6111%; --pill-h: max(27px, 2.5cqw); }
.toc--footer .toc-map-point--ikuchijima { left: 58.4722%; top: 38.7906%; --point-w: 9.7222%; --pill-h: max(32px, 2.9861cqw); }
.toc--footer .toc-map-point--tatara-bridge { left: 42.6389%; top: 51.0324%; --point-w: 9.375%; --pill-h: max(27px, 2.5cqw); }
.toc--footer .toc-map-point--omishima { left: 29.0278%; top: 67.4041%; --point-w: 7.2222%; --pill-h: max(30px, 2.9167cqw); }
.toc--footer .toc-map-point--omishima-bridge { left: 61.6667%; top: 72.8614%; --point-w: 8.3333%; --pill-h: max(27px, 2.5cqw); }
.toc--footer .toc-mihara-panel { left: 12.4306%; top: 30.0885%; width: max(160px, 12.5%); }
.toc--footer .toc-category--stay { left: .4167%; top: 39.0855%; width: 13.8889%; height: 16.2242%; --art-w: 95%; --art-h: 77.2727%; --label-x: 7%; --label-y: 63.6364%; --label-w: 36%; --label-h: 36.3636%; --status-x: 46%; --status-y: 68.1818%; --category-font: clamp(14px, 2.2222cqw, 32px); }
.toc--footer .toc-category--gourmet { left: .2778%; top: 56.7847%; width: 14.3056%; height: 17.8466%; --art-w: 92.233%; --art-h: 78.5124%; --label-x: 7.767%; --label-y: 68.595%; --label-w: 48.5437%; --label-h: 31.405%; --status-x: 59.2233%; --status-y: 72.7273%; --category-font: clamp(14px, 2.2222cqw, 32px); }
.toc--footer .toc-category--shop { left: .2778%; top: 75.3687%; width: 14.3056%; height: 20.5015%; --art-w: 97.0874%; --art-h: 80.5755%; --label-x: 5.8252%; --label-y: 71.223%; --label-w: 50.4854%; --label-h: 28.777%; --status-x: 59.2233%; --status-y: 74.8201%; --category-font: clamp(14px, 2.2222cqw, 32px); }
.toc--footer .toc-category--gallery { left: 80.5556%; top: 72.7139%; width: 18.0556%; height: 23.7463%; --art-w: 100%; --art-h: 77.6398%; --label-x: 1.9231%; --label-y: 72.6708%; --label-w: 96.1538%; --label-h: 27.3292%; --category-font: clamp(15px, 1.9444cqw, 28px); }
.toc--footer .toc-category.is-coming .toc-category-label { border: 0; background: var(--toc-paper); }

@media (min-width: 1200px) {
  .toc--footer .toc-top-link { right: 4.4444%; }
  .toc--footer .toc-map-point { --point-font: clamp(20px, 1.5278cqw, 22px); }
  .toc--top .toc-mihara-panel { transform: translateY(-8px); }
  .toc--top .toc-category .toc-map-status { width: 88px; height: 28px; padding-inline: 0; transform: translateX(-50%); }
  .toc-map-point.is-coming .toc-map-status { width: 88px; height: 28px; padding-inline: 0; font-size: 14px; }
  .toc--footer .toc-category .toc-map-status { width: 80px; height: 28px; padding-inline: 0; font-size: 14px; }
  .toc--top .toc-category--stay { --status-x: 30%; }
  .toc--top .toc-category--gourmet { --status-x: 36.7391%; }
  .toc--top .toc-category--shop { --status-x: 40.3847%; }
  .toc--footer .toc-category-label { box-sizing: border-box; letter-spacing: 0; }
  .toc--footer .toc-category--stay,
  .toc--footer .toc-category--gourmet,
  .toc--footer .toc-category--shop { --category-font: clamp(20px, 1.6667cqw, 24px); }
  .toc--footer .toc-category--gallery { --category-font: clamp(16px, 1.3889cqw, 20px); }
}

@media (max-width: 1199px) {
  .toc-map-canvas { max-width: 560px; }
  .toc--top .toc-map-canvas { aspect-ratio: 390 / 952; }
  .toc--footer .toc-map-canvas { aspect-ratio: 390 / 568; }
  .toc--top .toc-map-art { top: 4.2017%; height: 95.7983%; }
  .toc--footer .toc-map-art { top: 2.8169%; bottom: auto; height: 89.4366%; }
  .toc--top .toc-map-header { left: 8.2051%; top: 1.7857%; width: 66.1538%; }
  .toc--footer .toc-map-header { left: 6.1538%; top: .8803%; width: 66.1538%; }
  .toc-heading { font-size: clamp(26px, 7.6923cqw, 30px) !important; line-height: 42px; }
  .toc-description { width: 16em; max-width: none; margin-top: 16px; font-size: clamp(14px, 4.1026cqw, 16px); line-height: 24px; }
  .toc-top-link { top: auto; right: auto; bottom: 0; left: 33.8462%; font-size: clamp(12px, 3.3333cqw, 13px); transform: none; }
  .toc-map-pill { gap: 5px; padding-inline: 8px; border-width: 1.5px; }
  .toc-map-status { --status-h: 20px; padding-inline: 8px; font-size: 12px; }
  .toc-map-anchor { --anchor-size: 10px; border-width: 1.5px; }
  .toc-map-point--mihara { left: 10.2564%; top: 18.5924%; --point-w: 21.0256%; --pill-h: 34px; --point-font: clamp(15px, 4.6154cqw, 18px); }
  .toc-map-point--onomichi { left: 73.8462%; top: 21.4286%; --point-w: 24.1026%; --pill-h: 30px; --point-font: clamp(14px, 4.359cqw, 17px); --anchor-gap: 4px; }
  .toc-map-point--ikuchijima { left: 60.5128%; top: 35.9244%; --point-w: 25.641%; --pill-h: 36px; --point-font: clamp(14px, 4.359cqw, 17px); --anchor-gap: 10px; }
  .toc-map-point--tatara-bridge { left: 33.5897%; top: 45.063%; --point-w: 26.9231%; --pill-h: 30px; --point-font: clamp(14px, 4.359cqw, 17px); --anchor-gap: 4px; }
  .toc-map-point--omishima { left: 11.5385%; top: 56.6176%; --point-w: 21.0256%; --pill-h: 30px; --point-font: clamp(14px, 4.359cqw, 17px); --anchor-gap: 4px; }
  .toc-map-point--omishima-bridge { left: 69.7436%; top: 59.3487%; --point-w: 27.1795%; --pill-h: 28px; --point-font: clamp(14px, 4.359cqw, 17px); --anchor-gap: 4px; }
  .toc-mihara-panel { left: 17.9487%; top: calc(25.105% - 8px); isolation: isolate; box-sizing: border-box; width: clamp(100px, 31.2821cqw, 122px); padding: 0 8px; border-radius: 0; background: transparent; box-shadow: none; }
  .toc-mihara-panel::before { position: absolute; z-index: -1; inset: 8px 0; border-radius: 8px; background: var(--toc-paper); box-shadow: 0 2px 8px rgb(18 60 85 / 10%); content: ''; }
  .toc-mihara-article { min-height: 44px; font-size: 14px; }
  .toc-category--stay { left: 2.0513%; top: 75.9454%; width: 31.7949%; height: 14.6008%; --art-w: 100%; --art-h: 69.0647%; --label-x: 19.3548%; --label-y: 62.5899%; --label-w: 64.5161%; --label-h: 20.8633%; --status-x: 26.6129%; --status-y: 85.6115%; --category-font: clamp(16px, 4.8718cqw, 19px); }
  .toc-category--gourmet { left: 34.1026%; top: 77.4159%; width: 30.7692%; height: 13.1303%; --art-w: 100%; --art-h: 61.6%; --label-x: 13.3333%; --label-y: 58.4%; --label-w: 70%; --label-h: 23.2%; --status-x: 22.5%; --status-y: 84%; --category-font: clamp(16px, 4.8718cqw, 19px); }
  .toc-category--shop { left: 66.9231%; top: 76.3655%; width: 31.7949%; height: 14.1807%; --art-w: 100%; --art-h: 64.4444%; --label-x: 6.4516%; --label-y: 61.4815%; --label-w: 84.6774%; --label-h: 21.4815%; --status-x: 23.7903%; --status-y: 85.1852%; --category-font: clamp(16px, 4.8718cqw, 19px); }
  .toc-category--gallery { left: 2.0513%; top: 89.811%; width: 94.8718%; height: 9.2437%; --art-w: 49.7297%; --art-h: 100%; --label-x: 50.5405%; --label-y: 20.4545%; --label-w: 49.4595%; --label-h: 45.4545%; --category-font: clamp(15px, 4.359cqw, 17px); }

  .toc--footer .toc-map-point--mihara { left: 9.2308%; top: 16.5479%; --point-w: 16.9231%; --pill-h: 30px; }
  .toc--footer .toc-map-point--onomichi { left: 75.8974%; top: 19.7179%; --point-w: 21.0256%; --pill-h: 25px; }
  .toc--footer .toc-map-point--ikuchijima { left: 59.7436%; top: 29.4007%; --point-w: 23.0769%; --pill-h: 30px; }
  .toc--footer .toc-map-point--tatara-bridge { left: 34.1026%; top: 35.9141%; --point-w: 24.1026%; --pill-h: 27px; }
  .toc--footer .toc-map-point--omishima { left: 13.5897%; top: 44.0111%; --point-w: 21.0256%; --pill-h: 27px; }
  .toc--footer .toc-map-point--omishima-bridge { left: 73.0769%; top: 46.827%; --point-w: 24.359%; --pill-h: 27px; }
  .toc--footer .toc-mihara-panel { left: 0; top: calc(23.0634% - 8px); }
  .toc--footer .toc-category--stay { left: 4.1026%; top: 63.3755%; width: 30%; height: 17.0769%; --art-w: 100%; --art-h: 61.8557%; --label-x: 17.094%; --label-y: 54.6392%; --label-w: 66.6667%; --label-h: 21.6495%; --status-x: 23.9316%; --status-y: 79.3814%; --category-font: clamp(16px, 4.8718cqw, 19px); }
  .toc--footer .toc-category--gourmet { left: 35.8974%; top: 64.7835%; width: 26.1538%; height: 15.667%; --art-w: 100%; --art-h: 55.0562%; --label-x: 6.8627%; --label-y: 50.5618%; --label-w: 92.1569%; --label-h: 23.5955%; --status-x: 22.549%; --status-y: 77.5281%; --category-font: clamp(16px, 4.8718cqw, 19px); }
  .toc--footer .toc-category--shop { left: 64.359%; top: 63.3755%; width: 30.7692%; height: 17.0769%; --art-w: 100%; --art-h: 60.8247%; --label-x: 9.1667%; --label-y: 54.6392%; --label-w: 85%; --label-h: 21.6495%; --status-x: 25.8333%; --status-y: 79.3814%; --category-font: clamp(16px, 4.8718cqw, 19px); }
  .toc--footer .toc-category--gallery { left: 1.7949%; top: calc(80.2747% - 4px); width: 94.6154%; height: 9.1549%; --art-w: 45%; --art-h: 100%; --label-x: 49.0515%; --label-y: 7.6923%; --label-w: 50.9485%; --label-h: 65.3846%; --category-font: clamp(15px, 4.359cqw, 17px); }
  .toc--footer .toc-category.is-coming .toc-category-label { border: 0; }
}

@media (max-width: 599px) {
  .toc--footer .toc-map-point--mihara { --point-w: 66px; --point-font: 16px; }
  .toc--footer .toc-map-point--mihara .toc-map-pill { gap: 2px; padding-inline: 6px; }
  .toc--footer .toc-map-point--mihara .toc-mihara-sign { font-size: 1em; }
  .toc--footer .toc-mihara-panel { --toc-mihara-frame-height: clamp(58px, 17.9487cqw, 70px); --toc-mihara-frame-inset: calc((88px - var(--toc-mihara-frame-height)) / 2); left: max(8px, 3.0769cqw); width: clamp(98px, 30.7692cqw, 120px); padding-inline: clamp(6px, 2.0513cqw, 8px); }
  .toc--footer .toc-mihara-panel::before { top: 50%; bottom: auto; height: var(--toc-mihara-frame-height); transform: translateY(-50%); }
  .toc--footer .toc-mihara-article { box-sizing: border-box; font-size: clamp(12px, 3.5897cqw, 14px); }
  .toc--footer .toc-mihara-article:first-child { padding-top: var(--toc-mihara-frame-inset); }
  .toc--footer .toc-mihara-article:last-child { padding-bottom: var(--toc-mihara-frame-inset); }
  .toc--footer .toc-category--gallery { top: calc(80.2747% + 6px); }
}

@media (max-width: 340px) {
  .toc--top .toc-heading { line-height: 1.35; }
  .toc--top .toc-description { margin-top: 12px; line-height: 1.5; }
  .toc--footer .toc-map-point--ikuchijima { top: 31%; }
  .toc--footer .toc-map-point--tatara-bridge { top: 37.2%; }
}

@media (min-width: 600px) and (max-width: 1199px) {
  .toc-map-art {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  .toc--top .toc-category .toc-map-status { transform: translateX(-50%); }
  .toc--top .toc-category--stay { --status-x: 51.6128%; }
  .toc--top .toc-category--gourmet { --status-x: 48.3333%; }
  .toc--top .toc-category--shop { --status-x: 48.7903%; }
  .toc--footer .toc-category .toc-map-status { transform: translateX(-50%); }
  .toc--footer .toc-category--stay { --status-x: 50.4273%; }
  .toc--footer .toc-category--gourmet { --status-x: 52.9412%; }
  .toc--footer .toc-category--shop { --status-x: 51.6667%; }
  .toc--footer .toc-mihara-panel { left: 8px; }
  .toc--footer .toc-top-link { top: 92.2535%; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .toc * { scroll-behavior: auto !important; }
}