﻿/** sKnow 文字演出ブロック。 */
/* sKnow 横書きブロック */
.sknow-hwriting {
	box-sizing: border-box;
	width: 100%;
	line-height: 1.7;
	font-feature-settings: normal;
	font-variant-east-asian: normal;
	font-kerning: normal;
}
.sknow-hwriting__text { white-space: pre-wrap; }
.sknow-writing__heading {
	font-weight: 700;
	line-height: 1;
	margin: 0;
}
.sknow-hwriting__text > .sknow-writing__heading,
.sknow-hwriting__text > .sknow-writing__body {
	display: block;
	margin: 0;
}
.sknow-hwriting__text > .sknow-writing__heading + .sknow-writing__body { margin-top: .4em; }
.sknow-vwriting__content > .sknow-writing__heading {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: pre-wrap;
	margin: 0 0 0 .4em;
}
.sknow-vwriting__content > .sknow-writing__body { margin: 0; }
.sknow-hwriting--align-left { text-align: left; }
.sknow-hwriting--align-center { text-align: center; }
.sknow-hwriting--align-right { text-align: right; }
.sknow-hwriting.has-text-shadow { text-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.sknow-hwriting--font-bizud { font-family: "BIZ UDPGothic", "BIZ UDGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
.sknow-hwriting--font-zenmaru { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif; }
.sknow-hwriting--font-mplusround { font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif; }
.sknow-hwriting--font-shippori { font-family: "Shippori Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; }
.sknow-hwriting--font-sans-serif { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
.sknow-hwriting--font-serif { font-family: Georgia, "Times New Roman", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; }
.sknow-hwriting--font-yugothic { font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.sknow-hwriting--font-yumincho { font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; }
.sknow-hwriting--font-system { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", sans-serif; }
.sknow-hwriting--font-shippori.has-proportional,
.sknow-hwriting--font-serif.has-proportional,
.sknow-hwriting--font-yumincho.has-proportional,
.sknow-hwriting--base-font-shippori.has-proportional,
.sknow-hwriting--base-font-serif.has-proportional,
.sknow-hwriting--base-font-yumincho.has-proportional,
body.sknow-font-shippori .sknow-hwriting:not([class*="sknow-hwriting--font-"]).has-proportional,
body.sknow-font-serif .sknow-hwriting:not([class*="sknow-hwriting--font-"]).has-proportional,
body.sknow-font-yumincho .sknow-hwriting:not([class*="sknow-hwriting--font-"]).has-proportional {
	font-feature-settings: "palt" 1;
	font-variant-east-asian: proportional-width;
	font-kerning: normal;
}
.sknow-hwriting__text[data-sknow-effect] {
	position: relative;
	--sknow-effect-duration: 1000ms;
	--sknow-effect-delay: 0ms;
	--sknow-char-interval: 150ms;
}
.sknow-hwriting__text.sknow-effect-ready:not(.is-active) { visibility: hidden; }
.sknow-hwriting--effect-fade-up .sknow-hwriting__text.sknow-effect-ready { opacity: 0; transform: translateY(.8em); }
.sknow-hwriting--effect-fade-up .sknow-hwriting__text.is-active { visibility: visible; animation: sknow-hwriting-fade-up var(--sknow-effect-duration) ease var(--sknow-effect-delay) both; }
.sknow-hwriting--effect-blur .sknow-hwriting__text.sknow-effect-ready { opacity: 0; filter: blur(.45em); }
.sknow-hwriting--effect-blur .sknow-hwriting__text.is-active { visibility: visible; animation: sknow-hwriting-blur var(--sknow-effect-duration) ease var(--sknow-effect-delay) both; }
.sknow-hwriting--effect-tracking .sknow-hwriting__text.sknow-effect-ready { opacity: 0; letter-spacing: .7em; }
.sknow-hwriting--effect-tracking .sknow-hwriting__text.is-active { visibility: visible; animation: sknow-hwriting-tracking var(--sknow-effect-duration) ease-out var(--sknow-effect-delay) both; }
.sknow-hwriting--effect-glitch .sknow-hwriting__text { position: relative; }
.sknow-hwriting--effect-glitch .sknow-hwriting__text.is-active { visibility: visible; animation: sknow-hwriting-glitch var(--sknow-effect-duration) steps(2,end) var(--sknow-effect-delay) both; }
.sknow-hwriting__char { display: inline; }
.sknow-hwriting--effect-typewriter .sknow-hwriting__char,
.sknow-hwriting--effect-char-fade .sknow-hwriting__char { opacity: 0; }
.sknow-hwriting--effect-typewriter .sknow-hwriting__char { display: none; }
.sknow-hwriting--effect-typewriter .sknow-hwriting__char.is-visible { display: inline; opacity: 1; }
.sknow-hwriting--effect-typewriter .sknow-writing__heading .sknow-hwriting__char:not(.is-visible) {
	display: none !important;
	opacity: 0 !important;
}
.sknow-hwriting--effect-typewriter .sknow-hwriting__char.has-typewriter-cursor::after {
	content: "";
	display: inline-block;
	width: .08em;
	height: .9em;
	margin-left: .12em;
	vertical-align: -.08em;
	background: currentColor;
	animation: sknow-typewriter-caret .8s steps(1, end) infinite;
}
.sknow-hwriting--effect-typewriter .sknow-hwriting__text.is-active,
.sknow-hwriting--effect-char-fade .sknow-hwriting__text.is-active { visibility: visible; }
.sknow-hwriting--effect-char-fade .sknow-hwriting__text.is-active .sknow-hwriting__char {
	display: inline-block;
	transform: translateY(.25em);
	transition-property: opacity, transform;
	transition-timing-function: ease;
}
.sknow-hwriting--effect-char-fade .sknow-hwriting__char.is-faded-in { opacity: 1; transform: translateY(0); }
.sknow-hwriting__cursor {
	position: absolute;
	display: block;
	width: .08em;
	height: 1em;
	margin: 0;
	background: currentColor;
	animation: sknow-typewriter-caret .8s steps(1, end) infinite;
	z-index: 2;
}
.sknow-hwriting__cursor[hidden] { display: none !important; }
.sknow-vwriting .sknow-hwriting__cursor {
	position: absolute;
	display: block;
	width: .8em;
	height: .08em;
	margin: 0;
	transform: translateX(-50%);
	writing-mode: horizontal-tb;
	-webkit-writing-mode: horizontal-tb;
	z-index: 2;
}
.sknow-vwriting.has-effect { position: relative; }
@keyframes sknow-typewriter-caret { 50% { opacity: 0; } }
@keyframes sknow-hwriting-fade-up { to { opacity: 1; transform: translateY(0); } }
@keyframes sknow-hwriting-blur { to { opacity: 1; filter: blur(0); } }
@keyframes sknow-hwriting-tracking { to { opacity: 1; letter-spacing: normal; } }
@keyframes sknow-hwriting-glitch {
	0% { opacity: 0; transform: translate(0); text-shadow: -.08em 0 #0ff, .08em 0 #f03; }
	25% { opacity: 1; transform: translate(.05em,-.02em); text-shadow: .08em 0 #0ff, -.08em 0 #f03; }
	50% { transform: translate(-.04em,.02em); }
	75% { transform: translate(.02em,0); text-shadow: -.03em 0 #0ff, .03em 0 #f03; }
	100% { opacity: 1; transform: none; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sknow-hwriting__text[data-sknow-effect] { visibility: visible !important; opacity: 1 !important; transform: none !important; filter: none !important; -webkit-clip-path: none !important; clip-path: none !important; letter-spacing: inherit !important; animation: none !important; }
	.sknow-hwriting__char { opacity: 1 !important; transform: none !important; animation: none !important; }
	.sknow-hwriting__cursor { display: none !important; }
}

/* 縦書きブロック用エフェクト（横書きと同じ動作）。 */
.sknow-writing-effect__text[data-sknow-effect] {
	--sknow-effect-duration: 1000ms;
	--sknow-effect-delay: 0ms;
	--sknow-char-interval: 150ms;
}
.sknow-writing-effect__text.sknow-effect-ready:not(.is-active) { visibility: hidden; }
.sknow-vwriting--effect-fade-up .sknow-writing-effect__text.sknow-effect-ready { opacity: 0; transform: translateY(.8em); }
.sknow-vwriting--effect-fade-up .sknow-writing-effect__text.is-active { visibility: visible; animation: sknow-hwriting-fade-up var(--sknow-effect-duration) ease var(--sknow-effect-delay) both; }
.sknow-vwriting--effect-blur .sknow-writing-effect__text.sknow-effect-ready { opacity: 0; filter: blur(.45em); }
.sknow-vwriting--effect-blur .sknow-writing-effect__text.is-active { visibility: visible; animation: sknow-hwriting-blur var(--sknow-effect-duration) ease var(--sknow-effect-delay) both; }
.sknow-vwriting--effect-tracking .sknow-writing-effect__text.sknow-effect-ready { opacity: 0; letter-spacing: .7em; }
.sknow-vwriting--effect-tracking .sknow-writing-effect__text.is-active { visibility: visible; animation: sknow-hwriting-tracking var(--sknow-effect-duration) ease-out var(--sknow-effect-delay) both; }
.sknow-vwriting--effect-glitch .sknow-writing-effect__text.is-active { visibility: visible; animation: sknow-hwriting-glitch var(--sknow-effect-duration) steps(2,end) var(--sknow-effect-delay) both; }
.sknow-vwriting--effect-char-fade .sknow-hwriting__char { opacity: 0; }
.sknow-vwriting--effect-char-fade .sknow-writing-effect__text.is-active { visibility: visible; }
.sknow-vwriting--effect-char-fade .sknow-writing-effect__text.is-active .sknow-hwriting__char {
	display: inline;
	transform: none;
	transition-property: opacity;
	transition-timing-function: ease;
}
.sknow-vwriting--effect-char-fade .sknow-hwriting__char.is-faded-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.sknow-writing-effect__text[data-sknow-effect] { visibility: visible !important; opacity: 1 !important; transform: none !important; filter: none !important; letter-spacing: inherit !important; animation: none !important; }
}

/* sKnow 縦書きブロック */
.sknow-vwriting {
	display: grid;
	min-height: 16em;
	box-sizing: border-box;
	font-feature-settings: normal;
	font-variant-east-asian: normal;
	font-kerning: normal;
}
.sknow-vwriting__content {
	max-width: 100%;
	max-height: 100%;
	line-height: 1;
	letter-spacing: 0;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	text-orientation: mixed;
	overflow-wrap: anywhere;
}
.sknow-vwriting--v-top .sknow-vwriting__content { align-self: start; }
.sknow-vwriting--v-center .sknow-vwriting__content { align-self: center; }
.sknow-vwriting--v-bottom .sknow-vwriting__content { align-self: end; }
.sknow-vwriting--v-top .sknow-vwriting__content { text-align: start; }
.sknow-vwriting--v-center .sknow-vwriting__content { text-align: center; }
.sknow-vwriting--v-bottom .sknow-vwriting__content { text-align: end; }
.sknow-vwriting--h-left .sknow-vwriting__content { justify-self: start; }
.sknow-vwriting--h-center .sknow-vwriting__content { justify-self: center; }
.sknow-vwriting--h-right .sknow-vwriting__content { justify-self: end; }
.sknow-vwriting__content > :first-child { margin-block-start: 0; }
.sknow-vwriting__content > :last-child { margin-block-end: 0; }
.sknow-vwriting.has-text-shadow { text-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.sknow-vwriting--font-bizud { font-family: "BIZ UDPGothic", "BIZ UDGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
.sknow-vwriting--font-zenmaru { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif; }
.sknow-vwriting--font-mplusround { font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif; }
.sknow-vwriting--font-shippori { font-family: "Shippori Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; }
.sknow-vwriting--font-sans-serif { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
.sknow-vwriting--font-serif { font-family: Georgia, "Times New Roman", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; }
.sknow-vwriting--font-yugothic { font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.sknow-vwriting--font-yumincho { font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; }
.sknow-vwriting--font-system { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", sans-serif; }

.sknow-writing-editor {
	position: relative;
	cursor: default;
}
.sknow-writing-editor [contenteditable="true"] {
	cursor: text;
	caret-color: #2271b1;
}
.sknow-writing-editor:focus {
	outline: 1px solid #2271b1;
	outline-offset: 2px;
}
