@charset "utf-8";

@keyframes upanddown {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(8px);
	}
}



@media screen and (min-width:834px){


	.only-sp {
		display: none;
	}



	body.geography #wrap > footer {
		display: none;
	}
	
	#n-scrollbar,
	#n-scrollbar-v {
		display: none !important;
	}


	body.page #wrap {
		padding: 80px 0 0;
	}
	#intro {
		position: relative;
		width: 100%;
		height: calc(100vh - 80px);
		z-index: 10;
		overflow: hidden;
	}



	

	body.place #intro h1 {
		position: absolute;
		width: 68vw;
		height: calc(100vh - 80px);
		left: 16vw;
		top: 0;
		z-index: 10;
		background-size: 11vw auto;
		background-size: 10vw auto;
		background-repeat: no-repeat;
		background-position: 100% calc((100vh - 80px) * 0.085);
	}
	#intro strong {
		position: absolute;
		width: 68vw;
		height: calc(100vh - 80px - 9vw);
		left: 16vw;
		top: 0;
		z-index: 10;
		background-size: auto 10vw;
		background-repeat: no-repeat;
		background-position: 0% 100%;
	}
	
	/*
	#intro em {
		position: absolute;
		display: block;
		left: 50%;
		top: 50%;
		z-index: 20;
		transform: translate(-50%, -50%);
	}
	*/
	#intro em i {
		position: absolute;
		display: block;
		width: 1px;
		height: 28vw;
		left: 68%;
		top: 8.5%;
		z-index: 20;
		background: #fff;
	}
	#intro span {
		position: absolute;
		display: block;
		width: 100%;
		height: calc(100vh - 80px + 100px);
		background-position: 50% 50%;
		background-size: cover;
	}
	
	#intro .overlay {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 5;
		background: rgba(0,0,0,0.15);
		visibility: hidden;
	}
	


	body.place #intro h1,
	#intro strong {
		opacity: 0;
		transform: translateY(50px);
		transition: transform 700ms ease-in-out 1500ms, opacity 700ms ease-in-out 1500ms;
	}
	#intro em i {
		transform-origin: left top;
		transform: scaleY(0);
		transition: transform 600ms linear 800ms;
	}

	#intro span {
		opacity: 0;
		transition: opacity 500ms linear 0ms;
	}


	body.place.start #intro h1,
	body.place.start #intro strong {
		opacity: 1;
		transform: translateY(0px);
	}
	body.page.start #intro em i {
		transform: scaleY(1);
	}
	body.page.start #intro span {
		opacity: 1;
	}
	body.page.start #intro .overlay {
		visibility: visible;
	}




	#intro .scroll {
		position: absolute;
		display: block;
		width: 34px;
		height: 42px;
		left: 50%;
		bottom: 20px;
		z-index: 200;
		margin: 0 0 0 -17px;
		background: url(../img/scroll_label.svg) 50% 0 no-repeat;
		background-size: 34px auto;
		opacity: 0;
		transition: opacity 500ms linear 2000ms;
		cursor: pointer;
	}
	#intro .scroll i {
		position: absolute;
		display: block;
		width: 100%;
		height: 16px;
		left: 0;
		bottom: 0;
		background: url(../img/scroll_arrow.svg) 50% 50% no-repeat;
		background-size: 30px auto;
	}
	body.place.start #intro .scroll {
		opacity: 1;
	}
	body.start #intro .scroll i {
		will-change: transform;
		animation: upanddown 800ms infinite alternate ease-in-out;
	}
	

	




	#detail * {
		font-variant-ligatures: none;
	}
	#detail .update {
		width: 100% !important;
		margin-top: 20px;
		text-align: right;
	}
	#detail .note {
		width: 100% !important;
		margin-top: 20px;
		font-size: 16px !important;
	}
	#detail section figure {
		position: relative;
		width: 928px;
		height: 522px;
		margin: 0 auto;
		overflow: hidden;
	}
	#detail section article {
		width: 928px;
		margin: 0 auto;
		padding-top: 33px;
	}
	#detail section + section {
		margin-top: 120px;
	}
	
	
	#detail .type-0 article p {
		font-size: 20px !important;
		text-align: left !important;
	}
	html:lang(en) #detail .type-0 article p {
		font-size: 21px !important;
		letter-spacing: 1px;
	}
	
	
	html:lang(ja) #detail section article p {
		width: 680px;
		font-size: 17px;
		line-height: 32px;
		text-align: justify;
	}
	html:lang(en) #detail section article p {
		width: 680px;
		font-size: 19px;
		line-height: 31px;
	}
	html:lang(cn) #detail section article p {
		width: 540px;
		font-size: 17px;
		line-height: 32px;
		text-align: justify;
	}
	

	#detail section figure div {
	}

	#detail section.type-0 article {
		margin-top: 0;
		padding: 80px 0 32px;
	}
	#detail section.type-0 + section {
		margin-top: 0;
	}
	#detail section.type-0 article p {
		font-size: 16px;
		line-height: 2.6;
		text-align: center;
	}














	#detail section figure {
		opacity: 0;
		transform: translateY(100px);
		transition: all 1000ms ease-out;
	}
	#detail section article {
		opacity: 0;
		transform: translateY(100px);
		transition: all 1000ms ease-out 100ms;
	}


	#detail section.type-0 article {
		transition-delay: 0ms;
	}



	#detail section.active figure,
	#detail section.active article,
	#detail section figure.active,
	#detail section article.active {
		opacity: 1;
		transform: translateY(0px);
	}
	#detail section.active article {
		opacity: 1;
		transform: translateY(0px);
	}









	#logo a {
		transition: opacity 800ms ease-out;
	}
	body.video #logo a:nth-child(1) {
		opacity: 0;
	}
	body.video #logo a:nth-child(2) {
		opacity: 1;
	}

	body.video.map #logo a:nth-child(1) {
		opacity: 1;
	}
	body.video.map #logo a:nth-child(2) {
		opacity: 0;
	}


	#wrap > header {
		transition: background 800ms ease-out;
	}
	#wrap > header nav a {
		color: #333;
		transition: color 800ms ease-out;
	}
	body.video #wrap > header {
		background: #000;
	}
	body.video #wrap > header nav a {
		color: #fff;
	}
	body.video #wrap > header nav a:hover {
		color: #aaa;
	}


	body.video.map #wrap > header {
		background: rgba(255,255,255,0.85);
	}
	body.video.map #wrap > header nav a {
		color: #000;
	}
	body.video.map #wrap > header nav a:hover {
		color: #888;
	}




	


	/*
	#video {
		height: 200vh;
	}
	#map {
		height: 100vh;
	}
	*/



	#video {
		position: relative;
		width: 100%;
		height: 56.25vw;
		z-index: 50;
		padding: 50vh 0 0;
	}
	



	#video a.thumb {
		position: absolute;
		display: block;
		width: 100vw;
		height: calc(100vw / 16 * 9);
		max-height: 800px;
		left: 0;
		background-position: 50% 50%;
		background-size: contain;
		background-repeat: no-repeat;
	}
	#video a.button {
		position: absolute;
		display: block;
		width: 100vw;
		height: calc(100vw / 16 * 9);
		max-height: 800px;
		left: 0;
		top: 50vh;
		z-index: 10;
		background: url(../img/playmovie.png) 15% 50% no-repeat;
		background-size: 164px auto;
		will-change: transform opacity;
	}
	
	#video .player {
		position: absolute;
		display: block;
		width: 100vw;
		height: calc(100vw / 16 * 9);
		max-height: 800px;
		left: 0;
		z-index: 20;
	}
	#video .player iframe {
		position: absolute;
		width: auto;
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	
	#video .player iframe:fullscreen {
		position: static;
		transform: none;
	}
	#video .player iframe:-webkit-full-screen {
		position: static;
		transform: none;
	}
	
	
	/*
	#video a.button {
		position: absolute;
		display: block;
		width: 164px;
		height: 50px;
		left: 50%;
		top: calc(100vw / 16 * 9 / 2 + 50vh);
		z-index: 10;
		margin-top: -25px;
		background: url(../img/play_video.svg) 0 0 no-repeat;
		background-size: 100% auto;
		will-change: transform opacity;
	}
	*/

	#video a.thumb {
		opacity: 0;
		transform: translateY(10vh);
		transition: all 1000ms ease-out;
	}
	#video a.button {
		opacity: 0;
		transform: translateY(30px);
		transition: all 500ms ease-out;
	}
	body.video #video a.thumb {
		opacity: 1;
		transform: translateY(0px);
		transition-delay: 0ms;
	}
	body.video #video a.button {
		opacity: 1;
		transform: translateY(0px);
		transition-delay: 500ms;
	}


	
	



	#video {
		transition: all 1000ms ease-out;
	}


	body.video.map #video {
		transform: translateY(-25vh);
	}
	
	
	body.place {
		transition: background 600ms linear;
	}
	body.place.video {
		background: #000;
	}
	body.place.video.map {
		background: #fff;
		transition-duration: 400ms;
		transition-delay: 0ms;
	}



	body.place.bye-map,
	body.place.bye-map #wrap > header,
	body.place.bye-map #wrap > header * {
		transition-delay: 0ms !important;
	}
	
	
	body.place.video #detail p {
		color: #000;
	}




	#map {
		position: relative;
		width: 100%;
		height: 150vh;
		left: 0;
		top: 0;
		z-index: 51;
	}
	#map > .inner {
		position: fixed;
		width: 100%;
		height: 0vh;
		left: 0;
		top: 0;
		overflow: hidden;
	}


	#map .info {
		position: absolute;
		box-sizing: border-box;
		width: 740px;
		height: 100vh;
		z-index: 50;
		left: 50%;
		top: 0;
		margin-left: -370px;
	}
	#map .info .inner {
		display: table-cell;
		width: 740px;
		height: 100vh;
		vertical-align: middle;
	}
	#map .info h3 {
		width: 740px;
		margin: 0 0 40px;
		font-size: 20px;
	}
	#map .info dl {
		width: 740px;
		font-size: 13px;
	}
	#map .info dt {
		margin: 0 0 10px;
	}
	#map .info dd {
		line-height: 1.8;
	}
	#map .info dl + dl {
		margin-top: 35px;
	}
	#map .info dt:after {
		content: "";
		position: relative;
		display: inline-block;
		width: 1px;
		height: 13px;
		top: -2px;
		margin-left: 6px;
		background: #000;
		vertical-align: middle;
	}
	#map .info h4 {
		width: 740px;
		margin: 0 0 5px;
		font-size: 17px;
		line-height: 1.8;
	}
	#map .info .address {
		width: 740px;
		font-size: 17px;
		line-height: 1.8;
	}
	#map .info .gmap {
		margin: 10px 0 0;
		font-size: 16px;
		font-family: adobe-garamond-pro, serif;
		line-height: 1.8;
		letter-spacing: 1px;
	}
	#map .info .gmap a {
		position: relative;
		display: inline-block;
		padding-bottom: 3px;
	}
	#map .info .gmap a:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 1px;
		left: 0;
		bottom: 0;
		background: #000;
	}
	#map .info .gmap a:hover:after {
		visibility: hidden;
	}


	


	#map .info .url {
		margin: 20px 0 0;
		font-size: 13px;
		font-family: adobe-garamond-pro, serif;
		line-height: 1.8;
		letter-spacing: 1px;
	}
	#map .info .url a {
		position: relative;
		display: inline-block;
		padding-bottom: 3px;
	}
	#map .info .url a:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 1px;
		left: 0;
		bottom: 0;
		background: #000;
	}
	#map .info .url a:hover:after {
		visibility: hidden;
	}

	#map .info.multi .gmap,
	#map .info.multi .url {
		margin-top: 5px;
	}
	#map .info.multi h4:nth-of-type(2) {
		margin-top: 30px;
	}


	#map .japan {
		position: absolute;
		width: 100vw;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
	}
	#map .japan .inner,
	#map .marker .inner {
		position: absolute;
		width: 4000px;
		height: 4000px;
		left: 50%;
		top: 50%;
		z-index: 10;
		margin: -2000px 0 0 -2000px;
	}
	#map .japan .inner {
		transform: scale(1.2);
		background: url(../img/map_high.jpg) 0 0 no-repeat;
		background-size: 100% auto;
		transform-origin: left top;
	}
	#map .japan .inner,
	#map .marker .inner {
		transition: all 1400ms cubic-bezier(0.785, 0.135, 0.150, 0.860) 3000ms;
	}
	
	#map .marker .inner strong {
		position: absolute;
		display: block;
		width: 24px;
		height: 33px;
		z-index: 5;
		margin-top: -33px;
		background: url(../img/flag.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	#map .marker .inner em {
		position: absolute;
		display: block;
		width: 600px;
		height: 600px;
		z-index: 10;
		margin: -268px 0 0 -301px;
	}
	#map .marker .inner em i {
		display: block;
		height: 600px;
		border: 1px solid #eb3200;
		border-radius: 301px;
	}




	#map .info {
		opacity: 0;
		transform: translateY(25px);
		transition: all 500ms ease-out;
	}


	#map .japan {
		opacity: 0;
		transform: translateY(50vh);
		transition: all 800ms ease-out;
	}
	#map .marker .inner strong {
		transform-origin: left bottom;
		transform: scale(0) rotate(10deg);
	}
	#map .marker .inner em {
		opacity: 0;
	}
	#map .marker .inner em i {
		transform: scale(0);
	}


	body.map #map > .inner {
		height: 100vh;
	}
	body.map #map .japan {
		opacity: 1;
		transform: translateY(0px);
		transition-delay: 500ms;
	}
	body.map #map .marker .inner strong {
		animation: flag 600ms ease-in-out 1500ms forwards;
	}
	body.map #map .marker .inner em {
		animation: circle_opacity 1500ms ease-out 1600ms forwards;
	}
	body.map #map .marker .inner em i {
		animation: circle_scale 1500ms ease-out 1600ms forwards;
	}
	body.map #map .info {
		opacity: 1;
		transform: translateY(0px);
		transition-delay: 3000ms;
	}

	body.bye-map #map {
		opacity: 0;
		transition: opacity 400ms linear;
	}
	body.bye-map #map * {
		transition-delay: 500ms !important;
		animation-delay: 500ms !important;
	}
	
	
	
	
	
	
	
	
	

	@keyframes flag {
		0% {
			transform: scale(0) rotate(10deg);
		}
		50% {
			transform: scale(1.2) rotate(10deg);
		}
		100% {
			transform: scale(1) rotate(0deg);
		}
	}
	@keyframes circle_opacity {
		0% {
			opacity: 1;
		}
		80% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes circle_scale {
		0% {
			transform: scale(0);
		}
		100% {
			transform: scale(1);
		}
	}















	#detail section.type-1 figure span {
		position: absolute;
		display: block;
		width: 1028px;
		height: 578px;
		left: 0%;
		top: 0%;
		margin: -50px 0 0 -10px;
		background-size: cover;
	}


	.transition1 {
		animation-name: transition1, fadeout1;
		animation-duration: 6000ms;
		animation-timing-function: linear;
		animation-fill-mode: forwards, forwards;
		animation-iteration-count: 1;
	}
	.transition1 span {
		z-index: 1;
	}
	.transition1 span:nth-child(1) {
		z-index: 100;
	}

	@keyframes transition1 {
		0% {
			transform: translateX(0px);
		}
		100% {
			transform: translateX(-40px)
		}
	}
	@keyframes fadeout1 {
		0% {
			opacity: 1;
		}
		85% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}




	#detail section.type-1.slow figure span {
		width: 972px;
		height: 547px;
		margin: -25px 0 0 -12px;
		background-size: cover;
		background-position: 50% 50%;
	}
	
	#detail section.type-1.slow .transition1 {
		animation-name: transition1_s, fadeout1;
	}

	@keyframes transition1_s {
		0% {
			transform: translateX(0px);
		}
		100% {
			transform: translateX(-20px)
		}
	}
	
	
	
	
	
	
	
	


	/*
	#detail section.type-2 figure {
		height: 472px;
	}
	*/
	#detail section.type-2 figure span {
		position: absolute;
		display: block;
		width: 1017px;
		height: 572px;
		left: 0%;
		top: 0%;
		margin: -50px 0 0 -44px;
		background-size: 100% auto;
		background-position: 50% 50%;
	}




	.transition2 {
		animation-name: transition2, fadeout2;
		animation-duration: 6000ms;
		animation-timing-function: linear;
		animation-fill-mode: forwards, forwards;
		animation-iteration-count: 1;
	}
	.transition2 span {
		z-index: 1;
	}
	.transition2 span:nth-child(1) {
		z-index: 100;
	}

	@keyframes transition2 {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(1.05)
		}
	}
	@keyframes fadeout2 {
		0% {
			opacity: 1;
		}
		85% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	
	
	
	#detail section.type-2.no-trim figure span {
		width: 928px !important;
		height: 522px !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
	}
	#detail section.type-2.no-trim figure .inner {
		transform: translate(0px, 0px) !important;
	}
	#detail section.type-2.no-trim.simple .transition2 {
		animation-name: fadeout2;
	}




	#detail section.type-2.slow figure span {
		position: absolute;
		display: block;
		width: 972px;
		height: 547px;
		left: 0%;
		top: 0%;
		margin: -25px 0 0 -22px;
		background-size: 100% auto;
		background-position: 50% 50%;
	}
	



	#detail section.type-3 figure div.extra {
		position: relative;
		width: 100%;
		height: 100%;
	}
	#detail section.type-3 figure span {
		position: absolute;
		display: block;
		background-size: cover;
		background-position: 50% 50%;
		overflow: hidden;
	}
	#detail section.type-3 figure span em {
		position: absolute;
		display: block;
		background-size: cover;
		background-position: 50% 50%;
	}

	#detail section.type-3 figure span:nth-child(1) {
		width: 1017px;
		height: 572px;
		left: 0%;
		top: 0%;
		margin: -50px 0 0 -44px;
		z-index: 20;
	}
	#detail section.type-3 figure span:nth-child(n + 2) {
		width: 464px;
		height: 261px;
		z-index: 10;
	}
	#detail section.type-3 figure span:nth-child(n + 2) em {
		width: 514px;
		height: 289px;
		margin-top: -13px;
	}
	#detail section.type-3 figure span:nth-child(2) {
		left: 0;
		top: 0;
	}
	#detail section.type-3 figure span:nth-child(3) {
		right: 0;
		top: 0;
	}
	#detail section.type-3 figure span:nth-child(4) {
		left: 0;
		bottom: 0;
	}
	#detail section.type-3 figure span:nth-child(5) {
		right: 0;
		bottom: 0;
	}

	#detail section.type-3 figure span:nth-child(1) video,
	#detail section.type-3 figure span:nth-child(1) img {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%)
	}


	#detail section.type-3 figure span:nth-child(1) {
		transition: opacity 800ms ease-out;
	}
	#detail section.type-3.transition3 figure span:nth-child(1) {
		opacity: 0;
	}

	#detail section.type-3 figure span:nth-child(n + 2) {
		transition: all 800ms ease-out;
	}
	#detail section.type-3.transition3 figure span:nth-child(n + 2) {
		width: 454px;
		height: 251px;
	}

	#detail section.type-3 figure span:nth-child(n + 2) em {
		transition: transform 0ms linear;
	}
	#detail section.type-3 figure span:nth-child(n + 2) em.active {
		transform: translateX(-50px);
		transition-duration: 7000ms;
	}









	/*
	#detail section.type-4 figure {
		width: 100%;
	}
	#detail section.type-4 figure span {
		position: absolute;
		display: block;
		width: 1088px;
		height: 100%;
		top: 0%;
		background-size: cover;
		visibility: hidden;
		overflow: hidden;
	}
	#detail section.type-4 figure span em {
		position: absolute;
		display: block;
		width: 2180px;
		height: 1215px;
		margin: -300px 0 0 -980px;
		background-size: cover;
	}

	#detail section.type-4 figure span:nth-child(1) {
		left: calc(50% - 544px);
		visibility: visible;
	}
	#detail section.type-4 figure span:nth-child(2) {
		left: calc(50% + 544px + 30px);
		visibility: visible;
	}
	#detail section.type-4 figure span:last-child {
		left: calc(50% - 544px - 1088px - 30px);
		visibility: visible;
	}



	#detail section.type-4 figure span {
		transition-property: transform;
		transition-timing-function: linear;
	}
	#detail section.type-4 figure span em {
		transition-property: transform;
		transition-timing-function: linear;
	}




	#detail section.type-4 figure div {
		position: relative;
		height: 612px;
		transition-property: transform;
		transition-timing-function: linear;
	}
	*/







	#detail section.type-4 {
		margin-top: 100px;
	}
	#detail section.type-4 figure {
		width: 100vw;
		overflow: hidden;
	}
	#detail section.type-4 figure div.extra {
		position: relative;
		width: 100000px;
		height: 522px;
		white-space: nowrap;
	}


	#detail section.type-4 figure span {
		position: relative;
		display: block;
		float: left;
		width: 928px;
		overflow: hidden;
		
		height: 572px;
		margin-top: -50px;
	}
	#detail section.type-4 figure span + span {
		margin-left: 30px;
	}
	
	#detail section.type-4 figure span.valign-top {
		margin-top: -30px;
	}
	#detail section.type-4 figure span.valign-bottom {
		margin-top: -210px;
	}

	#detail section.type-4 figure span em {
		position: absolute;
		display: block;
		width: 1538px;
		height: 865px;
		margin-left: -450px;
		background-position: 50% 50%;
		background-size: cover;
		
		width: 928px;
		height: 572px;
		margin-left: 0;
	}
	
	#detail section.type-4 figure span em video {
		position: absolute;
		width: 1538px;
		height: 865px;
		left: 0;
		top: 50%;
		
		width: 1200px;
		height: 764px;
		transform: translateY(-50%);
	}

	/*
	#detail section.type-4 figure span:nth-child(1) {
		left: calc(50% - 544px);
		visibility: visible;
	}
	#detail section.type-4 figure span:nth-child(2) {
		left: calc(50% + 544px + 30px);
		visibility: visible;
	}
	#detail section.type-4 figure span:last-child {
		left: calc(50% - 544px - 1088px - 30px);
		visibility: visible;
	}



	#detail section.type-4 figure span {
		transition-property: transform;
		transition-timing-function: linear;
	}
	#detail section.type-4 figure span em {
		transition-property: transform;
		transition-timing-function: linear;
	}
	*/


	#detail section.type-4 figure div.extra.m1 {
		transition: transform 4000ms linear;
	}
	#detail section.type-4 figure div.extra.m2 {
		transition: transform 600ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
	}

	#detail section.type-4 figure div.extra.m1 em {
		transition: transform 4000ms linear, opacity 1000ms ease-out 4300ms;
	}
	#detail section.type-4 figure div.extra.m2 em {
		transition: transform 600ms cubic-bezier(0.785, 0.135, 0.150, 0.860), opacity 1000ms ease-out 4300ms;
	}

	#detail section.type-4 figure div.extra.m1 em.direct,
	#detail section.type-4 figure div.extra.m2 em.direct {
		transition-duration: 0ms;
	}



	#detail section.type-4.no-trim figure span,
	#detail section.type-4.no-trim figure span em {
		height: 522px;
		margin-top: 0;
	}
	#detail section.type-4.no-trim figure .inner {
		transform: translate(0px, 0px) !important;
	}
	#detail section.type-4.no-trim figure span em + em {
		opacity: 0;
	}
	#detail section.type-4.no-trim figure span.swap em + em {
		opacity: 1;
	}
	#detail section.type-4.no-trim figure span.direct-swap em + em {
		transition-delay: 0ms !important;
	}
	
	




	#detail section.type-5 figure span {
		position: absolute;
		display: block;
		width: 1017px;
		height: 572px;
		left: 0%;
		top: 0%;
		margin: -50px 0 0 -44px;
		background-size: cover;
	}
	#detail section.type-5 figure video {
		position: absolute;
		width: 100;
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%)
	}










