: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(16,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(184px, 20vh, 210px); left: var(--edge); right: var(--edge); bottom: clamp(72px, 8vh, 96px); border: 0; background: transparent; box-shadow: none; }
.content-scroll { height: 100%; overflow: auto; padding: 0 clamp(6px,1vw,18px); scrollbar-width: thin; }
.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; columns: 2; column-gap: clamp(54px,7vw,132px); column-fill: balance; height: calc(100% - clamp(82px,10vh,122px)); 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; }
.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); 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; }
.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 { position: absolute; z-index: 21; left: calc(var(--edge) + 154px); bottom: clamp(18px,3vh,34px); 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)); 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 { overflow: auto; background: #f4efe4; }
  .app { min-height: 100%; height: auto; overflow: visible; background: var(--paper); }
  .top-background { position: fixed; height: 100vh; }
  .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%; }
  .content-panel { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: auto; min-height: calc(100vh - 108px); margin: 108px 18px 0; }
  .content-scroll { height: auto; overflow: visible; padding: 26px 6px 92px; }
  .content-panel h1 { font-size: clamp(28px,8.5vw,40px); }
  .page-copy { height: auto; columns: 1; 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; }
  .home-button { position: absolute; left: calc(var(--edge) + 112px); bottom: 24px; }
}
@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 (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; }
}

/* v16: only two targeted corrections: portrait watcher + landscape boy */




