@charset "UTF-8";



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




/* ----------------------------
	Fonts
---------------------------- */
@font-face {
	font-family: 'Noto Sans CJK';
	font-style: normal;
	font-weight: 400;
	src: url('../font/NotoSansCJK/NotoSansCJKjp-Regular.woff2') format('woff2'),
			 url('../font/NotoSansCJK/NotoSansCJKjp-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans CJK';
	font-style: normal;
	font-weight: 600;
	src: url('../font/NotoSansCJK/NotoSansCJKjp-Bold.woff2') format('woff2'),
			 url('../font/NotoSansCJK/NotoSansCJKjp-Bold.woff') format('woff');
}



/* ----------------------------
  Base
---------------------------- */
body {
  line-height: 1.5;
  font-size: 20px;
	font-size: 1.5625vw;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'Noto Sans CJK', 'Hiragino Kaku Gothic ProN', 'meiryo', sans-serif;
	color: #000;
  position: relative;
}

@media screen and (min-width: 1280px) {
	body {
		font-size: 20px;
	}
}

@media screen and (max-width: 812px) {
	body {
		font-size: 12px;
		font-size: 3.2vw;
	}
}


/* Anchor
---------------------------- */
a {
	outline: none;
  text-decoration: none;
  color: inherit;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
  box-shadow: none;
}


/* Image
---------------------------- */
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
  box-shadow: none;
}


/* Button
---------------------------- */
button {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	background: none;
	border: 0;
	outline: none;
	box-sizing: border-box;
	letter-spacing: inherit;
	cursor: pointer;
	font: inherit;
	color: inherit;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-box-shadow: none;
	box-shadow: none;
}


/* Media
---------------------------- */
svg {
	display: block;
}




/* ----------------------------
  Utilities
---------------------------- */

/* Break Line
---------------------------- */
.pc { display: block !important; }
.sp { display: none !important; }

@media screen and (max-width: 812px) {
  .pc { display: none !important; }
  .sp { display: block !important; }
}


/* Fade Effect
---------------------------- */
[data-effect="fade"] {
	opacity: 0;
	transition: opacity 0.7s;
}
[data-effect="fade"].fade {
	opacity: 1;
}




/* ----------------------------
  Layout
---------------------------- */
html, body {
	height: 100%;
}
.wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

@media screen and (max-width: 812px) {
	html, body {
		overflow: hidden;
	}
}