/*
	#geography {
		min-height: 100vh;
	}
	#geography-place {
		position: relative;
		width: 200px;
		left: 50%;
		z-index: 90;
		margin-left: -450px;
		padding: 35px 0;
		font-size: 14px;
	}
	#geography-map {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 100px;
		z-index: 10;
		background: url(../img/map_high.jpg) 50% 0 no-repeat;
		background-size: auto 100%;
	}
	
	
	
	
	
	#geography-place li + li {
		margin-top: 24px;
	}
	#geography-place li a {
		position: relative;
		display: inline-block;
		cursor: pointer;
	}
	#geography-place li a em {
		position: absolute;
		display: block;
		width: 100%;
		height: 1px;
		left: 0;
		bottom: -5px;
		background: #777;

		transform: scaleX(0);
		transform-origin: left top;
		transition: transform 500ms ease-out;
	}
	#geography-place li a.active em {
		transform: scaleX(1);
	}




	#geography-map a {
		position: absolute;
		display: block;
		width: 20px;
		height: 28px;
		left: 50%;
		top:  50%;
		z-index: 5;
		margin-top: -28px;
		background: url(../img/flag.png) 0 0 no-repeat;
		background-size: 100% auto;
		transform-origin: left bottom;
		transform: scale(0) rotate(10deg);
	}
	#geography-map a.active {
		animation: flag 350ms ease-in-out forwards;
	}

	@keyframes flag {
		0% {
			transform: scale(0) rotate(10deg);
		}
		60% {
			transform: scale(1.2) rotate(10deg);
		}
		100% {
			transform: scale(1) rotate(0deg);
		}
	}

	/*
	#geography-map a[data-key="0"] {
		margin: 20.5vh 0 0 -10vh;
	}
	#geography-map a[data-key="1"] {
		margin: 17.5vh 0 0 0.5vh;
	}
	#geography-map a[data-key="2"] {
		margin: 16.5vh 0 0 1vh;
	}
	#geography-map a[data-key="3"] {
		margin: 36vh 0 0 -39vh;
	}
	#geography-map a[data-key="4"] {
		margin: 20.5vh 0 0 -26.5vh;
	}
	#geography-map a[data-key="5"] {
		margin: 25vh 0 0 -16.5vh;
	}
	#geography-map a[data-key="6"] {
		margin: 8vh 0 0 -1.5vh;
	}
	#geography-map a[data-key="7"] {
		margin: 7.5vh 0 0 -2vh;
	}
	#geography-map a[data-key="8"] {
		margin: 27vh 0 0 -43.5vh;
	}
	#geography-map a[data-key="9"] {
		margin: 9.2vh 0 0 -11.75vh;
	}
	#geography-map a[data-key="10"] {
		margin: 7vh 0 0 -4vh;
	}
	#geography-map a[data-key="11"] {
		margin: 3.2vh 0 0 -8.5vh;
	}
	#geography-map a[data-key="12"] {
		margin: 15.75vh 0 0 1.2vh;
	}
	#geography-map a[data-key="13"] {
		margin: 37vh 0 0 -39vh;
	}
	#geography-map a[data-key="14"] {
		margin: -13vh 0 0 8vh;
	}
	#geography-map a[data-key="15"] {
		margin: 20vh 0 0 -14.5vh;
	}
	#geography-map a[data-key="16"] {
		margin: -31.5vh 0 0 9vh;
	}
*/














	.column {
		width: 900px;
		margin: 0 auto;
	}
	.column article {
		margin-left: 250px;
		padding: 60px 0;
	}
	.column article p {
		font-size: 16px;
		line-height: 2.6;
	}
	.column article p + p {
		margin-top: 30px;
	}
	
	
	
	
	
	
	#about {
		width: 1100px;
		margin: 0 auto;
		padding: 90px 0 0;
	}
	#about figure {
		position: absolute;
	}
	#about figure img {
		width: 390px;
		height: auto;
	}
	#about article {
		margin-left: 485px;
		padding: 100px 0 0;
	}
	#about article p {
	}
	#about article p + p {
		margin-top: 30px;
	}
	
	#about article p.credit {
		font-size: 14px !important;
		line-height: 1.8 !important;
		color: #818181;
	}
	
	
	
	
	
	html:lang(ja) #about article p {
		font-size: 17px;
		line-height: 32px;
	}
	html:lang(en) #about article p {
		font-size: 19px;
		line-height: 31px;
	}
	html:lang(cn) #about article p {
		font-size: 17px;
		line-height: 32px;
	}

	html:lang(ja) #about article p:first-child {
		font-size: 20px;
	}
	html:lang(en) #about article p:first-child {
		font-size: 21px;
		letter-spacing: 1px;
	}
	html:lang(cn) #about article p:first-child {
		font-size: 20px;
	}
	
	
	
	
	

	#blog-menu  {
		position: fixed;
		width: 100px;
		height: 100vh;
		left: 50%;
		top: 80px;
		margin-left: -450px;
		overflow: hidden;
	}
	#blog-menu .inner {
		position: fixed;
		width: 117px;
		height: 100vh;
		left: 50%;
		top: 80px;
		margin-left: -450px;
		overflow: hidden;
	}
	#blog-menu .inner ul {
	}

	#blog-menu a {
		font-size: 14px;
		font-family: adobe-garamond-pro, serif;
	}
	#blog-menu li {
		height: 50px;
	}
	#blog-menu li + li {
	}
	#blog-menu .simplebar-track {
		display: none;
	}
	#blog-menu a {
		color: #c8c8c8;
		cursor: pointer;
		transition: all 300ms ease-out;
	}
	#blog-menu a.hover,
	#blog-menu a.active {
		color: #555;
	}
	#blog-menu a.active {
		font-size: 20px;
	}

	#blog-menu .spacer {
		display: block;
	}



	#blog-entry {
		width: 900px;
		margin: 0 auto;
		padding: 60px 0 50vh;
	}
	#blog-entry .entry {
		margin-left: 250px;
	}
	#blog-entry .entry + .entry {
		margin-top: 100px;
	}

	#blog-entry .entry header {
		position: relative;
		height: 75px;
	}
	#blog-entry .entry header .lead {
		position: absolute;
		left: 0;
		top: 0;
		font-size: 14px;
		color: #777;
	}
	#blog-entry .entry header .number {
		position: absolute;
		left: -60px;
		top: 21px;
		font-size: 20px;
		font-family: adobe-garamond-pro, serif;
	}
	#blog-entry .entry header h3 {
		position: relative;
		top: 23px;
	}
	
	
	
	#blog-entry .entry .chapter-title {
		position: relative;
		margin: 0 0 65px -60px;
	}
	#blog-entry .entry .chapter-title h2 {
		margin: 0 0 12px;
	}
	#blog-entry .entry .chapter-title h3 {
	}
	
	
	
	#blog-entry .entry article p {
	}
	#blog-entry .entry article p + p,
	#blog-entry .entry article p + figure,
	#blog-entry .entry article figure + p {
		margin-top: 30px;
	}
	#blog-entry .entry article figure img {
		width: 100%;
		height: auto;
	}
	#blog-entry .entry article figcaption {
		margin-top: 10px;
		color: #999;
	}
	#blog-entry .entry article figcaption + figcaption {
		margin-top: 5px;
	}
	#blog-entry .entry article figcaption a {
		color: #999;
		text-decoration: underline;
	}
	
	html:lang(ja) .entry article p {
		font-size: 16px;
		line-height: 31px;
	}
	html:lang(en) .entry article p {
		font-size: 19px;
		line-height: 31px;
	}
	html:lang(cn) .entry article p {
		font-size: 16px;
		line-height: 31px;
	}

	html:lang(ja) .entry header h3 {
		font-size: 18px;
	}
	html:lang(en) .entry header h3 {
		font-size: 21px;
		letter-spacing: 1px;
	}
	html:lang(cn) .entry header h3 {
		font-size: 18px;
	}



	html:lang(ja) #blog-entry .entry .chapter-title h2 {
		font-size: 20px;
	}
	html:lang(ja) #blog-entry .entry .chapter-title h3 {
		font-size: 18px;
	}
	
	html:lang(en) #blog-entry .entry .chapter-title h2 {
		font-size: 24px;
	}
	html:lang(en) #blog-entry .entry .chapter-title h3 {
		font-size: 21px;
	}
	
	html:lang(cn) #blog-entry .entry .chapter-title h2 {
		font-size: 20px;
	}
	html:lang(cn) #blog-entry .entry .chapter-title h3 {
		font-size: 18px;
	}
	


	html:lang(en) #blog-entry .entry header .number {
		margin-top: 2px;
	}


	html:lang(ja) .entry article figcaption {
		font-size: 14px;
		line-height: 22px;
	}
	html:lang(en) .entry article figcaption {
		font-size: 15px;
		line-height: 22px;
	}
	html:lang(cn) .entry article figcaption {
		font-size: 14px;
		line-height: 22px;
	}
	
	
	
	#blog-entry .ja-in-en {
		font-size: 15px;
	}
	
	
	
	#blog-entry .notes {
		margin: 30px 0 0;
	}
	#blog-entry .notes p {
		font-size: 17px;
		line-height: 1.5 !important;
	}
	#blog-entry .notes p + p {
		margin-top: 15px !important;
	}
}






