/* pc */
	/* general */
		body { max-width: 100% !important; }

		/* モダンブラウザ用*/
		img,iframe,object {max-width:100%;vertical-align:top;}

		div#wrapper {
			background-color:#fefefe;
			font-family: 'Noto Sans JP', sans-serif;
			font-size: 1vw;
			overflow: hidden;
			text-align:center;
		}

		div#wrapper, 
		div#wrapper * {
			box-sizing: border-box;
		}

		div#wrapper img {
			width: 100%;
		}

		div#wrapper ul {
			list-style: none;
		}

		div#wrapper a {
			color: #000 !important;
			text-decoration: none !important;
		}

		div#wrapper a:hover {
			opacity: 0.7;
		}

		div#wrapper br.br_pc { display: block; }
		div#wrapper br.br_sp { display: none; }
	/* /general */

	/* header */
		div#wrapper > header {
			background: #fee300;
			position: relative;
		}

		div#wrapper > header > figure {
			margin: 0;
			width: 50vw;
		}

		div#wrapper > header > h1 {
			font-family: astoria-sans-condensed, sans-serif;
			font-size: 1100% !important;
			font-weight: 700;
			left: 50%;
			line-height: 1.2;
			position: absolute;
			top: 18%;
			width: 55vw;
		}

		div#wrapper > header > h1 > span {
			font-size: 60%;
			display: block;
			line-height: 1;
			padding: 0.15em 0 0;
		}

		div#wrapper > header > h1 > span > small {
			display: block;
			font-size: 50%;
			font-weight: 500;
			line-height: 1.5;
		}

		div#wrapper > header > p {
			font-size: 160%;
			font-weight: 700;
			left: 50%;
			line-height: 1.8;
			position: absolute;
			top: 55%;
			transform: translateX(-12%);
			width: 55vw;
		}
	/* /header */

	/* detail */
		div#wrapper > section#detail {
			align-items: flex-start;
			background: linear-gradient(180deg, #6b6046 0%, #6b6046 95%, transparent 95%, transparent 100%);
			display: flex;
			justify-content: center;
			position: relative;
		}

		div#wrapper > section#detail > h2 {
			color: #fee300;
			font-size: 580%;
			font-weight: 800;
			left: 0%;
			position: absolute;
			top: 3%;
			z-index: 10;
		}

		div#wrapper > section#detail > h2 > svg {
			color: #29260b;
			font-size: 180%;
			position: relative;
			transform: translate(35%, 15%);
			z-index: -1;
		}

		div#wrapper > section#detail > figure {
			left: 8%;
			position: absolute;
			top: 27%;
			width: 36%;
			z-index: 2;
		}

		div#wrapper > section#detail > dl {
			background: #29260b;
			color: #fff;
			margin: 8vw auto 0;
			padding: 2vw 3vw;
			text-align: left;
			transform: translateX(35%);
			width: 50vw;
		}

		div#wrapper > section#detail > dl > dt {
			align-items: center;
			display: flex;
			font-size: 120%;
			justify-content: flex-start;
		}

		div#wrapper > section#detail > dl > dt > strong {
			display: block;
			font-size: 400%;
			font-weight: 500;
			position: relative;
			width: 58%;
		}

		div#wrapper > section#detail > dl > dt > div {
			align-items: baseline;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			line-height: 1.4;
			margin: 0 0 0 -4%;
		}

		div#wrapper > section#detail > dl > dt > div > cite {
			font-size: 240%;
			font-style: normal;
			width: 58%;
		}

		div#wrapper > section#detail > dl > dt > div > span {
			font-size: 150%;
		}

		div#wrapper > section#detail > dl > dd {
			font-size: 240%;
			font-size: 200%;
			font-weight: 500;
			line-height: 1.3;
			padding: 1.5vw 2vw;
		}

		div#wrapper > section#detail > dl > dd > strong {
			color: #fee300;
			display: block;
			font-size: 140%;
			font-size: 80%;
			font-weight: 800;
		}

		div#wrapper > section#detail > dl > dd:nth-of-type(2) {
			border-top: 2px solid #fff;
			font-size: 150%;
			margin: 0 0 0 2vw;
			padding: 1.5vw 0;
		}

		div#wrapper > section#detail > dl > dd:nth-of-type(2) > dl > dt {
			font-size: 160%;
			font-weight: 700;
		}

		div#wrapper > section#detail > dl > dd:nth-of-type(2) > dl > dd {
			margin: 0.5em 0 0;
		}

		div#wrapper > section#detail > dl > dd:nth-of-type(2) > dl > dd:last-child > a {
			background: #fee300;
			border-radius: 10vw;
			display: block;
			font-size: 120%;
			font-weight: 900;
			margin: 1.5em 0 0;
			padding: 0.6em 0 0.8em;
			text-align: center;
			text-decoration: none;
			width: 24vw;
		}
	/* /detail */

	/* message */
		div#wrapper > section#message {
			padding: 5vw 0;
		}

		div#wrapper > section#message > h3 {
			font-size: 400%;
			font-weight: 800;
			margin: 0 0 -2vw;
		}

		div#wrapper > section#message > h3 > svg {
			color: #efe6bf;
			font-size: 250%;
			margin: 0 0 0 -2vw;
			position: relative;
			vertical-align: -40%;
			z-index: -1;
		}

		div#wrapper > section#message > p {
			font-size: 150%;
			font-weight: 500;
			line-height: 1.5;
			margin: 0 auto 1em;
			width: 75vw;
		}

		div#wrapper > section#message > p:nth-of-type(1) {
			border-top: solid 2px #000;
			padding: 2em 0 0;
		}

		div#wrapper > section#message > p:nth-of-type(3) {
			border-bottom: solid 2px #000;
			padding: 0 0 2em;
		}
	/* /message */

	/* movie */
		#movie {
			background: linear-gradient(180deg, transparent 0%, transparent 3%, #000 3%, #000 100%);
			background-size: contain;
			color: #fff;
			padding:0 0 60px;
		}

		#movie > h3 {
			background: #f00;
			color: #fff;
			font-size: 500%;
			font-weight: 800;
			margin: 0 auto;
			padding: 0.2em 0 0.3em;
			text-align: center;
			width: 27vw;
		}

		#movie > h4 {
			font-size: 360%;
			padding: 3vw 0;
			position: relative;
		}

		#movie > h4 > svg {
			color: #3d3d3d;
			font-size: 270%;
			left: 50%;
			position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: -1;
		}

		#movie > p:nth-of-type(1) {
			/* color: #f00; */
			color: #c000f6;
			font-family: 'DotGothic16', sans-serif;
			font-size: 390%;
			font-weight: bold;
			line-height: 1;
			text-shadow: 1px 1px 1px #222, -1px 1px 1px #222, 1px -1px 1px #222, -1px -1px 1px #222, 1px 1px 1px #222, -1px 1px 1px #222, 1px -1px 1px #222, -1px -1px 1px #222, 4px 4px #fff;
			transform: rotate(3.75deg);
		}

		#movie > p:nth-of-type(1) > span:nth-of-type(1) {
			color: #fee300;
		}

		#movie > p:nth-of-type(1) > span:nth-of-type(2) {
			color: #c000f6;
		}

		#movie > p:nth-of-type(2) {
			color: #f00;
			font-family: 'DotGothic16', sans-serif;
			font-size: 270%;
			font-weight: bold;
			margin: 1em 0 0;
			transform: rotate(-1.875deg);
		}

		#movie > p:nth-of-type(2) > span {
			/* background: linear-gradient(180deg, transparent 0%, transparent 15%, #fee300 15%, #fee300 90%, transparent 90%, transparent 100%); */
			background: #fee300;
			color: #000;
			padding: 0 0.2em 0.1em;
			font-size: 120%;
			font-weight: bold;
			margin: 0 0.2em 0 0;
		}

		#movie > .mv {
			display: inline-block;
			height: 0;
			margin: 4vw 0 0 50%;
			position: relative;
			padding-bottom: 39.375%;
			transform: translateX(-50%);
			width: 70%;
		}

		#movie > .mv > iframe {
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
	/* /movie */

	/* sns */
		div#wrapper > div#sns > ul {
			align-items: center;
			background: #fee300;
			display: flex;
			justify-content: center;
			padding: 2vw 0;
		}

		div#wrapper > div#sns > ul > li > a > svg {
			font-size: 700%;
			margin: 0 6vw;
		}
	/* /sns */

	/* fadein */
		.fadein {
			opacity : 0;
			transform : translate(0px, 100px);
			transition : all 500ms;
		}
		
		.fadein.scrollin {
			opacity : 1;
			transform : translate(0px, 0px);
		}

		header h1.fadein, 
		header p.fadein {
			opacity : 0;
			transform: translate(-12%, 20%);
			transition : all 500ms;
		}
		
		header h1.fadein.scrollin, 
		header p.fadein.scrollin {
			opacity : 1;
			transform: translate(-12%, 0);
		}

		header figure.fadein {
			opacity : 0;
			transition : all 1000ms;
		}
		
		header figure.fadein.scrollin {
			opacity : 1;
		}

		#detail h2.fadein {
			opacity : 0;
			transform : translate(0px, 100px) rotate(-7.5deg);
			transition : all 500ms;
		}
		
		#detail h2.fadein.scrollin {
			opacity : 1;
			transform : translate(0px, 0px)rotate(-7.5deg);
		}
	/* /fadein */
