@charset "UTF-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	line-height: 1;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
li {
	list-style: none;
}

body {
	color: #000;
	background: #fff;
	font-family: "SST W55 Regular", "SST W20 Roman", "SST Japanese Pro Regular", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka, sans-serif;
	font-weight: 500;
	font-style: normal;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
img {
	vertical-align: bottom;
}


/*
#onetrust-consent-sdk {
	display: none;
}
*/


.pc {
	display: none !important;
}


html:lang(en) body {
}
/*
.en {
	font-family: source-serif-pro, serif;
	font-weight: 400;
	font-style: normal;
}
*/
strong.en,
#wrap main h2 .en {
	font-family: source-serif-pro, serif;
	font-weight: 700;
	font-style: normal;
}

/*
	font-family: ryo-display-plusn, serif;
*/




#wrap {
	font-size: initial;
	font-weight: 400;
	-webkit-font-smoothing: initial;
}


h2 {
	font-family: ryo-display-plusn, serif;
}

html[lang="en"] #wrap h2,
html[lang="en"] #wrap h3,
html[lang="en"] .intro .inner p,
html[lang="en"] .book-detail .description dt {
	font-family: source-serif-pro, serif !important;
}





#menu-btn {
	position: fixed;
	width: 40px;
	height: 40px;
	left: 12px;
	top: calc(12px + 64px + 43px);
	z-index: 1000001;
	border: none;
	background: rgba(255,255,255,0.8);
	cursor: pointer;
}

#content-menu {
	position: fixed;
	display: flex;
	justify-content: center;
	flex-direction: column;
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	left: -100vw;
	top: 0;
	z-index: 1000000;
	background: #fff url(../img/border.png) 100% 0 no-repeat;
	background-size: 1px 100%;
	transition: all 500ms ease-out;
}
#container {
	transition: transform 500ms ease-out;
}

body.menu #content-menu {
	transform: translateX(100vw);
}






#menu-btn i {
	position: absolute;
	display: block;
	width: 24px;
	height: 2px;
	left: 8px;
	background: #000;
	transition: all 200ms ease-out;
}
#menu-btn {
	transition: transform 500ms ease-out;
}

#menu-btn i:nth-child(1) {
	top: calc(50% - 7px);
}
#menu-btn i:nth-child(2) {
	top: calc(50% - 1px);
}
#menu-btn i:nth-child(3) {
	top: calc(50% + 5px);
}

body.menu #menu-btn i:nth-child(1) {
	transform: translateY(6px) scale(1.2, 0.9) rotate(30deg);
}
body.menu #menu-btn i:nth-child(2) {
	opacity: 0;
}
body.menu #menu-btn i:nth-child(3) {
	transform: translateY(-6px) scale(1.2, 0.9) rotate(-30deg);
}




#content-menu > ul {
	margin-left: 45px;
}
#content-menu > ul > li > a {
	font-size: 1.125rem;
	font-weight: 700;
	font-family: source-serif-pro, serif;
	line-height: 1.6;
	cursor: pointer;
}
#content-menu > ul > li + li {
	margin-top: 25px;
}

#content-menu ul ul {
	margin: 20px 0 10px 20px;
}
#content-menu ul ul li a {
	font-size: 0.9375rem;
	font-weight: 700;
	font-family: source-serif-pro, serif;
	line-height: 1.6;
	cursor: pointer;
}
#content-menu ul ul li + li {
	margin-top: 15px;
}




#content-menu .lang {
	position: absolute;
	left: 47px;
	bottom: 30px;
	font-size: 0.875rem;
	font-family: source-serif-pro, serif;
	cursor: pointer;
}
#content-menu .lang a + a::before {
	content: "/";
	display: inline-block;
	margin: 0 8px;
}



