@charset "utf-8";

html.fac-header-hidden #container_ #header_ {background:rgba(0,0,0,0.8); color:#fff;}
html.fac-header-hidden #container_ #header_ > nav > ul a, 
html.fac-header-hidden #container_ #header_ > nav > ul a:hover::after {border-color:#fff;}
html.fac-header-hidden #container_ #header_ > nav > ul > li.language > a:hover {background-color:#fff; color:#000;}

#contents {margin-top:-100px;}
#contents > header {
	display:-webkit-flex; display:flex; 
	-webkit-flex-direction:column; flex-direction:column; 
	-webkit-justify-content:center; justify-content:center; 
	-webkit-align-items:center; align-items:center; 
	height:100vh; position:relative; margin:0 calc(50% - 50vw); padding:0; background:#000; color:#fff; overflow:hidden;}
#contents > header > * {position:relative; z-index:2;}
#contents > header > .image {min-width:1200px; position:fixed; left:0; right:0; top:0; bottom:0; z-index:1;}
#contents > header > .image::after {
	display:block; content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:#000; opacity:0; pointer-events:none; transition:opacity 0.5s ease-in-out;}
#contents > header > .image > img {display:block; width:auto; min-width:200%; height:auto; min-height:200%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.5);}
#contents > header > .image > img.landscape {}
#contents > header > .image > img.portrait  {display:none;}
#contents > header > h1 {font-size:2.2rem; font-family:inherit; font-weight:bold;}
#contents > header > strong {display:block; font-size:9rem; font-family:inherit; font-weight:500; line-height:1;}
#contents > header > p {margin:0.3em 0 0; font-size:3.6rem; line-height:1;}

html.fac-header-hidden #contents > header > .image::after {opacity:0.6;}

#contents > #message {position:relative; z-index:2; margin:0 auto; color:#fff; font-size:2.8rem; text-align:center;}
#contents > #message > h1 {display:none; font-size:5.4rem;}
#contents > #message > p {margin:2em 0 0;}

#contents > .movie {margin:9em 0 0; z-index:2;}

/* fonts */
#contents > header 
	{font-family:brandon-grotesque,sans-serif;}
#contents > header > p, 
#contents > #message 
	{font-family:YakuHanJP,"Noto Sans JP",Meiryo,sans-serif;}

@media screen and (max-width:1000px) {
#contents > header {margin:0 -30px;}
}

@media screen and (max-width:599px) {

html.fac-header-hidden #container_ #header_ {background:transparent;}

#contents {margin-top:-50px;}
#contents > header {margin:0 -30px; padding:0 0 5vw; box-sizing:border-box;}
#contents > header > * {}
#contents > header > .image {min-width:0;}
#contents > header > .image::after {}
#contents > header > .image > img {}
#contents > header > .image > img.landscape {display:none;}
#contents > header > .image > img.portrait  {display:block;}
#contents > header > h1 {font-size:1.1rem;}
#contents > header > strong {font-size:4.5rem;}
#contents > header > p {font-size:1.1rem;}

html.fac-header-hidden #contents > header > .image::after {}

#contents > #message {font-size:1.3rem;}
#contents > #message > h1 {font-size:2.5rem;}
#contents > #message > p {}
#contents > #message > p *[role="presentation"] {display:inline-block;}

#contents > .movie {}

}