@charset 'utf-8';
:root {

    --r18-color: red;
    --bad-color: blue;
 
    @supports (-webkit-touch-callout: none) and (font: -apple-system-body) {
        font: -apple-system-body;
    }
}

/* 汎用 */
html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
	:where(html:focus-within) {
		scroll-behavior: smooth;
	}
}
:where(body) {
    margin: 0;
    box-sizing: border-box;
	min-block-size: 100%; 
    min-block-size: 100dvb; 
    animation: fadeIn 1s;
    -webkit-font-smoothing: antialiased;
}
template { 
    display: none;
}
:where(summary, button, input[type="button"], input[type="submit"], [role='button'], label, select){
    cursor: pointer;
}
:where(input,button,textarea,select){
	font: inherit;
	max-width: 100%;
}
:where(img, picture, svg) {
	display: block; max-inline-size: 100%; block-size: auto;
}
:where(h1, h2, h3, h4) {
	line-height: calc(1em + .3rem);
}
.visually-hidden,
.v-hidden{ 
    position: absolute !important; clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important; border:0 !important;
    height: 1px !important; width: 1px !important; overflow: hidden !important;
}

/*ページ分割用 */
div.viewer-page[aria-hidden="true"] { 
    display: none !important; 
}
:where(.viewer-paging-links){
    display: flex; 
    justify-content: center;
    padding: 0;
    list-style: none;
}
:where(a[aria-current="page"]) { 
    pointer-events: none; 
    cursor: default; 
    text-decoration: none; 
    color: inherit;
}

/* 汎用モーダル */
:where(dialog) {
    border:none;
    box-shadow: 0 0 4px hsl(0,0%,50%,.7);
    z-index: 800;
    overscroll-behavior-y: contain;
}
dialog::backdrop{
    background: hls(0, 0%, 0%,.4);
}
body.is-modal{ 
    overflow:hidden; 
}
:where(body.is-modal){  
    filter:blur(5px); 
}

/* 閲覧注意モーダル */
.viewer-cushion-icon svg{ width:1.2em; height:1.2em; display:inline-block; }
.viewer-cushion-icon{ font-weight:700; }

dialog{ border-radius: 10px; min-width: min(18em, 80vw); max-width: min(556px,90vw); }
dialog .viewer-cushion{ text-align:center; line-height:1.4; }
dialog .viewer-cushion-icon{ max-width:265px; margin:auto; }
dialog .viewer-cushion-icon svg{ width:115px; height:115px; margin:auto; display:block; }
.viewer-cushion-close{ margin-top: min(20px,1.5em); display:flex; flex-flow: row-reverse nowrap;
    gap:10px; justify-content:space-around; align-items: center; }
.viewer-cushion-close :is(button,div){ flex:1; text-align:center; line-height:1.2; padding:.6em 1em; }
.viewer-cushion-close button:first-of-type{ flex: 2; }
.viewer-cushion-close small{ display: block; }

.viewer-r18 svg{ fill: var(--r18-color); }
.viewer-r18{ color: var(--r18-color); }
.viewer-bad svg{ fill: var(--bad-color); }
.viewer-bad{ color: var(--bad-color); }

/* パスワード */
:where(.viewer-password){ text-align:center; }
:where(.viewer-password svg){ margin:auto; width:4rem; height:4rem; overflow:hidden; }
:where(.viewer-password input){ margin:5px; }

@keyframes fadeIn {
    0% { opacity: 0; }
    100% {opacity: 1; }
}