@media screen and (max-height:375px) {
	#content-menu > ul {
		position: relative;
		margin-left: 80px;
	}
	#content-menu > ul > li > a {
		font-size: 1rem;
	}
	#content-menu > ul > li > a br {
		display: none;
	}
	#content-menu > ul > li + li {
		margin-top: 10px;
	}
	#content-menu ul ul {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	#content-menu .lang {
		left: auto;
		right: 45px;
	}
}





/* ---------- */

.sd-header {
	z-index: 750;
}

main {
	padding: 0 0 100px;
}

/*
.kv {
	position: relative;
	margin-top: calc(-43px);
}

.kv video {
	position: relative;
	width: 100vw;
	height: calc(var(--doc-height) - 43px);
	object-fit: cover;
	object-position: 50% 50%;
}
*/
.kv {
	position: relative;
	height: calc(var(--doc-height) / 3.5);
}

.kv video {
	position: relative;
	width: 100vw;
	height: calc(var(--doc-height) / 3.5);
	object-fit: cover;
	object-position: 50% 50%;
}


.intro {
	padding: 30px 20px 0;
}
.intro .inner p {
	font-size: 0.9375rem;
	font-family: ryo-display-plusn, serif;
	line-height: 2;
	text-align: center;
	
}
.intro .inner p + p {
	margin-top: 20px;
}





.explanation {
	margin: 80px 0 0;
}
.explanation .inner {
	margin: 0 20px;
}
.explanation h2 {
	margin-bottom: 20px;
	font-size: 1.125rem;
	font-weight: 800;
}
.explanation .article p {
	font-size: 0.8125rem;
	line-height: 1.9;
}
.explanation .article p + p {
	margin-top: 20px;
}
.explanation .article p.note {
	font-size: 0.75rem;
}
.explanation .attention {
	display: none;
}



#books {
	margin: 40px 0 0;
}
#books ul {
	display: flex;
	height: 500px;
}
#books li {
	position: relative;
	width: 25vw;
	height: 500px;
}
#books a {
	display: block;
	width: 500px;
	height: 25vw;
	
	/*
	background: url(../img/book_button2.png) 0 0 no-repeat;
	background-size: auto 100vw;
	*/
	transform-origin: left bottom;
	transform: rotate(90deg) translateX(-25vw);
	
	cursor: pointer;
}
#books li:nth-child(1) a {
	background-position: 100% -75vw;
}
#books li:nth-child(2) a {
	background-position: 100% -50vw;
}
#books li:nth-child(3) a {
	background-position: 100% -25vw;
}
#books li:nth-child(4) a {
	background-position: 100% 0;
}

#books strong {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
#books strong i {
	display: inline-block;
	width: 185px;
	text-indent: -10px;
	white-space: nowrap;
	font-style: normal;
	font-size: 1.3125rem;
	font-weight: 700;
	font-family: source-serif-pro, serif;
	display: none;
}
#books strong img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#books li:nth-child(1) strong i,
#books li:nth-child(4) strong i {
	color: #444;
}
#books li:nth-child(2) strong i,
#books li:nth-child(3) strong i {
	color: #fff;
}
#books li span {
	position: absolute;
	display: block;
	width: 12px;
	height: 18px;
	left: calc(50% + 100px);
	top: calc(50% - 9px);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

#books li:nth-child(1) span,
#books li:nth-child(4) span {
	background-image: url(../img/arrow_book_black.svg);
}
#books li:nth-child(2) span,
#books li:nth-child(3) span {
	background-image: url(../img/arrow_book_white.svg);
}

#books a span {
	transition: all 400ms ease-out;
}
#books a:hover span {
	transform: translateX(10px);
}



@media screen and (min-width:414px) {
	#books li span {
		left: calc(50% + 120px);
	}
}
@media (orientation: landscape) and (min-width:440px) {
	#books {
		width: 440px;
		margin-left: auto;
		margin-right: auto;
	}
	#books ul {
		width: 440px;
		height: 100vh;
	}
	#books li {
		position: relative;
		width: 110px;
		height: 100vh;
	}
	#books a {
		width: 100vh;
		height: 110px;
		transform: rotate(90deg) translateX(-110px)
	}
	#books li span {
		left: calc(50% + 150px);
	}
}






