@charset "utf-8";



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

	common

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

@layer reset, base, legacy-component, component, utility;

@import './reset-min.css' layer(reset);

@layer reset {
	* {
		text-rendering: geometricPrecision;
	}
}

/* base */
@layer base {
	@font-face {
		font-family: 'LouisVuitton';
		src: url('../fonts/LouisVuitton-Regular.woff2') format('woff2');
		font-weight: 300;
		font-display: block;
	}

	@font-face {
		font-family: 'LouisVuitton';
		src: url('../fonts/LouisVuitton-Regular-Oblique.woff2') format('woff2');
		font-weight: 300;
		font-style: oblique;
		font-display: block;
	}

	@font-face {
		font-family: 'LouisVuitton';
		src: url('../fonts/LouisVuitton-Medium.woff2') format('woff2');
		font-weight: 400;
		font-display: block;
	}

	@font-face {
		font-family: 'LouisVuitton';
		src: url('../fonts/LouisVuitton-Medium-Oblique.woff2') format('woff2');
		font-weight: 400;
		font-style: oblique;
		font-display: block;
	}

	@font-face {
		font-family: 'LouisVuitton';
		src: url('../fonts/LouisVuitton-Demi.woff2') format('woff2');
		font-weight: 500;
		font-display: block;
	}

	@font-face {
		font-family: 'LouisVuitton';
		src: url('../fonts/LouisVuitton-Demi-Oblique.woff2') format('woff2');
		font-weight: 500;
		font-style: oblique;
		font-display: block;
	}

	:root {
		/* color */
		--color-red: #e00014;
		--color-black: #000;
		--color-gray: #999;
		--color-white: #fff;

		/* exhibition colors */
		--color-exh-dan: #666;
		--color-exh-frank: #3873BA;
		--color-exh-bosch: #294F24;
		--color-exh-rouge: #DF0215;
		--color-exh-insitu: #E41F27;
		--color-exh-mcqueen: #006B82;
		--color-exh-traces: #fe5d4e;
		--color-exh-infinite: #00D8D7;
		--color-exh-traffic: #73b0da;
		--color-exh-urban: #E6B1AC;
		--color-exh-madness: #8F6D06;
		--color-exh-awakening: #760D0A;
		--color-exh-cosmic: #FF8244;
		--color-exh-geometry: #6533FF;
		--color-exh-freefall: #3F8E1B;

		/* font size */
		--font-size-louis-l2: 34px;
		--font-size-louis-l1: 21px;
		--font-size-louis-default: 14px;
		--font-size-louis-s1: 12px;
	}

	html {
		color: var(--color-black);
		overflow-y: scroll;
	}
	
	body {
		font-family: verdana, helvetica, arial, sans-serif;
		font-size: 8pt;
		line-height: 1em;
	}
	
	body.ja {
		font-family: verdana, helvetica, arial, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
	
	body.ja p {
		line-height: 2em;
	}
	
	body.ja p {
		letter-spacing: 0.1em;
	}
	
	body.ja .main_left p {
		letter-spacing: 0;
	}
	
	
	body.ja #artist .main_right p,
	body.ja #artists .main_right p {
		letter-spacing: 0.1em;
	}
	
	
	
	#wrapper {
		margin: 0 auto;
		width: 960px;
	}
	
	*html #wrapper {
		background: url("../images/divider_vertical.gif") repeat-y;
	}
	
	figure {
		margin: 0;
	}
	
	.sup{
		vertical-align: baseline;
		position: relative;
		bottom: 0.2em;
	}
	
	::selection,
	::-moz-selection,
	::-webkit-selection  {
		background: var(--color-black);
		color:var(--color-white);
	}
	
	a {
		outline: none;
		text-decoration: none;
	}
	
	a:link {
		color: var(--color-black);
		text-decoration: underline;
	}
	
	a:visited {
		color: var(--color-black);
		text-decoration: underline;
	}
	
	a:hover {
		color: var(--color-red);
		text-decoration: underline;
	}
	
	a:active {
		color: #666;
		text-decoration: underline;
	}
	
	p {
		line-height: 1.7em;
		margin-bottom: 1.7em;
	}
	
	#main li {
		line-height: 1.7em;
		margin-bottom: 1em;
		margin-left: 2.7em;
		text-indent: -1em;
	}
	
	
	
	/* clearfix */
	
	.clearfix:after {
		content:".";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
	}
	.clearfix{
		display:inline-block;
		/* for IE 7*/
		min-height:1%;
	}
	/* Hides from IE-mac */
	* html .clearfix { height: 1%; }
	.clearfix { display: block; }
	/* End hide from IE-mac */
	
	
	
	#dummy {
		display: block;
		margin: 0 auto;
		width: 960px;
		height: 0;
	}
}