/* ----------------------------
  Hero
---------------------------- */
.hero {
	height: 100%;
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.menu-button-visible .hero {
  display: none;
}

@media screen and (max-width: 812px) {
	.hero {
		padding: 4% 0 6.6666667%;
		height: auto;
		background: none;
	}
}


/* Hero Panels
---------------------------- */
.hero-panels {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.hero-panel {
	background-repeat: no-repeat;
	background-position: top center;
	background-size: auto 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

@media screen and (max-width: 812px) {
	.hero-panels {
		margin: 0 auto;
		width: 92%;
		position: relative;
	}
	.hero-panels:before {
		content: "";
		display: block;
		padding-top: 140.5797101%;
	}
	.hero-panel {
		background-size: cover;
	}
}

/* Each */
.hero-panel-01 {
	background-image: url(../img/hero-01-pc.jpg);
}
.hero-panel-02 {
	background-image: url(../img/hero-02-pc.jpg);
}

@media screen and (max-width: 812px) {
	.hero-panel-01 {
		background-image: url(../img/hero-01-sp.jpg);
	}
	.hero-panel-02 {
		background-image: url(../img/hero-02-sp.jpg);
	}
}


/* Hero Panels Transition
---------------------------- */
.hero-panel {
	opacity: 0;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
	transition: transform 1.52s, -webkit-transform 1.52s, opacity 2s;
}
.before-loaded .hero-panel {
	-webkit-transform: scale(1);
	transform: scale(1);
}
.hero-panel.active {
	opacity: 1;
}

@media screen and (max-width: 812px) {
	.hero-panel {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}
}


/* Hero Title
---------------------------- */
.hero-title {
	width: 33.55em;
	position: absolute;
	top: 0;
	right: 3em;
	bottom: 0;
	opacity: 0;
}
.loaded .hero-title {
  opacity: 1;
}
.hero-title svg {
	width: 100%;
	height: 100%;
	fill: #fff;
}

@media screen and (max-width: 812px) {
	.hero-title {
		margin: 8% auto 0;
		width: 90.2666667%;
		position: relative;
		right: 0;
	}
	.hero-title svg {
		fill: #1c1c1b;
	}
}


/* Hero Title Transition
---------------------------- */
.hero-title path {
	opacity: 0;
	-webkit-transform: translate3d(1em, 0, 0);
	transform: translate3d(1em, 0, 0);
	transition: all 0.7s;
}

@media screen and (max-width: 812px) {
	.hero-title path {
		-webkit-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
	}
}

/* Delay */
.hero-title path:nth-child(2) { transition-delay: 0s; }
.hero-title path:nth-child(3) { transition-delay: 0.02s; }
.hero-title path:nth-child(4) { transition-delay: 0.04s; }
.hero-title path:nth-child(5) { transition-delay: 0.06s; }
.hero-title path:nth-child(6) { transition-delay: 0.08s; }
.hero-title path:nth-child(7) { transition-delay: 0.1s; }
.hero-title path:nth-child(8) { transition-delay: 0.12s; }
.hero-title path:nth-child(9) { transition-delay: 0.14s; }
.hero-title path:nth-child(10) { transition-delay: 0.16s; }
.hero-title path:nth-child(11) { transition-delay: 0.18s; }
.hero-title path:nth-child(12) { transition-delay: 0.2s; }
.hero-title path:nth-child(13) { transition-delay: 0.22s; }
.hero-title path:nth-child(14) { transition-delay: 0.24s; }
.hero-title path:nth-child(15) { transition-delay: 0.26s; }
.hero-title path:nth-child(16) { transition-delay: 0.28s; }
.hero-title path:nth-child(17) { transition-delay: 0.3s; }
.hero-title path:nth-child(18) { transition-delay: 0.32s; }

/* Loaded */
.loaded .hero-title path {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


/* Hero Logo
---------------------------- */
.hero-logo {
	width: 3.5em;
	position: absolute;
	top: 1em;
	left: 1em;
}
.hero-logo a {
	display: block;
	transition: opacity 0.4s;
}
.hero-logo a:hover {
	opacity: 0.5;
}

@media screen and (max-width: 812px) {
	.hero-logo {
		width: 17.3333333%;
		top: 0;
		left: 6.6666667%;
		margin-top: 6.6666667%;
	}
	.hero-logo a:hover {
		opacity: 1;
	}
}


/* Hero Scroll
---------------------------- */
.hero-scroll {
	padding-right: 3.75em;
	letter-spacing: 0.06em;
	font-family: 'EB Garamond', serif;
	font-size: .6em;
	color: #fff;
	position: absolute;
	right: 0;
	bottom: 0;
	-webkit-transform: rotate(90deg) translateY(100%);
	transform: rotate(90deg) translateY(100%);
	-webkit-transform-origin: right bottom;
	transform-origin: right bottom;
	margin-right: 5em;
	opacity: 0;
	transition: opacity 0.7s;
}
.loaded .hero-scroll {
	opacity: 1;
	transition-delay: 0.6s;
}
.hero-scroll:after {
	content: "";
	display: block;
	width: 3.333333333em;
	border-bottom: 1px solid;
	position: absolute;
	right: 0;
	top: 50%;
}

@media screen and (max-width: 812px) {
	.hero-scroll {
		margin: 0 auto;
		padding-top: 2.9333333%;
		padding-right: 0;
		width: 4.8%;
		background: url(../img/arrow-down.svg) no-repeat center;
		background-size: contain;
		position: static;
		-webkit-transform: rotate(0deg) translateY(0%);
		transform: rotate(0deg) translateY(0);
	}
	.hero-scroll span {
		display: none;
	}
	.hero-scroll:after {
		display: none;
	}
}



/* ----------------------------
  Intro
---------------------------- */
.intro {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	padding-bottom: 3em;
	height: 100%;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url(../img/bg-pc.jpg);
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}

@media screen and (max-width: 812px) {
	.intro {
		display: block;
		margin-top: 182.8%;
		margin-top: 250%;
		padding: 13.6% 0 13.3333333%;
		height: auto;
		background-image: url(../img/bg-sp.jpg);
		position: relative;
		pointer-events: auto;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}


/* Intro Inner
---------------------------- */
.intro-inner {
	opacity: 0;
	transition: opacity 0.7s;
}
.intro-inner.on {
	opacity: 1;
}


/* Intro Title
---------------------------- */
.intro-title img {
	display: block;
	margin: 0 auto;
	width: 6.15em;
}
.intro-title span {
	display: block;
	margin-top: .185185185em;
	line-height: 1.111111111;
	font-family: 'EB Garamond', serif;
	font-feature-settings: "palt";
	font-size: 2.7em;
}

@media screen and (max-width: 812px) {
	.intro-title img {
		width: 19.0666667%;
	}
	.intro-title span {
		margin-top: 2.1333333%;
		font-size: 2.375em;
	}
}


/* Intro Lead
---------------------------- */
.intro-lead {
	margin-top: 2.588235294em;
	line-height: 1.705882353;
	font-size: .85em;
}

@media screen and (max-width: 812px) {
	.intro-lead {
		margin-top: 5.6%;
		line-height: 1.538461538;
		font-size: 1.083333333em;
	}
}


/* Intro Link
---------------------------- */
.intro-link {
	margin-top: 2.5em;
	line-height: 1;
}
.intro-link a {
	display: inline-block;
	vertical-align: top;
	font-size: .9em;
	position: relative;
	pointer-events: auto;
}
.intro-link a:after {
	content: "";
	display: block;
	margin-top: .277777778em;
	width: 100%;
	height: 1px;
	background: #000;
}
.intro-link span {
	font-family: 'EB Garamond', serif;
	font-feature-settings: "palt";
}

@media screen and (max-width: 812px) {
	.intro-link {
		margin-top: 8.8%;
	}
	.intro-link a {
		font-size: 1.25em;
	}
	.intro-link a:after {
		margin-top: .5em;
	}
}


/* Intro Arrow
---------------------------- */
.intro-scroll {
	display: block;
	width: 1.3em;
	height: .75em;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto 2.25em;
}

@media screen and (max-width: 812px) {
	.intro-scroll {
		display: none;
	}
}



/* ----------------------------
  Content
---------------------------- */
.content {
	margin-top: 250vh;
	background: #fff;
	position: relative;
	z-index: 2;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

@media screen and (max-width: 812px) {
	.content {
		margin-top: 0;
	}
}





/* ----------------------------
  Look
---------------------------- */
.look {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	height: 100vh;
	min-height: 760px;
	background: url(../img/bg-pc.jpg) no-repeat center;
	background-size: cover;
}

@media screen and (max-width: 812px) {
	.look {
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-webkit-flex-direction: column-reverse;
		flex-direction: column-reverse;
		height: auto;
		min-height: 0;
		background: url(../img/bg-sp.jpg) no-repeat center;
		background-size: cover;
	}
}

/* Each */
.look-01,
.look-03 {
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

@media screen and (max-width: 812px) {
	.look-01,
	.look-03 {
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-webkit-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}
}


/* Look Image
---------------------------- */
.look-image {
	width: 0;
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: width 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: width;
}

@media screen and (max-width: 812px) {
	.look-image {
		padding-top: 133.3333333%;
		height: 0;
	}
}

/* Look Visible */
.look-visible .look-image {
	width: 50%;
}

@media screen and (max-width: 812px) {
	.look-visible .look-image {
		width: 100%;
	}
}


/* Look Image Inner
---------------------------- */
.look-image-inner {
	width: 50vw;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: auto 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  will-change: transform;
}

@media screen and (max-width: 812px) {
	.look-image-inner {
		width: 100vw;
		background-size: cover;
	}
}

/* Each */
.look-01 .look-image-inner {
	background-image: url(../img/look-01.jpg);
	left: 0;
}
.look-02 .look-image-inner {
	background-image: url(../img/look-02.jpg);
	right: 0;
}
.look-03 .look-image-inner {
	background-image: url(../img/look-03.jpg);
	left: 0;
}

@media screen and (max-width: 812px) {
	.look-02 .look-image-inner {
		left: 0;
	}
}


/* Look Body
---------------------------- */
.look-body {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	width: 50%;
	height: 100%;
}

@media screen and (max-width: 812px) {
	.look-body {
		display: block;
		width: 100%;
		height: auto;
	}
}


/* Look Body Inner
---------------------------- */
.look-body-inner {
	width: 59.375%;
	opacity: 0;
	transition: all 0.7s;
}
.look-visible .look-body-inner {
	opacity: 1;
	transition-delay: 0.35s;
}

@media screen and (max-width: 812px) {
	.look-body-inner {
		padding: 7.2% 6.6666667% 9.8666667%;
		width: 100%;
		box-sizing: border-box;
	}
	.look-03 .look-body-inner {
		padding-bottom: 8%;
	}
}



/* Look Title
---------------------------- */
.look-title {
	margin-right: -1em;
	letter-spacing: 0.02em;
	line-height: 1.272727273;
	font-feature-settings: "palt";
	font-weight: bold;
	font-size: 1.1em;
}

@media screen and (max-width: 812px) {
	.look-title {
		margin-right: 0;
		text-align: center;
		line-height: 1.235294118;
		font-size: 1.416666667em;
	}
}


/* Look Text
---------------------------- */
.look-text {
	margin-top: .933333333em;
	line-height: 1.6;
	font-size: .75em;
}

@media screen and (max-width: 812px) {
	.look-text {
		margin-top: 4.3076923%;
		line-height: 1.615384615;
		font-size: 1.083333333em;
	}
}


/* Look Credit
---------------------------- */
.look-credit {
	margin-top: 1.5em;
	line-height: 1.666666667;
	font-size: .6em;
}
.look-credit li {
	margin-top: .166666667em;
}
.look-credit li:first-child {
	margin-top: 0;
	margin-bottom: .615384615em;
	line-height: 1.615384615;
	font-size: 1.083333333em;
}

@media screen and (max-width: 812px) {
	.look-credit {
		margin-top: 3.0769231%;
		line-height: 1.454545455;
		font-size: .916666667em;
	}
	.look-credit li {
		margin-top: 3.0769231%;
	}
	.look-credit li:first-child {
		margin-bottom: 0;
		line-height: 1.454545455;
		font-size: 1em;
	}
}


/* Look Comment
---------------------------- */
.look-comment {
	margin-top: 2.166666667em;
	padding: 1.416666667em 1.833333333em;
	border: 1px solid;
	line-height: 1.666666667;
	font-size: .6em;
}
.look-comment em {
	font-weight: bold;
}

@media screen and (max-width: 812px) {
	.look-comment {
		margin-top: 5.2307692%;
		padding: 5.2307692% 6.1538462%;
		line-height: 1.545454545;
		font-size: .916666667em;
	}
}




/* ----------------------------
  Interview
---------------------------- */
.interview {
	margin: 0 auto;
	padding: 3em 0 3.7em;
	max-width: 48em;
	width: 100%;
}

@media screen and (max-width: 812px) {
	.interview {
		padding: 7.4666667% 6.6666667% 8%;
		box-sizing: border-box;
	}
}


/* Interview Title
---------------------------- */
.interview-title {
	text-align: center;
	font-family: 'EB Garamond', serif;
	font-size: 1.8em;
	opacity: 0;
	transition: all 0.7s;
}
.interview-visible .interview-title {
	opacity: 1;
}
.interview-title i {
	font-style: italic;
}

@media screen and (max-width: 812px) {
	.interview-title {
		line-height: .857142857;
		font-size: 2.916666667em;
	}
}


/* Interview Image
---------------------------- */
.interview-image {
	margin-top: 1.75em;
	opacity: 0;
	transition: all 0.7s;
}
.interview-visible .interview-image {
	opacity: 1;
}
.interview-image figcaption {
	display: block;
	margin-top: .666666667em;
	text-align: right;
	letter-spacing: 0.04em;
	font-weight: 500;
	font-size: .6em;
}

@media screen and (max-width: 812px) {
	.interview-image {
		margin-top: 8.3076923%;
	}
	.interview-image figcaption {
		margin-top: .6em;
		letter-spacing: 0;
		font-size: .833333333em;
	}
}


/* Interview Body
---------------------------- */
.interview-body {
	margin-top: 1.7em;
}

@media screen and (max-width: 812px) {
	.interview-body {
		margin-top: 7.0769231%;
	}
}


/* Interview Sub Title
---------------------------- */
.interview-subtitle {
	text-align: center;
	letter-spacing: 0.02em;
	font-feature-settings: "palt";
	font-weight: bold;
	font-size: 1.35em;
}

@media screen and (max-width: 812px) {
	.interview-subtitle {
		line-height: 1.25;
		font-size: 1.666666667em;
	}
}


/* Interview Columns
---------------------------- */
.interview-columns {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin-top: 1.4em;
}
.interview-column {
	width: 45.8333333%;
}
.interview-column em {
	font-weight: bold;
}
.interview-column i {
	margin-right: -0.3em;
}

@media screen and (max-width: 812px) {
	.interview-columns {
		display: block;
		margin-top: 1.4em;
	}
	.interview-column {
		width: 100%;
	}
}

/* Text */
.interview-column > p {
	margin-top: 1.285714286em;
	line-height: 1.714285714;
	font-size: .7em;
}
.interview-column > p:first-child {
	margin-top: 0;
}

@media screen and (max-width: 812px) {
	.interview-column > p {
		margin-top: 3.2307692%;
		line-height: 1.615384615;
		font-size: 1.083333333em;
	}
}


/* Interview Profile
---------------------------- */
.interview-profile {
	margin-top: 2.307692308em;
	padding: 1.692307692em;
	border: 1px solid;
	line-height: 1.615384615;
	font-size: .65em;
}

@media screen and (max-width: 812px) {
	.interview-profile {
		margin-top: 6.4615385%;
		padding: 5.2307692% 6.1538462%;
		line-height: 1.545454545;
		font-size: .916666667em;
	}
}




/* ----------------------------
  Collection
---------------------------- */
.collection {
	padding: 2.35em 0 2.8em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url(../img/bg-pc.jpg);
}

@media screen and (max-width: 812px) {
	.collection {
		padding: 5.3333333% 0 25.3333333%;
		background-image: url(../img/bg-sp.jpg);
		position: relative;
	}
}


/* Collection Inner
---------------------------- */
.collection-inner {
	margin: 0 auto;
	max-width: 56em;
	width: 100%;
}

@media screen and (max-width: 812px) {
	.collection-inner {
		width: 80%;
	}
}


/* Collection Title
---------------------------- */
.collection-title {
	text-align: center;
	font-family: 'EB Garamond', serif;
	font-size: 1.8em;
}

@media screen and (max-width: 812px) {
	.collection-title {
		font-size: 2.083333333em;
	}
}


/* Collection Body
---------------------------- */
.collection-body {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin-top: 2.8em;
}

@media screen and (max-width: 812px) {
	.collection-body {
		display: block;
		margin-top: 6.6666667%;
	}
}


/* Collection Main
---------------------------- */
.collection-main {
	width: 42.8571429%;
}

@media screen and (max-width: 812px) {
	.collection-main {
		width: 100%;
	}
}


/* Collection Side
---------------------------- */
.collection-side {
	width: 50%;
	position: relative;
}

@media screen and (max-width: 812px) {
	.collection-side {
		margin-top: 7.6666667%;
		margin-right: -5.8333333%;
		width: auto;
	}
}


/* Collection List
---------------------------- */
.collection-list {
	overflow: hidden;
	position: relative;
}
.collection-list ul {
	margin-right: -1.7857143%;
}
.collection-list ul:after {
	content: "";
	display: block;
	clear: both;
}
.collection-list li {
	margin-right: 1.754386%;
	margin-bottom: 1.754386%;
	width: 14.9122807%;
	float: left;
	background: #fff;
}
.collection-list button {
	position: relative;
	transition: opacity 0.4s;
}
.collection-list button:hover {
	opacity: 0.6;
}
.collection-list button:after {
	content: "";
	display: block;
	background: rgba(0, 0, 0, 0.3);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity 0.4s;
}
.collection-list button.active:after {
	opacity: 1;
}

@media screen and (max-width: 812px) {
	.collection-list {
		padding-right: 5.511811%;
		height: 18.666666667em;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.collection-list::-webkit-scrollbar {
		display: none;
	}
	.collection-list ul {
		margin-top: -1.3333333%;
		margin-right: -1.3333333%;
	}
	.collection-list li {
		margin-right: 1.3157895%;
		margin-top: 1.3157895%;
		margin-bottom: 0;
		width: 23.6842105%;
	}
	.collection-list button:hover {
		opacity: 1;
	}
}


/* Collection Bar
---------------------------- */
.collection-bar {
	display: none;
	width: 1.5748031%;
	height: 100%;
	background: #c5c5c5;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}
.collection-bar-current {
	width: 100%;
	height: 15.625%;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

@media screen and (max-width: 812px) {
	.collection-bar {
		display: block;
	}
}


/* Collection Link
---------------------------- */
.collection-link {
	margin-top: 1.6em;
	text-align: center;
	line-height: 1;
}
.collection-link a {
	display: inline-block;
	padding: .444444444em 1.666666667em;
	padding-left: 0;
	vertical-align: top;
	border-bottom: 1px solid;
	font-size: .9em;
	position: relative;
	transition: opacity 0.4s;
}
.collection-link a:hover {
	opacity: 0.6;
}
.collection-link img {
	width: 1.111111111em;
	position: absolute;
	right: .222222222em;
	top: 50%;
	margin-top: -.222222222em;
}

@media screen and (max-width: 812px) {
	.collection-link {
		margin-top: 0;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin-bottom: 10.6666667%;
	}
	.collection-link a {
		padding: .538461538em 2.076923077em;
		padding-left: 0;
		font-size: 1.083333333em;
	}
	.collection-link a:hover {
		opacity: 1;
	}
	.collection-link img {
		width: 1.538461538em;
		right: 0;
		margin-top: -.269230769em;
	}
}




/* ----------------------------
  Collection Slide
---------------------------- */
.slide {
	position: relative;
}
.slide:before {
	content: "";
	display: block;
	padding-top: 100%;
}


/* Slide Image
---------------------------- */
.slide-images {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}


/* Slide Arrow
---------------------------- */
.slide-arrow {
	padding-top: 11.4583333%;
	width: 11.4583333%;
	height: 0;
	position: absolute;
	top: 50%;
	margin-top: -5.8333333%;
	z-index: 2;
	transition: opacity 0.4s;
}
.slide-arrow:hover {
	opacity: 0.6;
}
.slide-arrow img {
	width: 27.2727273%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0 auto;
}

@media screen and (max-width: 812px) {
	.slide-arrow {
		padding-top: 100%;
		width: 12.5%;
		top: 0;
		bottom: 0;
		margin-top: 0;
	}
	.slide-arrow:hover {
		opacity: 1;
	}
	.slide-arrow img {
		width: 26.6666667%;
	}
}

/* Each */
.slide-arrow-prev { left: 0; }
.slide-arrow-next { right: 0; }

@media screen and (max-width: 812px) {
	.slide-arrow-prev { left: -12.5%; }
	.slide-arrow-next { right: -12.5%; }
}


/* Slide Body
---------------------------- */
.slide-body {
	margin-top: 1.8em;
	text-align: center;
	opacity: 0;
	-webkit-transform: translate3d(0, .4em, 0);
	transform: translate3d(0, .4em, 0);
	transition: all 0.4s;
}
.slide-body.visible {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

@media screen and (max-width: 812px) {
	.slide-body {
		margin: 7% -12.5% 0;
		min-height: 4.916666667em;
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	.slide-body.visible {
		-webkit-transform: none;
		transform: none;
	}
}

/* Info */
.slide-body-info dt {
	font-size: .8em;
}
.slide-body-info dd {
	margin-top: .357142857em;
	line-height: 1.428571429;
	font-size: .7em;
}

@media screen and (max-width: 812px) {
	.slide-body-info {
		opacity: 0;
		-webkit-transform: translate3d(0, .666666667em, 0);
		transform: translate3d(0, .666666667em, 0);
		transition: all 0.4s;
	}
	.slide-body.visible .slide-body-info {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	.slide-body-info dt {
		font-size: 1.083333333em;
	}
	.slide-body-info dd {
		margin-top: .5em;
		line-height: 1.5;
		font-size: .833333333em;
	}
}



/* ----------------------------
  Movie
---------------------------- */
.movie {
	margin: 0 auto;
	padding: 2.75em 0 5em;
	max-width: 48em;
	width: 100%;
}

@media screen and (max-width: 812px) {
	.movie {
		padding: 10.6666667% 6.6666667% 13.3333333%;
		max-width: none;
		box-sizing: border-box;
	}
}


/* Movie Title
---------------------------- */
.movie-title {
	text-align: center;
	font-family: 'EB Garamond', serif;
	font-size: 1.8em;
}

@media screen and (max-width: 812px) {
	.movie-title {
		font-size: 2.083333333em;
	}
}


/* Movie Body
---------------------------- */
.movie-body {
	margin-top: 2.6em;
	position: relative;
}
.movie-body > video {
	width: 100%;
}

@media screen and (max-width: 812px) {
	.movie-body {
		margin-top: 6.1538462%;
	}
}



/* ----------------------------
  Store
---------------------------- */
.store {
	padding: 2.25em 0 3em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url(../img/bg-pc.jpg);
}

@media screen and (max-width: 812px) {
	.store {
		padding: 5.3333333% 6.6666667% 8.5333333%;
		background-image: url(../img/bg-sp.jpg);
	}
}


/* Store Inner
---------------------------- */
.store-inner {
	margin: 0 auto;
	max-width: 48em;
	width: 100%;
}

@media screen and (max-width: 812px) {
	.store-inner {
		max-width: none;
	}
}


/* Store Title
---------------------------- */
.store-title {
	text-align: center;
	font-family: 'EB Garamond', serif;
	font-size: 1.8em;
}

@media screen and (max-width: 812px) {
	.store-title {
		font-size: 2.083333333em;
	}
}


/* Store Body
---------------------------- */
.store-body {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	margin-top: 1.65em;
}

@media screen and (max-width: 812px) {
	.store-body {
		display: block;
		margin-top: 6.1538462%;
	}
}


/* Store Image
---------------------------- */
.store-image {
	width: 50%;
}
.store-image img {
	display: block;
	width: 100%;
	max-width: none;
}

@media screen and (max-width: 812px) {
	.store-image {
		width: 100%;
	}
	.store-image img {
		width: 100%;
	}
}


/* Store Text
---------------------------- */
.store-text {
	padding-left: 3em;
	width: 50%;
	box-sizing: border-box;
}
.store-text dt {
	line-height: 1.3125;
	font-weight: bold;
	font-size: .8em;
}
.store-text dd {
	margin-top: 1em;
	line-height: 1.615384615;
	font-size: .65em;
}
.store-text dt + dd {
	margin-top: .615384615em;
}

@media screen and (max-width: 812px) {
	.store-text {
		margin-top: 8.6153846%;
		padding-left: 0;
		width: 100%;
		text-align: center;
	}
	.store-text dt {
		line-height: 1.142857143;
		font-size: 1.166666667em;
	}
	.store-text dd {
		line-height: 1.5;
		font-size: 1em;
	}
	.store-text dt + dd {
		margin-top: 4.6153846%;
	}
}



/* ----------------------------
  Info
---------------------------- */
.info {
	padding: 3.5em 0;
	text-align: center;
}

@media screen and (max-width: 812px) {
	.info {
		padding: 12.6666667% 0;
	}
}


/* Info Official
---------------------------- */
.info-official a {
	display: inline-block;
	vertical-align: top;
	transition: opacity 0.4s;
}
.info-official a:hover {
	opacity: 0.6;
}
.info-official img {
	display: block;
	width: 15.8em;
	margin: 0 auto;
}
.info-official span {
	display: inline-block;
	margin-top: 1.368421053em;
	padding-bottom: .421052632em;
	border-bottom: 1px solid;
	line-height: 1;
	vertical-align: top;
	font-weight: bold;
	font-size: .95em;
}

@media screen and (max-width: 812px) {
	.info-official a:hover {
		opacity: 1;
	}
	.info-official img {
		width: 18.333333333em;
	}
	.info-official span {
		margin-top: 1.285714286em;
		padding-bottom: .5em;
		font-size: 1.166666667em;
	}
}


/* Info Contact
---------------------------- */
.info-contact {
	margin-top: 3.2em;
	font-size: .75em;
}

@media screen and (max-width: 812px) {
	.info-contact {
		margin-top: 12.5333333%;
		font-size: 1em;
	}
}


/* Info Credit
---------------------------- */
.info-credit {
	margin-top: .769230769em;
	line-height: 1.692307692;
	font-size: .65em;
}

@media screen and (max-width: 812px) {
	.info-credit {
		margin-top: 2.9333333%;
		line-height: 1.818181818;
		font-size: .916666667em;
	}
}


/* Info Note
---------------------------- */
.info-note {
	margin-top: .909090909em;
	font-size: .55em;
}

@media screen and (max-width: 812px) {
	.info-note {
		margin-top: 11.2%;
		font-size: .916666667em;
	}
}



/* ----------------------------
  Footer
---------------------------- */
.footer {
	padding: 2em 0;
	background: #303030;
	text-align: center;
	color: #fff;
	position: relative;
}

@media screen and (max-width: 812px) {
	.footer {
		padding: 8% 0 7.4666667%;
	}
}


/* Footer Logo
---------------------------- */
.footer-logo {
	margin: 0 auto;
	width: 7.9em;
}
.footer-logo a {
	display: block;
	transition: opacity 0.4s;
}
.footer-logo a:hover {
	opacity: 0.6;
}

@media screen and (max-width: 812px) {
	.footer-logo {
		width: 32%;
	}
	.footer-logo a:hover {
		opacity: 1;
	}
}


/* Footer SNS
---------------------------- */
.footer-sns {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	line-height: 1;
	margin-top: 1em;
}
.footer-sns a {
	display: block;
	padding: .75em;
	transition: opacity 0.4s;
}
.footer-sns a:hover {
	opacity: 0.6;
}
.footer-sns svg {
	width: 1.25em;
	height: 1.25em;
	fill: #fff;
}

@media screen and (max-width: 812px) {
	.footer-sns {
		margin-top: 9.3333333%;
	}
	.footer-sns a {
		padding: 1.375em;
	}
	.footer-sns a:hover {
		opacity: 1;
	}
	.footer-sns svg {
		width: 2.333333333em;
		height: 2.333333333em;
	}
}


/* Footer Copy
---------------------------- */
.footer-copy {
	margin-top: 1.8em;
	letter-spacing: 0.02em;
	line-height: 1.4;
	font-size: .5em;
}

@media screen and (max-width: 812px) {
	.footer-copy {
		margin-top: 7.7333333%;
		line-height: 1.777777778;
		font-size: .833333333em;
	}
}



/* ----------------------------
  Menu
---------------------------- */

/* Menu Open
---------------------------- */
.menu-open {
	padding-top: 2.5em;
	width: 2.5em;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10001;
	opacity: 0;
	visibility: hidden;
	transition: background 0.4s, opacity 0.6s, visibility 0.6s;
}

@media screen and (max-width: 812px) {
	.menu-open {
		padding-top: 13.3333333%;
		width: 13.3333333%;
	}
}

/* Line */
.menu-open span {
	display: block;
	width: 50%;
	height: 1px;
	background: #000;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -25%;
	transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.menu-open span:nth-child(1) {
	margin-top: -.35em;
}
.menu-open span:nth-child(2) {
	margin-top: 0;
}
.menu-open span:nth-child(3) {
	margin-top: .35em;
}

@media screen and (max-width: 812px) {
	.menu-open span {
		width: 40%;
		margin-left: -20%;
	}
	.menu-open span:nth-child(1) {
		margin-top: -12%;
	}
	.menu-open span:nth-child(3) {
		margin-top: 12%;
	}
}

/* Hover */
.menu-open:hover {
	background: rgba(255, 255, 255, 0.8);
}
.menu-open:hover span {
	opacity: 0.5;
}

@media screen and (max-width: 812px) {
	.menu-open:hover {
		background: rgba(255, 255, 255, 0.3);
	}
	.menu-open:hover span {
		opacity: 1;
	}
}

/* Menu Visible */
.menu-visible .menu-open span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: 0;
}
.menu-visible .menu-open span:nth-child(2) {
	opacity: 0;
}
.menu-visible .menu-open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin-top: 0;
}

/* Menu Button Visible */
.menu-visible .menu-open {
	opacity: 1;
	visibility: visible;
}
.menu-button-visible .menu-open {
	opacity: 1;
	visibility: visible;
}



/* Menu Container
---------------------------- */
.menu-container {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	background: #fff;
	text-align: center;
	font-family: 'EB Garamond', serif;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.8s;
}
.menu-visible .menu-container {
	opacity: 1;
	visibility: visible;
}

@media screen and (max-width: 812px) and (orientation: landscape) {
	.menu-container {
		display: block;
		overflow: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.menu-body {
		padding: 4.166666667em 0;
	}
}

@media screen and (max-width: 812px) {
	.menu-body {
		width: 100%;
		font-size: 2.4vw;
	}
}

@media screen and (max-width: 480px) {
	.menu-body {
		font-size: 3.2vw;
	}
}


/* Menu List
---------------------------- */
.menu-list li {
	margin-top: 1.5em;
}
.menu-list li:first-child {
	margin-top: 0;
}
.menu-list a {
	display: inline-block;
	vertical-align: top;
	font-size: 1.3em;
	transition: opacity 0.4s;
}
.menu-list a:hover {
	opacity: 0.5;
}

@media screen and (max-width: 812px) {
	.menu-list li {
		margin-top: 8.8%;
		margin-top: 2.75em;
	}
	.menu-list a {
		display: block;
		line-height: 1.157894737;
		font-size: 1.583333333em;
	}
	.menu-list a:hover {
		opacity: 1;
	}
}


/* Menu Share
---------------------------- */
.menu-share {
	margin-top: 2.4em;
}
.menu-share dt {
	font-size: .8em;
}
.menu-share dd {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	line-height: 1;
	margin-top: .1em;
}

@media screen and (max-width: 812px) {
	.menu-share {
		margin-top: 11.4666667%;
		margin-top: 3.583333333em;
	}
	.menu-share dt {
		font-size: 1em;
	}
	.menu-share dd {
		margin-top: -.208333333em;
	}
}

/* Icons */
.menu-share a {
	padding: .6em;
	transition: opacity 0.4s;
}
.menu-share a:hover {
	opacity: 0.5;
}

@media screen and (max-width: 812px) {
	.menu-share a {
		padding: .9375em;
	}
	.menu-share a:hover {
		opacity: 1;
	}
}

/* Each */
.menu-share-facebook img {
	width: 1.1em;
}
.menu-share-twitter img {
	width: 1.3em;
}
.menu-share-line {
	display: none;
}

@media screen and (max-width: 812px) {
	.menu-share-facebook img {
		width: 1.791666667em;
	}
	.menu-share-twitter img {
		width: 2.125em;
	}
	.menu-share-line {
		display: block;
	}
	.menu-share-line img {
		width: 2.041666667em;
	}
}




/* ----------------------------
  Splash
---------------------------- */
.splash-top,
.splash-bottom {
	width: 100%;
	height: 50%;
	overflow: hidden;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 10002;
	transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Position */
.splash-top { bottom: 50%; }
.splash-bottom { top: 50%; }

/* Theme */
.splash-black { background: #000; }
.splash-white { background: #fff; height: 0; }

/* White In */
.splash-in .splash-white { height: 50%; }

/* Before Out */
.splash-before-out .splash-top { top: 0; bottom: auto; }
.splash-before-out .splash-bottom { top: auto; bottom: 0; }

/* Out */
.splash-out .splash-white,
.splash-out .splash-black { height: 0; }


/* Splash Inner
---------------------------- */
.splash-inner {
	width: 100%;
	height: 50vh;
	background-repeat: no-repeat;
	background-size: 300px;
	position: absolute;
	left: 0;
	right: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

@media screen and (max-width: 750px) {
	.splash-inner {
		background-size: 18.74em;
	}
}

/* Theme */
.splash-black .splash-inner {
	background-image: url(../img/splash-white.png);
}
.splash-white .splash-inner {
	background-image: url(../img/splash-black.png);
}

/* Position */
.splash-top .splash-inner {
	background-position: center bottom -150px;
	bottom: 0;
}
.splash-bottom .splash-inner {
	background-position: center -150px;
	top: 0;
}

@media screen and (max-width: 750px) {
	.splash-top .splash-inner {
		background-position: center bottom -9.37em;
	}
	.splash-bottom .splash-inner {
		background-position: center -9.37em;
	}
}

/* Before Out */
.splash-before-out .splash-top .splash-inner { top: 0; bottom: auto; }
.splash-before-out .splash-bottom .splash-inner { top: auto; bottom: 0; }