.about {
	margin: 70px 20px 0;
}
.about h2 {
	margin: 0 0 20px;
	font-size: 1.125rem;
	font-weight: 800;
}
.about .article {
}
.about .article > * + * {
	margin-top: 20px;
}
.about .article p {
	font-size: 0.8125rem;
	line-height: 1.9;
}
.about .article p + p {
	margin-top: 20px;
}






.history {
	margin: 70px 0 0;
}
.history .box-content {
	margin: 0 20px;
}

.history h2 {
	margin: 0 0 20px;
	font-size: 1.125rem;
	font-weight: 800;
}
.history .article p {
	font-size: 0.8125rem;
	line-height: 1.9;
}
.history .article p + p {
	margin-top: 20px;
}
.history .article p.note {
	font-size: 0.75rem;
}

.history .panel {
	box-sizing: border-box;
	width: calc(100vw - 20px);
	margin-top: 30px;
	margin-left: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	border: 0 solid #ccc;
	border-width: 1px 0 1px 1px;
}
.history .panel figure {
	width: 1200px;
}
.history #history-detail {
	position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.history ::-webkit-scrollbar {
	height: 8px;
}

.history ::-webkit-scrollbar-track {
	background-color: transparent;
	height: 8px;
}
.history ::-webkit-scrollbar-thumb {
	background: #aaa;
	height: 8px;
	border-radius: 4px;
}




.wired {
	margin: 70px 20px 0;
}

.wired h2 {
	margin: 0 0 20px;
	font-size: 1.125rem;
	font-weight: 800;
}
.wired .box {
}
.wired .article {
}
.wired ul {
	margin: 40px 0 0;
	text-align: center;
}
.wired ul img {
	width: 120px;
	height: auto;
}
.wired .article p {
	font-size: 0.8125rem;
	line-height: 1.9;
}
.wired .article p + p {
	margin-top: 20px;
}
.wired .article .url {
	margin-top: 20px;
	font-size: 0.75rem;
}
.wired .article .url .popup {
	display: inline-block;
	margin-left: 4px;
}
.wired .article .url img {
	width: 12px;
	height: auto;
}

.wired .article .url a {
	text-decoration: underline;
}
.wired .article .url a:hover {
	text-decoration: none;
}






.profile {
	margin: 80px 20px 0;
}

.profile h2 {
	margin: 0 0 20px;
	font-size: 1.125rem;
	font-weight: 800;
}
.profile li + li {
	margin-top: 30px;
}
.profile dl {
	display: flex;
	justify-content: space-between;
}
.profile dt {
	width: 90px;
}
.profile dd {
	width: calc(100% - 110px);
}
.profile .name {
	font-size: 0.8125rem;
}
.profile .detail {
	margin: 10px 0 0;
	font-size: 0.75rem;
	line-height: 1.9;
}





.exhibition {
	margin: 80px 20px 0;
}

.exhibition h2 {
	margin: 0 0 20px;
	font-size: 1.125rem;
	font-weight: 800;
}
.exhibition .box {
}
.exhibition .article {
}
.exhibition ul {
}
.exhibition .article p {
	font-size: 0.875rem;
	line-height: 1.9;
}
.exhibition .article .info {
	margin: 20px 0 0;
	font-size: 0.875rem;
	line-height: 1.9;
}
.exhibition .article p + p {
	margin-top: 10px;
}
.exhibition .article .info {
	font-size: 0.75rem;
}
.exhibition .article .url {
	margin-top: 30px;
	font-size: 0.875rem;
}
.exhibition .article .info .popup {
	display: inline-block;
	margin-left: 4px;
	font-size: 0;
	vertical-align: middle;
}
.exhibition .article .info img {
	width: 12px;
	height: auto;
}

.exhibition p.note {
	margin: 5px 0 0;
}
.exhibition p.note em {
	color: #e00;
	font-style: normal;
	font-size: 0.75rem;
}