@layer legacy-component {
	/* main */

	#main {
		position: absolute;
		display: block;
		/* width: 697px; */
		margin-top: 0px;
		margin-left: 260px;
		padding-top: 20px;
	}

	@media print {
		#sidebar {
			position: relative !important;
		}
		#main {
			position: relative !important;
			top: 0 !important;
		}
		#dummy {
			display: none !important;
		}
	}

	* html #main {
		/* for ie6 */
		padding-top: 20px;
	}

		#main header {
			position: relative;
			display: block;
			width: 660px;
			text-align: right;
			line-height: 1em;
		}

		#main header a {
			font-size: var(--font-size-louis-s1);
		}

		#main header a.off {
			color: var(--color-gray);
		}

		#main header a.on {
			color: var(--color-black);
		}

		#main header a:hover {
			color: var(--color-red);
		}

		#main section {
			display: block;
		}

		#main .section {
			margin-bottom: 60px;
		}

		#main .main_center {
			width: 660px;
		}

		#main .main_left {
			width: 250px;
			float: left;
			display: inline;
		}

		html*#main .main_left {
			position: relative;
		}

		#main .main_right {
			width: 380px;
			margin-left: 280px;
		}

		#main .block {
			margin-bottom: 30px;
		}

		#main h1 {
			display: block;
			margin-top: 145px;
			font-size: var(--font-size-louis-default);
			letter-spacing: 0.02rem;
		}

		#main hgroup {
			display: block;
			margin-top: 40px;
			margin-bottom: 40px;
		}

		.os-macos #main hgroup {
			margin-top: calc(40px + 1px);
		}

		.os-ios #main hgroup {
			margin-top: calc(40px - 4px);
		}

		.os-windows #main hgroup {
			margin-top: calc(40px - 3px);
		}

		#main h2 {
			display: inline;
			font-size: var(--font-size-louis-l2);
		}

		#main h3 {
			display: block;
			margin-top: 38px;
			height: 14px;
			font-size: 18px;
			font-family: futura2, helvetica, arial, sans-serif;
		}

		#main .attention{
			/* color: var(--color-red);
			font-size: 17px;
			margin-top: 15px;
			border-bottom: 2px solid var(--color-red);
			display: inline-block;
			padding-bottom: 6px; */
			
			margin-top: 9px;
			display: inline-block;
		}
		#main .attention span{
			position: relative;
			font-size: 13px;
			text-transform: uppercase;
			top: -4px;
		}

		#main #artworks h3 {
			line-height: 14px;
			padding-left: 6px;
			border-left: 6px solid;
		}

		#past #main h3 {
			margin-top: 19px;
		}

		html*#main h3 {
			/* for ie6, 7 */
			line-height: 1em;
		}

		#main h4 {
			margin-bottom: 1em;
			padding-left: 6px;
			height: 1em;
			line-height: 0.9em;
			font-size: 11pt;
			font-family: futura2, helvetica, arial, sans-serif;
		}

		body.ja #main h4 {
			padding-left: 5px;
			padding-top: 0px;
			padding-bottom: 0px;
			height: auto;
			line-height: 1.3em;
			font-family: helvetica, arial, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		}

		body.ja #main .small {
			font-size: 7pt;
		}

		*html #main h4 {
			line-height: 1.1em;
		}

		#main h5 {
			font-size: 11pt;
			margin-top: 5px;
			margin-bottom: 20px;
			padding-left: 6px;
		}

		#main figure img {
			margin-bottom: 25px;
		}

		figcaption {
			display: block;
			margin-bottom: 20px;
		}

		figcaption div {
			margin-bottom: 20px;
		}

		figcaption p {
			color: var(--color-gray);
			font-size: 7pt;
			line-height: 1.5em !important;
		}

		figcaption p.title {
			color: var(--color-black);
		}

		#main .divider {
			width: 660px;
			height: 1px;
			background: url("../images/divider_horizon.gif") repeat-x;
		}

		#main #travers {
			width: 660px;
			height: 10px;
			margin-bottom: 11px;
		}

		#main #travers #prev{
			float: left;
			display: inline;
		}

		#main #travers #separate {
			margin-left: 5px;
			margin-right: 5px;
		}

		#main #travers #top {
			float: right;
		}


	/* footer */

	#main footer {
		display: block;
		margin-top: 10px;
		margin-bottom: 20px;
		line-height: 1em;
		width: 660px;
		height: 40px;
		clear: both;
		font-size: 8pt;
	}

	*html #main footer {
		/* for ie6 */
		margin-top: 0;
	}

	#main footer .copyright {
		float: left;
		display: inline;
	}

	#main footer #terms {
		float: right;
	}



	/* #sidebar */

	#sidebar {
		position: fixed;
		width: 220px;
		height: 100%;
		padding-top: 20px;
		float: left;
		display: inline;
		text-align: right;
		line-height: 0;
		font-family: helvetica, arial, sans-serif;
		background: url("../images/divider_vertical.gif") repeat-y;
	}

	* html #sidebar {
		/* for ie6 */
		position: relative;
		background: none;
		top: 0;
	}

	*:first-child+html #sidebar {
		/* for ie7 */
		margin-left: -260px;
	}

		#sidebar #logo {
			margin-bottom: 100px;
			padding-right: 40px;
		}

		#sidebar nav {
			display: block;
			padding-right: 40px;
			font-size: var(--font-size-louis-default);
		}

		#sidebar nav ul {
			zoom: 1;
		}

		#sidebar nav ul li.subMenu {
			display: none;
			font-size: var(--font-size-louis-s1);
		}

		#sidebar nav ul li {
			margin-bottom: 30px;
			zoom: 1;
		}

		#sidebar nav ul #nav04 {
			margin-top: 100px;
		}

			html*#sidebar nav ul li ul {
				/* for ie6,7 */
				margin-bottom: -20px;
			}

			html*#sidebar nav {
				/* for ie6,7 */
				font-size: 0;
			}

			#sidebar nav ul li ul li {
				margin-bottom: 20px;
				font-size: var(--font-size-louis-s1);
			}

		#sidebar #triangle {
			position: absolute;
			right: 0;
			top: 0;
			margin-top: -1px;
		}






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

		news

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



	/* open subMenu */

	body#news #sidebar #nav01.subMenu { display: none; }
	body#news #sidebar #nav03.subMenu { display: none; }



	/* triangle position */

	body#news #sidebar #triangle { top: 355px; }

	body#news.osaka #sidebar #triangle { top: 306px; }


	body#news #main article hgroup {
		/*font-family: futura, helvetica, arial, sans-serif;*/
		font-family: helvetica, arial, sans-serif;
		margin-top: 43px;
	}

	body#news #main article hgroup a {
		text-decoration: none;
	}

	body#news #main article h2 {
		font-size: 22.5pt;
		letter-spacing: 0.01em;
		text-transform: uppercase;
		line-height: 1.2em;
	}

	body#news #main article h3 {
		margin-top: 40px;
		font-size: 8pt;
	}

	body#news html*#main article h3 {
	margin-top: 22px;
	}

	*:first-child+html body#news #main article h2 {
		/* for ie7 */
		height: 25px;
		padding-bottom: 5px;
		margin-bottom: -9px;
	}

	*:first-child+html body#news #main article h3 {
		/* for ie7 */
		height: 10px;
		padding-top: 30px;
		margin-top: -2px;
		line-height: 1em;
	}

	body#news #main article #readMore {
		margin-top: 1em;
	}


	sup {
		vertical-align: text-top;
		position: relative;
		top: -2px;
		transform: translateX(-0.1rem) scale(.8,.8);
		display: inline-block;
	}





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

		past

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



	/* open subMenu */

	body#past #sidebar #nav01.subMenu { display: none; }
	body#past #sidebar #nav03.subMenu { display: none; }



	/* triangle position */

	body#past #sidebar #triangle { top: 268px; }

	body#past #main .section {
		margin-bottom: 0;
	}

	body#past #main .section h2 {
		letter-spacing: 0;
	}

	body#past #main .section p {
		font-size: var(--font-size-louis-l1);
		letter-spacing: 0;
		line-height: 1;
		margin: 0;
	}

	body#past #main .section h2 + p {
		margin-top: 0.5rem;
	}

	body#past #main .section p.date {
		margin-top: 1rem;
	}

	body#past #main .section a:hover {
		color: inherit;
	}






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

		terms

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



	/* open subMenu */

	body#terms #sidebar #nav01.subMenu { display: none; }
	body#terms #sidebar #nav03.subMenu { display: none; }



	/* triangle position */

	body#terms #sidebar #triangle { display: none; }


	body#terms #main p {
		margin-bottom: 2em;
	}

	body#terms #main p.listHeader {
		margin-bottom: 1em;
	}

	body#terms #main ul {
		margin-bottom: 2em;
	}

	body#terms #main .section h2 {
		letter-spacing: 0.16rem;
	}






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

		about

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



	/* open subMenu */

	body#about #sidebar #nav01.subMenu { display: none; }
	body#about #sidebar #nav03.subMenu { display: block; }



	/* triangle position */

	body#about #sidebar #triangle { top: 306px; }

	body#about #main #map {
		width: 660px;
		height: 400px;
		margin-bottom: 30px;
	}

	body#about #main #access table {
		width: 660px;
	}

	*html body#about #main #access table p {
		height: 1.5em;
	}

	body#about #main #access table tr {
		vertical-align: top;
	}

	body#about #main #access table th {
		width: 120px;
	}

	body#about #main #access table th p {
		line-height: 0.85em;
		margin-top: 0.55em;
		padding-left: 6px;
		border-left: 6px var(--color-black) solid;
	}

	*html body#about #main #access table th p {
		line-height: 1.7em;
		margin-top: 0em;
	}

	body#about #main #access div.main_center section.block p iframe {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);

	}






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

		exhibition

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



	body.exhibition {
		background-color: var(--color-white);
		background-attachment: fixed;
	}

	body.exhibition #main figure img {
		border: 1px solid #ccc;
	}

	body.exhibition #main figure.borderNone img {
		border: none;
	}

	body.exhibition #main #artists .artist,
	body.exhibition #main #artist .artist {
		margin-bottom: 40px;
	}

	body.exhibition #main #about figure img,
	body.exhibition #main #artists figure img,
	body.exhibition #main #artist figure img {
		margin-bottom: 15px;
	}

	body.exhibition #main #movie .movieSet,
	body.exhibition #main #movies .movieSet,
	body.exhibition #main #event .movieSet,
	body.exhibition #main #events .movieSet
	{
		margin-bottom: 40px;
	}

	body.exhibition #main #movie .movieSet .movieTitle,
	body.exhibition #main #movies .movieSet .movieTitle,
	body.exhibition #main #event .movieSet .movieTitle,
	body.exhibition #main #events .movieSet .movieTitle
	{
		margin-top: 20px;
	}

	body.exhibition #main #movie .movieSet .movieCaption,
	body.exhibition #main #movies .movieSet .movieCaption,
	body.exhibition #main #event .movieSet .movieCaption,
	body.exhibition #main #events .movieSet .movieCaption
	{
		margin-top: 20px;
		color: var(--color-gray);
		line-height: 2em;
	}

	body.exhibition #main h3 {
		margin-top: 38px;
	}

	body.exhibition #main h4 {
		border-left: 6px solid;
	}

	body.ja.exhibition  #main h4 {
		border-left: 5px solid;
	}



	/* build gallery */

	body.exhibition  #photoGallery .gallery {
		width: 660px;
	}

	body.exhibition  #photoGallery .gallery .galleryMain {
		margin-bottom: 30px;
		height: 500px;
		overflow: hidden;
	}

	body.exhibition  #photoGallery .gallery .galleryMain img {
	/*	position: absolute;*/
	}

	body.exhibition  #photoGallery .gallery .galleryCaption {
		margin-bottom: 30px;
		color: var(--color-gray);
		line-height: 1.5em;
	}
	body.exhibition  #photoGallery .gallery .galleryCaption b {
		font-weight: unset;
		color: var(--color-black);
	}

	body.exhibition  #photoGallery .gallery .galleryThumbs {
		width: 690px;
	}

	body.exhibition  #photoGallery .gallery .galleryThumbs .galleryThumb {
		float: left;
		display: inline;
		width: 108px;
		height: 108px;
		margin-right: 30px;
		margin-bottom: 30px;
		overflow: hidden;
		background-color: var(--color-gray);
	}

	body.exhibition  #photoGallery .gallery .galleryThumbs .galleryThumb.current {
		border: 4px var(--color-red) solid;
	}

	body.exhibition  #photoGallery .gallery .galleryThumbs .galleryThumb.over {
		border: 4px var(--color-black) solid;
	}

	body.exhibition  #photoGallery .gallery .galleryThumbs .galleryThumb.over,
	body.exhibition  #photoGallery .gallery .galleryThumbs .galleryThumb.current {
		width: 100px;
		height: 100px;
	}

	body.exhibition  #photoGallery .gallery .galleryThumbs .galleryThumb.over img,
	body.exhibition  #photoGallery .gallery .galleryThumbs .galleryThumb.current img {
		margin-top: -4px;
		margin-left: -4px;
	}
}