@media screen and (min-width:834px) and (max-width:1279px) {
	
	#about {
		width: auto;
		margin: 0 auto;
		padding: 90px 40px 0;
	}
	#about figure {
		position: absolute;
	}
	#about figure img {
		width: 31vw;
		height: auto;
	}
	#about article {
		margin-left: 38vw;
		padding: 100px 0 0;
	}
	#about article p {
		font-size: 16px;
		line-height: 2.6;
	}
	#about article p + p {
		margin-top: 30px;
	}

}


@media screen and (min-width:834px) and (max-width:1023px) {

	#blog-menu  {
		left: 50px;
		margin-left: 0;
	}
	#blog-menu .inner {
		left: 50px;
		margin-left: 0;
	}



	#blog-entry {
		width: auto;
		padding-right: 50px;
	}

	
	#geography-place {
		left: 50px;
		margin-left: 0;
	}
}






@media screen and (min-width:834px) and (max-height:600px) {
	body.place #intro h1 {
		width: 27vw;
		height: calc(100vh - 80px);
		left: 73vw;
		background-size: auto calc(100vh - 240px);
		background-position: 0 60px;
	}
	#intro strong {
		position: absolute;
		width: 68vw;
		height: calc(100vh - 80px - 100px);
		left: 16vw;
		top: 0;
		z-index: 10;
		background-size: auto 18vh;
		background-repeat: no-repeat;
		background-position: 0% 100%;
	}
	
	#intro em i {
		height: 55vh;
		top: 60px;
	}
}




@media screen and (min-width:834px) and (max-width:1023px) {
	#detail section figure {
		width: 754px;
		height: 424px;
	}
	#detail section article {
		width: 754px;
	}
	#detail section.type-1 figure span {
		width: 854px;
		height: 480px;
		margin: -50px 0 0 -10px;
	}
	
	#detail section.type-2 figure span {
		width: 854px;
		height: 480px;
		margin: -50px 0 0 -50px;
	}



	#detail section.type-3 figure span:nth-child(1) {
		width: 854px;
		height: 480px;
		margin: -50px 0 0 -50px;
	}
	#detail section.type-3 figure span:nth-child(n + 2) {
		width: 377px;
		height: 212px;
		z-index: 10;
	}
	#detail section.type-3 figure span:nth-child(n + 2) em {
		width: 427px;
		height: 240px;
		margin-top: -16px;
	}

	#detail section.type-3.transition3 figure span:nth-child(n + 2) {
		width: 367px;
		height: 202px;
	}
	
	
	
	#detail section.type-4 figure div.extra {
		height: 424px;
	}



	#detail section.type-5 figure span {
		width: 854px;
		height: 480px;
		margin: -50px 0 0 -50px;
	}
	

}