.exhibition .credit {
	margin: 20px 0 0;
	font-size: 0.875rem;
}
.exhibition .credit dl {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.exhibition .credit dl + dl {
	margin-top: 25px;
}
.exhibition .credit dt {
	width: 120px;
	font-size: 0.75rem;
}
.exhibition .credit dd {
	width: calc(100% - 120px);
}
.exhibition .credit dd img {
	width: 180px;
	height: auto;
}
.exhibition .credit dl:nth-child(2) dd img {
	width: 110px;
	height: auto;
}


.exhibition .article .info a {
	text-decoration: underline;
}
.exhibition .article .info a:hover {
	text-decoration: none;
}


.exhibition .instagram {
	margin: 70px 0 0;
}
.exhibition .instagram ul {
	display: flex;
	flex-wrap: wrap;
}
.exhibition .instagram li {
	width: calc((100vw - 40px - 16px) / 3);
	height: calc((100vw - 40px - 16px) / 3);
}
.exhibition .instagram li:nth-child(3n),
.exhibition .instagram li:nth-child(3n + 2) {
	margin-left: 8px;
}
.exhibition .instagram li:nth-child(n + 4) {
	margin-top: 8px;
}

.exhibition .sns {
	margin: 20px 0 0;
	font-size: 0.75rem;
	line-height: 1.7;
}







.kyotosteam {
	margin: 80px 20px 0;
}

.kyotosteam h2 {
	margin: 0 0 20px;
	font-size: 1.125rem;
	font-weight: 800;
}
.kyotosteam .box {
}
.kyotosteam .article {
}
.kyotosteam ul {
	margin: 40px 0 0;
	text-align: center;
}
.kyotosteam ul img {
	width: 180px;
	height: auto;
}
.kyotosteam .article p {
	font-size: 0.875rem;
	line-height: 1.9;
}
.kyotosteam .article p.note {
	margin-top: 20px;
	font-size: 0.75rem;
}
.kyotosteam .article .url {
	margin-top: 20px;
	font-size: 0.75rem;
}
.kyotosteam .article .url .popup {
	display: inline-block;
	margin-left: 4px;
}
.kyotosteam .article .url img {
	width: 12px;
	height: auto;
}

.kyotosteam .article .url a {
	text-decoration: underline;
}
.kyotosteam .article .url a:hover {
	text-decoration: none;
}









/* ---------- */


.book-detail .visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 320px;
	overflow: hidden;
}
.book-detail .visual .concept {
	position: absolute;
	width: 100%;
	height: 600px;
	left: 0;
	bottom: 0;
}
.book-detail .visual .concept video {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	object-fit: cover;
	object-position: center center;
}


.book-detail .play-pause,
.story-view .play-pause {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 32px !important;
	height: 32px !important;
	right: 12px;
	bottom: 12px;
	z-index: 200;
	border-radius: 20px;
	border: 1px solid #fff;
	/*
	background: url(../img/icon_pause.svg) 50% 50% no-repeat;
	background-size: 17px auto;
	*/
	background: rgba(0,0,0,0.75);
	cursor: pointer;
	will-change: transform;
}

.book-detail .play-pause img,
.story-view .play-pause img {
	width: 17px !important;
	height: auto !important;
}
.book-detail .play-pause[data-status="paused"] img:nth-child(2),
.story-view .play-pause[data-status="paused"] img:nth-child(2) {
	display: none;
}

.book-detail .play-pause[data-status="playing"] img:nth-child(1),
.story-view .play-pause[data-status="playing"] img:nth-child(1) {
	display: none;
}


/*
.book-detail .play-pause[data-status="paused"],
.story-view .play-pause[data-status="paused"] {
	background-image: url(../img/icon_play.svg);
}

.book-detail .black .play-pause,
.story-view .black .play-pause {
	border-color: #000;
	background: url(../img/icon_pause_black.svg) 50% 50% no-repeat;
	background-size: 17px auto;
}
.book-detail .black .play-pause[data-status="paused"],
.story-view .black .play-pause[data-status="paused"] {
	background-image: url(../img/icon_play_black.svg);
}
*/








