:root{--bg:#eef5f5;--surface:#fff;--ink:#12353b;--sub:#587277;--line:#d3e3e4;--accent:#0f6f7a;--accent-ink:#fff;
--c-moist:#dcebf7;--c-white:#f6ecc9;--c-aging:#e6dcf5;--c-calm:#d9efe3;--c-acne:#f9dfe0;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;font-weight:700;line-height:1.4;margin:0}
a{color:inherit}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{max-width:1040px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{font-family:"Shippori Mincho",serif;font-size:1.25rem;font-weight:700;text-decoration:none;letter-spacing:.04em}
nav{display:flex;gap:4px}
nav a{padding:6px 14px;border-radius:99px;text-decoration:none;font-size:.9rem;color:var(--sub)}
nav a[aria-current="page"]{background:var(--ink);color:var(--bg)}
nav a:focus-visible,button:focus-visible,.chip:focus-visible,.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
main{max-width:1040px;margin:0 auto;padding:36px 20px 80px}
.lead{color:var(--sub);margin:8px 0 28px;max-width:38em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;text-decoration:none}
.card:hover{border-color:var(--accent)}
.card h3{font-size:1.05rem;margin-bottom:6px}
.card p{margin:0;font-size:.85rem;color:var(--sub)}
.chip{display:inline-block;font-size:.75rem;padding:1px 10px;border-radius:99px;margin:2px 4px 2px 0;text-decoration:none;color:var(--ink);border:0;font-family:inherit;line-height:1.7}
button.chip{cursor:pointer}
.chip.on{outline:2px solid var(--accent)}
.moist{background:var(--c-moist)}.white{background:var(--c-white)}.aging{background:var(--c-aging)}.calm{background:var(--c-calm)}.acne{background:var(--c-acne)}
.filters{margin-bottom:28px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.filters b{font-size:.8rem;color:var(--sub);display:block;margin-bottom:4px}
.brand{margin-top:40px}
.brand h2{font-size:1.3rem;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:6px}
.brand .desc{font-size:.85rem;color:var(--sub);margin:0 0 14px}
.prod{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px}
.thumb{flex:none;width:72px;height:92px;border-radius:6px;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--sub);text-align:center}
.prod h3{font-size:1rem}
.meta{font-size:.8rem;color:var(--sub);margin:2px 0 6px}
.badge{font-size:.7rem;background:var(--accent);color:var(--accent-ink);padding:1px 8px;border-radius:4px;margin-left:6px;font-family:"Zen Kaku Gothic New",sans-serif}
.back{display:inline-block;font-size:.85rem;color:var(--sub);margin-bottom:18px}
.detail{max-width:42em}
.detail h1{font-size:1.9rem;margin:6px 0 14px}
.detail h2{font-size:1.1rem;margin:28px 0 6px}
.note{background:var(--surface);border-left:3px solid var(--accent);padding:10px 14px;font-size:.88rem;margin-top:12px}
.empty{color:var(--sub);padding:24px 0}
.pr{font-size:.75rem;color:var(--sub);margin-top:48px;border-top:1px solid var(--line);padding-top:14px}
footer{max-width:1040px;margin:0 auto;padding:0 20px 40px;font-size:.75rem;color:var(--sub)}
.hero{position:relative;overflow:hidden;text-align:center;padding:56px 20px 64px;border-radius:28px;background:radial-gradient(circle at 50% 0,color-mix(in srgb,#8fd0f2 38%,var(--bg)),var(--bg) 70%);border:1px solid var(--line)}
.hero>*:not(.ripples){position:relative}
.ripples{position:absolute;left:50%;top:106px;width:0;height:0}
.ripples i{position:absolute;left:-150px;top:-150px;width:300px;height:300px;border-radius:50%;border:1px solid #5aaee0;opacity:0;animation:rip 7s ease-out infinite}
.ripples i:nth-child(2){animation-delay:2.3s}.ripples i:nth-child(3){animation-delay:4.6s}
@keyframes rip{0%{transform:scale(.3);opacity:.5}100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.ripples i{animation:none;opacity:.2}}
.dropsvg{width:84px;height:100px;display:block;margin:0 auto 18px;filter:drop-shadow(0 10px 18px rgba(74,163,223,.35))}
.hero h1{font-size:clamp(1.9rem,6vw,3rem);margin-bottom:14px}
.hero p{max-width:30em;margin:0 auto 24px;color:var(--sub)}
.cta{display:inline-block;padding:10px 28px;border-radius:99px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:500}
.cta:focus-visible,.con:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sec{margin-top:48px}.sec>h2{font-size:1.2rem;margin-bottom:14px}
.cons{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.con{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 10px;border-radius:24px;text-decoration:none;background:linear-gradient(180deg,color-mix(in srgb,#8fd0f2 22%,var(--surface)),var(--surface));border:1px solid var(--line);font-family:"Shippori Mincho",serif;font-weight:700}
.con small{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:400;color:var(--sub);font-size:.72rem}
.con:hover{border-color:var(--accent)}
.milk{background:radial-gradient(60% 80% at 12% 0,color-mix(in srgb,#ffd9e2 55%,var(--bg)),transparent 70%),radial-gradient(60% 80% at 92% 8%,color-mix(in srgb,#e4dcff 55%,var(--bg)),transparent 70%),radial-gradient(70% 70% at 50% 115%,color-mix(in srgb,#fff1d2 60%,var(--bg)),transparent 70%),var(--surface);border:1px solid var(--line);border-radius:36px;padding:56px 22px 40px;text-align:center;box-shadow:0 24px 50px -32px rgba(120,90,110,.4)}
.milk h1{font-size:clamp(1.7rem,5.5vw,2.7rem);margin-bottom:12px}
.milk p{max-width:30em;margin:0 auto 26px;color:var(--sub)}
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;max-width:720px;margin:0 auto}
.tp{display:flex;flex-direction:column;gap:2px;padding:16px 10px;border-radius:26px;background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid var(--line);text-decoration:none;box-shadow:0 10px 22px -16px rgba(120,90,110,.55)}
.tp b{font-family:"Shippori Mincho",serif;font-size:1.05rem}
.tp small{font-size:.72rem;color:var(--sub);line-height:1.5}
.tp:hover,.tp.on{border-color:var(--accent)}
.tp.on{box-shadow:0 0 0 2px var(--accent)}
.tp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.res{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:26px 22px}
.res>h2{font-size:1.3rem;margin-bottom:6px}
.card,.prod{border-radius:22px}
.milk{position:relative;overflow:hidden;border-radius:44px}
.milk::before,.milk::after{content:"";position:absolute;border-radius:50%;filter:blur(30px);opacity:.7;pointer-events:none}
.milk::before{width:220px;height:220px;left:-60px;top:-50px;background:#ffc9da}
.milk::after{width:260px;height:260px;right:-70px;bottom:-90px;background:#d9ccff}
.milk>*{position:relative;z-index:1}
.milk h1{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;font-weight:700}
.sticker{display:inline-block;transform:rotate(-4deg);background:#ffe58a;color:#2a2430;font-weight:700;font-size:.72rem;letter-spacing:.14em;padding:4px 14px;border-radius:99px;margin-bottom:10px;box-shadow:0 6px 14px -8px rgba(120,90,110,.6)}
.scene{width:min(340px,86%);display:block;margin:0 auto 10px;overflow:visible}
.fl{animation:flt 5s ease-in-out infinite;transform-box:fill-box}
.fl.b{animation-delay:-1.6s}.fl.c{animation-delay:-3.2s}
@keyframes flt{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.fl{animation:none}}
.tp{align-items:center;text-align:center;border-radius:32px;transition:transform .2s;box-shadow:inset 0 2px 0 color-mix(in srgb,#fff 70%,transparent),0 14px 26px -16px rgba(200,120,150,.7)}
.tp:hover{transform:translateY(-3px)}
.tp.on{box-shadow:0 0 0 2px var(--accent)}
.face{display:block;width:56px;height:56px;margin-bottom:4px}
.face svg{width:100%;height:100%}
.thumb{width:76px;height:96px;border-radius:18px;padding:6px}
.card:has(>.art){position:relative;overflow:hidden;min-height:160px}
.card>*:not(.art){position:relative;z-index:1}
.art{position:absolute;inset:0;pointer-events:none;opacity:.6;-webkit-mask-image:linear-gradient(to left,#000 35%,transparent 95%);mask-image:linear-gradient(to left,#000 35%,transparent 95%)}
.artsvg{width:100%;height:100%;display:block}
.ihero{position:relative;overflow:hidden;border-radius:28px;padding:26px 24px;margin-bottom:8px;min-height:230px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 70%,#ffd9e2),var(--surface))}
.ihero>*:not(.art){position:relative;z-index:1;max-width:70%}
.ihero .art{opacity:.85;-webkit-mask-image:linear-gradient(to left,#000 40%,transparent 100%);mask-image:linear-gradient(to left,#000 40%,transparent 100%)}
.grid:has(>.card>.art){grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card:has(>.art){padding-right:calc(40% + 6px)}
.card>.art{inset:0 0 0 auto;width:40%;display:flex;align-items:center;justify-content:center;padding:10px;opacity:.8;-webkit-mask-image:none;mask-image:none}
.card>.art .artsvg{width:100%;height:auto;max-height:100%}
.ihero{padding-right:calc(40% + 10px)}
.ihero>*:not(.art){max-width:none}
.ihero>.art{inset:0 0 0 auto;width:40%;display:flex;align-items:center;justify-content:center;padding:14px;opacity:.9;-webkit-mask-image:none;mask-image:none}
.ihero>.art .artsvg{width:100%;height:auto;max-height:100%}
.milk{background:radial-gradient(60% 80% at 12% 0,color-mix(in srgb,#cfe8c0 60%,var(--bg)),transparent 70%),radial-gradient(60% 80% at 92% 8%,color-mix(in srgb,#f1f0bf 55%,var(--bg)),transparent 70%),radial-gradient(70% 70% at 50% 115%,color-mix(in srgb,#d9ecd0 60%,var(--bg)),transparent 70%),var(--surface);box-shadow:0 24px 50px -32px rgba(60,100,70,.45)}
.milk::before{background:#c6e3b8}
.milk::after{background:#e8efc0}
.sticker{background:#dcebc9;color:#223025;box-shadow:0 6px 14px -8px rgba(60,100,70,.6)}
.tp{box-shadow:inset 0 2px 0 color-mix(in srgb,#fff 70%,transparent),0 14px 26px -16px rgba(60,110,70,.6)}
.tp.on{box-shadow:0 0 0 2px var(--accent)}
.con{background:linear-gradient(180deg,color-mix(in srgb,#b8dba8 28%,var(--surface)),var(--surface))}
.ihero{background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 70%,#d3e9c6),var(--surface))}
body{letter-spacing:.05em;line-height:2}
h1,h2,h3{font-weight:500;letter-spacing:.1em}
.logo{font-size:1.05rem;font-weight:500;letter-spacing:.32em}
nav{gap:22px}
nav a{padding:4px 0;border-radius:0;font-size:.74rem;letter-spacing:.24em;color:var(--sub);border-bottom:1px solid transparent}
nav a[aria-current="page"]{background:none;color:var(--ink);border-bottom-color:var(--ink)}
.bar{padding:22px 24px}
main{padding-top:56px}
.card,.prod,.res,.ihero,.filters,.con,.tp{border-radius:2px;box-shadow:none}
.card:hover,.con:hover,.tp:hover{border-color:var(--ink);transform:none}
.chip{background:transparent!important;border:1px solid var(--line);border-radius:2px;letter-spacing:.08em;color:var(--sub)}
.chip.on{outline:0;border-color:var(--ink);color:var(--ink)}
.milk{background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:none;padding:84px 24px 72px}
.milk::before,.milk::after{display:none}
.milk h1{font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;font-size:clamp(1.4rem,4.2vw,2.1rem);line-height:2.1;letter-spacing:.16em;margin-bottom:18px}
.milk p{font-size:.85rem;letter-spacing:.12em;margin-bottom:48px}
.sticker{transform:none;background:none;box-shadow:none;padding:0;border-radius:0;font-size:.68rem;letter-spacing:.42em;color:var(--sub);margin-bottom:26px;display:block;text-transform:uppercase}
.scene{width:72px;margin:0 auto 30px;color:var(--accent)}
.tp{background:transparent;padding:26px 10px}
.tp b{font-size:.95rem;letter-spacing:.24em;font-weight:500}
.face{display:none}
.tp.on{border-color:var(--ink);background:var(--bg);box-shadow:none}
.con{background:var(--surface);font-weight:500;letter-spacing:.14em}
.sec>h2{font-size:.82rem;letter-spacing:.36em;text-align:center;margin-bottom:32px}
.sec>h2::before{content:"";display:block;width:1px;height:30px;background:var(--ink);margin:0 auto 16px}
.res>h2{letter-spacing:.14em}
.ihero{background:var(--surface)}
.thumb{border-radius:2px}
.badge{border-radius:2px;letter-spacing:.1em}
.note{background:transparent;border-left:1px solid var(--accent)}
.lead{letter-spacing:.08em}
.wall{position:relative;overflow:hidden;text-align:center;color:#fff;padding:76px 20px 150px;border-radius:2px 2px 0 0;background:linear-gradient(160deg,#1f8791 0%,#14707b 55%,#0d5864 100%)}
.wall>*:not(.palm){position:relative;z-index:1}
.palm{position:absolute;inset:0;pointer-events:none}
.palm svg{width:100%;height:100%;display:block}
.wall .sticker{color:rgba(255,255,255,.82);margin-bottom:18px}
.wall .big{font-family:"Gloock","Playfair Display","Shippori Mincho",serif;font-weight:400;font-size:clamp(3rem,13vw,6.4rem);letter-spacing:.01em;line-height:1.1;margin:0 0 14px;color:#fff}
.wall .jp{color:rgba(255,255,255,.9);font-size:.88rem;letter-spacing:.22em;margin:0}
.shelf{position:relative;z-index:2;display:flow-root;background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 2px 2px;padding:0 20px 44px;text-align:center}
.shelf .types{margin-top:-104px}
.shelf .tp{background:var(--surface);box-shadow:0 22px 30px -20px rgba(8,60,70,.55);padding:20px 10px 16px}
.shelf .tp.on{background:var(--bg);box-shadow:0 0 0 1px var(--ink),0 22px 30px -20px rgba(8,60,70,.55)}
.shelf .cap{margin:34px 0 0;font-size:.82rem;color:var(--sub)}
.face{display:block;width:44px;height:58px;margin:0 auto 10px}
.face svg{width:100%;height:100%}
.logo.brand{font-family:"Italiana","Playfair Display",serif;font-size:1.35rem;font-weight:400;letter-spacing:.22em}
.ist{position:relative;display:inline-block}
.ist::before{content:"";position:absolute;left:50%;top:-.24em;width:.3em;height:.3em;transform:translateX(-50%);background:currentColor;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.wall .big{font-family:"Italiana","Playfair Display",serif;font-weight:400;font-size:clamp(2.8rem,12vw,5.8rem);letter-spacing:.14em;line-height:1.2;margin:14px 0 6px}
.wall .tag{margin:20px 0 0;font-size:clamp(.6rem,2.2vw,.8rem);letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.wsm{padding:72px 20px 68px}
.about{background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 2px 2px;padding:48px 24px 80px}
.about>*{max-width:35em;margin-left:auto;margin-right:auto}
.lang{display:flex;justify-content:center;gap:22px;margin-bottom:48px;font-size:.76rem;letter-spacing:.22em}
.lang a{color:var(--sub);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.lang a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.about p{margin-top:0;margin-bottom:1.7em;font-size:.95rem;line-height:2.3;letter-spacing:.07em}
.about[lang="en"] p{letter-spacing:.02em;line-height:2.1}
.about .lead2{margin-bottom:56px;text-align:center}
.about .lead2 p{font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;font-size:clamp(1.05rem,3.4vw,1.4rem);line-height:2.1;letter-spacing:.14em;margin:0}
.about[lang="en"] .lead2 p{letter-spacing:.04em}
.about h2{font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;font-size:clamp(1.05rem,3vw,1.3rem);letter-spacing:.16em;text-align:center;line-height:1.9;margin:76px auto 30px}
.about h2::before{content:"";display:block;width:1px;height:34px;background:var(--ink);margin:0 auto 18px}
.about .sign{margin-top:68px;text-align:center;font-size:.7rem;letter-spacing:.32em;color:var(--sub);text-transform:uppercase}
.wall.beach{background:linear-gradient(180deg,#f8f4ea 0%,#f4f0e6 70%,#f9f7f1 100%);color:#1e6a74}
.wall.beach .big{color:#1e6a74}
.wall.beach .tag{color:#2a7983}
.wall.beach .ist::before{background:#1e6a74}
.palm g.gr path{stroke:#3f7a4d}
.sec.concern{position:relative;overflow:hidden;border-radius:2px;padding:52px 24px 56px;background:linear-gradient(160deg,#1f8791 0%,#14707b 55%,#0d5864 100%);color:#fff}
.sec.concern>*:not(.palm){position:relative;z-index:1}
.sec.concern>h2{color:#fff}
.sec.concern>h2::before{background:#fff}
.sec.concern .con{background:color-mix(in srgb,#fff 12%,transparent);border-color:rgba(255,255,255,.38);color:#fff}
.sec.concern .con small{color:rgba(255,255,255,.82)}
.sec.concern .con:hover{border-color:#fff;background:color-mix(in srgb,#fff 20%,transparent)}
.imghero{border-radius:2px 2px 0 0;overflow:hidden;line-height:0;background:#f6f1e6}
.imghero img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%}
@media (max-width:640px){.imghero img{aspect-ratio:1/1}}
.shelf.flat .types{margin-top:0;padding-top:36px}
.imghero.short img{aspect-ratio:16/9;object-position:50% 50%}
@media (max-width:640px){.imghero.short img{aspect-ratio:4/3}}
/* tidy: no overlapping text */
.shelf .tp{justify-content:flex-start;align-items:center;gap:0;padding:26px 14px 24px;min-height:210px}
.shelf .tp .face{flex:none;display:block;width:48px;height:64px;margin:0 auto 14px}
.shelf .tp b{display:block;line-height:1.6;margin:0 0 8px;letter-spacing:.2em}
.shelf .tp small{display:block;line-height:1.8;margin:0;font-size:.74rem;letter-spacing:.04em;color:var(--sub);text-wrap:balance}
.cons{grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto}
.con{display:block;text-align:left;padding:30px 26px 28px;min-height:132px;line-height:1.9}
.con .ct{display:block;text-align:center;font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;font-size:1.3rem;font-weight:500;letter-spacing:.14em;line-height:1.6;margin:0 0 14px}
.con small{display:block;font-size:.8rem;line-height:2;letter-spacing:.1em;position:static}
@media (max-width:760px){.cons{grid-template-columns:repeat(2,1fr);gap:12px}.con{padding:22px 16px 20px}.con .ct{font-size:1.1rem}}
@media (max-width:420px){.cons{grid-template-columns:1fr}}
@media (max-width:560px){h1{font-size:1.5rem}.detail h1{font-size:1.5rem}}

/* 日本語を単語の区切りで改行（対応ブラウザのみ） */
.shelf .tp small,.card h3,.card p,.con small,.con .ct{word-break:auto-phrase}

/* 言語切替（ヘッダー）とメニュー5項目 */
.bar{column-gap:28px;row-gap:14px}
.bar nav{order:2;margin-left:auto;flex-wrap:wrap}
.langsel{order:3;position:relative;display:flex;align-items:center}
.langbtn{font:inherit;font-size:.74rem;letter-spacing:.24em;line-height:inherit;color:var(--sub);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23587277' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center/9px 6px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 20px 4px 2px;cursor:pointer}
.langbtn:hover,.langbtn[aria-expanded="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.langlist{position:absolute;top:calc(100% + 8px);right:0;z-index:10;min-width:100%;margin:0;padding:6px 0;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:2px}
.langlist[hidden]{display:none}
.langlist:focus{outline:none}
.langlist li{font-size:.74rem;letter-spacing:.24em;line-height:1.9;color:var(--sub);padding:6px 18px 6px 16px;white-space:nowrap;cursor:pointer}
.langlist li span{border-bottom:1px solid transparent}
.langlist li:hover,.langlist li.act{color:var(--ink);background:var(--bg)}
.langlist li[aria-selected="true"]{color:var(--ink)}
.langlist li[aria-selected="true"] span{border-bottom-color:var(--ink)}
.langbtn:focus-visible,.langlist:focus-visible li.act{outline:2px solid var(--accent);outline-offset:-2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bar nav{justify-content:flex-end}
@media (max-width:860px){
 .langsel{order:1;margin-left:auto}
 .bar nav{order:3;flex-basis:100%;margin-left:0;justify-content:flex-end;column-gap:18px;row-gap:6px}
 .bar nav a,.langbtn,.langlist li{letter-spacing:.12em}
}
@media (max-width:400px){.bar nav{column-gap:12px}}

/* フッター */
footer.sitefoot{max-width:none;margin:0;padding:0;border-top:1px solid var(--line);background:var(--surface);font-size:.75rem;color:var(--sub)}
.fin{max-width:1040px;margin:0 auto;padding:52px 24px 32px;text-align:center}
.sitefoot .logo{display:inline-block;margin:0;color:var(--ink)}
.ftag{margin:4px 0 30px;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase}
.sitefoot nav{justify-content:center;flex-wrap:wrap;gap:8px 26px;margin:0 0 30px}
.sitefoot nav a:hover{color:var(--ink)}
.fnote{max-width:46em;margin:0 auto 26px;font-size:.7rem;line-height:1.9}
.copy{margin:0;padding-top:20px;border-top:1px solid var(--line);font-size:.64rem;letter-spacing:.2em}
@media (max-width:860px){.sitefoot nav{gap:8px 16px}.sitefoot nav a{letter-spacing:.12em}}
html[lang="en"] .card h3,html[lang="en"] .card p,html[lang="en"] .shelf .tp small,html[lang="en"] .con small{overflow-wrap:anywhere}
/* 韓国語：日本語の書体に無いハングルを Noto KR で補う。改行は単語（スペース）単位 */
html[lang="ko"] body,html[lang="ko"] .con small,html[lang="ko"] .badge,.langlist li[lang="ko"]{font-family:"Zen Kaku Gothic New","Noto Sans KR",sans-serif}
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3,html[lang="ko"] .con .ct,html[lang="ko"] .tp b,html[lang="ko"] .about .lead2 p,html[lang="ko"] .about h2{font-family:"Shippori Mincho","Noto Serif KR",serif}
html[lang="ko"] body,html[lang="ko"] .card h3,html[lang="ko"] .card p,html[lang="ko"] .shelf .tp small,html[lang="ko"] .con small,html[lang="ko"] .con .ct{word-break:keep-all;overflow-wrap:anywhere}

/* TOP画像：背景・ロゴを別レイヤーにしてスクロールで奥行き（パララックス＋背景ぼかし） */
.phero{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:2px 2px 0 0;background:#f6f1e6;container-type:inline-size}
@media (max-width:640px){.phero{aspect-ratio:1/1}}
.phero .scene{position:absolute;left:0;top:50%;width:100%;aspect-ratio:1/1;transform:translateY(-50%)}
.phero .pbg,.phero .plogo{position:absolute;inset:0;will-change:transform}
.phero .pbg img{display:block;width:100%;height:100%;object-fit:cover}
.phero .mark{position:absolute;left:19.5%;top:36.6%;width:62.8%;height:auto;fill:#2B676B}
.phero .tag{text-transform:uppercase;position:absolute;left:0;right:0;top:56.6%;margin:0;text-align:center;white-space:nowrap;font:300 1.71cqw/1 "Jost","Zen Kaku Gothic New",sans-serif;letter-spacing:.92cqw;padding-left:.92cqw;color:#2B676B}
@media (prefers-reduced-motion:reduce){.phero .pbg,.phero .plogo{transform:none!important;filter:none!important;opacity:1!important}}

/* 楽天アフィリエイト：画像はリンク作成時のサイズ（128px）のまま・切り取りなし */
.thumb.rk{width:128px;height:128px;padding:0;background:#fff;border:1px solid var(--line)}
.thumb.rk img{display:block;width:128px;height:128px;object-fit:contain}
.rkbtn{display:inline-block;margin-top:10px;padding:5px 16px;border:1px solid var(--ink);border-radius:2px;font-size:.74rem;letter-spacing:.14em;line-height:1.8;text-decoration:none;color:var(--ink)}
.rkbtn:hover{background:var(--ink);color:var(--bg)}
.prnote{display:inline-block;margin:0 0 20px;padding:2px 12px;border:1px solid var(--line);border-radius:2px;font-size:.72rem;letter-spacing:.06em;color:var(--sub)}
.prnote b{margin-right:10px;color:var(--ink);letter-spacing:.2em;font-weight:500}

.flegal{margin:0 0 18px;font-size:.68rem;letter-spacing:.08em}
.flegal a{color:var(--sub);text-decoration:none}
.flegal a:hover{color:var(--ink);text-decoration:underline}
.flegal span{margin:0 10px}
.legal h2{font-size:1rem;margin:30px 0 6px}
.legal p{font-size:.9rem;line-height:2}

/* ヘッダー・フッターのロゴ：TOP画像と同じSVGロゴ（色も同じ #2B676B） */
.logo.brand{display:inline-block;position:relative;width:4.93em;height:2em;line-height:0;letter-spacing:0;vertical-align:top}
.logomark{position:absolute;left:.028em;top:.161em;width:4.644em;height:auto;aspect-ratio:3989/1017;fill:#2B676B;overflow:visible}

/* 楽天の商品ごとのPR表示（楽天のステマ規制ガイドライン：商品の上か下にPR表示。はっきり見える色・大きさ） */
.rkrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.rkrow .rkbtn{margin-top:0}
.prtag{display:inline-block;padding:3px 9px;border:1px solid var(--ink);border-radius:2px;font-size:.72rem;font-weight:500;line-height:1.6;letter-spacing:.16em;color:var(--ink);background:var(--surface)}
/* トップページではフッターの注意書きを出さない */
.is-top #foot{display:none}
/* 配色は明るいテーマのみ（端末やブラウザのダークモードでも変えない） */
:root{color-scheme:only light}

.notfound>div{margin-bottom:40px}