/* /pc */

















































/* sp */
	@media screen and (max-width:479px){

	/* /general */
		div#wrapper br.br_pc { display: none; }
		div#wrapper br.br_sp { display: block; }

		div#wrapper {
			font-size: 3vw;
		}
	/* /general */

	/* header */
		div#wrapper > header > h1 {
		    font-size: 360% !important;
		    top: 10%;
		}

		div#wrapper > header > h1 > span > small {
		    font-weight: 700;
		}


		div#wrapper > header > p {
		    font-size: 90%;
		    letter-spacing: -0.5px;
		    top: 45%;
		}
	/* /header */


	/* detail */
		div#wrapper > section#detail {
			background: linear-gradient(180deg, #6b6046 0%, #6b6046 98%, transparent 98%, transparent 100%);
		    flex-direction: column;
		    padding: 13vw 0 0;
		}

		div#wrapper > section#detail > figure {
			left: 0;
		    margin: 3vw auto 0;
		    position: relative;
		    top: 0;
			width: 50%;
		    z-index: 1;
		}

		div#wrapper > section#detail > h2 {
		    font-size: 240%;
		    top: 1vw;
		}

		div#wrapper > section#detail > dl {
		    margin: -5vw auto;
		    padding: 7vw 3vw 3vw 3vw;
			/* transform: translateX(27%); */
			transform: translateX(0);
		    /* width: 62vw; */
		    width: 90vw;
		}

		div#wrapper > section#detail > dl > dt {
		    align-items: flex-end;
		}

		div#wrapper > section#detail > dl > dt > strong {
			font-size: 210%;
		    width: 45%;
		}

		div#wrapper > section#detail > dl > dt > div {
			margin: 0;
		    width: 54%;
		}

		div#wrapper > section#detail > dl > dt > div > cite {
		    font-size: 120%;
		    width: 40%;
		}

		div#wrapper > section#detail > dl > dt > div > span {
		    font-size: 70%;
		}

		div#wrapper > section#detail > dl > dt > div > small {
		    font-size: 70%;
			margin: 0 0 0 1em;
		}

		div#wrapper > section#detail > dl > dd {
		    font-size: 130%;
		    line-height: 1.5;
		}

		div#wrapper > section#detail > dl > dd > strong {
		    line-height: 1.8;
		}

		div#wrapper > section#detail > dl > dd:nth-of-type(2) {
			font-size: 100%;
			margin: 0 2vw;
		}

		div#wrapper > section#detail > dl > dd:nth-of-type(2) > dl > dd:last-child > a {
		    font-size: 130%;
		    margin: 1em 0 0;
		    width: 45vw;
		}
	/* /detail */


	/* message */
		div#wrapper > section#message > h3 {
		    font-size: 190%;
		    font-weight: 800;
		    margin: 3vw 0 -3vw;
		}

		div#wrapper > section#message > p {
		    font-size: 105%;
		    width: 95vw;
		}
	/* /message */

	/* movie */
		#movie > h3 {
			font-size: 250%;
		    width: 40vw;
		}

		#movie > h4 {
		    font-size: 210%;
		    padding: 5vw 0;
		}

		#movie > p:nth-of-type(1) {
		    font-size: 240%;
		}

		#movie > p:nth-of-type(2) {
		    font-size: 160%;
		}

		#movie > .mv {
		    margin: 8vw 0 0 50%;
		    padding-bottom: 56.25%;
		    width: 100%;
		}

		div#wrapper > div#sns > ul > li > a > svg {
		    font-size: 300%;
		}
	/* movie */

	/* sns */
	/* /sns */
	}
/* /sp */