.book-detail h1,
.book-detail h3,
.book-detail .detail-title {
	width: 100%;
	margin: 0 0 20px;
	font-size: 1.5rem;
	font-family: ryo-display-plusn, serif;
	font-weight: 800;
	font-style: normal;
}


.book-detail .abstract {
	margin: 50px 20px 0;
}
.book-detail .abstract .theme-title {
}
.book-detail .abstract .article {
}
.book-detail .abstract nav {
}

.book-detail .abstract .article p {
	font-size: 0.75rem;
	line-height: 1.9;
}

.book-detail .abstract ul {
	display: flex;
	justify-content: center;
	margin: 50px 0 0;
}
.book-detail .abstract li + li {
	margin-left: 20px;
}
.book-detail .abstract ul a {
	display: inline-block;
	padding-left: 18px;
	font-size: 0.75rem;
	background: url(../img/arrow_down_bold.svg) 0 60% no-repeat;
	background-size: 12px auto;
	cursor: pointer;
}



.book-detail .abstract nav {
	margin: 20px 0 0;
}
.book-detail .video {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0;
	color: #fff;
	line-height: 45px;
	font-size: 0.875rem;
	font-family: "SST W55 Bold", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka, sans-serif;
	font-weight: 700;
	text-align: center;
	background: #003095;
	border: none;
	cursor: pointer;
}
.book-detail .video:hover {
	text-decoration: underline;
}





.book-detail[data-type="1"] .book-inner .video,
.book-detail[data-type="1"] .story .article nav * {
	color: #333;
	background: #5FD7A7;
}

.book-detail[data-type="2"] .book-inner .video,
.book-detail[data-type="2"] story .article nav * {
	background: #003095;
}

.book-detail[data-type="3"] .book-inner .video,
.book-detail[data-type="3"] .story .article nav * {
	background: #CE2271;
}

.book-detail[data-type="4"] .book-inner .video,
.book-detail[data-type="4"] .story .article nav * {
	color: #333;
	background: #e79134;
}




.book-detail .description {
	margin: 80px 22px 25px;
}
.book-detail .description .label {
	margin: 0 0 10px;
	font-size: 0.75rem;
}
.book-detail .description dt {
	font-size: 1.125rem;
	font-weight: 800;
	font-family: ryo-display-plusn, serif;
}
.book-detail .description dd {
	margin: 15px 0 0;
	font-size: 0.75rem;
	line-height: 1.9;
}

.book-detail .df {
}
.book-detail .df + .df {
	margin-top: 70px;
}
.book-detail .df .article {
	margin: 25px 20px 0;
}
.book-detail .df figure {
	position: relative;
}
.book-detail .df figure * {
	width: 100%;
	height: auto;
}

.book-detail .df3 {
	margin-bottom: 70px;
}
.book-detail .df3.not-last {
	margin-bottom: 0;
}
.book-detail .last {
	margin-bottom: 160px;
}

.book-detail .df .article p {
	font-size: 0.75rem;
	line-height: 1.9;
}


.book-detail .df .article nav {
	margin: 20px 0 0;
}


.book-detail .df .article.multi-video p {
	min-height: 1em;
}
.book-detail .article.multi-video nav {
	margin: 0;
}
.book-detail .article.multi-video ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 25px 0 0;
}
.book-detail .article.multi-video li {
	width: calc(50% - 6px);
}
.book-detail .article.multi-video li:nth-child(n + 3) {
	margin-top: 12px;
}


.book-detail .df figure .pager {
	margin: 4px 0 0;
	text-align: center;
}
.book-detail .df figure .pager button {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: none;
	border: none;
}
.book-detail .df figure .pager button::before {
	content: "";
	position: absolute;
	display: block;
	width: 6px;
	height: 6px;
	left: calc(50% - 3px);
	top: calc(50% - 3px);
	border-radius: 4px;
	background: #949494;
}
.book-detail .df figure .pager button.active::before {
	background: #111;
	transform: scale(1.25);
}

