/* Unified Kensui site stylesheet — base, pages, responsive */
:root {
  --edge: clamp(18px, 3.2vw, 62px);
  --ink: #443b31;
  --paper: #f4efe4;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #171512; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; }
button { font: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.app { position: relative; width: 100%; height: 100%; overflow: hidden; background: #171512; }
.app:not([data-page="home"]) { background: #f4efe4; }
.top-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.top-story-layers { --story-figure-opacity: .9; position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.app:not([data-page="home"]) .top-story-layers { display: none; }
.boy-layer { position: absolute; left: clamp(42px,3.5vw,72px); bottom: clamp(280px,40vh,410px); width: clamp(110px,10vw,160px); height: clamp(190px,26vh,270px); }
.boy { position: absolute; z-index: 1; inset: auto auto 0 0; width: 100%; height: 100%; object-fit: contain; object-position: left bottom; filter: saturate(.76) sepia(.1) contrast(.98); mix-blend-mode: multiply; transform-origin: left bottom; }
.boy-seated { opacity: var(--story-figure-opacity); animation: seated-exit 8s ease-in-out 1s both; -webkit-mask-image: linear-gradient(to top, transparent 0 18%, rgba(0,0,0,.16) 22%, rgba(0,0,0,.72) 29%, #000 36%); mask-image: linear-gradient(to top, transparent 0 18%, rgba(0,0,0,.16) 22%, rgba(0,0,0,.72) 29%, #000 36%); }
.boy-pointing { opacity: 0; animation: pointing-rise 8s ease-in-out 1s both; -webkit-mask-image: linear-gradient(to top, transparent 0 13%, rgba(0,0,0,.18) 17%, rgba(0,0,0,.76) 22%, #000 28%); mask-image: linear-gradient(to top, transparent 0 13%, rgba(0,0,0,.18) 17%, rgba(0,0,0,.76) 22%, #000 28%); }
.story-figure { position: absolute; display: block; object-fit: contain; opacity: .48; filter: saturate(.72) sepia(.12) contrast(.95); mix-blend-mode: multiply; }
.layer-scientist { display: none !important; }
.layer-young-men { left: auto; right: clamp(54px,6vw,108px); bottom: clamp(220px,28vh,300px); width: clamp(92px,9vw,145px); opacity: var(--story-figure-opacity); }
.layer-watcher { right: clamp(210px,18vw,330px); bottom: clamp(72px,10vh,112px); width: clamp(72px,7vw,108px); opacity: var(--story-figure-opacity); transform: scaleX(-1); }
.falling-drop { --drop-distance: 10vw; position: absolute; left: calc(50% - 5px); top: calc(50vh + 11vw); width: 10px; height: 16px; border-radius: 60% 40% 66% 34% / 72% 38% 62% 28%; background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(89,130,153,.78)); box-shadow: 0 0 14px rgba(255,241,198,.76); opacity: 0; transform: rotate(45deg); animation: drop-fall 5.8s ease-in 1.2s infinite; }
.ripple-layer { position: absolute; left: 50%; top: calc(50vh + 21vw); width: 24px; height: 9px; transform: translate(-50%,-50%); }
.ripple-layer span { position: absolute; inset: 0; border: 1px solid rgba(224,151,55,.68); border-radius: 50%; box-shadow: 0 0 5px rgba(255,190,82,.22), inset 0 0 4px rgba(139,82,27,.12); opacity: 0; animation: ripple-spread 5.8s ease-out 1.2s infinite; }
.ripple-layer span:nth-child(2) { animation-delay: 1.42s; }
.ripple-layer span:nth-child(3) { animation-delay: 1.64s; }
@keyframes seated-exit { 0%,28%{opacity:var(--story-figure-opacity);transform:translateY(0)} 42%{opacity:.12;transform:translateY(6px)} 48%,100%{opacity:0;transform:translateY(9px)} }
@keyframes pointing-rise { 0%,36%{opacity:0;transform:translateY(14px)} 50%{opacity:.28;transform:translateY(7px)} 64%,100%{opacity:var(--story-figure-opacity);transform:translateY(0)} }
@keyframes drop-fall { 0%,14%{opacity:0;transform:translateY(-38px) rotate(45deg) scale(.7)} 20%{opacity:.95} 40%{opacity:.95;transform:translateY(var(--drop-distance)) rotate(45deg) scale(1)} 43%,100%{opacity:0;transform:translateY(calc(var(--drop-distance) + 7px)) rotate(45deg) scale(.45)} }
@keyframes ripple-spread { 0%,40%{opacity:0;transform:scale(.3)} 44%{opacity:.78} 80%,100%{opacity:0;transform:scale(var(--ripple-scale-x,16),var(--ripple-scale-y,6))} }
.stationery { position: absolute; inset: 0; overflow: hidden; color: var(--ink); background: radial-gradient(circle at 48% 42%, rgba(255,255,255,.68), transparent 58%), linear-gradient(135deg, #eee6d7, #faf7ef 48%, #e9dfcd); }
.paper-grain { position: absolute; inset: 0; opacity: .14; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(84,65,40,.045) 0 1px, transparent 1px 4px), radial-gradient(circle at 20% 10%, rgba(91,65,31,.16), transparent 30%), radial-gradient(circle at 85% 80%, rgba(130,92,50,.12), transparent 34%); mix-blend-mode: multiply; }
.story-watermark { position: absolute; z-index: 1; left: 63%; top: 54%; width: min(62vw, 1040px); height: min(58vh, 620px); object-fit: cover; object-position: center; opacity: .24; filter: saturate(.72) sepia(.12) contrast(.9); transform: translate(-50%, -50%); mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0,0,0,.84) 54%, transparent 84%); mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0,0,0,.84) 54%, transparent 84%); }
.app[data-page="sns"] .story-watermark { display: none; }
.app[data-page="sns"] .stationery::after { content: ""; position: absolute; z-index: 2; top: clamp(108px,13vh,146px); right: clamp(24px,4vw,68px); width: clamp(170px,18vw,285px); aspect-ratio: 1.75; pointer-events: none; background: url("images/top-cloud-sea.png") center 91% / 570% auto no-repeat; opacity: .16; filter: saturate(.58) sepia(.12); mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse at center, #000 23%, rgba(0,0,0,.82) 45%, transparent 73%); mask-image: radial-gradient(ellipse at center, #000 23%, rgba(0,0,0,.82) 45%, transparent 73%); }
.ceramic-balls { position: absolute; z-index: 5; left: var(--edge); bottom: clamp(18px,3vh,34px); width: 136px; height: 66px; pointer-events: none; }
.ceramic-balls::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 3px; height: 17px; border-radius: 50%; background: linear-gradient(90deg,rgba(91,57,35,.13),rgba(62,39,26,.3),rgba(91,57,35,.1)), repeating-linear-gradient(8deg,rgba(79,49,29,.1) 0 2px,transparent 2px 7px); box-shadow: 0 5px 9px rgba(37,24,17,.2); filter: blur(1px); }
.ball { position: absolute; z-index: 1; display: block; border-radius: 50%; background: radial-gradient(circle at 31% 25%,rgba(255,244,221,.8) 0 6%,transparent 20%), radial-gradient(circle at 40% 36%,var(--clay-light) 0 18%,var(--clay) 55%,var(--clay-dark) 100%); box-shadow: inset -3px -4px 6px rgba(49,28,19,.32), inset 2px 2px 4px rgba(255,231,197,.28), 1px 5px 7px rgba(40,26,18,.28); }
.ball-1 { --clay-light:#c89a72; --clay:#9d6749; --clay-dark:#633c2c; width:15px; height:15px; left:2px; bottom:17px; }
.ball-2 { --clay-light:#d2a27a; --clay:#a66d4d; --clay-dark:#68402e; width:27px; height:27px; left:17px; bottom:13px; }
.ball-3 { --clay-light:#b98661; --clay:#8c583e; --clay-dark:#573526; width:18px; height:18px; left:46px; bottom:21px; }
.ball-4 { --clay-light:#c8946d; --clay:#976044; --clay-dark:#5d3929; width:31px; height:31px; left:60px; bottom:11px; }
.ball-5 { --clay-light:#d7ad85; --clay:#a97352; --clay-dark:#6a432f; width:20px; height:20px; left:92px; bottom:20px; }
.ball-6 { --clay-light:#b47d5b; --clay:#825039; --clay-dark:#4e3023; width:14px; height:14px; left:116px; bottom:15px; }

.site-header { position: absolute; z-index: 20; inset: 0 0 auto; min-height: 104px; padding: 18px var(--edge) 12px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: clamp(24px,3vw,58px); pointer-events: none; }
.brand, .global-nav button, .menu-toggle { pointer-events: auto; }
.brand { width: 174px; height: 156px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.brand img { display: block; width: 156px; height: 156px; object-fit: contain; mix-blend-mode: multiply; filter: contrast(1.06); }
.app[data-page="home"] .brand img { opacity: .88; filter: contrast(1.12) saturate(.9); }
.global-nav { min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: clamp(9px,1.05vw,21px); padding-top: 18px; white-space: nowrap; }
.nav-dropdown { position: relative; pointer-events: auto; }
.nav-submenu { position: absolute; top: 100%; left: 50%; min-width: 132px; padding: 7px 12px 10px; display: none; transform: translateX(-50%); border: 1px solid rgba(68,59,49,.2); border-radius: 8px; background: rgba(247,241,230,.96); box-shadow: 0 8px 20px rgba(50,40,30,.12); }
.nav-dropdown:hover .nav-submenu, .nav-dropdown:focus-within .nav-submenu { display: grid; }
.nav-submenu button { color: var(--ink) !important; text-align: center; text-shadow: none !important; }
.global-nav button { border: 0; border-bottom: 1px solid transparent; padding: 7px 0; background: transparent; color: var(--ink); font: 700 clamp(11px,.8vw,14px)/1.3 "Yu Gothic", sans-serif; letter-spacing: .03em; cursor: pointer; }
.unread-badge { position: relative; top: -.45em; margin-left: 2px; color: #a14b39; font-size: .72em; white-space: nowrap; }
.app[data-page="home"] .global-nav button { color: #fff; text-shadow: 0 1px 7px rgba(0,0,0,.9); }
.global-nav button:hover, .global-nav button:focus-visible, .global-nav button[aria-current="page"] { border-bottom-color: currentColor; outline: none; }
.menu-toggle { display: none; }
.menu-close-label { display: none; }
.menu-toggle[aria-expanded="true"] .menu-open-label { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close-label { display: inline; }

.content-panel { position: absolute; z-index: 4; top: clamp(126px, 20vh, 210px); left: var(--edge); right: var(--edge); bottom: clamp(72px, 8vh, 96px); border: 0; background: transparent; box-shadow: none; }
.content-scroll { height: 100%; padding: 0 clamp(6px,1vw,18px); }
.eyebrow { margin: 0 0 7px; color: #746454; font: 700 10px/1.4 "Yu Gothic", sans-serif; letter-spacing: .17em; }
.content-panel h1 { margin: 0 0 22px; font-size: clamp(29px, 3vw, 50px); font-weight: 500; line-height: 1.28; letter-spacing: .1em; }
.page-copy { max-width: none; font: 500 clamp(13px,.95vw,16px)/1.9 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; letter-spacing: .025em; text-shadow: 0 1px 8px rgba(255,252,244,.95), 0 0 3px rgba(255,252,244,.95); }
.page-copy p { margin: 0 0 1.05em; break-inside: avoid; }
.page-copy h2 { margin: 1.8em 0 .65em; font-size: 1.16em; line-height: 1.55; }
.page-copy .question { margin: .2em 0; font-weight: 700; }
.page-copy .closing { margin-top: 1.7em; padding-top: 1.15em; border-top: 1px solid rgba(72,56,39,.25); font-weight: 700; }
.page-copy .facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 1.4em; break-inside: avoid; }
.page-copy .facts dt { font-weight: 700; }
.page-copy .facts dd { margin: 0; }
.entry-list { display: grid; gap: 10px; break-inside: avoid; }
.content-empty-notice { margin: 0; padding: 12px 3px; }
.entry-button { width: 100%; display: grid; grid-template-columns: 112px 1fr; gap: 18px; padding: 14px 3px; border: 0; border-bottom: 1px solid rgba(72,56,39,.28); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.entry-button time { font-weight: 700; letter-spacing: .04em; }
.entry-button strong { font-size: 1.05em; }
.entry-button:hover strong, .entry-button:focus-visible strong { text-decoration: underline; }
.detail-back { margin: 0 0 20px; padding: 7px 14px; border: 1px solid rgba(68,59,49,.4); border-radius: 999px; background: rgba(250,247,239,.55); color: var(--ink); cursor: pointer; }
.app[data-detail="partner"] .content-scroll h1 { margin-bottom: 2px; }
.app[data-detail="partner"] .page-copy { columns: 1; column-gap: 0; overflow: visible; }
.partner-detail { height: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: auto auto 1fr auto; gap: 6px clamp(24px,3vw,54px); align-content: start; font-size: clamp(12px,.78vw,13.5px); line-height: 1.58; text-shadow: none; }
.partner-detail .detail-back { grid-column: 1 / -1; justify-self: start; margin: 0; padding: 5px 12px; }
.partner-detail .partner-lead { grid-column: 1 / -1; columns: 2; column-gap: clamp(28px,4vw,70px); }
.partner-detail section { padding-top: 8px; border-top: 1px solid rgba(72,56,39,.25); }
.partner-detail h2 { margin: 0 0 .35em; font-size: 1.08em; }
.partner-detail p { margin: 0 0 .55em; }
.partner-detail .partner-apply { grid-column: 1 / 3; padding-top: 8px; border-top: 1px solid rgba(72,56,39,.25); }
.partner-detail .cta { margin-top: .25em; padding: 9px 18px; }
.partner-detail .closing { grid-column: 3; margin: 0; padding: 8px 0 0; }
.app[data-detail="monitor-sale"] .content-scroll h1 { margin-bottom: 2px; }
.app[data-detail="monitor-sale"] .page-copy { columns: 1; column-gap: 0; overflow: visible; }
.monitor-detail { height: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px clamp(22px,2.5vw,46px); align-content: start; font-size: clamp(12px,.78vw,13.5px); font-weight: 400; line-height: 1.55; text-shadow: none; }
.monitor-detail > * { min-width: 0; }
.monitor-detail .detail-back, .monitor-detail .monitor-intro { grid-column: 1 / -1; }
.monitor-detail .detail-back { justify-self: start; margin: 0; padding: 5px 12px; }
.monitor-detail .monitor-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 22px; }
.monitor-detail .monitor-intro p { margin: 0; }
.monitor-detail .monitor-limit { margin-top: .7em; padding-top: .65em; border-top: 1px dashed rgba(72,56,39,.25); font-weight: 700; letter-spacing: .04em; white-space: normal; }
.monitor-detail section { padding-top: 8px; border-top: 1px solid rgba(72,56,39,.25); }
.monitor-detail h2 { margin: 0 0 .4em; font-size: 1.08em; }
.monitor-detail p, .monitor-detail ul, .monitor-detail dl { margin: 0 0 .55em; }
.monitor-detail ul { padding-left: 1.3em; }
.monitor-detail dl { display: grid; grid-template-columns: 5em 1fr; gap: .35em .8em; }
.monitor-detail dt { font-weight: 700; }
.monitor-detail dd { margin: 0; }
.monitor-detail dd small { display: block; }
.monitor-detail .monitor-qr-spot { grid-column: 3 / 4; align-self: start; justify-self: stretch; width: 100%; max-width: 360px; }
.monitor-detail .monitor-apply { grid-column: 1 / 2; }
.monitor-detail .monitor-terms { grid-column: 2 / 3; }
.monitor-detail .monitor-social { grid-column: 3 / 4; }
.monitor-social div { display: flex; flex-wrap: wrap; gap: 8px; }
.monitor-social button, .monitor-social a { border: 1px solid rgba(72,56,39,.42); border-radius: 999px; background: rgba(255,255,255,.64); color: inherit; padding: 8px 13px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.cta.is-disabled { display: inline-block; opacity: .58; cursor: not-allowed; }
.documents-form { display: grid; grid-template-columns: 150px 1fr; gap: 10px 18px; break-inside: avoid; }
.documents-form label { font-weight: 700; }
.documents-form input, .documents-form select { width: 100%; padding: 9px 11px; border: 1px solid rgba(68,59,49,.3); border-radius: 5px; background: rgba(255,255,255,.68); font: inherit; }
.documents-form button { grid-column: 2; justify-self: start; padding: 10px 19px; border: 0; border-radius: 999px; background: #514538; color: #fff; cursor: pointer; }
.document-list { display: grid; gap: 9px; margin-top: 24px; break-inside: avoid; }
.document-row { display: grid; grid-template-columns: 105px 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(72,56,39,.24); }
.document-row button { padding: 7px 13px; border: 1px solid rgba(68,59,49,.36); border-radius: 999px; background: rgba(250,247,239,.6); cursor: pointer; }
.line-qr-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 20px 0; break-inside: avoid; }
.line-qr-card { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; gap: 4px 14px; align-items: center; padding: 13px; border: 1px solid rgba(68,59,49,.24); border-radius: 14px; background: rgba(255,252,245,.55); }
.line-qr-card img { grid-row: 1 / 3; width: 92px; height: 92px; object-fit: contain; border-radius: 8px; }
.line-qr-card strong { align-self: end; font-size: 1.02em; }
.line-qr-card span { align-self: start; font-size: .76em; white-space: nowrap; }
.suiken-line { border-color: rgba(0,184,86,.36); }
.kensui-line { border-color: rgba(20,20,20,.28); }
.sns-viewer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; break-inside: avoid; }
.sns-card { padding: 20px; border: 1px solid rgba(68,59,49,.24); border-radius: 16px; background: rgba(255,252,245,.58); text-align: center; }
.sns-mark { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%; background: #24211e; color: #fff; font: 700 18px/1 Arial,sans-serif; }
.instagram-card .sns-mark { background: linear-gradient(135deg,#6b4bc5,#c62d72 52%,#ef8b36); }
.sns-card h2 { margin: 0 0 7px; }
.sns-login { display: inline-flex; padding: 10px 17px; border-radius: 999px; background: #514538; color: #fff; text-decoration: none; font-weight: 700; text-shadow: none; }
.sns-refresh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; padding: 12px 0; border-block: 1px solid rgba(72,56,39,.24); break-inside: avoid; }
.sns-refresh span { min-width: 56px; font: 700 17px/1 monospace; }
.sns-refresh small { flex: 1; }
.sns-refresh button { padding: 7px 13px; border: 1px solid rgba(68,59,49,.36); border-radius: 999px; background: rgba(250,247,239,.6); cursor: pointer; }
.app[data-page="sns"] .page-copy { columns: 1; height: calc(100% - clamp(82px,10vh,122px)); overflow: hidden; }
.smile-members { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 16px; text-shadow: none; }
.smile-members.has-empty-notice { grid-template-rows: auto auto minmax(0,1fr); }
.smile-members-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 12px 24px; align-items: center; }
.smile-members-intro p { margin: 0; }
.smile-line-cta { margin: 0; border: 0; cursor: pointer; white-space: nowrap; }
.smile-line-qr { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 10px; align-items: center; min-width: 240px; }
.smile-line-qr img { width: 64px; height: 64px; object-fit: contain; border-radius: 7px; background: #fff; }
.smile-line-qr span { display: grid; gap: 3px; }
.smile-line-qr small { max-width: 25em; font-size: .72em; line-height: 1.45; }
.monitor-line-qr { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; max-width: 360px; min-width: 0; margin: 0; overflow: hidden; }
.monitor-line-qr img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; border-radius: 7px; background: #fff; }
.monitor-line-qr span { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.monitor-line-qr small { max-width: 100%; font-size: .75em; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.smile-members-viewport { min-height: 0; overflow: auto; padding: 2px 8px 12px 2px; overscroll-behavior: contain; scrollbar-width: thin; }
.smile-members-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: clamp(10px,1.2vw,18px); }
.smile-member-card { position: relative; min-height: 150px; display: grid; grid-template-rows: 1fr auto auto; overflow: hidden; border: 1px solid rgba(68,59,49,.28); border-radius: 14px; background: rgba(255,252,245,.62); color: var(--ink); text-decoration: none; box-shadow: 0 6px 18px rgba(56,43,30,.08); }
.smile-member-card img { grid-row: 1; width: 100%; height: 92px; object-fit: cover; opacity: .52; filter: sepia(.16) saturate(.72); transition: transform .3s ease, opacity .3s ease; }
.smile-member-card strong, .smile-member-card small { padding-inline: 12px; }
.smile-member-card strong { padding-top: 9px; font-size: .95em; }
.smile-member-card small { padding-block: 3px 10px; }
.smile-member-number { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border-radius: 999px; background: rgba(31,27,23,.68); color: #fff; font: 700 10px/1 "Yu Gothic",sans-serif; }
.smile-member-card[href]:hover img, .smile-member-card[href]:focus-visible img { transform: scale(1.04); opacity: .72; }
.smile-member-card.is-vacant { opacity: .76; }
.promotion-card { border-color: rgba(146,93,45,.38); }
.promotion-card .smile-member-number { background: rgba(132,76,28,.78); }
.smile-empty-notice { margin: 0 !important; padding: 8px 12px; border-left: 3px solid rgba(132,76,28,.48); background: rgba(255,252,245,.45); font-size: .88em; }
.business-profile { margin-top: 20px; break-inside: avoid; }
.business-profile h2 { margin-top: 1.1em; }
.business-profile > h2:first-child,
.business-profile > .business-status,
.business-profile > .business-hours { display: none; }
.business-status { font-weight: 700; }
.business-hours { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 22px; }
.business-hours div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid rgba(72,56,39,.2); }
.business-holidays { padding: 10px 12px; border-left: 3px solid rgba(130,92,50,.4); }
.business-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .82em; }
.business-meta a { color: inherit; font-weight: 700; }
.calendar-preview { width: 100%; display: flex; justify-content: space-between; gap: 16px; margin: 14px 0; padding: 15px 18px; border: 1px solid rgba(68,59,49,.32); border-radius: 12px; background: rgba(255,252,245,.58); color: var(--ink); text-align: left; cursor: pointer; }
.calendar-preview span { font-size: .85em; }
.viewer-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: clamp(14px,4vw,48px); }
.viewer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(25,22,18,.58); backdrop-filter: blur(5px); cursor: pointer; }
.viewer-panel { position: relative; z-index: 1; width: min(1100px,94vw); height: min(760px,90vh); padding: 16px; border-radius: 16px; background: #f7f2e8; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.viewer-panel header { height: 44px; display: flex; align-items: center; justify-content: space-between; }
.viewer-panel h2 { margin: 0; font-size: 20px; }
.viewer-panel header button { padding: 7px 14px; border: 1px solid rgba(68,59,49,.35); border-radius: 999px; background: #fff; cursor: pointer; }
.viewer-panel iframe { display: block; width: 100%; height: calc(100% - 44px); border: 0; border-radius: 10px; background: #fff; }
.modal-root > .legal-modal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: block;
  padding: clamp(18px,4vw,48px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(31,26,20,.8);
}
.modal-root > .legal-modal[hidden] { display: none; }
.modal-root > .legal-modal .legal-dialog {
  position: relative;
  width: min(720px,calc(100vw - 36px));
  margin: 2vh auto 6vh;
  padding: clamp(22px,3vw,38px);
  border-radius: 18px;
  background: rgba(248,244,234,.995);
  color: #2f2a24;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.modal-root > .legal-modal .legal-close {
  position: sticky;
  z-index: 2;
  top: 8px;
  display: block;
  width: max-content;
  margin: 0 0 12px auto;
  padding: 9px 16px;
  border: 1px solid rgba(47,42,36,.45);
  border-radius: 999px;
  background: rgb(248,244,234);
  color: inherit;
  cursor: pointer;
}
.modal-root > .legal-modal .legal-kicker {
  margin: 0 0 8px;
  color: #66584a;
  font: 700 11px/1.4 "Yu Gothic",sans-serif;
  letter-spacing: .16em;
}
.modal-root > .legal-modal .legal-dialog > h2 {
  margin: 0;
  color: #443b31;
  font: 600 clamp(22px,3vw,34px)/1.4 "Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing: .06em;
}
.modal-root > .legal-modal .legal-facts {
  display: grid;
  grid-template-columns: minmax(8em,.35fr) 1fr;
  gap: 10px 18px;
  margin: 22px 0;
}
.modal-root > .legal-modal .legal-facts dt { color: #443b31; font-weight: 700; }
.modal-root > .legal-modal .legal-facts dd { margin: 0; color: #443b31; line-height: 1.75; }
@media (max-width: 600px) {
  .modal-root > .legal-modal .legal-facts { grid-template-columns: 1fr; gap: 4px; }
  .modal-root > .legal-modal .legal-facts dd { margin-bottom: 10px; }
}
.cta { display: inline-flex; align-items: center; justify-content: center; margin-top: .8em; padding: 12px 22px; border-radius: 999px; background: #514538; color: #fff; text-decoration: none; font: 700 13px/1.4 "Yu Gothic", sans-serif; }
.home-button { z-index: 21; min-width: 90px; min-height: 40px; padding: 8px 18px; border: 1px solid rgba(68,59,49,.58); border-radius: 999px; background: rgba(250,247,239,.72); color: var(--ink); font: 700 12px/1 "Yu Gothic", sans-serif; letter-spacing: .14em; cursor: pointer; }

@media (max-width: 1250px) {
  .site-header { grid-template-columns: auto auto; justify-content: space-between; }
  .brand { width: 110px; height: 100px; }
  .brand img { width: 96px; height: 96px; }
  .menu-toggle { display: block; margin-top: 10px; padding: 8px 15px; border: 1px solid currentColor; border-radius: 999px; background: rgba(250,247,239,.78); color: var(--ink); font: 700 11px/1 "Yu Gothic", sans-serif; letter-spacing: .12em; cursor: pointer; }
  .app[data-page="home"] .menu-toggle { background: rgba(0,0,0,.28); color: #fff; }
  .global-nav { position: absolute; top: 92px; right: var(--edge); width: min(360px, calc(100vw - 36px)); max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 12px 18px 16px; display: none; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid rgba(68,59,49,.24); border-radius: 12px; background: rgba(247,241,230,.96); backdrop-filter: blur(10px); }
  .global-nav.is-open { display: flex; }
  .global-nav button, .app[data-page="home"] .global-nav button { padding: 11px 4px; color: var(--ink); text-align: left; text-shadow: none; font-size: 14px; }
  .nav-submenu { position: static; min-width: 0; padding: 0 0 0 18px; display: grid; transform: none; border: 0; background: transparent; box-shadow: none; }
  .nav-submenu button { text-align: left; }
  .story-watermark { left: 68%; width: 72vw; }
}

@media (max-width: 700px) {
  body { background: #f4efe4; }
  .app[data-page="home"] { min-height: 100%; height: auto; overflow: visible; background: var(--paper); }
  .top-background { position: fixed; height: 100vh; }
  .app[data-page="home"] .stationery { position: relative; min-height: 100vh; overflow: visible; }
  .site-header { position: absolute; padding-top: 8px; }
  .brand { width: 102px; height: 96px; }
  .brand img { width: 92px; height: 92px; }
  .global-nav { top: 76px; }
  .story-watermark { position: fixed; left: 58%; top: 42%; width: 135vw; height: 48vh; opacity: .15; }
  .app[data-page="sns"] .stationery::after { position: fixed; top: 88px; right: -10px; width: 160px; opacity: .13; }
  .boy-layer { left: 7vw; bottom: 53vw; width: 18vw; height: 28vh; }
  .boy-seated { animation: none; opacity: 0; }
  .boy-pointing { animation: none; opacity: var(--story-figure-opacity); }
  .top-story-layers { --story-figure-opacity: .88; }
  .layer-scientist { display: none; }
  .layer-young-men { width: 15vw; left: auto; right: 5vw; top: auto; bottom: 52vw; }
  .layer-watcher { width: 11vw; left: 18vw; right: auto; bottom: 38vw; transform: scaleX(-1); }
  .falling-drop { --drop-distance: 18vh; left: calc(50% - 5px); top: 65%; }
  .ripple-layer { left: 50%; top: 83%; }
  .app[data-page="home"] .content-panel { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: auto; min-height: calc(100vh - 108px); margin: 108px 18px 0; }
  .app[data-page="home"] .content-scroll { height: auto; overflow: visible; padding: 26px 6px 92px; }
  .content-panel h1 { font-size: clamp(28px,8.5vw,40px); }
  .page-copy { font-size: 15px; line-height: 1.9; }
  .ceramic-balls { position: absolute; transform: scale(.76); transform-origin: left bottom; }
  .partner-detail { display: block; font-size: 14px; line-height: 1.8; }
  .partner-detail .partner-lead { columns: 1; }
  .partner-detail section, .partner-detail .partner-apply, .partner-detail .closing { margin-top: 18px; }
  .monitor-detail { display: block; font-size: 14px; line-height: 1.75; }
  .monitor-detail .monitor-intro { display: block; }
  .monitor-detail .monitor-qr-spot { width: 100%; max-width: none; margin-top: 18px; }
  .monitor-line-qr { justify-content: flex-start; }
  .monitor-detail .monitor-limit { margin-top: 8px; white-space: normal; }
  .monitor-detail section { margin-top: 18px; }
  .page-copy .facts { grid-template-columns: 1fr; gap: 3px; }
  .page-copy .facts dd { margin-bottom: 8px; }
  .entry-button { grid-template-columns: 1fr; gap: 3px; }
  .documents-form { grid-template-columns: 1fr; }
  .documents-form button { grid-column: 1; }
  .document-row { grid-template-columns: 1fr; gap: 4px; }
  .line-qr-grid { grid-template-columns: 1fr; }
  .sns-viewer-grid { grid-template-columns: 1fr; }
  .app[data-page="sns"] .page-copy { height: auto; overflow: visible; }
  .smile-members { height: auto; }
  .smile-members-intro { grid-template-columns: 1fr; }
  .smile-line-cta { white-space: normal; }
  .smile-line-qr { min-width: 0; }
  .smile-members-viewport { max-height: 58vh; }
  .smile-members-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .smile-member-card { min-height: 142px; }
  .business-hours { grid-template-columns: 1fr; }
}
@media (min-width: 701px) and (max-width: 1250px) {
  .smile-members-intro { grid-template-columns: 1fr 1fr; }
  .smile-line-cta { grid-column: 1 / -1; justify-self: start; }
  .smile-members-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-height: 540px) and (orientation: landscape) {
  .app[data-page="home"] { height: 100vh; min-height: 100vh; overflow: hidden; }
  .top-background, .top-story-layers { position: absolute; height: 100%; }
  .top-story-layers { display: block; --story-figure-opacity: .9; }
  .boy-layer { left: 8vw; bottom: 34vh; width: 10vw; height: 34vh; }
  .boy-seated { animation: none; opacity: 0; }
  .boy-pointing { animation: none; opacity: var(--story-figure-opacity); }
  .layer-scientist { display: none !important; }
  .layer-young-men { display: block; left: auto; right: 9vw; bottom: 29vh; width: 8vw; }
  .layer-watcher { display: block; left: auto; right: 24vw; bottom: 15vh; width: 6vw; transform: scaleX(-1); }
  .falling-drop { --drop-distance: 12vh; top: 61%; }
  .ripple-layer { top: 82%; }
  .app[data-page="home"] .content-panel { min-height: calc(100vh - 108px); margin: 108px 18px 0; }
  .app[data-page="home"] .content-scroll { max-height: none; overflow: visible; padding-top: 10px; }
  .content-panel h1 { margin-bottom: 10px; font-size: clamp(24px,5vw,34px); }
  .page-copy { font-size: 13px; line-height: 1.65; }
  .smile-members-intro { grid-template-columns: 1fr 1fr auto; font-size: 12px; }
  .smile-line-cta { grid-column: auto; font-size: 11px; }
  .smile-line-qr { min-width: 210px; grid-template-columns: 52px minmax(0,1fr); }
  .smile-line-qr img { width: 52px; height: 52px; }
  .smile-line-qr small { font-size: 9px; }
  .smile-members-viewport { max-height: calc(100vh - 205px); }
  .smile-members-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .smile-member-card { min-height: 120px; }
  .smile-member-card img { height: 68px; }
}

/* The portrait menu is already correct. Apply the touch-scroll correction
   only to the compact landscape menu. */
@media (orientation: landscape) and (max-width: 1250px) {
  .global-nav {
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boy-seated { animation: none; opacity: 0; }
  .boy-pointing { animation: none; opacity: var(--story-figure-opacity); }
  .falling-drop, .ripple-layer { display: none; }
}

/* Non-TOP mobile header separation: keep logo/menu outside document scroll. */
@media (max-width: 700px) {
  .app:not([data-page="home"]) .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}
@media (max-height: 540px) and (orientation: landscape) {
  .app:not([data-page="home"]) .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}

/* 2026-08-12 Smile Partner local framework mock */
.app[data-page="sns"] .page-copy { overflow: auto; }
.smile-mock-layout { height:auto; display:grid; gap:18px; padding-bottom:18px; }
.smile-concept { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,38%); gap:22px; align-items:end; padding:18px 20px; border:1px solid rgba(68,59,49,.20); border-radius:18px; background:rgba(255,252,245,.58); position:relative; }
.smile-concept h2 { margin:.15em 0 .45em; font-size:clamp(1.25rem,2vw,1.85rem); }
.smile-concept p { margin:.35em 0; max-width:72em; }
.smile-kicker { letter-spacing:.16em; font-size:.72em; font-weight:700; opacity:.65; }
.smile-leaf { position:absolute; right:18px; top:8px; font-size:34px; opacity:.20; transform:rotate(-18deg); }
.smile-search-open,.smile-detail-button,.smile-search-submit,.smile-order-actions button,.smile-commerce-note button { border:1px solid rgba(68,59,49,.35); border-radius:999px; background:rgba(255,252,245,.82); color:var(--ink); padding:9px 14px; cursor:pointer; font-weight:700; }
.smile-showcase { display:grid; gap:12px; }
.smile-showcase-head { display:flex; justify-content:space-between; align-items:end; gap:12px; padding:0 3px; }
.smile-showcase-head div { display:grid; gap:2px; }
.smile-showcase-head small,.smile-showcase-head>span { font-size:.72em; opacity:.68; }
.smile-profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.5vw,20px); }
.smile-profile-card { min-width:0; }
.smile-media { width:100%; padding:0; border:1px solid rgba(68,59,49,.25); border-radius:16px; overflow:hidden; background:rgba(255,252,245,.48); cursor:pointer; aspect-ratio:16/9; }
.smile-media img { width:100%; height:100%; object-fit:cover; opacity:.72; display:block; }
.smile-profile-meta { display:grid; grid-template-columns:1fr auto; gap:3px 10px; padding:8px 5px 0; align-items:center; }
.smile-profile-meta strong { min-width:0; }
.smile-profile-meta span { font-size:.76em; opacity:.72; }
.smile-profile-meta p { grid-column:1/-1; margin:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.84em; }
.smile-detail-button { justify-self:start; padding:5px 12px; font-size:.76em; }
.smile-profile-card.is-information .smile-media { border-style:dashed; }
.smile-commerce-note { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding-top:10px; border-top:1px solid rgba(68,59,49,.18); font-size:.78em; }
.smile-detail-panel,.smile-search-panel { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:clamp(16px,4vw,48px); background:rgba(24,21,18,.55); backdrop-filter:blur(4px); }
.smile-guide-panel { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:clamp(16px,4vw,48px); background:rgba(24,21,18,.55); backdrop-filter:blur(4px); }
.smile-detail-panel[hidden],.smile-search-panel[hidden],.smile-guide-panel[hidden],.smile-search-results[hidden] { display:none!important; }
.smile-detail-box,.smile-search-box { width:min(780px,100%); max-height:min(82vh,760px); overflow:auto; position:relative; display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); gap:22px; padding:24px; border-radius:20px; background:#f7f2e8; color:#332d27; box-shadow:0 22px 70px rgba(0,0,0,.28); }
.smile-guide-box { width:min(720px,100%); max-height:min(82vh,760px); overflow:auto; position:relative; padding:clamp(24px,4vw,40px); border-radius:20px; background:#f7f2e8; color:#332d27; box-shadow:0 22px 70px rgba(0,0,0,.28); }
.smile-guide-box h2 { margin:.2em 2em .8em 0; }
.smile-guide-box p { line-height:1.8; }
.smile-detail-media img { width:100%; border-radius:14px; aspect-ratio:4/3; object-fit:cover; }
.smile-modal-close { position:absolute; right:14px; top:12px; border:0; background:transparent; cursor:pointer; font-weight:700; }
.smile-type-label { display:inline-block; margin-top:18px; font-size:.75em; opacity:.7; }
.smile-order-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.smile-search-box { grid-template-columns:1fr; gap:10px; }
.smile-search-box label { display:grid; gap:5px; font-size:.84em; font-weight:700; }
.smile-search-box input,.smile-search-box select { width:100%; padding:10px 12px; border:1px solid rgba(68,59,49,.28); border-radius:10px; background:#fffdf8; font:inherit; }
.smile-search-submit { justify-self:start; margin-top:4px; }
.smile-search-note { margin:0; font-size:.76em; opacity:.72; }
.smile-search-results { display:grid; gap:7px; margin-top:8px; padding-top:12px; border-top:1px solid rgba(68,59,49,.18); font-size:.82em; }
@media (max-width:760px){.smile-concept{grid-template-columns:1fr}.smile-search-open{justify-self:start}.smile-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.smile-detail-box{grid-template-columns:1fr}.smile-commerce-note{justify-content:flex-start;flex-wrap:wrap}}
@media (max-width:460px){.smile-profile-grid{grid-template-columns:1fr}.smile-showcase-head{align-items:start;flex-direction:column}.smile-detail-panel,.smile-search-panel{padding:10px}.smile-detail-box,.smile-search-box{padding:20px 16px}}

.smile-guidance { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:8px 0 0; border-top:1px solid rgba(68,59,49,.18); }
.smile-guidance button { width:100%; min-height:34px; padding:6px 10px; border:1px solid rgba(68,59,49,.24); border-radius:8px; background:rgba(255,252,245,.66); color:inherit; text-align:center; cursor:pointer; font:700 .78em/1.35 "Yu Gothic",sans-serif; }
.smile-guidance button:hover,.smile-guidance button:focus-visible { background:rgba(255,255,255,.9); }
@media (max-width:760px){.smile-guidance{grid-template-columns:1fr;gap:5px}.smile-guidance button{min-height:30px;padding:5px 8px;text-align:left;font-size:.76em}}

.document-row>span { display:grid; gap:3px; min-width:0; }
.document-row>span small { font-size:.78em; font-weight:400; opacity:.75; }
.usage-list { display:grid; gap:20px; }
.usage-card { padding:clamp(14px,2vw,22px); border:1px solid rgba(68,59,49,.2); border-radius:16px; background:rgba(255,252,245,.58); }
.usage-card header { display:grid; gap:3px; margin-bottom:12px; }
.usage-card time { font-size:.76em; opacity:.7; }
.usage-card h2 { margin:0; font-size:clamp(1.05rem,2vw,1.35rem); }
.usage-card video { display:block; width:min(100%,860px); max-height:70vh; margin:0 auto 14px; border-radius:12px; background:#111; }
.usage-description p { line-height:1.8; }
.usage-external-link { display:inline-block; padding:9px 14px; border:1px solid rgba(68,59,49,.3); border-radius:999px; color:inherit; font-weight:700; text-decoration:none; }
@media (max-width:460px){.smile-guide-panel{padding:10px}.smile-guide-box{padding:22px 16px}}

/* 2026-08-12 Smile Partner: vertical flow only (no horizontal column overflow) */
.app[data-page="sns"] .page-copy {
  columns: initial !important;
  column-count: initial !important;
  column-width: initial !important;
  column-gap: 0 !important;
  height: auto !important;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
.app[data-page="sns"] .smile-mock-layout,
.app[data-page="sns"] .smile-concept,
.app[data-page="sns"] .smile-showcase,
.app[data-page="sns"] .smile-profile-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* 2026-08-17 confirmed interaction/terms patch */
.partner-detail .partner-apply{border-left:1px solid rgba(72,56,39,.25)!important;padding-left:clamp(14px,1.6vw,24px)!important;border-top:0!important;}
.company-regulations{margin-top:18px;padding-top:12px;border-top:1px solid rgba(72,56,39,.22);break-inside:avoid;}
.company-regulations h2{margin:0 0 6px;font-size:1.08em}.regulations-new,.regulations-list em{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;font:700 10px/1.3 "Yu Gothic",sans-serif;letter-spacing:.05em;background:rgba(135,52,36,.12);font-style:normal}.regulations-open,.smile-club-line-open{margin-top:5px;padding:7px 13px;border:1px solid rgba(68,59,49,.34);border-radius:999px;background:rgba(250,247,239,.72);color:inherit;cursor:pointer;font:700 11px/1.35 "Yu Gothic",sans-serif}.regulations-panel,.smile-club-line-panel{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(14px,4vw,48px);background:rgba(24,21,18,.58);backdrop-filter:blur(4px)}.regulations-panel[hidden],.smile-club-line-panel[hidden]{display:none!important}.regulations-box,.smile-club-line-box{position:relative;width:min(900px,94vw);max-height:86vh;overflow:auto;padding:clamp(22px,4vw,42px);border-radius:16px;background:#f6f0e4;color:#443b31;box-shadow:0 20px 60px rgba(0,0,0,.28)}.smile-club-line-box{width:min(620px,94vw)}.regulations-list{display:grid;gap:10px;margin-top:18px}.regulations-list>button{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;width:100%;padding:12px 14px;text-align:left;border:1px solid rgba(68,59,49,.2);border-radius:10px;background:rgba(255,255,255,.35);color:inherit;cursor:pointer}.regulations-list span,.regulation-updated{font-size:.82em;opacity:.7}.regulation-body h3{margin:1.2em 0 .35em;font-size:1.02em}.regulation-body p{margin:.35em 0 .8em;line-height:1.8}.facts a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(68,59,49,.38)}
@media(max-width:700px){.partner-detail .partner-apply{margin-left:0;padding-left:12px!important}.regulations-list>button{grid-template-columns:1fr auto}.regulations-list em{grid-column:2}.regulations-box,.smile-club-line-box{max-height:90dvh;padding:20px 16px}}

/* 2026-08-17 Regulations viewer: single paper-style UI */
.regulations-panel{
  background:
    radial-gradient(circle at 14% 12%,rgba(255,255,255,.16),transparent 28%),
    linear-gradient(rgba(35,48,40,.56),rgba(24,27,23,.68));
}
.regulations-box{
  width:min(940px,94vw); max-height:min(88vh,920px);
  border:1px solid rgba(116,91,58,.28); border-radius:10px;
  background:
    repeating-linear-gradient(to bottom,rgba(104,86,61,.075) 0,rgba(104,86,61,.075) 1px,transparent 1px,transparent 32px),
    linear-gradient(105deg,#f7f0df,#f3ead6 48%,#f8f2e5);
  box-shadow:0 24px 70px rgba(0,0,0,.32),inset 0 0 42px rgba(110,87,50,.06);
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}
.regulations-box::before{content:"";position:absolute;left:clamp(20px,4vw,42px);top:0;bottom:0;width:1px;background:rgba(146,71,54,.18);pointer-events:none}
.reg-viewer-kicker{margin:0 0 5px;padding-left:clamp(18px,2vw,28px);font:700 10px/1.4 "Yu Gothic",sans-serif;letter-spacing:.18em;opacity:.58}
.reg-viewer-intro{padding-left:clamp(18px,2vw,28px);margin:.2em 0 1.2em;opacity:.76}
.regulations-box>h2{padding-left:clamp(18px,2vw,28px);font-weight:600;letter-spacing:.08em}
.reg-viewer-close{position:sticky;z-index:4;float:right;top:0;border:1px solid rgba(68,59,49,.28);border-radius:999px;background:rgba(249,244,231,.94);padding:7px 12px;color:#443b31;cursor:pointer;font:700 11px/1.2 "Yu Gothic",sans-serif}
.regulations-list{padding-left:clamp(18px,2vw,28px)}
.regulations-list>button{background:rgba(255,253,247,.5);border-radius:4px;border-left:3px solid rgba(86,110,75,.34)}
.regulations-list>button strong{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:600}
.regulation-body{padding:0 clamp(6px,2vw,22px) 10px clamp(18px,2vw,28px)}
.regulation-body h3{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;border-bottom:1px solid rgba(87,72,52,.18);padding-bottom:.25em}
.regulation-body ol{margin:.4em 0 1em 1.4em;padding:0;line-height:1.8}
.reg-viewer-footer{margin:28px 0 0;padding:14px clamp(18px,2vw,28px) 0;border-top:1px solid rgba(68,59,49,.18);text-align:right}
@media(max-width:700px){.regulations-box{width:96vw;max-height:92dvh}.regulations-box::before{left:16px}.regulations-list,.regulation-body,.regulations-box>h2,.reg-viewer-kicker,.reg-viewer-intro{padding-left:12px}.reg-viewer-close{top:0}}

/* 2026-08-17 confirm09: partner alignment + regulations single-tone paper */
.app[data-detail="partner"] .partner-detail{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto auto;
  column-gap:clamp(28px,3.4vw,58px);
  row-gap:10px;
}
.app[data-detail="partner"] .partner-detail .partner-lead{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(28px,3.4vw,58px);
  columns:auto;
}
.app[data-detail="partner"] .partner-detail .partner-lead p:first-child{grid-column:1;}
.app[data-detail="partner"] .partner-detail .partner-lead p:last-child{grid-column:2 / 4;}
.app[data-detail="partner"] .partner-detail section{margin:0;min-width:0;}
.app[data-detail="partner"] .partner-detail .partner-apply{
  grid-column:1 / 3;
  border-left:0!important;
  padding-left:0!important;
  border-top:1px solid rgba(72,56,39,.25)!important;
}
.app[data-detail="partner"] .partner-detail .closing{
  grid-column:3;
  border-top:1px solid rgba(72,56,39,.25);
  padding-top:8px;
}

/* one paper colour throughout; ruled lines are decoration only */
.regulations-box{
  background-color:#f6f0e4!important;
  background-image:repeating-linear-gradient(to bottom,rgba(104,86,61,.075) 0,rgba(104,86,61,.075) 1px,transparent 1px,transparent 32px)!important;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif!important;
}
.regulations-list>button{
  background:transparent!important;
  font-family:inherit!important;
}
.regulations-list>button strong,.regulation-body h3{
  font-family:inherit!important;
}
.regulation-body{
  background:transparent!important;
  background-color:transparent!important;
}
.regulation-body p,.regulation-body h3,.regulation-body ol,.regulation-body li{
  background:transparent!important;
}
@media(max-width:700px){
  .app[data-detail="partner"] .partner-detail .partner-lead{display:block;}
  .app[data-detail="partner"] .partner-detail .partner-apply{padding-left:0!important;}
}

/* 2026-08-17 confirm10: structural responsive cleanup (no device-specific hacks) */
/* Partner: each heading/rule/body is one indivisible column block on wide layouts. */
@media (min-width: 701px) {
  .app[data-detail="partner"] .partner-detail{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:auto auto auto auto;
    column-gap:clamp(30px,3.6vw,62px);
    row-gap:12px;
  }
  .app[data-detail="partner"] .partner-detail .detail-back{grid-column:1/-1;grid-row:1;}
  .app[data-detail="partner"] .partner-detail .partner-lead{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,3.6vw,62px);columns:auto;}
  .app[data-detail="partner"] .partner-detail .partner-lead p{margin:0;}
  .app[data-detail="partner"] .partner-detail section{grid-row:3;margin:0;padding-top:9px;border-top:1px solid rgba(72,56,39,.25);min-width:0;}
  .app[data-detail="partner"] .partner-detail section:nth-of-type(1){grid-column:1;}
  .app[data-detail="partner"] .partner-detail section:nth-of-type(2){grid-column:2;}
  .app[data-detail="partner"] .partner-detail section:nth-of-type(3){grid-column:3;}
  .app[data-detail="partner"] .partner-detail .partner-apply{grid-column:1/3;grid-row:4;margin:0;padding-top:9px;border-top:1px solid rgba(72,56,39,.25)!important;}
  .app[data-detail="partner"] .partner-detail .closing{grid-column:3;grid-row:4;margin:0;padding-top:9px;border-top:1px solid rgba(72,56,39,.25);}
}

/* Compact landscape presentation only. The common content scroller remains
   the sole scroll owner on non-TOP pages. */
@media (orientation: landscape) and (max-width: 950px) {
  /* Monitor: responsive two-column flow; nothing is allowed to sit outside the viewport. */
  .app[data-detail="monitor-sale"] .monitor-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;font-size:13px;line-height:1.65;height:auto;}
  .app[data-detail="monitor-sale"] .monitor-detail .detail-back,
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-intro{grid-column:1/-1;}
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-intro{display:block;}
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-qr-spot,
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-apply,
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-terms,
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-social{grid-column:auto;width:auto;max-width:100%;margin:0;}
  .app[data-detail="monitor-sale"] .monitor-line-qr{max-width:100%;min-width:0;}

  /* Smile: the common page scroller owns vertical movement. */
  .app[data-page="sns"] .smile-members-viewport{max-height:none!important;overflow:visible!important;}
  .app[data-page="sns"] .smile-mock-layout{padding-bottom:32px;}

  /* Landscape TOP: boy is always the final pointing still. Drop/ripple remain animated. */
  .app[data-page="home"] .boy-seated{display:none!important;animation:none!important;opacity:0!important;}
  .app[data-page="home"] .boy-pointing{animation:none!important;opacity:var(--story-figure-opacity)!important;transform:none!important;}
}

/* FINAL CHECK 2026-08-18: finish only the three remaining presentation issues. */
/* 1) Suppress obsolete nested/body scrollbars. The common content scrollbar
   remains visible whenever registered content crosses the boundary. */
@media (max-width: 950px) {
  html, body,
  .page-copy, .smile-members-viewport,
  .regulations-box, .smile-detail-box, .smile-search-box {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar,
  .page-copy::-webkit-scrollbar,
  .smile-members-viewport::-webkit-scrollbar,
  .regulations-box::-webkit-scrollbar, .smile-detail-box::-webkit-scrollbar,
  .smile-search-box::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
}

/* 2) Monitor-sale landscape: preserve its PC-specific three-column, two-row
   information order instead of converting it to the standard detail flow. */
@media (orientation: landscape) and (max-width: 950px) {
  .app[data-detail="monitor-sale"] .monitor-detail {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 14px 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .app[data-detail="monitor-sale"] .monitor-detail > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .app[data-detail="monitor-sale"] .monitor-detail .detail-back,
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-intro {
    grid-column: 1 / -1 !important;
  }
  .app[data-detail="monitor-sale"] .monitor-detail .detail-back {
    width: auto !important;
    max-width: max-content !important;
  }
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-summary { grid-column: 1 !important; }
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-summary + section { grid-column: 2 !important; }
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-qr-spot { grid-column: 3 !important; }
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-apply { grid-column: 1 !important; }
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-terms { grid-column: 2 !important; }
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-legal-section { grid-column: 3 !important; }
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-commerce-note { grid-column: 1 !important; }
  .app[data-detail="monitor-sale"] .monitor-detail section,
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-qr-spot { margin-top: 14px !important; }
  .app[data-detail="monitor-sale"] .monitor-detail .monitor-summary dl {
    grid-template-columns: minmax(64px,5em) minmax(0,1fr) !important;
    width: 100% !important;
  }
  .app[data-detail="monitor-sale"] .monitor-detail dd,
  .app[data-detail="monitor-sale"] .monitor-detail p,
  .app[data-detail="monitor-sale"] .monitor-detail li { overflow-wrap: anywhere; }
}

/* 3) Partner desktop: heading/rule/body are inseparable column blocks. */
@media (min-width: 951px) {
  .app[data-detail="partner"] .partner-detail {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-template-rows: auto auto auto auto !important;
    align-items: start !important;
  }
  .app[data-detail="partner"] .partner-detail section {
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
    padding-top: 9px !important;
    border-top: 1px solid rgba(72,56,39,.25) !important;
  }
  .app[data-detail="partner"] .partner-detail section:nth-of-type(1) { grid-column:1 !important; grid-row:3 !important; }
  .app[data-detail="partner"] .partner-detail section:nth-of-type(2) { grid-column:2 !important; grid-row:3 !important; }
  .app[data-detail="partner"] .partner-detail section:nth-of-type(3) { grid-column:3 !important; grid-row:3 !important; }
  .app[data-detail="partner"] .partner-detail section > h2 { order:1; margin:0 0 .45em !important; }
  .app[data-detail="partner"] .partner-detail section > p { order:2; margin:0 !important; }
}
/* 2026-08-19 QC stage 1: public Smile Partner media containment only */
.app[data-page="sns"] .smile-media,
.app[data-page="sns"] .smile-detail-media,
#modalRoot .smile-detail-media{
  overflow:hidden !important;
}
.app[data-page="sns"] .smile-detail-media,
#modalRoot .smile-detail-media{
  aspect-ratio:4 / 3 !important;
}
.app[data-page="sns"] .smile-media img,
.app[data-page="sns"] .smile-detail-media img,
#modalRoot .smile-detail-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}
.app[data-page="sns"] .smile-media.is-empty,
.app[data-page="sns"] .smile-detail-media.is-empty,
#modalRoot .smile-detail-media.is-empty{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}


/* 2026-08-19 PC review consolidated corrections — no typography family override */
/* Keep desktop/non-TOP geometry stable; the landscape compact rules are limited above to <=1400px. */

/* Smile Partner: keep structure, reduce white lift, restore normal text contrast. */
.app[data-page="sns"] .smile-concept{
  background:rgba(244,237,224,.48) !important;
  border-color:rgba(68,59,49,.22) !important;
}
.app[data-page="sns"] .smile-search-note{opacity:1 !important;color:inherit !important;}
.app[data-page="sns"] .smile-leaf,
.app[data-page="sns"] .smile-profile-meta strong::before{display:none !important;content:none !important;}

/* List card information width follows the media width; message remains one line and only overflows with ellipsis. */
.app[data-page="sns"] .smile-profile-meta{
  width:100% !important;box-sizing:border-box !important;
  grid-template-columns:minmax(0,1fr) auto !important;
}
.app[data-page="sns"] .smile-profile-meta .smile-message{
  grid-column:1/-1 !important;width:100% !important;max-width:100% !important;
  padding-left:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
}
.app[data-page="sns"] .smile-profile-meta .smile-message::before,
.app[data-page="sns"] .smile-profile-meta .smile-message::after{content:none !important;display:none !important;}

/* New nature accents: deliberately faint, cropped, and confined to metadata only. */
.app[data-page="sns"] .smile-profile-meta .smile-name,
.app[data-page="sns"] .smile-profile-meta .smile-pref,
.app[data-page="sns"] .smile-profile-meta .smile-message{position:relative !important;isolation:isolate;}
.app[data-page="sns"] .smile-profile-meta .smile-name::after,
.app[data-page="sns"] .smile-profile-meta .smile-pref::after,
.app[data-page="sns"] .smile-profile-meta .smile-message::after{
  content:"" !important;display:block !important;position:absolute !important;z-index:-1 !important;pointer-events:none !important;
  background-repeat:no-repeat !important;background-position:center !important;background-size:contain !important;
  filter:saturate(.55) sepia(.10) !important;
}
.app[data-page="sns"] .smile-profile-meta .smile-name::after{
  background-image:url("images/smile-decor-leaf.png") !important;width:68px;height:30px;left:-9px;top:-7px;opacity:.075 !important;transform:rotate(-7deg);
}
.app[data-page="sns"] .smile-profile-meta .smile-pref::after{
  background-image:url("images/smile-decor-wave.png") !important;width:58px;height:30px;right:-5px;top:-8px;opacity:.065 !important;background-size:180% !important;
}
.app[data-page="sns"] .smile-profile-meta .smile-message::after{
  background-image:url("images/smile-decor-stump.png") !important;width:82px;height:36px;right:2px;top:-8px;opacity:.045 !important;background-size:150% !important;background-position:50% 62% !important;
}

/* Detail actions/questions share the existing rounded control language. */
.app[data-page="sns"] .smile-order-actions a,
.app[data-page="sns"] .smile-partner-question a{
  display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(68,59,49,.35);border-radius:999px;
  background:rgba(248,242,230,.72);color:inherit;padding:9px 14px;text-decoration:none;font-weight:700;
}
.app[data-page="sns"] .smile-partner-question{margin-top:18px;padding-top:14px;border-top:1px solid rgba(68,59,49,.18);}
.app[data-page="sns"] .smile-partner-question h3{margin:0 0 6px;font-size:1em;}
.app[data-page="sns"] .smile-partner-question p{margin:0 0 10px;}
.app[data-page="sns"] .smile-partner-question>div{display:flex;flex-wrap:wrap;gap:10px;}

/* Regulations: same warm stationery tone, without white floating cards. */
.regulations-box{background:#f2eadc !important;}
.regulations-list>button{background:rgba(239,230,215,.62) !important;border-color:rgba(68,59,49,.22) !important;}
.regulation-body{background-color:rgba(242,234,220,.70) !important;}

/* Kairan QR cards: align QR image vertically with its own right-hand copy. */
.app[data-page="kairan"] .line-qr-card{align-items:start !important;}
.app[data-page="kairan"] .line-qr-card img{align-self:start !important;}
.app[data-page="kairan"] .line-qr-card strong{align-self:end !important;}
.app[data-page="kairan"] .line-qr-card span{align-self:start !important;}

/* Detail titles inherit the established site font; only normalize oversized detail heading scale. */
.app[data-page="news"][data-detail] .content-panel h1{font-size:clamp(27px,2.6vw,42px);line-height:1.28;}

/* 2026-08-19 Smile Partner focused finish — scoped to SNS only. */
@media (min-width: 951px) {
  .app[data-page="sns"] .page-copy { overflow: visible !important; }

  /* Keep the page title in the same visual hierarchy as other non-TOP pages. */
  .app[data-page="sns"] .content-scroll > h1 {
    font-size: clamp(34px, 3.2vw, 54px) !important;
    line-height: 1.12 !important;
    letter-spacing: .04em !important;
  }
}

/* Member metadata: decoration is separate from the photo/video and deliberately subdued. */
.app[data-page="sns"] .smile-profile-meta { position: relative; isolation: isolate; }
.app[data-page="sns"] .smile-name,
.app[data-page="sns"] .smile-pref,
.app[data-page="sns"] .smile-message { position: relative; z-index: 1; }
.app[data-page="sns"] .smile-name { padding-left: 1.55em !important; }
.app[data-page="sns"] .smile-name::before {
  content:""; position:absolute; left:-.15em; top:-.45em; width:1.65em; height:1.65em;
  background:url("images/smile-decor/leaf.png") center/cover no-repeat;
  opacity:.20; filter:saturate(.55) sepia(.12); transform:rotate(-18deg); border-radius:50%; pointer-events:none;
}
.app[data-page="sns"] .smile-pref { padding-left: 1.45em; }
.app[data-page="sns"] .smile-pref::before {
  content:""; position:absolute; left:-.1em; top:-.42em; width:1.55em; height:1.55em;
  background:url("images/smile-decor/ripple.png") center 58%/210% auto no-repeat;
  opacity:.16; filter:grayscale(.15) sepia(.12); border-radius:50%; pointer-events:none;
}
.app[data-page="sns"] .smile-message { padding-left: 1.45em !important; }
.app[data-page="sns"] .smile-message::before {
  content:""; position:absolute; left:-.18em; top:-.38em; width:1.55em; height:1.55em;
  background:url("images/smile-decor/stump.png") center 70%/220% auto no-repeat;
  opacity:.17; filter:saturate(.48) sepia(.16); border-radius:50%; pointer-events:none;
}

/* Detail: warm Kensui typography and controls; avoid browser-default blue/black UI. */
.app[data-page="sns"] .smile-detail-box {
  background: rgba(247,242,232,.985) !important;
  color:#4b4035 !important;
  border:1px solid rgba(91,72,51,.18);
  font-family:"Yu Mincho","Hiragino Mincho ProN","Yu Gothic",serif !important;
  line-height:1.82;
}
.app[data-page="sns"] .smile-detail-box h2 {
  margin:.18em 0 .65em !important; color:#43372c !important; font-weight:600 !important;
  letter-spacing:.08em; font-size:clamp(24px,2vw,32px) !important;
}
.app[data-page="sns"] .smile-detail-box p { color:#574a3e !important; }
.app[data-page="sns"] .smile-type-label { color:#7b6b59 !important; letter-spacing:.12em; }
.app[data-page="sns"] .smile-modal-close { color:#4b4035 !important; font:600 15px/1.4 "Yu Gothic",sans-serif !important; }
.app[data-page="sns"] .smile-order-actions a,
.app[data-page="sns"] .smile-partner-question a {
  display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:7px 16px;
  border:1px solid rgba(91,72,51,.32); border-radius:999px; background:rgba(255,252,245,.64);
  color:#59493a !important; text-decoration:none !important; font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.03em;
}
.app[data-page="sns"] .smile-partner-question {
  margin-top:22px; padding-top:16px; border-top:1px solid rgba(91,72,51,.18);
}
.app[data-page="sns"] .smile-partner-question h3 {
  margin:0 0 8px; color:#4d4034; font-size:1em; font-weight:600; letter-spacing:.06em;
}
.app[data-page="sns"] .smile-partner-question p { margin:0 0 12px; font-size:.92em; }
.app[data-page="sns"] .smile-partner-question > div { display:flex; flex-wrap:wrap; gap:9px; }


.app[data-page="sns"] .smile-email-fallback {
  margin:.35em 0 0 !important; color:#574a3e !important; font-size:.92em !important;
}
.app[data-page="sns"] .smile-email-fallback span {
  color:#4b4035 !important;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  letter-spacing:.02em;
}


/* 2026-08-19 PC full-screen typography audit
   Detail article titles are subordinate to page titles, including Labo and News. */
@media (min-width:951px) {
  .app[data-page="labo"][data-detail] .content-panel h1,
  .app[data-page="news"][data-detail] .content-panel h1 {
    font-size:clamp(22px,2.0vw,32px) !important;
    line-height:1.30 !important;
    letter-spacing:.055em !important;
    margin-bottom:12px !important;
  }

  /* Smile Partner page title must not exceed the common non-TOP title hierarchy. */
  .app[data-page="sns"] .content-scroll > h1 {
    font-size:clamp(29px,3vw,50px) !important;
    line-height:1.28 !important;
    letter-spacing:.08em !important;
  }
}


/* 2026-08-20 SP decoration verified pass
   Presentation layers only. No scroll/grid sizing changes. */
.app[data-page="sns"] .smile-profile-meta{
  position:relative; isolation:isolate; overflow:hidden;
}
.app[data-page="sns"] .smile-profile-meta > :not(.smile-card-motif){
  position:relative; z-index:2;
}
.app[data-page="sns"] .smile-card-motif{
  position:absolute; z-index:1; pointer-events:none; display:block;
  background-position:center; background-repeat:no-repeat; background-size:contain;
}
.app[data-page="sns"] .motif-leaf{
  width:138px;height:74px;left:-28px;top:-18px;
  background-image:url("images/smile-leaf-cut.png");
  opacity:.20;transform:rotate(-12deg);
}
.app[data-page="sns"] .motif-wave{
  width:148px;height:76px;right:-34px;top:28px;
  background-image:url("images/smile-wave-cut.png");
  opacity:.16;transform:rotate(2deg);
}
.app[data-page="sns"] .motif-stump{
  width:118px;height:76px;right:-20px;bottom:-25px;
  background-image:url("images/smile-stump-cut.png");
  opacity:.13;
}
/* 旧・極小の擬似装飾は完全停止 */
.app[data-page="sns"] .smile-name::before,
.app[data-page="sns"] .smile-name::after,
.app[data-page="sns"] .smile-pref::before,
.app[data-page="sns"] .smile-pref::after,
.app[data-page="sns"] .smile-message::before,
.app[data-page="sns"] .smile-message::after{content:none!important;display:none!important;}
.app[data-page="sns"] .smile-name,
.app[data-page="sns"] .smile-pref,
.app[data-page="sns"] .smile-message{padding-left:0!important;}

/* 一覧上部の姉弟：絶対配置で文章・検索ブロックを押さない */
.app[data-page="sns"] .smile-concept{position:relative;isolation:isolate;}
.app[data-page="sns"] .smile-concept-mascot{
  position:absolute;z-index:1;pointer-events:none;
  width:118px;height:auto;right:31%;bottom:8px;opacity:.82;
  filter:saturate(.90);
}
.app[data-page="sns"] .smile-concept > div{position:relative;z-index:2;}

/* 詳細：画像下の既存空白を使う。画像自体や右カラム幅は変更しない */
.app[data-page="sns"] .smile-detail-left{
  min-width:0;display:flex;flex-direction:column;align-items:center;
}
.app[data-page="sns"] .smile-detail-left .smile-detail-media{width:100%;}
.app[data-page="sns"] .smile-detail-mascot{
  display:block;width:148px;max-width:72%;height:auto;
  margin:20px auto 0;opacity:.90;pointer-events:none;
}
/* 詳細質問欄の葉は透かしとして明確に、ただし文字の後ろ */
.app[data-page="sns"] .smile-partner-question{position:relative;isolation:isolate;}
.app[data-page="sns"] .smile-partner-question::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:180px;height:86px;right:2px;bottom:-12px;
  background:url("images/smile-leaf-cut.png") center/contain no-repeat;
  opacity:.12;transform:rotate(8deg);
}
@media(max-width:760px){
  .app[data-page="sns"] .smile-concept-mascot{width:84px;right:8px;bottom:4px;opacity:.58;}
  .app[data-page="sns"] .smile-detail-mascot{width:118px;margin-top:12px;}
}


/* 2026-08-20 SP final placement correction
   PC: mascot uses the intentionally empty upper-middle area, never the body copy.
   Motifs: readable as leaf/wave/stump, but remain subordinate to text. */
@media (min-width:951px) {
  .app[data-page="sns"] .smile-concept-mascot {
    width:112px !important;
    right:34% !important;
    top:-118px !important;
    bottom:auto !important;
    opacity:.88 !important;
  }

  .app[data-page="sns"] .motif-leaf {
    opacity:.34 !important;
    width:142px !important;
    height:78px !important;
  }
  .app[data-page="sns"] .motif-wave {
    opacity:.28 !important;
    width:154px !important;
    height:80px !important;
  }
  .app[data-page="sns"] .motif-stump {
    opacity:.25 !important;
    width:122px !important;
    height:80px !important;
  }
  .app[data-page="sns"] .smile-partner-question::after {
    opacity:.20 !important;
  }
}

/* Smartphone portrait: do not inherit the PC negative-top placement.
   Character is smaller and sits in a reserved corner of the concept area. */
@media (max-width:760px) and (orientation:portrait) {
  .app[data-page="sns"] .smile-concept {
    padding-top:10px !important;
  }
  .app[data-page="sns"] .smile-concept-mascot {
    width:72px !important;
    right:10px !important;
    top:8px !important;
    bottom:auto !important;
    opacity:.72 !important;
  }
  .app[data-page="sns"] .motif-leaf {opacity:.38 !important;}
  .app[data-page="sns"] .motif-wave {opacity:.31 !important;}
  .app[data-page="sns"] .motif-stump {opacity:.28 !important;}
  .app[data-page="sns"] .smile-detail-mascot {
    width:104px !important;
    max-width:46% !important;
    margin:10px auto 0 !important;
  }
}

/* Smartphone landscape: vertical room is scarce; keep mascot compact and outside copy. */
@media (max-width:950px) and (orientation:landscape) {
  .app[data-page="sns"] .smile-concept-mascot {
    width:68px !important;
    right:12px !important;
    top:6px !important;
    bottom:auto !important;
    opacity:.66 !important;
  }
  .app[data-page="sns"] .motif-leaf {opacity:.34 !important;}
  .app[data-page="sns"] .motif-wave {opacity:.28 !important;}
  .app[data-page="sns"] .motif-stump {opacity:.25 !important;}
  .app[data-page="sns"] .smile-detail-mascot {
    width:88px !important;
    max-width:42% !important;
    margin:8px auto 0 !important;
  }
}

/* Decorative layers must never create horizontal overflow. */
.app[data-page="sns"] .content-scroll,
.app[data-page="sns"] .smile-concept,
.app[data-page="sns"] .smile-profile-meta,
.app[data-page="sns"] .smile-detail-left {
  overflow-x:hidden;
}


/* 2026-08-20 SP visual issue recovery */
@media (min-width:951px) {
  .app[data-page="sns"] .smile-concept { overflow:visible !important; }
  .app[data-page="sns"] .smile-concept-mascot {
    display:block !important; visibility:visible !important;
    width:112px !important; right:34% !important;
    top:-118px !important; bottom:auto !important; opacity:.88 !important;
  }
}
.app[data-page="sns"] .motif-leaf {
  width:62% !important; max-width:300px !important; height:78px !important;
  left:-10px !important; top:-22px !important; opacity:.38 !important;
  background-position:left center !important; background-size:contain !important;
  transform:rotate(-7deg) !important;
}
.app[data-page="sns"] .motif-wave {
  width:42% !important; max-width:210px !important; height:88px !important;
  right:-4px !important; top:-15px !important; opacity:.42 !important;
  background-position:right center !important; background-size:contain !important;
  transform:none !important;
}
.app[data-page="sns"] .motif-stump {
  width:112px !important; height:70px !important;
  right:8px !important; top:42px !important; bottom:auto !important;
  opacity:.32 !important; background-position:right center !important;
  background-size:contain !important;
}
@media (max-width:760px) and (orientation:portrait) {
  .app[data-page="sns"] .smile-concept {
    overflow-x:clip !important; overflow-y:visible !important;
  }
  .app[data-page="sns"] .motif-leaf {
    width:68% !important; height:64px !important; left:-8px !important;
    top:-18px !important; opacity:.40 !important;
  }
  .app[data-page="sns"] .motif-wave {
    width:46% !important; height:68px !important; right:-2px !important;
    top:-10px !important; opacity:.44 !important;
  }
  .app[data-page="sns"] .motif-stump {
    width:92px !important; height:58px !important; right:5px !important;
    top:40px !important; opacity:.34 !important;
  }
}
@media (max-width:950px) and (orientation:landscape) {
  .app[data-page="sns"] .smile-concept-mascot,
  .app[data-page="sns"] .smile-detail-mascot { display:none !important; }
}
.app[data-page="sns"] .smile-profile-meta { overflow:hidden !important; }


/* 2026-08-20 SP SIGNBOARD FINAL
   leaf=name sign / stump=prefecture sign / ripple=message sign */

/* Card text remains above every signboard. */
.app[data-page="sns"] .smile-profile-meta{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
}
.app[data-page="sns"] .smile-profile-meta > :not(.smile-card-motif){
  position:relative !important;
  z-index:3 !important;
}

/* NAME: use almost the full card width; no half-cut leaf. */
.app[data-page="sns"] .motif-leaf{
  display:block !important;
  width:92% !important;
  max-width:none !important;
  height:76px !important;
  left:4% !important;
  right:auto !important;
  top:-4px !important;
  opacity:.34 !important;
  background-image:url("images/smile-leaf-cut.png") !important;
  background-position:center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
  transform:none !important;
}

/* PREFECTURE: stump becomes the prefecture nameplate, not a right-side ornament. */
.app[data-page="sns"] .motif-stump{
  display:block !important;
  width:58% !important;
  max-width:180px !important;
  height:60px !important;
  left:4% !important;
  right:auto !important;
  top:34px !important;
  bottom:auto !important;
  opacity:.20 !important;
  background-image:url("images/smile-stump-cut.png") !important;
  background-position:left center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
  transform:none !important;
}

/* MESSAGE: ripple spreads across the full message field. */
.app[data-page="sns"] .motif-wave{
  display:block !important;
  width:94% !important;
  max-width:none !important;
  height:82px !important;
  left:3% !important;
  right:auto !important;
  top:68px !important;
  opacity:.40 !important;
  background-image:url("images/smile-wave-cut.png") !important;
  background-position:center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
  transform:none !important;
}

/* PC mascot: belongs to the phrase "それぞれの歩幅で、一緒に。" */
@media (min-width:951px){
  .app[data-page="sns"] .smile-concept{
    overflow:visible !important;
  }
  .app[data-page="sns"] .smile-concept-mascot{
    display:block !important;
    visibility:visible !important;
    width:96px !important;
    height:auto !important;
    right:18px !important;
    top:18px !important;
    bottom:auto !important;
    opacity:.88 !important;
    object-fit:contain !important;
  }
}

/* Portrait: restore the previously accepted lower/right placement.
   Keep clear of the lead copy; no PC coordinates inherited. */
@media (max-width:760px) and (orientation:portrait){
  .app[data-page="sns"] .smile-concept{
    overflow:hidden !important;
  }
  .app[data-page="sns"] .smile-concept-mascot{
    display:block !important;
    visibility:visible !important;
    width:76px !important;
    height:auto !important;
    right:10px !important;
    top:auto !important;
    bottom:8px !important;
    opacity:.72 !important;
    object-fit:contain !important;
  }
  .app[data-page="sns"] .motif-leaf{
    width:92% !important; left:4% !important; height:64px !important; top:-2px !important;
  }
  .app[data-page="sns"] .motif-stump{
    width:56% !important; left:4% !important; height:52px !important; top:31px !important; opacity:.20 !important;
  }
  .app[data-page="sns"] .motif-wave{
    width:94% !important; left:3% !important; height:70px !important; top:62px !important; opacity:.42 !important;
  }
}

/* Landscape phone: mascot intentionally omitted. */
@media (max-width:950px) and (orientation:landscape){
  .app[data-page="sns"] .smile-concept-mascot,
  .app[data-page="sns"] .smile-detail-mascot{
    display:none !important;
  }
}


/* 2026-08-20 SP one-shot final
   表札を登録データと分離した共通テンプレートに固定。
   新規SP登録時も同じDOM/CSSが自動適用される。 */

/* ---- MEMBER CARD SIGNBOARD TEMPLATE ---- */
.app[data-page="sns"] .smile-profile-meta{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(108px,26%) !important;
  grid-template-areas:
    "name pref"
    "message message"
    "detail detail" !important;
  gap:8px 14px !important;
  position:relative !important;
  overflow:visible !important;
  isolation:isolate !important;
}
.app[data-page="sns"] .smile-name-sign{grid-area:name;}
.app[data-page="sns"] .smile-pref-sign{grid-area:pref;}
.app[data-page="sns"] .smile-message-sign{grid-area:message;}
.app[data-page="sns"] .smile-detail-button{grid-area:detail;justify-self:start;}

.app[data-page="sns"] .smile-name-sign,
.app[data-page="sns"] .smile-pref-sign,
.app[data-page="sns"] .smile-message-sign{
  position:relative !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  isolation:isolate !important;
  overflow:visible !important;
}
.app[data-page="sns"] .smile-name-sign{min-height:48px !important;padding:4px 18px !important;}
.app[data-page="sns"] .smile-pref-sign{min-height:48px !important;justify-content:center !important;padding:4px 10px !important;}
.app[data-page="sns"] .smile-message-sign{min-height:54px !important;padding:7px 18px !important;}

.app[data-page="sns"] .smile-sign-art{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  display:block !important;
  background-repeat:no-repeat !important;
}
.app[data-page="sns"] .smile-name-sign .smile-name,
.app[data-page="sns"] .smile-pref-sign .smile-pref,
.app[data-page="sns"] .smile-message-sign .smile-message{
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  left:auto !important;
  padding-left:0 !important;
}

/* 葉＝名前の表札。引き伸ばさず、自然比率のまま名前欄全体へ。 */
.app[data-page="sns"] .sign-leaf{
  background-image:url("images/smile-leaf-cut.png") !important;
  background-position:center !important;
  background-size:contain !important;
  opacity:.34 !important;
}

/* 切り株＝都道府県の表札。文字を主役にするため薄め。 */
.app[data-page="sns"] .sign-stump{
  background-image:url("images/smile-stump-cut.png") !important;
  background-position:center 58% !important;
  background-size:contain !important;
  opacity:.16 !important;
}

/* 波紋＝メッセージの表札。
   透過加工版が弱すぎたため、元の波紋素材を欄全面で使用し確実に見せる。 */
.app[data-page="sns"] .sign-wave{
  background-image:url("images/smile-decor-wave.png") !important;
  background-position:center 47% !important;
  background-size:cover !important;
  opacity:.30 !important;
  mix-blend-mode:multiply !important;
  border-radius:20px !important;
}

/* 旧absolute装飾は完全停止。 */
.app[data-page="sns"] .motif-leaf,
.app[data-page="sns"] .motif-stump,
.app[data-page="sns"] .motif-wave{
  display:none !important;
}

/* ---- PC mascot: belongs to the heading, not the LINE/search column ---- */
.app[data-page="sns"] .smile-heading-with-mascot{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  width:max-content !important;
  max-width:100% !important;
}
.app[data-page="sns"] .smile-heading-with-mascot h2{
  margin:0 !important;
}
@media (min-width:951px){
  .app[data-page="sns"] .smile-concept-mascot-mobile{
    display:none !important;
  }
  .app[data-page="sns"] .smile-concept-mascot-pc{
    display:block !important;
    flex:0 0 auto !important;
    width:82px !important;
    height:auto !important;
    max-height:88px !important;
    object-fit:contain !important;
    opacity:.90 !important;
    pointer-events:none !important;
  }
}

/* ---- Smartphone portrait: current accepted position is frozen ---- */
@media (max-width:760px) and (orientation:portrait){
  .app[data-page="sns"] .smile-concept-mascot-pc{
    display:none !important;
  }
  .app[data-page="sns"] .smile-concept-mascot-mobile{
    display:block !important;
    visibility:visible !important;
    width:76px !important;
    height:auto !important;
    right:10px !important;
    top:auto !important;
    bottom:8px !important;
    opacity:.72 !important;
    object-fit:contain !important;
  }
  .app[data-page="sns"] .smile-profile-meta{
    grid-template-columns:minmax(0,1fr) minmax(92px,28%) !important;
    gap:6px 8px !important;
  }
  .app[data-page="sns"] .smile-name-sign,
  .app[data-page="sns"] .smile-pref-sign{min-height:44px !important;}
  .app[data-page="sns"] .smile-message-sign{min-height:50px !important;}
}

/* ---- Smartphone landscape: one readable concept flow; mascot omitted as agreed ---- */
@media (max-width:950px) and (orientation:landscape){
  .app[data-page="sns"] .smile-concept{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .app[data-page="sns"] .smile-search-entry{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    width:100%;
    min-width:0;
  }
  .app[data-page="sns"] .smile-profile-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .app[data-page="sns"] .smile-concept-mascot-mobile,
  .app[data-page="sns"] .smile-concept-mascot-pc,
  .app[data-page="sns"] .smile-detail-mascot{
    display:none !important;
  }
}


/* 2026-08-20 SP final cosmetic cleanup only */
.app[data-page="sns"] .sign-leaf{
  background-image:url("images/smile-leaf-sign.png") !important;
  background-size:contain !important;
  background-position:left center !important;
  opacity:.31 !important;
}
.app[data-page="sns"] .sign-stump{
  background-image:url("images/smile-stump-clean.png") !important;
  background-size:contain !important;
  background-position:center 58% !important;
  opacity:.16 !important;
}

/* 2026-08-21 Company PC layout 02: balance-first.
   Narrative belongs under the left facts. Right column is reserved for
   Google Business / regulations. Future bank/client rows are managed fields. */
@media (min-width: 951px) {
  .app[data-page="company"] .content-panel h1 { margin-bottom: 8px; }
  .app[data-page="company"] .page-copy {
    columns: initial; column-gap: 0; height: auto;
    display: grid;
    grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr);
    grid-template-rows: auto auto auto;
    column-gap: clamp(58px,7vw,126px);
    row-gap: 6px;
    align-content: start;
  }
  .app[data-page="company"] .page-copy > .facts {
    grid-column:1; grid-row:1; margin:0; align-self:start;
    gap: 4px 20px;
    line-height:1.42;
  }
  .app[data-page="company"] .page-copy > .facts + p {
    grid-column:1; grid-row:2;
    margin: 10px 0 0;
    line-height:1.68;
  }
  .app[data-page="company"] .page-copy > .business-profile {
    grid-column:2; grid-row:1; margin-top:0;
  }
  .app[data-page="company"] .page-copy > .company-regulations {
    grid-column:2; grid-row:2; margin-top:8px; padding-top:9px;
  }
  .app[data-page="company"] .page-copy > .closing {
    grid-column:2; grid-row:3; margin-top:8px; padding-top:9px;
  }
  .app[data-page="company"] .business-profile h2 { margin-top:.66em; }
  .app[data-page="company"] .business-profile > h2:first-of-type { margin-top:0; }
}

/* 2026-08-21 Company PC final: align the first VISIBLE Google Business heading
   with the first facts row.  The first h2 is intentionally hidden, so do not
   offset the whole column; remove the margin from the visible second h2. */
@media (min-width: 951px) {
  .app[data-page="company"] .page-copy > .business-profile { transform:none; }
  .app[data-page="company"] .business-profile > h2:nth-of-type(2) { margin-top:0; }
}


/* =========================================================
   TOP FROZEN RESTORE — recovered from confirmed 2026-08-11 build.
   Scope: HOME only. Non-TOP pages are intentionally untouched.
   ========================================================= */
.top-scene { display: contents; }

@media (max-width: 1024px), (orientation: landscape) and (max-width: 1400px) and (max-height: 900px) {
  .app[data-page="home"] { --scene-opacity: .9; }
  .app[data-page="home"]::before { content: none; }
  .app[data-page="home"] .top-scene {
    position: absolute !important;
    z-index: 1 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) !important;
    overflow: visible !important;
  }
  .app[data-page="home"] .top-background,
  .app[data-page="home"] .top-story-layers {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .app[data-page="home"] .top-background { object-fit: fill !important; }
  .app[data-page="home"] .top-story-layers {
    overflow: visible !important;
    --story-figure-opacity: var(--scene-opacity);
  }
  .app[data-page="home"] .layer-scientist { display:none !important; }
  .app[data-page="home"] .boy-seated { display:none !important; }
  .app[data-page="home"] .boy-pointing {
    opacity:var(--scene-opacity) !important;
    animation:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .app[data-page="home"] .falling-drop { display:none !important; }
  .app[data-page="home"] .ripple-layer { display:none !important; }
}

/* Confirmed portrait composition. */
@media (max-width:1024px) and (orientation:portrait) {
  .app[data-page="home"] {
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }
  .app[data-page="home"] .site-header {
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
  }
  .app[data-page="home"] .top-scene {
    width:max(100vw, calc(100dvh * 853 / 1844)) !important;
    aspect-ratio:853 / 1844 !important;
  }
  .app[data-page="home"] .top-background {
    content:url("images/top-portrait-ripple.png") !important;
  }
  .app[data-page="home"] .boy-layer {
    left:5.2% !important; top:20.0% !important; bottom:auto !important;
    width:14.0% !important; height:20.0% !important; overflow:visible !important;
  }
  .app[data-page="home"] .layer-watcher {
    left:9.0% !important; right:auto !important; top:auto !important; bottom:7.5% !important;
    width:21.0% !important; transform:scaleX(-1) !important; transform-origin:center bottom !important;
  }
  .app[data-page="home"] .layer-young-men {
    left:auto !important; right:0.5% !important; top:57.0% !important; bottom:auto !important;
    width:19.0% !important; transform-origin:center bottom !important;
  }
}

/* Confirmed landscape composition: boy anchored to the summit, watcher forward,
   youths on the right path; full lake/ripple scene retained. */
@media (orientation:landscape) and (max-width:1400px) and (max-height:900px) {
  .app[data-page="home"] {
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }
  .app[data-page="home"] .site-header {
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
  }
  .app[data-page="home"] .top-scene {
    height:100dvh !important;
    aspect-ratio:3 / 2 !important;
  }
  .app[data-page="home"] .top-background {
    content:url("images/top-cloud-sea.png") !important;
  }
  .app[data-page="home"] .boy-layer {
    left:14.0% !important; top:29.0% !important; bottom:auto !important;
    width:9.0% !important; height:34.0% !important; overflow:visible !important;
  }
  .app[data-page="home"] .layer-watcher {
    left:69.0% !important; right:auto !important; top:auto !important; bottom:26.0% !important;
    width:6.5% !important; transform:scaleX(-1) !important; transform-origin:center bottom !important;
  }
  .app[data-page="home"] .layer-young-men {
    left:82.0% !important; right:auto !important; top:auto !important; bottom:39.0% !important;
    width:8.0% !important; transform-origin:center bottom !important;
  }
}

@media (max-width:700px) {
  .app[data-page="home"] .site-header { position:fixed !important; padding-top:8px !important; }
  .app[data-page="home"] .brand { width:102px !important; height:96px !important; }
  .app[data-page="home"] .brand img { width:92px !important; height:92px !important; }
  .app[data-page="home"] .global-nav { top:76px !important; }
}

/* Restore HOME animation only. Confirmed position rules remain in top-frozen-20260811.css. */
.app[data-page="home"] .boy-seated{display:block!important;animation:seated-exit 8s ease-in-out 1s both!important}
.app[data-page="home"] .boy-pointing{display:block!important;animation:pointing-rise 8s ease-in-out 1s both!important}
.app[data-page="home"] .falling-drop{display:block!important;animation:drop-fall 5.8s ease-in 1.2s infinite!important}
.app[data-page="home"] .ripple-layer{display:block!important}
.app[data-page="home"] .ripple-layer span{animation:ripple-spread 5.8s ease-out 1.2s infinite!important}
.app[data-page="home"] .ripple-layer span:nth-child(2){animation-delay:1.42s!important}.app[data-page="home"] .ripple-layer span:nth-child(3){animation-delay:1.64s!important}
/* Align animated ripples to the centers of the existing background ripples. */
@media(max-width:1024px) and (orientation:portrait){.app[data-page="home"] .falling-drop{--drop-distance:max(10.7dvh, 23.132vw)!important;left:calc(49.2% - 5px)!important;top:65%!important}.app[data-page="home"] .ripple-layer{display:block!important;left:49.2%!important;top:75.7%!important;--ripple-scale-x:6;--ripple-scale-y:3}}
@media(orientation:landscape) and (max-width:1400px) and (max-height:900px){.app[data-page="home"] .falling-drop{--drop-distance:13vh!important;left:calc(50% - 5px)!important;top:70%!important}.app[data-page="home"] .ripple-layer{display:block!important;left:50%!important;top:83%!important;--ripple-scale-x:6;--ripple-scale-y:3}}

/* Confirmed fixes 03 — targeted only. */
/* PC HOME: restore researcher; mobile/tablet remains hidden. */
@media (min-width:1401px), (orientation:landscape) and (min-width:1401px), (min-width:1025px) and (min-height:901px) {
  .app[data-page="home"] .layer-scientist{display:block!important;left:4.2%!important;bottom:5.5%!important;width:15.5%!important;opacity:var(--story-figure-opacity,.9)!important;}
  .app[data-page="home"] .layer-young-men{right:9vw!important;}
}
/* Confirmed landscape composition: nudge the two youths left, preserving size/height. */
@media (orientation:landscape) and (max-width:1400px) and (max-height:900px){
  .app[data-page="home"] .layer-young-men{left:79%!important;right:auto!important;}
}
/* Regulations entry must be visible in the company facts block. */
.company-regulations-inline button{padding:5px 12px;border:1px solid rgba(68,59,49,.34);border-radius:999px;background:rgba(250,247,239,.72);color:inherit;cursor:pointer;font:700 11px/1.35 "Yu Gothic",sans-serif}
.company-regulations-inline .regulations-new{vertical-align:middle}

/* 2026-08-17 confirmation06: scientist tone harmonization (PC only) */
@media (min-width: 901px){
  .app[data-page="home"] .layer-scientist{
    opacity:.58!important;
    filter:brightness(.88) contrast(.78) saturate(.72)!important;
  }
}

/* 2026-08-17 confirmation07: four targeted visual fixes only */
/* Researcher: keep the harmonized tone but restore normal presence; no ghost-like transparency. */
@media (min-width: 901px){
  .app[data-page="home"] .layer-scientist{
    opacity:.88!important;
    filter:brightness(.88) contrast(.78) saturate(.72)!important;
  }
}

/* Sales partner: enforce one common three-column grid and aligned starts. */
.partner-detail{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  column-gap:clamp(28px,3vw,54px)!important;
}
.partner-detail .partner-lead{
  grid-column:1 / -1!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  column-gap:clamp(28px,3vw,54px)!important;
  columns:auto!important;
}
.partner-detail .partner-lead p:first-child{grid-column:1!important}
.partner-detail .partner-lead p:last-child{grid-column:2 / 4!important}
.partner-detail section{min-width:0!important}
@media(max-width:700px){.partner-detail .partner-lead{display:block!important}}

/* Regulations: use the site's typography; paper/ruled-line treatment remains visual only. */
.regulations-box,
.regulations-list>button strong,
.regulation-body h3{
  font-family:inherit!important;
}

/* Regulations: close control remains available while the regulation body scrolls. */
.reg-viewer-close{
  position:sticky!important;
  top:0!important;
  right:auto!important;
  float:none!important;
  display:block!important;
  width:max-content!important;
  margin:0 0 8px auto!important;
  z-index:20!important;
  box-shadow:0 2px 10px rgba(68,59,49,.10)!important;
}

/* 2026-08-17 confirmation08: company calendar restored as a visible facts-row control. */
.app[data-page="company"] .calendar-preview-inline{
  width:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0!important;
  padding:6px 12px!important;
  border:1px solid rgba(68,59,49,.34)!important;
  border-radius:999px!important;
  background:rgba(250,247,239,.72)!important;
  font:700 11px/1.35 "Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif!important;
}
.app[data-page="company"] .calendar-preview-inline span{font-size:10px!important;font-weight:500!important;opacity:.68!important}

/* Regulations: one continuous paper tone. Ruled lines remain subtle; no two-tone body panel. */
.regulations-box{background:#f6f0e4!important;}
.regulation-body{
  background-color:transparent!important;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,rgba(87,72,52,.11) 32px,transparent 33px)!important;
  border:0!important;
  box-shadow:none!important;
}

/* Common non-TOP layout contract.
   PC, portrait and landscape screens all have the same content scroller.
   The ceramic/HOME unit never participates in the overflow decision. */
.app:not([data-page="home"]) .content-end-nav {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 18px;
  width: 100%;
  min-height: 66px;
  margin: 28px 0 46px;
}
.app:not([data-page="home"]) .content-end-nav .ceramic-balls {
  position: relative;
  inset: auto;
  flex: 0 0 136px;
  transform: none;
}
.app:not([data-page="home"]) .content-end-nav .home-button {
  position: static;
  inset: auto;
  display: block;
  margin: 0 0 12px;
}

/* Header/background stay put; all content has one vertical scroller. */
@media (min-width: 0px) {
  .app:not([data-page="home"]) {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .app:not([data-page="home"]) .stationery {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .app:not([data-page="home"]) .content-panel {
    position: absolute;
    top: clamp(126px, 20vh, 210px);
    right: var(--edge);
    bottom: 0;
    left: var(--edge);
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }
  .app:not([data-page="home"]) .content-scroll {
    position: relative;
    display: block;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 0 clamp(6px, 1vw, 18px);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(91,75,56,.42) rgba(255,252,245,.18);
  }
  /* The common content box is never height-capped. */
  .app:not([data-page="home"]) .page-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    column-gap: clamp(54px, 7vw, 132px);
    row-gap: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    columns: initial;
    column-count: initial;
    column-width: initial;
    column-fill: initial;
    overflow: visible;
  }
  /* Content that fits keeps the unit on the common left-bottom line. */
  .app:not([data-page="home"]) .content-end-nav {
    position: absolute;
    left: 0;
    bottom: clamp(18px, 3vh, 30px);
    min-height: 56px;
    margin: 0;
  }
  /* Once registered content crosses the boundary, the same unit follows the
     final content and the single common scrollbar becomes available. */
  .app:not([data-page="home"]) .content-scroll.has-content-overflow {
    overflow-y: auto;
  }
  .app:not([data-page="home"]) .content-scroll.has-content-overflow .content-end-nav {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 28px 0 clamp(18px, 3vh, 30px);
  }
  .app:not([data-page="home"]) .page-copy > :not(p) {
    grid-column: 1 / -1;
  }

  /* Publication indexes have their own row-first two-column grid.
     This yields left-top, right-top, then the next row. */
  .app[data-page="news"] .page-copy,
  .app[data-page="labo"] .page-copy,
  .app[data-page="sns"] .page-copy {
    display: block;
  }

  /* These two screens retain the production multi-column composition.
     The browser balances complete blocks between the left and right columns:
     kairan = two intro paragraphs | QR unit and supporting copy,
     documents = intro | document list (or its empty message). */
  .app[data-page="kairan"] .page-copy,
  .app[data-page="documents"] .page-copy {
    display: block;
    columns: 2;
    column-count: 2;
    column-width: auto;
    column-gap: clamp(54px, 7vw, 132px);
    column-fill: balance;
  }
  /* Narrative pages are intentionally read top-to-bottom in the left column,
     then top-to-bottom in the right column.  Unlike a CSS multi-column box,
     these ordinary grid columns can grow without a fixed page-height cap. */
  .app[data-page="omoi"] .page-copy,
  .app[data-page="nakama"] .page-copy,
  .app[data-page="mezasu"] .page-copy {
    display: block;
  }
  .app[data-page="omoi"] .narrative-columns,
  .app[data-page="nakama"] .narrative-columns,
  .app[data-page="mezasu"] .narrative-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(54px, 7vw, 132px);
  }
  /* Ordinary News/Labo details use the common two-column page grid. The back
     button spans both columns; paragraphs remain in their entered order. */
  .app[data-detail] .page-copy { display: grid; }
  .app[data-detail] .detail-back { grid-column: 1 / -1; justify-self: start; }
  .narrative-column { min-width: 0; }
  .app[data-page="news"] .entry-list,
  .app[data-page="labo"] .entry-list,
  .app[data-page="documents"] .document-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    align-content: start;
    column-gap: clamp(34px, 5vw, 96px);
    row-gap: 0;
    height: auto;
    max-height: none;
    padding-bottom: 0;
    overflow: visible;
  }
  .app[data-page="news"] .entry-button,
  .app[data-page="labo"] .entry-button,
  .app[data-page="documents"] .document-row {
    min-width: 0;
  }
  /* Circular board has one QR card in each of the two established columns. */
  .app[data-page="kairan"] .line-qr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Company overview intentionally has its own two-column composition. */
  .app[data-page="company"] .page-copy {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    column-gap: clamp(58px, 7vw, 126px);
    row-gap: 6px;
  }
  .app[data-page="company"] .page-copy > .facts { grid-column: 1; grid-row: 1; margin: 0; align-self: start; gap: 4px 20px; line-height: 1.42; }
  .app[data-page="company"] .page-copy > .facts + p { grid-column: 1; grid-row: 2; margin: 10px 0 0; line-height: 1.68; }
  .app[data-page="company"] .page-copy > .business-profile { grid-column: 2; grid-row: 1; margin-top: 0; }
  .app[data-page="company"] .page-copy > .company-regulations { grid-column: 2; grid-row: 2; margin-top: 8px; padding-top: 9px; }
  .app[data-page="company"] .page-copy > .closing { grid-column: 2; grid-row: 3; margin-top: 8px; padding-top: 9px; }
  .app[data-page="company"] .business-profile > h2:nth-of-type(2) { margin-top: 0; }
}

/* Narrow phones keep the common scroller and switch only the content layout
   to one column. */
@media (max-width: 700px) {
  .app:not([data-page="home"]) .content-panel { top: clamp(126px, 16vh, 156px); right: 18px; left: 18px; }
  .app:not([data-page="home"]) .content-scroll { padding: 0 6px; }
  .app:not([data-page="home"]) .page-copy { display: block; columns: initial; column-count: initial; }
  .app[data-page="omoi"] .narrative-columns,
  .app[data-page="nakama"] .narrative-columns,
  .app[data-page="mezasu"] .narrative-columns { display: block; }
  .app[data-page="news"] .entry-list,
  .app[data-page="labo"] .entry-list,
  .app[data-page="documents"] .document-list { grid-template-columns: 1fr; height: auto; max-height: none; overflow: visible; }
  .app:not([data-page="home"]) .content-end-nav { gap: 10px; }
}

/* Wide-screen shared header clearance for every non-TOP page. */
@media (min-width: 701px) and (max-width: 1250px) and (min-height: 541px) {
  .app:not([data-page="home"]) .content-panel {
    top: clamp(165px, 22vh, 200px);
  }
}
@media (min-width: 1251px) and (min-height: 541px) {
  .app:not([data-page="home"]) .content-panel {
    top: clamp(225px, 26vh, 260px);
  }
}