@layer utility {
	/* font family */
	.u-font-family-louis {
		font-family: 'LouisVuitton', sans-serif;
		border: none;
		text-decoration: none;
		word-spacing: normal;
		line-height: 1;
		vertical-align: bottom;
	}

	.os-windows #main header .u-font-family-louis {
		vertical-align: top
	}

	/* font weight */
	.u-font-weight-regular {
		font-weight: 300;
	}

	.u-font-weight-medium {
		font-weight: 400;
	}

	.u-font-weight-demi {
		font-weight: 500;
	}

	/* font size */
	.u-font-size-l2 {
		font-size: var(--font-size-louis-l2);
	}

	.u-font-size-l1 {
		font-size: var(--font-size-louis-l1);
	}

	.u-font-size-default {
		font-size: var(--font-size-louis-default);
	}

	.u-font-size-s1 {
		font-size: var(--font-size-louis-s1);
	}

	/* font colors */
	.u-color-black { color: var(--color-black); }
	.u-color-gray { color: var(--color-gray); }
	.u-color-white { color: var(--color-white); }
	.u-color-red { color: var(--color-red); }
	
	/* exhibition colors */
	.u-color-exh-dan { color: var(--color-exh-dan); }
	.u-color-exh-frank { color: var(--color-exh-frank); }
	.u-color-exh-bosch { color: var(--color-exh-bosch); }
	.u-color-exh-rouge { color: var(--color-exh-rouge); }
	.u-color-exh-insitu { color: var(--color-exh-insitu); }
	.u-color-exh-mcqueen { color: var(--color-exh-mcqueen); }
	.u-color-exh-traces { color: var(--color-exh-traces); }
	.u-color-exh-infinite { color: var(--color-exh-infinite); }
	.u-color-exh-traffic { color: var(--color-exh-traffic); }
	.u-color-exh-urban { color: var(--color-exh-urban); }
	.u-color-exh-madness { color: var(--color-exh-madness); }
	.u-color-exh-awakening { color: var(--color-exh-awakening); }
	.u-color-exh-cosmic { color: var(--color-exh-cosmic); }
	.u-color-exh-geometry { color: var(--color-exh-geometry); }
	.u-color-exh-freefall { color: var(--color-exh-freefall); }
	
	/* font style */
	.u-font-style-oblique {
		font-style: oblique;
	}
	
	/* text decoration */
	.u-text-line-through { text-decoration: line-through; }

	/* margins */
	.u-mt-1 { margin-top: 1rem; }
	.u-mt-0625 { margin-top: 0.625rem; }

	/* separator */
	.u-separator {
		position: relative;
		padding: 0 0.9ch;
	}
	
	.u-separator::before {
		position: absolute;
		content: "--";
		top: -0.2cap;
		left: 0.555ch;
	}
	
	.os-windows .u-separator::before {
		top: 0.0cap;
	}

	.u-separator-single {
		position: relative;
		padding: 0 0.3ch;
	}

	.u-separator-single::before {
		position: absolute;
		content: "-";
		top: -0.2cap;
		left: 0.2ch;
	}
}