/*
.book-detail .break {
	position: relative;
	height: 120px;
	overflow: hidden;
}
.book-detail .break .concept {
	position: absolute;
	width: 100%;
	height: 320px;
	left: 0;
	top: 0;
	background-size: cover;
}
.book-detail .break .concept video {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: -50%;
	object-fit: cover;
	object-position: center center;
}
*/
.book-detail .break {
	position: relative;
	height: 120px;
	overflow: hidden;
}
.book-detail .break .concept {
	position: absolute;
	width: 100%;
	height: 320px;
	left: 0;
	bottom: 0;
	background-size: cover;
}
.book-detail .break .concept video {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	object-fit: cover;
	object-position: center center;
}




.book-detail .story {
	margin: 35px 20px 0;
}
.book-detail .story .label {
	margin: 0 0 15px;
	font-size: 0.75rem;
}
.book-detail .story dt {
}
.book-detail .story dt {
	font-size: 1.25rem;
	font-family: "SST W55 Bold", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka, sans-serif;
}
.book-detail .story dd {
	margin: 15px 0 0;
	font-size: 14px;
}
.book-detail .story .article {
	margin: 20px 0 0;
}
.book-detail .story .article p {
	font-size: 0.75rem;
	line-height: 1.8;
}
.book-detail .story .article nav {
	margin: 25px 0 0;
}
.book-detail .story .article nav a {
	display: block;
	height: 48px;
	color: #fff;
	line-height: 48px;
	font-size: 0.875rem;
	font-weight: 700;
	text-align: center;
	background: #003095;
	cursor: pointer;
}
.book-detail .story .article nav a:hover {
	text-decoration: underline;
}






/* ---------- */


.story-view {
}
.story-view-inner {
}
/*
.story-view .cover {
	position: relative;
	height: 120px;
	overflow: hidden;
}
.story-view .cover .inner {
	position: absolute;
	width: 100%;
	height: 320px;
	left: 0;
	top: 0;
}
.story-view .cover .inner video {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: -50%;
	object-fit: cover;
	object-position: center center;
}
*/
.story-view .cover {
	position: relative;
	height: 120px;
	overflow: hidden;
}
.story-view .cover .inner {
	position: absolute;
	width: 100%;
	height: 320px;
	left: 0;
	bottom: 0;
}
.story-view .cover .inner video {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	object-fit: cover;
	object-position: center center;
}




.story-view dl {
	margin: 50px 20px 0;
}
.story-view dt {
	font-size: 1.25rem;
	font-weight: 400 !important;
	font-family: "SST W55 Bold", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka, sans-serif;
}
.story-view dd {
	margin: 15px 0 0;
	font-size: 0.875rem;
	font-weight: 500;
}

.story-view .article {
	margin: 30px 20px 0;
}
.story-view .article p {
	font-size: 0.75rem;
	line-height: 1.8;
}

.story-view .point {
	position: relative;
	display: inline-block;
}
.story-view .point em {
	position: absolute;
	display: inline-block;
	left: 0.35em;
	top: -1.1em;
}


.story-view .article .note {
	margin-top: 2em;
	font-size: 14px;
}
.story-view .article .italic {
	font-style: italic;
}






nav.return {
	margin: 80px 20px -60px;
}
nav.return ul {
	display: flex;
}
nav.return a {
	display: inline-block;
	padding: 0 0 0 12px;
	font-size: 0.8125rem;;
	font-family: "SST W55 Bold", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka, sans-serif;
	background: url(../img/arrow_bold.svg) 0 50% no-repeat;
	background-size: 5px auto;
	cursor: pointer;
}

nav.return li + li {
	margin-left: 30px;
}






/* ---------- */