/* v16 targeted final corrections */
@media (orientation: portrait) and (max-width: 700px) {
  /* Watcher: close to the boy without overlap; keep gaze toward young men. */
  .layer-watcher { left: 22vw; right: auto; bottom: 49vw; width: 11vw; transform: scaleX(-1); }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 950px) {
  /* Boy only: clear the logo and keep the lower body visible. */
  .boy-layer { left: 14vw; top: 20vh; bottom: auto; width: 9vw; height: 34vh; overflow: visible; }
  .boy-pointing {
    -webkit-mask-image: linear-gradient(to top, transparent 0 3%, rgba(0,0,0,.65) 6%, #000 11%);
    mask-image: linear-gradient(to top, transparent 0 3%, rgba(0,0,0,.65) 6%, #000 11%);
  }
}

/* v17 portrait composition: dedicated background + layer placement */
@media (orientation: portrait) and (max-width: 700px) {
  .app[data-page="home"] .top-background {
    content: url("images/top-portrait-ripple.png");
    object-fit: cover;
    object-position: center center;
  }
  .app[data-page="home"] .top-story-layers { --story-figure-opacity: .9; }

  /* Static pointing boy only on mobile portrait. Upper left shelf, clear of logo. */
  .app[data-page="home"] .boy-layer {
    left: 8vw; top: 39%; bottom: auto;
    width: 13vw; height: 20vh;
    overflow: visible;
  }
  .app[data-page="home"] .boy-seated { display: none !important; }
  .app[data-page="home"] .boy-pointing {
    opacity: var(--story-figure-opacity);
    animation: none !important;
    -webkit-mask-image: linear-gradient(to top, transparent 0 5%, rgba(0,0,0,.7) 9%, #000 15%);
    mask-image: linear-gradient(to top, transparent 0 5%, rgba(0,0,0,.7) 9%, #000 15%);
  }

  /* Watcher one step lower and slightly inward; gaze continues toward the youths. */
  .app[data-page="home"] .layer-watcher {
    left: 19vw; right: auto; top: 49%; bottom: auto;
    width: 10.5vw;
    transform: scaleX(-1);
  }

  /* Youths on the narrow right-hand trail, farther away for natural perspective. */
  .app[data-page="home"] .layer-young-men {
    left: auto; right: 10vw; top: 51%; bottom: auto;
    width: 10.5vw;
  }

  /* Existing falling-drop animation lands on the baked-in ripple center. */
  .app[data-page="home"] .falling-drop {
    --drop-distance: 10vh;
    left: calc(50% - 5px); top: 65%;
    display: block;
  }
  /* Static ripple is in the portrait background; suppress synthetic CSS rings. */
  .app[data-page="home"] .ripple-layer { display: none; }
  .app[data-page="home"] .layer-scientist { display: none !important; }
}

/* v20 portrait: ONLY boy summit + young-men trail correction. */
@media (orientation: portrait) and (max-width: 700px) {
  .app[data-page="home"] .boy-layer { left: 8vw; top: 25%; width: 14vw; height: 20vh; }
  .app[data-page="home"] .layer-young-men { right: 0; top: 43%; width: 17vw; }
}

/* v21: ONLY three grounding corrections requested after v20. */
@media (orientation: portrait) and (max-width: 700px) {
  .app[data-page="home"] .boy-layer { left: 5.5vw; top: 20%; width: 14vw; height: 20vh; }
  .app[data-page="home"] .layer-young-men { right: -1.5vw; top: 47%; width: 17vw; }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 950px) {
  .app[data-page="home"] .boy-layer { left: 14vw; top: 21vh; bottom: auto; width: 9vw; height: 34vh; overflow: visible; }
  .app[data-page="home"] .boy-pointing { -webkit-mask-image: none; mask-image: 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;
  }
}



/* 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) auto; 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-detail-panel[hidden],.smile-search-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-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-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}}


/* 2026-08-12 Smile Partner local framework - vertical flow correction */
.app[data-page="sns"] .page-copy {
  columns: 1 !important;
  column-count: 1 !important;
  column-width: auto !important;
  column-gap: 0 !important;
  height: auto !important;
  min-height: 100%;
  width: 100% !important;
  max-width: 100% !important;
  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% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* 2026-08-12 Smile Partner: search note + understated Kensui nature accents */
.app[data-page="sns"] .smile-search-entry {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.4vw, 22px);
  flex-wrap: wrap;
}
.app[data-page="sns"] .smile-search-note {
  font-size: clamp(11px, .82vw, 14px);
  letter-spacing: .06em;
  opacity: .62;
  white-space: nowrap;
}
.app[data-page="sns"] .smile-profile-card {
  position: relative;
}
.app[data-page="sns"] .smile-profile-meta strong {
  display: inline-flex;
  align-items: center;
  gap: .38em;
}
.app[data-page="sns"] .smile-leaf {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: 1.15em;
  line-height: 1;
  transform: rotate(-28deg);
  opacity: .42;
}
.app[data-page="sns"] .smile-pref {
  display: inline-flex;
  align-items: center;
  gap: .42em;
}
.app[data-page="sns"] .smile-ring {
  width: .68em;
  height: .68em;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .25;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16);
}
.app[data-page="sns"] .smile-message {
  position: relative;
  padding-left: 1.15em;
}
.app[data-page="sns"] .smile-twig {
  position: absolute;
  left: .08em;
  top: .72em;
  width: .72em;
  height: 1px;
  background: currentColor;
  opacity: .25;
  transform: rotate(-18deg);
  transform-origin: left center;
}
.app[data-page="sns"] .smile-twig::after {
  content: "";
  position: absolute;
  right: .05em;
  top: -.22em;
  width: .30em;
  height: .18em;
  border: 1px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  border-radius: 70% 0 70% 0;
}
@media (max-width: 700px) {
  .app[data-page="sns"] .smile-search-entry {
    justify-content: flex-start;
  }
  .app[data-page="sns"] .smile-search-note {
    white-space: normal;
    width: 100%;
  }
}

/* 2026-08-12 Smile Partner: search control left aligned, note below */
.app[data-page="sns"] .smile-search-entry {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: fit-content;
  max-width: 100%;
}
.app[data-page="sns"] .smile-search-open {
  align-self: flex-start !important;
  margin-left: 0 !important;
}
.app[data-page="sns"] .smile-search-note {
  order: 2;
  display: block;
  margin-left: 0 !important;
  font-size: clamp(11px, .82vw, 14px);
  line-height: 1.5;
  letter-spacing: .04em;
  opacity: .68;
  white-space: normal !important;
}

/* Make the existing Kensui nature accents perceptible without becoming decorative noise */
.app[data-page="sns"] .smile-leaf {
  opacity: .62 !important;
  font-size: 1.28em !important;
}
.app[data-page="sns"] .smile-ring {
  opacity: .42 !important;
  width: .78em !important;
  height: .78em !important;
}
.app[data-page="sns"] .smile-twig {
  opacity: .40 !important;
  width: .86em !important;
}

/* Smile Partner: decoration belongs ONLY to text metadata, never the image/video area */
.app[data-page="sns"] .smile-profile-media,
.app[data-page="sns"] .smile-profile-media img,
.app[data-page="sns"] .smile-profile-media video {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Remove card-like framing from each member item */
.app[data-page="sns"] .smile-profile-card {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Text information sits openly below the media */
.app[data-page="sns"] .smile-profile-meta,
.app[data-page="sns"] .smile-message {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Name: a tiny leaf mark */
.app[data-page="sns"] .smile-profile-meta strong {
  position: relative;
  padding-left: 1.15em;
}
.app[data-page="sns"] .smile-profile-meta strong .smile-leaf {
  position: absolute;
  left: 0;
  top: .08em;
  opacity: .48 !important;
  transform: rotate(-34deg);
}

/* Prefecture: subtle tree-ring mark */
.app[data-page="sns"] .smile-pref .smile-ring {
  opacity: .32 !important;
  border-width: 1px !important;
  box-shadow: inset 0 0 0 2px rgba(80,65,48,.05) !important;
}

/* Message: fine twig leading into the 15-char preview */
.app[data-page="sns"] .smile-message {
  padding-left: 1.25em !important;
  margin-top: .55em;
}
.app[data-page="sns"] .smile-message .smile-twig {
  opacity: .34 !important;
}

.app[data-page="sns"] .smile-legal-panel{position:fixed;inset:0;z-index:120;background:rgba(31,26,20,.52);padding:clamp(18px,4vw,48px);overflow:auto}
.app[data-page="sns"] .smile-legal-panel[hidden]{display:none!important}
.app[data-page="sns"] .smile-legal-box{width:min(720px,100%);margin:4vh auto;padding:clamp(22px,3vw,38px);background:rgba(248,244,234,.98);color:#2f2a24;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.app[data-page="sns"] .smile-legal-facts{display:grid;grid-template-columns:minmax(8em,.35fr) 1fr;gap:10px 18px;margin:22px 0}
.app[data-page="sns"] .smile-legal-facts dt{font-weight:700}.app[data-page="sns"] .smile-legal-facts dd{margin:0}.app[data-page="sns"] .smile-legal-facts a{color:inherit}
.app[data-page="sns"] .smile-legal-caution{font-size:.86em;opacity:.72;border-top:1px solid rgba(47,42,36,.18);padding-top:14px}
@media(max-width:600px){.app[data-page="sns"] .smile-legal-facts{grid-template-columns:1fr;gap:4px}.app[data-page="sns"] .smile-legal-facts dd{margin-bottom:10px}}

/* 2026-08-12 Legal modal: always-visible close control */
.app[data-page="sns"] .smile-legal-box{position:relative}
.app[data-page="sns"] .smile-legal-box>.smile-modal-close{
  position:sticky !important;
  top:0 !important;
  z-index:3 !important;
  display:block !important;
  margin:0 0 8px auto !important;
  width:max-content !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* 2026-08-12 Legal overlay stacking correction */
.app[data-page="sns"] .smile-legal-panel{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  isolation:isolate !important;
  background:rgba(31,26,20,.72) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
.app[data-page="sns"] .smile-legal-box{
  position:relative !important;
  z-index:1 !important;
}
.app[data-page="sns"] .smile-legal-box>.smile-modal-close{
  position:sticky !important;
  top:12px !important;
  z-index:2 !important;
  margin:0 0 12px auto !important;
  padding:9px 16px !important;
  background:rgba(248,244,234,.98) !important;
  border:1px solid rgba(47,42,36,.45) !important;
  border-radius:999px !important;
}

html.smile-legal-open,
body.smile-legal-open { overflow: hidden !important; }

.modal-root > .smile-legal-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  isolation: isolate !important;
  display: block;
  background: rgba(31,26,20,.80) !important;
  padding: clamp(18px,4vw,48px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}

.modal-root > .smile-legal-panel[hidden] { display:none !important; }

.modal-root > .smile-legal-panel .smile-legal-box {
  position: relative !important;
  z-index: 1 !important;
  width: min(720px, calc(100vw - 36px)) !important;
  margin: 2vh auto 6vh !important;
  background: rgba(248,244,234,.995) !important;
}

.modal-root > .smile-legal-panel .smile-modal-close {
  position: sticky !important;
  top: 8px !important;
  z-index: 20 !important;
  display: block !important;
  margin: 0 0 12px auto !important;
  background: rgb(248,244,234) !important;
  opacity: 1 !important;
}

html.smile-legal-open #globalNav,
html.smile-legal-open #menuToggle,
html.smile-legal-open .global-nav,
html.smile-legal-open .menu-toggle {
  visibility: hidden !important;
  pointer-events: none !important;
}

.modal-root > .smile-legal-panel .smile-modal-close {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Legal modal body-portal: preserve original Kensui layout after moving outside .app */
.modal-root > .smile-legal-panel .smile-legal-box{
  font-family: inherit !important;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  line-height: 1.75 !important;
  letter-spacing: .025em !important;
  box-sizing: border-box !important;
}
.modal-root > .smile-legal-panel .smile-kicker{
  margin:0 0 12px !important;
  font-size:.78em !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  opacity:.58 !important;
}
.modal-root > .smile-legal-panel h2{
  margin:0 0 24px !important;
  font-size:clamp(22px,1.7vw,30px) !important;
  line-height:1.35 !important;
  font-weight:700 !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts{
  display:grid !important;
  grid-template-columns:minmax(10em, .36fr) minmax(0,1fr) !important;
  gap:12px 24px !important;
  margin:0 !important;
  padding:0 !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts dt{
  margin:0 !important;
  padding:0 !important;
  font-weight:700 !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts dd{
  margin:0 !important;
  padding:0 !important;
  min-width:0 !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts small{
  font-size:.86em !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts a{
  color:inherit !important;
  text-underline-offset:.16em !important;
}
.modal-root > .smile-legal-panel .smile-modal-close{
  font-family:inherit !important;
  font-size:clamp(14px,.95vw,16px) !important;
  font-weight:700 !important;
  line-height:1 !important;
}
@media(max-width:600px){
  .modal-root > .smile-legal-panel{padding:12px !important}
  .modal-root > .smile-legal-panel .smile-legal-box{
    width:100% !important;
    margin:0 auto 24px !important;
    padding:18px !important;
    border-radius:14px !important;
  }
  .modal-root > .smile-legal-panel .smile-legal-facts{
    grid-template-columns:1fr !important;
    gap:3px !important;
  }
  .modal-root > .smile-legal-panel .smile-legal-facts dd{
    margin-bottom:10px !important;
  }
}

/* =========================================================
   LEGAL MODAL FINAL AUTHORITATIVE LAYOUT
   Keep: body portal / no background bleed / working close
   Restore: Kensui sans-serif typography / compact 2-column layout
   ========================================================= */
.modal-root > .smile-legal-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  box-sizing: border-box !important;
  padding: 18px !important;
  background: rgba(31,26,20,.78) !important;
  overflow: auto !important;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo",
    sans-serif !important;
  color: #342f29 !important;
}
.modal-root > .smile-legal-panel[hidden] {
  display: none !important;
}
.modal-root > .smile-legal-panel .smile-legal-box {
  box-sizing: border-box !important;
  position: relative !important;
  width: min(860px, calc(100vw - 36px)) !important;
  max-width: 860px !important;
  min-height: 0 !important;
  margin: 0 auto 24px !important;
  padding: 30px 42px 34px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #f8f4ea !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.22) !important;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo",
    sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  letter-spacing: .015em !important;
  color: #342f29 !important;
}
.modal-root > .smile-legal-panel .smile-kicker {
  margin: 0 0 12px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  opacity: .58 !important;
}
.modal-root > .smile-legal-panel .smile-legal-box h2 {
  margin: 0 0 24px !important;
  font-family: inherit !important;
  font-size: 23px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts {
  display: grid !important;
  grid-template-columns: 170px minmax(0,1fr) !important;
  column-gap: 28px !important;
  row-gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts dt,
.modal-root > .smile-legal-panel .smile-legal-facts dd {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  letter-spacing: .015em !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts dt {
  font-weight: 700 !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts dd {
  min-width: 0 !important;
  font-weight: 400 !important;
  overflow-wrap: anywhere !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts small {
  font: inherit !important;
  font-size: 13px !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts a {
  color: inherit !important;
  font: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.modal-root > .smile-legal-panel .smile-modal-close {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  float: right !important;
  display: block !important;
  box-sizing: border-box !important;
  width: auto !important;
  margin: -12px -22px 4px 16px !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(52,47,41,.35) !important;
  border-radius: 999px !important;
  background: #f8f4ea !important;
  color: #342f29 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.modal-root > .smile-legal-panel .smile-modal-close + .smile-kicker {
  clear: both !important;
}

html.smile-legal-open,
body.smile-legal-open {
  overflow: hidden !important;
}

/* Tablet / narrow landscape */
@media (max-width: 820px) {
  .modal-root > .smile-legal-panel {
    padding: 12px !important;
  }
  .modal-root > .smile-legal-panel .smile-legal-box {
    width: 100% !important;
    padding: 24px 24px 28px !important;
    border-radius: 14px !important;
  }
  .modal-root > .smile-legal-panel .smile-legal-facts {
    grid-template-columns: 145px minmax(0,1fr) !important;
    column-gap: 18px !important;
  }
}

/* Phone portrait: stack labels and values */
@media (max-width: 560px) {
  .modal-root > .smile-legal-panel .smile-legal-box {
    padding: 20px 18px 24px !important;
  }
  .modal-root > .smile-legal-panel .smile-legal-facts {
    grid-template-columns: 1fr !important;
    row-gap: 3px !important;
  }
  .modal-root > .smile-legal-panel .smile-legal-facts dd {
    margin-bottom: 10px !important;
  }
  .modal-root > .smile-legal-panel .smile-modal-close {
    margin: -8px -6px 8px 12px !important;
  }
}

/* Smile Partner metadata decoration — text area only */
.app[data-page="sns"] .smile-profile-meta,
.app[data-page="sns"] .smile-message{
  position:relative !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.app[data-page="sns"] .smile-profile-meta strong{
  position:relative !important;
  padding-left:22px !important;
}
.app[data-page="sns"] .smile-profile-meta strong::before{
  content:"" !important;
  position:absolute !important;
  left:1px !important;
  top:50% !important;
  width:12px !important;
  height:7px !important;
  border:1.5px solid currentColor !important;
  border-radius:100% 0 100% 0 !important;
  transform:translateY(-55%) rotate(-28deg) !important;
  opacity:.48 !important;
}
.app[data-page="sns"] .smile-pref{
  position:relative !important;
  padding-left:19px !important;
}
.app[data-page="sns"] .smile-pref::before,
.app[data-page="sns"] .smile-pref::after{
  content:"" !important;
  position:absolute !important;
  border:1px solid currentColor !important;
  border-radius:50% !important;
  opacity:.34 !important;
}
.app[data-page="sns"] .smile-pref::before{
  left:0 !important; top:50% !important;
  width:12px !important; height:12px !important;
  transform:translateY(-50%) scaleY(.72) !important;
}
.app[data-page="sns"] .smile-pref::after{
  left:3px !important; top:50% !important;
  width:6px !important; height:6px !important;
  transform:translateY(-50%) scaleY(.72) !important;
}
.app[data-page="sns"] .smile-message{
  padding-left:24px !important;
}
.app[data-page="sns"] .smile-message::before{
  content:"" !important;
  position:absolute !important;
  left:2px !important;
  top:.8em !important;
  width:14px !important;
  height:1px !important;
  background:currentColor !important;
  opacity:.34 !important;
  transform:rotate(-18deg) !important;
}
.app[data-page="sns"] .smile-message::after{
  content:"" !important;
  position:absolute !important;
  left:10px !important;
  top:.45em !important;
  width:7px !important;
  height:4px !important;
  border:1px solid currentColor !important;
  border-left:0 !important;
  border-bottom:0 !important;
  border-radius:70% 0 70% 0 !important;
  opacity:.34 !important;
  transform:rotate(-18deg) !important;
}

/* Legal information: understated stationery-style rules */
.modal-root > .smile-legal-panel .smile-legal-facts{
  position:relative !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts dt,
.modal-root > .smile-legal-panel .smile-legal-facts dd{
  padding-top:7px !important;
  padding-bottom:9px !important;
  border-bottom:1px solid rgba(83,72,57,.13) !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts dt{
  background-image:linear-gradient(
    to right,
    rgba(83,72,57,.10),
    rgba(83,72,57,.035) 70%,
    transparent
  ) !important;
  background-repeat:no-repeat !important;
  background-size:100% 1px !important;
  background-position:left bottom !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts dd{
  border-bottom-color:rgba(83,72,57,.10) !important;
}
.modal-root > .smile-legal-panel .smile-legal-facts dt:last-of-type,
.modal-root > .smile-legal-panel .smile-legal-facts dd:last-of-type{
  border-bottom-color:rgba(83,72,57,.07) !important;
}
@media(max-width:560px){
  .modal-root > .smile-legal-panel .smile-legal-facts dt{
    padding-bottom:3px !important;
    border-bottom:0 !important;
    background:none !important;
  }
  .modal-root > .smile-legal-panel .smile-legal-facts dd{
    padding-top:0 !important;
    padding-bottom:12px !important;
    border-bottom:1px solid rgba(83,72,57,.11) !important;
  }
}

/* 2026-08-12 Smile search mobile QC:
   search panel/result only; no effect on cards, header, legal modal or other pages. */
.app[data-page="sns"] .smile-search-results{
  box-sizing:border-box !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
.app[data-page="sns"] .smile-search-status{
  box-sizing:border-box !important;
  max-width:100% !important;
  margin:12px 0 0 !important;
  line-height:1.7 !important;
}
@media (max-width: 760px){
  .app[data-page="sns"] .smile-search-panel{
    overflow-x:hidden !important;
  }
  .app[data-page="sns"] .smile-search-results,
  .app[data-page="sns"] .smile-search-status{
    width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
  }
}
@media (max-height: 520px) and (orientation: landscape){
  .app[data-page="sns"] .smile-search-panel{
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
  }
}

/* 2026-08-14 Search close hit-area correction only */
html.smile-search-open,
body.smile-search-open{overflow:hidden !important;}

.modal-root > .smile-search-panel{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:grid !important;
  place-items:center !important;
  padding:clamp(16px,4vw,48px) !important;
  background:rgba(24,21,18,.55) !important;
  backdrop-filter:blur(4px) !important;
  pointer-events:auto !important;
}
.modal-root > .smile-search-panel[hidden]{display:none !important;}

.modal-root > .smile-search-panel > .smile-search-box{
  position:relative !important;
  z-index:1 !important;
  width:min(780px,100%) !important;
  max-height:min(82vh,760px) !important;
  overflow:auto !important;
  padding:24px !important;
  box-sizing:border-box !important;
  border-radius:20px !important;
  background:#f7f2e8 !important;
  color:#332d27 !important;
  pointer-events:auto !important;
}
.modal-root > .smile-search-panel [data-smile-search-close]{
  position:sticky !important;
  top:0 !important;
  z-index:2147483001 !important;
  display:block !important;
  width:max-content !important;
  min-width:78px !important;
  min-height:38px !important;
  margin:0 0 8px auto !important;
  padding:9px 14px !important;
  border:1px solid rgba(47,42,36,.38) !important;
  border-radius:999px !important;
  background:#f7f2e8 !important;
  color:#332d27 !important;
  opacity:1 !important;
  visibility:visible !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
@media(max-width:760px){
  .modal-root > .smile-search-panel{padding:10px !important;}
  .modal-root > .smile-search-panel > .smile-search-box{padding:20px 16px !important;}
}

/* 2026-08-14 production hotfix: controls only; existing layout dimensions untouched */
.app[data-page="sns"] .smile-join-line{display:flex;align-items:center;gap:10px;padding:0 0 10px;border-bottom:1px solid rgba(68,59,49,.14)}
.app[data-page="sns"] .smile-join-line div{display:grid;gap:3px;min-width:0}
.app[data-page="sns"] .smile-join-line strong,.app[data-page="sns"] .smile-find-partner strong{font-size:.82em;line-height:1.45}
.app[data-page="sns"] .smile-join-line span{font-size:.70em;line-height:1.45;opacity:.68}
.app[data-page="sns"] .smile-join-line img{width:68px;height:68px;object-fit:contain;flex:0 0 auto;padding:3px;box-sizing:border-box;background:#fff;border-radius:7px}
.app[data-page="sns"] .smile-find-partner{display:grid;gap:7px;justify-items:start}
@media(max-width:700px){.app[data-page="sns"] .smile-join-line{align-items:flex-start}.app[data-page="sns"] .smile-join-line img{width:62px;height:62px}}

/* 2026-08-14 visible production corrections */
.app[data-page="sns"] .smile-concept::before,
.app[data-page="sns"] .smile-concept::after,
.app[data-page="sns"] .smile-search-entry::before,
.app[data-page="sns"] .smile-search-entry::after{content:none !important;display:none !important;}
.monitor-legal-entry{margin-top:14px;padding-top:12px;border-top:1px solid rgba(68,59,49,.22)}
.monitor-legal-button{appearance:none;border:1px solid rgba(68,59,49,.38);border-radius:999px;background:rgba(255,255,255,.58);padding:10px 18px;font:inherit;font-weight:600;cursor:pointer}

/* 2026-08-14 monitor sale: replace SNS block with legal information CTA */
.monitor-detail .monitor-legal-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 20px;
  border-top:1px solid rgba(68,59,49,.24);
  border-bottom:1px solid rgba(68,59,49,.16);
  background:rgba(255,255,255,.18);
}
.monitor-detail .monitor-legal-section h2{margin:0 0 6px;font-size:1em}
.monitor-detail .monitor-legal-section p{margin:0;line-height:1.65;opacity:.78}
.monitor-detail .monitor-legal-section .monitor-legal-button{
  flex:0 0 auto;
  min-width:220px;
  padding:12px 20px;
  border:1px solid rgba(68,59,49,.42);
  border-radius:999px;
  background:rgba(255,255,255,.68);
  box-shadow:0 4px 14px rgba(68,59,49,.07);
  font:inherit;
  font-weight:600;
  cursor:pointer;
}
.monitor-detail .monitor-legal-section .monitor-legal-button:hover{background:rgba(255,255,255,.9)}
@media(max-width:700px){
 .monitor-detail .monitor-legal-section{align-items:flex-start;flex-direction:column;gap:12px;padding:16px}
 .monitor-detail .monitor-legal-section .monitor-legal-button{min-width:0;width:100%}
}

/* 2026-08-14 monitor legal CTA: no panel / no background interruption */
.monitor-detail .monitor-legal-section{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:22px !important;
  padding:16px 0 0 !important;
  margin:0 !important;
  border:0 !important;
  border-top:1px solid rgba(68,59,49,.24) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.monitor-detail .monitor-legal-section > div{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.monitor-detail .monitor-legal-section .monitor-legal-button{
  background:rgba(255,255,255,.38) !important;
  box-shadow:none !important;
}
@media(max-width:700px){
  .monitor-detail .monitor-legal-section{
    align-items:stretch !important;
    padding-top:14px !important;
  }
}

/* 2026-08-14 monitor final alignment: legal block follows notice block geometry */
@media (min-width:701px){
  .monitor-detail .monitor-legal-section{
    align-self:start !important;
    margin-top:0 !important;
    padding:12px 0 0 !important;
    gap:14px !important;
    justify-content:flex-start !important;
  }
  .monitor-detail .monitor-legal-section > div{
    flex:0 1 190px !important;
    min-width:0 !important;
  }
  .monitor-detail .monitor-legal-section .monitor-legal-button{
    flex:0 0 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:230px !important;
    padding:10px 16px !important;
    margin:0 !important;
  }
}


/* RESTORED: 2026-08-11 QC-approved smartphone landscape rules */
@media (max-height: 540px) and (orientation: landscape) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; overflow: visible; }
  .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%; }
  .content-panel { min-height: calc(100vh - 108px); margin: 108px 18px 0; }
  .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; }
}

















/* 2026-08-14 monitor-sale smartphone-landscape — verified DOM placement.
   Scope is monitor-sale only; restored common landscape CSS remains untouched. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 950px) {
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-detail {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "back back"
      "intro intro"
      "summary set"
      "apply terms"
      "line line"
      "legal legal"
      "commerce commerce" !important;
    column-gap: 34px !important;
    row-gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    align-content: start !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-detail > * {
    min-width: 0 !important;
    max-width: none !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .detail-back { grid-area: back !important; }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-intro { grid-area: intro !important; }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-summary { grid-area: summary !important; }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-set { grid-area: set !important; }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-apply { grid-area: apply !important; }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-terms { grid-area: terms !important; }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-qr-spot { grid-area: line !important; }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-legal-section { grid-area: legal !important; }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-commerce-note { grid-area: commerce !important; }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-summary,
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-set,
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-apply,
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-terms {
    width: 100% !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-qr-spot {
    width: 100% !important;
    max-width: none !important;
    margin: 14px 0 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(68,59,49,.24) !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-line-qr {
    width: 100% !important;
    max-width: none !important;
    justify-content: flex-start !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-legal-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 12px 0 0 !important;
    margin: 0 !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-legal-section > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-legal-section .monitor-legal-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 220px !important;
    max-width: none !important;
    white-space: nowrap !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-commerce-note {
    justify-self: start !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
  }
}


/* 2026-08-14 monitor-sale smartphone landscape lower-row refinement only.
   Portrait and desktop are intentionally untouched. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 950px) {
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-detail {
    grid-template-areas:
      "back back"
      "intro intro"
      "summary set"
      "apply terms"
      "line legal"
      "commerce commerce" !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-detail .monitor-qr-spot {
    grid-area: line !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(68,59,49,.24) !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-detail .monitor-legal-section {
    grid-area: legal !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(68,59,49,.24) !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-detail .monitor-legal-section > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-detail .monitor-legal-section .monitor-legal-button {
    flex: 0 0 auto !important;
    min-width: 190px !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-commerce-note {
    grid-area: commerce !important;
    width: 100% !important;
    justify-self: end !important;
    text-align: right !important;
    margin-top: 8px !important;
  }
}





/* =========================================================
   2026-08-14 PUBLIC RECOVERY 06
   NON-TOP smartphone landscape:
   restore proven natural page flow, keep header/background fixed.
   Portrait / desktop / TOP remain untouched.
   ========================================================= */
@media (max-height: 540px) and (orientation: landscape) {
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .app:not([data-page="home"]) {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .app:not([data-page="home"]) .stationery {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  .app:not([data-page="home"]) .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
  }

  .app:not([data-page="home"]) .story-watermark {
    position: fixed !important;
    top: 54% !important;
  }
  .app[data-page="nakama"] .story-watermark {
    top: 47% !important;
  }

  /* Give the logo/header a visibly separate zone before copy begins. */
  .app:not([data-page="home"]) .content-panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: clamp(134px, 27vh, 148px) 18px 132px !important;
    overflow: visible !important;
  }

  .app:not([data-page="home"]) .content-scroll {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 6px !important;
  }

  .app:not([data-page="home"]) .ceramic-balls {
    position: absolute !important;
    left: var(--edge) !important;
    bottom: 28px !important;
    z-index: 5 !important;
  }

  /* Keep HOME clear of the ceramic-ball decoration on every landscape page. */
  .app:not([data-page="home"]) .home-button {
    position: absolute !important;
    left: calc(var(--edge) + 154px) !important;
    bottom: 28px !important;
    margin: 0 !important;
    z-index: 6 !important;
  }

  .app:not([data-page="home"]) .global-nav.is-open {
    position: fixed !important;
    top: 76px !important;
    right: var(--edge) !important;
    bottom: 10px !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
    z-index: 30 !important;
  }

  body.menu-scroll-locked {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
}


/* 2026-08-14 QC07 — three screenshot-confirmed visual corrections. */
.app[data-page="sns"] .smile-concept > .smile-leaf{display:none !important;}

@media (max-height:540px) and (orientation:landscape){
  .app[data-page="documents"] .line-qr-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;width:100% !important;margin:14px 0 18px !important;
  }
  .app[data-page="documents"] .line-qr-card{
    grid-template-columns:72px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;gap:3px 10px !important;
    min-width:0 !important;padding:10px !important;overflow:hidden !important;
  }
  .app[data-page="documents"] .line-qr-card img{width:72px !important;height:72px !important;}
  .app[data-page="documents"] .line-qr-card strong,
  .app[data-page="documents"] .line-qr-card span{
    min-width:0 !important;white-space:normal !important;overflow-wrap:anywhere !important;
  }
  .app[data-page="documents"] .line-qr-card strong{font-size:.90em !important;line-height:1.35 !important;}
  .app[data-page="documents"] .line-qr-card span{font-size:.68em !important;line-height:1.45 !important;}

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-detail .monitor-qr-spot{
    grid-area:line !important;align-self:start !important;justify-self:stretch !important;
    width:100% !important;max-width:none !important;margin:0 !important;
    padding:12px 0 0 !important;border-top:1px solid rgba(68,59,49,.24) !important;
  }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-line-qr{
    width:100% !important;max-width:none !important;margin:0 !important;justify-content:flex-start !important;
  }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-line-qr img{
    flex-basis:64px !important;width:64px !important;height:64px !important;
  }
}


/* =========================================================
   2026-08-14 QC08 — placement only.
   1) Circular Board landscape QR cards: move to a clean full-width row.
   2) Monitor-sale landscape QR: move to a clean full-width row.
   3) Monitor-sale seller line: independent page-end line, not tied to legal column.
   No header / HOME / scrolling / portrait changes.
   ========================================================= */
@media (max-height:540px) and (orientation:landscape) {
  /* 回覧板：QRカードは左右本文の途中にぶら下げず、本文2列の下で全幅1段にする */
  .app[data-page="documents"] .line-qr-grid {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: min(760px, 100%) !important;
    margin: 18px 0 22px !important;
    justify-self: start !important;
  }
  .app[data-page="documents"] .line-qr-card {
    grid-template-columns: 82px minmax(0,1fr) !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
  }
  .app[data-page="documents"] .line-qr-card img {
    width: 82px !important;
    height: 82px !important;
  }

  /* モニター販売：QRは左右列の片側に押し込まず、確認事項の下で全幅1段 */
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-detail {
    grid-template-areas:
      "back back"
      "intro intro"
      "summary set"
      "apply terms"
      "line line"
      "legal legal"
      "commerce commerce" !important;
  }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-qr-spot {
    grid-area: line !important;
    width: 100% !important;
    max-width: none !important;
    margin: 14px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(68,59,49,.24) !important;
  }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-line-qr {
    width: min(620px,100%) !important;
    max-width: none !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }

  /* 販売主体表示は特商法欄から視覚的に切り離し、ページ末尾の独立行へ */
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-commerce-note {
    grid-area: commerce !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid rgba(68,59,49,.20) !important;
    text-align: left !important;
    justify-self: stretch !important;
  }
}

/* PC/desktop: seller line is also an independent page-end line, left aligned. */
@media (min-width:951px) and (min-height:541px) {
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-commerce-note {
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid rgba(68,59,49,.20) !important;
    text-align: left !important;
    justify-self: stretch !important;
  }
}


/* 2026-08-14 QC09 — verified actual page ids / DOM only. */
.monitor-detail .monitor-seller-note{
  margin:.55em 0 0 !important;
  padding-top:.45em !important;
  border-top:1px solid rgba(68,59,49,.16) !important;
  font-size:.88em !important;
  line-height:1.5 !important;
  opacity:.78 !important;
}

@media (max-height:540px) and (orientation:landscape){
  /* 回覧板 actual page id is kairan. */
  .app[data-page="kairan"] .page-copy{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    gap:12px clamp(54px,7vw,132px) !important;
    columns:auto !important;
    column-count:auto !important;
    height:auto !important;
    overflow:visible !important;
  }
  .app[data-page="kairan"] .page-copy > p:nth-of-type(1){grid-column:1 !important;grid-row:1 !important;}
  .app[data-page="kairan"] .page-copy > p:nth-of-type(2){grid-column:1 !important;grid-row:2 !important;}
  .app[data-page="kairan"] .page-copy > p:nth-of-type(3){grid-column:2 !important;grid-row:1 !important;}
  .app[data-page="kairan"] .page-copy > p:nth-of-type(4){grid-column:2 !important;grid-row:2 !important;}

  .app[data-page="kairan"] .line-qr-grid{
    grid-column:1 / -1 !important;
    grid-row:3 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
    width:min(760px,100%) !important;
    margin:10px 0 18px !important;
    justify-self:start !important;
  }
  .app[data-page="kairan"] .line-qr-card{
    grid-template-columns:82px minmax(0,1fr) !important;
    gap:3px 10px !important;
    min-width:0 !important;
    padding:10px 12px !important;
  }
  .app[data-page="kairan"] .line-qr-card img{width:82px !important;height:82px !important;}
  .app[data-page="kairan"] .line-qr-card strong,
  .app[data-page="kairan"] .line-qr-card span{
    min-width:0 !important;
    white-space:normal !important;
    word-break:keep-all !important;
  }

  /* Monitor landscape order follows portrait: summary/set -> LINE -> apply/terms -> legal. */
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-detail{
    grid-template-areas:
      "back back"
      "intro intro"
      "summary set"
      "line line"
      "apply terms"
      "legal legal" !important;
  }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-qr-spot{
    grid-area:line !important;
    width:100% !important;
    max-width:none !important;
    margin:10px 0 0 !important;
    padding:10px 0 0 !important;
    border-top:1px solid rgba(68,59,49,.24) !important;
  }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-line-qr{
    width:min(640px,100%) !important;
    max-width:none !important;
    margin:0 !important;
    justify-content:flex-start !important;
  }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-legal-section{grid-area:legal !important;}
}


/* QC10: QR card decorative debris removal only */
.smile-concept .smile-twig,
.smile-concept > .smile-leaf{display:none !important;}


/* QC10: landscape ordering follows portrait reference exactly. */
@media (max-height:540px) and (orientation:landscape){
  .app[data-page="kairan"] .page-copy{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "intro1 intro2"
      "qr qr"
      "tech close" !important;
    gap:14px clamp(54px,7vw,132px) !important;
    columns:auto !important;
    height:auto !important;
    overflow:visible !important;
  }
  .app[data-page="kairan"] .page-copy > p:nth-of-type(1){grid-area:intro1 !important;}
  .app[data-page="kairan"] .page-copy > p:nth-of-type(2){grid-area:intro2 !important;}
  .app[data-page="kairan"] .line-qr-grid{
    grid-area:qr !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
    width:min(760px,100%) !important;
    margin:2px 0 4px !important;
    justify-self:start !important;
  }
  .app[data-page="kairan"] .page-copy > p:nth-of-type(3){grid-area:tech !important;}
  .app[data-page="kairan"] .page-copy > p:nth-of-type(4){grid-area:close !important;}

  .app[data-page="news"][data-detail="monitor-sale"] .monitor-detail{
    grid-template-areas:
      "back back"
      "intro intro"
      "summary set"
      "line line"
      "apply terms"
      "legal legal" !important;
  }
  .app[data-page="news"][data-detail="monitor-sale"] .monitor-qr-spot{
    grid-area:line !important;
    width:100% !important;
    margin:8px 0 0 !important;
    padding:10px 0 0 !important;
  }
}


/* 2026-08-15 FINAL: QR upper-right decorative debris removal ONLY */
.smile-concept .smile-twig,
.smile-concept > .smile-leaf{
  display:none !important;
}


/* 2026-08-15 FINAL debris root-cause removal — visual decoration only */
.app[data-page="sns"] .smile-concept > .smile-leaf,
.app[data-page="sns"] .smile-concept > .smile-twig,
.app[data-page="sns"] .smile-concept::before,
.app[data-page="sns"] .smile-concept::after{
  content:none !important;
  display:none !important;
}


/* 2026-08-15 exact QR debris safeguard only */
.app[data-page="sns"] .smile-concept::before,
.app[data-page="sns"] .smile-concept::after{
  content:"" !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 2026-08-15 final partner apply-block fit only */
.partner-detail .partner-apply{
  margin-top:8px !important;
  padding-top:8px !important;
}
.partner-detail .partner-apply > .closing{margin:0 0 .45em !important;}
.partner-detail .partner-apply > .closing + p{margin-top:0 !important;}

/* 2026-08-15 final: remove redundant rule above partner application block only */
.partner-detail .partner-apply{
  border-top:none !important;
}


/* NON-TOP LAYOUT CORE — integrated QC 2026-08-18
   Desktop: .content-scroll is the scroll owner. Mobile portrait/landscape: document scroll.
   Content height is natural; no heading-height subtraction or page-specific fixed content ceiling. */
html,body{width:100%;height:100%;margin:0;}
html.is-scroll-locked,body.is-scroll-locked{overflow:hidden!important;overscroll-behavior:none;}
.modal-root{display:contents;}
.app:not([data-page="home"]){width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden;}
.app:not([data-page="home"]) .stationery{position:absolute;inset:0;width:100%;height:100%;min-height:0;overflow:hidden;}
.app:not([data-page="home"]) .site-header{position:fixed;inset:0 0 auto 0;z-index:20;}
.app:not([data-page="home"]) .content-panel{position:absolute;top:clamp(150px,19vh,205px);left:var(--edge);right:var(--edge);bottom:64px;width:auto;height:auto;min-height:0;max-height:none;margin:0;overflow:hidden;}
.app:not([data-page="home"]) .content-scroll{box-sizing:border-box;width:100%;height:100%;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 clamp(6px,1vw,18px) 90px;scrollbar-width:auto;}
.app:not([data-page="home"]) .content-scroll::-webkit-scrollbar{width:auto;height:auto;}
.app:not([data-page="home"]) .page-copy{box-sizing:border-box;width:100%;height:auto;min-height:0;max-height:none;overflow:visible;}
.app:not([data-page="home"]) .ceramic-balls,.app:not([data-page="home"]) .home-button{position:fixed;}

/* Mobile portrait/landscape: preserve document scrolling and safe-area reachability. */
@media (max-width:700px), (orientation:landscape) and (max-height:700px){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;}
  .app:not([data-page="home"]){height:auto;min-height:100vh;min-height:100dvh;overflow:visible;}
  .app:not([data-page="home"]) .stationery{position:relative;inset:auto;height:auto;min-height:100vh;min-height:100dvh;overflow:visible;}
  .app:not([data-page="home"]) .content-panel{position:relative;top:auto;left:auto;right:auto;bottom:auto;margin:clamp(126px,16vh,156px) 18px 0;overflow:visible;}
  .app:not([data-page="home"]) .content-scroll{height:auto;min-height:0;overflow:visible;padding:0 6px calc(92px + env(safe-area-inset-bottom));overscroll-behavior:auto;}
  .app:not([data-page="home"]) .page-copy{height:auto;columns:1;column-count:1;column-width:auto;column-gap:0;}
}
@media (orientation:landscape) and (max-height:700px){
  .app:not([data-page="home"]) .content-panel{margin:clamp(104px,25vh,132px) 18px 0;}
  .app:not([data-page="home"]) .content-scroll{padding:0 6px calc(78px + env(safe-area-inset-bottom));}
  .app:not([data-page="home"]) .content-panel h1{font-size:clamp(24px,5vw,34px);margin-bottom:10px;}
  .app:not([data-page="home"]) .page-copy{font-size:13px;line-height:1.65;}
  .app[data-page="news"] .entry-list{height:auto;max-height:none;overflow:visible;}
  .app[data-page="news"] .entry-button{display:grid;visibility:visible;opacity:1;}
  .app[data-page="sns"] .smile-members,.app[data-page="sns"] .smile-mock-layout,.app[data-page="sns"] .smile-members-viewport{height:auto;max-height:none;overflow:visible;}
  .app[data-detail="monitor-sale"] .monitor-detail{display:block;width:100%;max-width:100%;height:auto;overflow:visible;}
}

.modal-root > .regulations-panel,.modal-root > .viewer-modal{position:fixed;inset:0;z-index:120;}
.modal-root > .regulations-panel[hidden],.modal-root > .viewer-modal[hidden]{display:none!important;}
/* 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 confirmation06: legal/regulations scrolling + stationery body */
.smile-legal-panel,.monitor-legal-panel{overflow:auto!important;overscroll-behavior:contain!important;}
.smile-legal-box,.monitor-legal-box{max-height:86dvh!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;}
.regulations-box{overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;}
.regulation-body{position:relative;background-color:rgba(255,253,247,.62)!important;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,rgba(87,72,52,.13) 32px,transparent 33px)!important;background-size:100% 33px!important;line-height:33px!important;padding-top:8px!important;padding-bottom:24px!important;}
.regulation-body p,.regulation-body li{line-height:33px!important;margin-top:0!important;margin-bottom: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;
}