/* Generated from tools/mockup-build/guide_sub.css. */
/* ===== guide subpages (round 4) ===== */
body.otaru-kanko:not(.zz) .phero{position:relative;height:min(58vh,540px);min-height:430px;overflow:hidden;background:#1d4a5e;color:#fff}
body.otaru-kanko:not(.zz) .phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.otaru-kanko:not(.zz) .phero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,35,50,.62) 0%,rgba(10,35,50,.2) 58%,rgba(10,35,50,0) 100%)}
body.otaru-kanko:not(.zz) .phero .c{position:absolute;inset:0;z-index:2;display:flex;align-items:center;padding-bottom:64px}
body.otaru-kanko:not(.zz) .phero .c>.g{width:100%}
body.otaru-kanko:not(.zz) .crumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;opacity:.95}
body.otaru-kanko:not(.zz) .crumbs li+li::before{content:"›";margin-right:6px;opacity:.7}
body.otaru-kanko:not(.zz) .crumbs a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
body.otaru-kanko:not(.zz) .phero h1{font-family:var(--round);font-weight:900;font-size:clamp(34px,4.6vw,56px);line-height:1.25;margin-top:16px;text-shadow:0 2px 20px rgba(0,0,0,.28)}
body.otaru-kanko:not(.zz) .phero h1 small{display:block;font-size:clamp(15px,1.5vw,18px);font-weight:700;margin-top:12px;line-height:1.6}
body.otaru-kanko:not(.zz) .phero .lead2{max-width:32em;margin-top:14px;font-size:15.5px;line-height:1.9;text-shadow:0 1px 10px rgba(0,0,0,.35)}
body.otaru-kanko:not(.zz) .achip{display:inline-block;background:var(--c,var(--a1));color:#fff;border-radius:999px;padding:3px 14px;font-family:var(--round);font-weight:700;font-size:13px;margin-top:14px}
body.otaru-kanko:not(.zz) .phero .wave{position:absolute;left:0;right:0;bottom:-1px;z-index:3;width:100%;height:90px;display:block}
body.otaru-kanko:not(.zz) .tbc{display:inline-block;margin:0 4px;padding:0 9px;border:1.5px dashed #d2a94a;border-radius:999px;color:#9a6a12;background:#fffaf0;font-family:var(--body);font-size:11.5px;font-weight:400;line-height:1.7;vertical-align:1px;white-space:nowrap;font-style:normal}
body.otaru-kanko:not(.zz) .meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px;color:var(--grey);margin-top:6px}
body.otaru-kanko:not(.zz) .meta b{font-family:var(--round);color:var(--deep)}
/* article */
body.otaru-kanko:not(.zz) .art{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
body.otaru-kanko:not(.zz) .side{position:sticky;top:90px}
body.otaru-kanko:not(.zz) .basic{background:#fff;border-radius:22px;box-shadow:0 12px 30px rgba(15,60,85,.10);padding:20px 22px 22px}
body.otaru-kanko:not(.zz) .basic h2{font-size:18px;font-weight:900;color:var(--deep);display:flex;align-items:center;gap:8px}
body.otaru-kanko:not(.zz) .basic dl{margin:10px 0 0}
body.otaru-kanko:not(.zz) .basic dl div{display:grid;grid-template-columns:6.2em 1fr;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13.5px;line-height:1.7}
body.otaru-kanko:not(.zz) .basic dt{font-family:var(--round);font-weight:700;color:var(--grey)}
body.otaru-kanko:not(.zz) .basic dd{margin:0}
body.otaru-kanko:not(.zz) .basic .me{background:#fff4ef;border-radius:14px;padding:12px 12px;border:0;margin-top:10px}
body.otaru-kanko:not(.zz) .basic .me dt{color:var(--coral)}
body.otaru-kanko:not(.zz) .basic .me dd b{font-family:var(--round);font-weight:900;color:var(--coral);font-size:16px}
body.otaru-kanko:not(.zz) .mapbtn{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
body.otaru-kanko:not(.zz) .mapbtn a{flex:1;text-align:center;background:var(--sky);color:var(--deep);border-radius:999px;padding:8px 10px;font-family:var(--round);font-weight:700;font-size:13px;white-space:nowrap}
body.otaru-kanko:not(.zz) .side .fine{font-size:11.5px;color:var(--grey);margin-top:10px;line-height:1.7}
body.otaru-kanko:not(.zz) .toc{background:#f3f8fa;border-radius:18px;padding:16px 20px;margin-top:26px}
body.otaru-kanko:not(.zz) .toc b{font-family:var(--round);color:var(--deep);font-size:14px}
body.otaru-kanko:not(.zz) .toc ol{margin:6px 0 0;padding-left:1.4em;font-size:14px;line-height:2}
body.otaru-kanko:not(.zz) .toc a{color:var(--sea);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
body.otaru-kanko:not(.zz) .body h2{font-size:26px;font-weight:900;color:var(--deep);margin-top:64px;padding-left:46px;position:relative;line-height:1.45}
body.otaru-kanko:not(.zz) .body h2::before{content:"";position:absolute;left:0;top:.45em;width:34px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 14'%3E%3Cpath d='M1 7c4-5 8-5 12 0s8 5 12 0 5-4 8-3' fill='none' stroke='%231a7fa6' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
body.otaru-kanko:not(.zz) .body h2:first-child{margin-top:0}
body.otaru-kanko:not(.zz) .body h3{font-size:19px;font-weight:900;color:var(--deep);margin-top:30px}
body.otaru-kanko:not(.zz) .body p{margin-top:14px;font-size:15.5px;line-height:2}
body.otaru-kanko:not(.zz) .body figure{margin:22px 0 0}
body.otaru-kanko:not(.zz) .body figure img{border-radius:18px;width:100%;aspect-ratio:3/2;object-fit:cover}
body.otaru-kanko:not(.zz) .body figcaption{font-size:12.5px;color:var(--grey);margin-top:6px}
body.otaru-kanko:not(.zz) .tl{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative}
body.otaru-kanko:not(.zz) .tl::before{content:"";position:absolute;left:8px;right:8px;top:15px;height:3px;background:repeating-linear-gradient(90deg,var(--sea) 0 10px,transparent 10px 16px)}
body.otaru-kanko:not(.zz) .tl li{position:relative;padding-top:38px;font-size:14px;line-height:1.7}
body.otaru-kanko:not(.zz) .tl li::before{content:"";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--sea)}
body.otaru-kanko:not(.zz) .tl li:last-child::before{background:var(--sun);border-color:var(--sun)}
body.otaru-kanko:not(.zz) .tl b{display:block;font-family:var(--round);font-weight:900;font-size:20px;color:var(--deep)}
body.otaru-kanko:not(.zz) .gt{width:100%;border-collapse:separate;border-spacing:0;border:2px solid var(--line);border-radius:16px;overflow:hidden;font-size:14.5px;margin-top:18px}
body.otaru-kanko:not(.zz) .gt th,body.otaru-kanko:not(.zz) .gt td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.7}
body.otaru-kanko:not(.zz) .gt tr:last-child th,body.otaru-kanko:not(.zz) .gt tr:last-child td{border-bottom:0}
body.otaru-kanko:not(.zz) .gt th{background:#f3f8fa;font-family:var(--round);font-weight:700;color:var(--deep);width:11em}
body.otaru-kanko:not(.zz) .gt td b{font-family:var(--round);font-weight:900;color:var(--coral)}
body.otaru-kanko:not(.zz) .src-note{font-size:12.5px;color:var(--grey);margin-top:8px}
body.otaru-kanko:not(.zz) .ph2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
body.otaru-kanko:not(.zz) .ph2 a{display:block;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 22px rgba(15,60,85,.08)}
body.otaru-kanko:not(.zz) .ph2 img{width:100%;aspect-ratio:3/2;object-fit:cover}
body.otaru-kanko:not(.zz) .ph2 .t{padding:12px 16px 14px}
body.otaru-kanko:not(.zz) .ph2 h3{margin:0;font-size:17px}
body.otaru-kanko:not(.zz) .ph2 p{margin-top:4px;font-size:13.5px;color:var(--grey);line-height:1.7}
body.otaru-kanko:not(.zz) .sun2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
body.otaru-kanko:not(.zz) .sun2 div{border-radius:16px;padding:14px 18px;font-size:13.5px}
body.otaru-kanko:not(.zz) .sun2 div:first-child{background:linear-gradient(135deg,#fff3d6,#ffe0b8)}
body.otaru-kanko:not(.zz) .sun2 div:last-child{background:linear-gradient(135deg,#dfe8f6,#c9d6ee)}
body.otaru-kanko:not(.zz) .sun2 b{display:block;font-family:var(--round);font-weight:900;font-size:24px;color:var(--deep);line-height:1.3}
body.otaru-kanko:not(.zz) .near{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
body.otaru-kanko:not(.zz) .near a{display:block;border:2px solid var(--line);border-radius:16px;padding:14px 16px}
body.otaru-kanko:not(.zz) .near a:hover{border-color:var(--sea)}
body.otaru-kanko:not(.zz) .near b{font-family:var(--round);font-weight:900;font-size:16px;color:var(--deep);display:block}
body.otaru-kanko:not(.zz) .near span{display:inline-block;margin-top:6px;background:var(--sky);color:var(--deep);border-radius:999px;padding:1px 10px;font-family:var(--round);font-weight:700;font-size:12.5px}
body.otaru-kanko:not(.zz) .stayctx{margin-top:56px;background:#fff4ef;border-radius:24px;display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:center;padding:18px}
body.otaru-kanko:not(.zz) .stayctx .ph{aspect-ratio:1/1;border-radius:46% 54% 42% 58% / 52% 44% 56% 48%;overflow:hidden}
body.otaru-kanko:not(.zz) .stayctx .ph img{width:100%;height:100%;object-fit:cover}
body.otaru-kanko:not(.zz) .stayctx .k{font-family:var(--round);font-weight:700;color:var(--coral);font-size:13.5px}
body.otaru-kanko:not(.zz) .stayctx h3{margin:2px 0 0;font-size:22px;font-weight:900;color:var(--deep)}
body.otaru-kanko:not(.zz) .stayctx p{margin-top:8px;font-size:14.5px;line-height:1.85}
body.otaru-kanko:not(.zz) .stayctx .btns{margin-top:14px}
body.otaru-kanko:not(.zz) .srcs{margin-top:44px;border-top:2px solid var(--line);padding-top:14px;font-size:12.5px;color:var(--grey);line-height:1.9}
body.otaru-kanko:not(.zz) .srcs b{font-family:var(--round);color:var(--deep)}
@media(max-width:1060px){
body.otaru-kanko:not(.zz) .art{grid-template-columns:1fr}
body.otaru-kanko:not(.zz) .side{position:relative;top:0}
}
@media(max-width:640px){
body.otaru-kanko:not(.zz) .phero{min-height:400px}
body.otaru-kanko:not(.zz) .phero .c{padding-bottom:70px}
body.otaru-kanko:not(.zz) .tl{grid-template-columns:1fr 1fr;row-gap:18px}
body.otaru-kanko:not(.zz) .tl::before{display:none}
body.otaru-kanko:not(.zz) .gt th{width:7.5em}
body.otaru-kanko:not(.zz) .gt th,body.otaru-kanko:not(.zz) .gt td{padding:10px 12px}
body.otaru-kanko:not(.zz) .ph2,body.otaru-kanko:not(.zz) .sun2{grid-template-columns:1fr}
body.otaru-kanko:not(.zz) .near{grid-template-columns:1fr}
body.otaru-kanko:not(.zz) .stayctx{grid-template-columns:1fr;text-align:left}
body.otaru-kanko:not(.zz) .stayctx .ph{width:70%;margin:0 auto}
body.otaru-kanko:not(.zz) .body h2{font-size:22px}
}
@media(max-width:1060px){
body.otaru-kanko:not(.zz) .art .side{order:-1}
}