#video-overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 100005;
	background: rgba(0,0,0,0.85);
}
#video-player {
	position: fixed;
	width: 100vw;
	height: 56.25vw;
	left: 0;
	top: calc(50% - 28.125vw);
	z-index: 1000010;
}
#video-close {
	position: fixed;
	width: 40px;
	height: 40px;
	right: 12px;
	top: calc(50% - (100vw / 16 * 9 * 0.5) - 40px);
	z-index: 1000020;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}
#video-player iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

#video-close::before,
#video-close::after {
	position: absolute;
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	left: 8px;
	top: calc(50% - 1px);
	background: #fff;
}
#video-close::before {
	transform: scale(1.2, 0.9) rotate(30deg);
}
#video-close::after {
	transform: scale(1.2, 0.9) rotate(-30deg);
}

#video-overlay,
#video-player,
#video-close {
	transition: all 300ms ease-out;
	opacity: 0;
}
body[data-player="on"] #video-overlay,
body[data-player="on"] #video-player,
body[data-player="on"] #video-close {
	opacity: 1;
}



.subtitles-view {
	margin: 80px 20px 0;
}
.subtitles-inner {
}
.subtitles-view .title {
	margin: 40px 0 30px;
	font-size: 0.875rem;
	line-height: 1.6;
}
.subtitles-view .title dt {
	font-size: 0.875rem;
	line-height: 1.6;
}
.subtitles-view .title dd {
	font-size: 0.875rem;
	line-height: 1.6;
}

.subtitles-view dl + dl {
	margin-top: 40px;
}
.subtitles-view dt {
	line-height: 1.8;
	font-size: 0.875rem;
}
.subtitles-view dd {
	margin: 5px 0 0 1em;
}
.subtitles-view dd p {
	font-size: 0.875rem;
	line-height: 1.8;
}
.subtitles-view dd p + p {
	margin-top: 25px;
}

.subtitles-view dl.credit {
	margin: 60px 0 0;
	padding: 30px 0 0;
	border-top: 1px solid #000;
}
.subtitles-view dl.credit dd {
	margin: 5px 0 0;
	line-height: 1.6;
	font-size: 0.8125rem;
}

.subtitles-view .end-roll {
	margin-top: 30px;
}
.subtitles-view .end-roll p {
	font-size: 0.8125rem;
}


.subtitles-view nav.return {
	margin: 0 !important;
}
.subtitles-view nav.return.foot {
	margin: 60px 0 0 !important;
}
.subtitles-view nav.return.foot li:nth-child(1) {
	display: none;
}
.subtitles-view nav.return li + li {
	margin-left: 0;
}



#video-player a.text-ver {
	position: absolute;
	display: inline-block;
	left: 15px;
	top: calc(56.25vw + 15px);
	padding: 5px 10px;
	font-size: 0.75rem;
	color: #000;
	background: #fff;
}
#video-player a.text-ver:focus {
	outline: initial;
}
#video-player a.text-ver .popup {
	position: relative;
	display: inline-block;
	top: 0;
	margin: 0 0 0 5px;
	font-size: 0;
	vertical-align: bottom;
}
#video-player a.text-ver .popup img {
	width: 11px;
	height: 11px;
}


span.text-version {
	display: block;
	margin: 8px 0 0;
}
span.text-version a {
	display: inline-block;
	font-size: 0.75rem;
	color: #000;
	background: #fff;
}
span.text-version a .popup {
	position: relative;
	display: inline-block;
	top: 0;
	margin: 0 0 0 5px;
	font-size: 0;
	vertical-align: bottom;
}
span.text-version a .popup img {
	width: 11px;
	height: 11px;
}

.book-detail .article.multi-video li:nth-child(n + 3) {
	margin-top: 20px !important;
}




/* ---------- */

html:lang(en) .about h2,
html:lang(en) .history h2,
html:lang(en) .profile h2,
html:lang(en) .exhibition h2,
html:lang(en) .kyotosteam h2 {
	line-height: 1.6;
	margin-bottom: 15px;
}