@charset "UTF-8";


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');


/* ----------------------------
	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}







/* ----------------------------
	Base
---------------------------- */
body {
	line-height: 1.692307692;
	font-size: 14px;
	font-size: 1.0833333vw;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "palt";
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
 	color:#737373;
	position: relative;
	letter-spacing:0.05em;
}

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

@media screen and (max-width: 812px) {
	body {
		line-height: 1.615384615;
		font-size: 3.4666667vw;
	}
}


/* 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;
}






/* Container
---------------------------- */
.container {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
	position: relative;
}


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

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




/* ----------------------------
  Base Layout
---------------------------- */
html, body, #container, #content {
	width: 100%;
	height: 100%;
}
#content {
	
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
}


/* Header
---------------------------- */
header.global {
	margin: 0 auto;
	right: 0;
	z-index: 10000;
}

@media screen and (max-width: 812px) {
	header.global {
		background: #fff;
	}
}


/* Footer
---------------------------- */
footer.global {
	position: relative;
}



/* ----------------------------
  Hero
---------------------------- */
.hero {
	height: 100%;
	background: #fff;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	z-index: 5;
}

@media screen and (max-width: 812px) {
	.hero {
		padding-top: 88px;
		height: auto;
		/*min-height: 100%;*/
	}
}

@media screen and (max-width: 479px) {
	.hero {
		padding-top: 60px;
	}
}

@media screen and (max-width: 812px) and (orientation: landscape) {
	.hero {
		height: 177.8666667vw;
	}
}


/* Hero Title
---------------------------- */
.hero-title {
	margin: 0 2.307692308em 1.923076923em;
	overflow: hidden;
	position: absolute;
	bottom: 2em;
	left: 0;
	right: 0;
	z-index: 1;
	filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.7));
}
.hero-title picture {
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
	transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1.4s;
}
.loaded .hero-title picture {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

@media screen and (max-width: 812px) {
	.hero-title {
		margin: 60% 2.1333333% 0;
		top: 88px;
		bottom: auto;
	}
}

@media screen and (max-width: 479px) {
	.hero-title {
		top: 60px;
	}
}


/* Hero Panels
---------------------------- */
.hero-panels {
	height: 100%;
	position: relative;
}

@media screen and (max-width: 812px) {
	.hero-panels {
		height: auto;
	}
	.hero-panels:before {
		content: "";
		display: block;
		/*padding-top: 114.6666667%;*/
		padding-top: 130%;
	}
}


/* Hero Panel Background
---------------------------- */
.hero-panel-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.hero-panel-bg div {
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity 0.6s, width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hero-panel-bg div:nth-child(1) {
	background: #bf8467;
	left: 0;
}
.hero-panel-bg div:nth-child(2) {
	background: #e99abc;
	left: 33.333333333%;
}
.hero-panel-bg div:nth-child(3) {
	background: #7e8ade;
	left: 66.666666666%;
}

/* Loaded */
.loaded .hero-panel-bg div {
	width: 33.333333333%;
	opacity: 1;
}
.loaded .hero-panel-bg div:nth-child(1) { transition-delay: 0s; }
.loaded .hero-panel-bg div:nth-child(2) { transition-delay: 0.2s; }
.loaded .hero-panel-bg div:nth-child(3) { transition-delay: 0.4s; }


/* Hero Panel
---------------------------- */
.hero-panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.hero-panel div {
	width: 0;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity 0.6s, width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hero-panel div:nth-child(1) {
	left: 0;
}
.hero-panel div:nth-child(2) {
	left: 33.333333333%;
}
.hero-panel div:nth-child(3) {
	left: 66.666666666%;
}

/* Panel Visible */
.hero-panel-visible div {
	width: 33.333333333%;
	opacity: 1;
}
.hero-panel-visible div:nth-child(1) { transition-delay: 0s; }
.hero-panel-visible div:nth-child(2) { transition-delay: 0.2s; }
.hero-panel-visible div:nth-child(3) { transition-delay: 0.4s; }


/* Hero Panel Image
---------------------------- */
.hero-panel div:before {
	content: "";
	display: block;
	width: 33.333333333vw;
	height: 100%;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	-webkit-transform: translate3d(-12%, 0, 0);
	transform: translate3d(-12%, 0, 0);
	transition: all 0.6s;
}

/* Panel Visible */
.hero-panel-visible div:before {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


.hero-panel-visible div:nth-child(1):before { transition-delay: 0s; }
.hero-panel-visible div:nth-child(2):before { transition-delay: 0.2s; }
.hero-panel-visible div:nth-child(3):before { transition-delay: 0.4s; }



/* Hero
---------------------------- */
.hero-body {
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}


@media screen and (max-width: 812px) {
	.hero-body {
		position: relative;
	}
	
}





/* ----------------------------
  Look
---------------------------- */
.look {
	overflow: hidden;
	position: relative;
}

/* Each */
.look-01 { background: var(--gracolor); }
.look-02 { background: var(--sp1color); }
.look-03 { background: var(--sp2color); }


/* Look Image Container
---------------------------- */
.look-image {
	width: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity 0.8s, width 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	pointer-events: none;
}

/* Each */
.look-01 .look-image { left: 0; }
.look-02 .look-image { right: 0; }
.look-03 .look-image { left: 0; }

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

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


/* Look Image Main
---------------------------- */
.look-image:before {
	content: "";
	display: block;
	width: 50vw;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	bottom: 0;
	transition: all 0.8s;
}

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

/* Each */
.look-01 .look-image:before {
	background-image: url("../images/gra_main_pc.jpg");
	background-position:top center;
	left: 0;
	-webkit-transform: translate3d(-12%, 0, 0);
	transform: translate3d(-12%, 0, 0);
}
@media screen and (max-width: 812px) {
.look-01 .look-image:before {
	background-image: url("../images/gra_main.jpg");	
}
}


.look-02 .look-image:before {
	background-image: url("../images/sp1_main_pc.jpg");
	right: 0;
	-webkit-transform: translate3d(12%, 0, 0);
	transform: translate3d(12%, 0, 0);
}
@media screen and (max-width: 812px) {
	.look-02 .look-image:before {
	background-image: url("../images/sp1_main.jpg");
}
}


.look-03 .look-image:before {
	background-image: url("../images/sp2_main_pc.jpg");
	left: 0;
	-webkit-transform: translate3d(-12%, 0, 0);
	transform: translate3d(-12%, 0, 0);
}
@media screen and (max-width: 812px) {
.look-03 .look-image:before {
	background-image: url("../images/sp2_main.jpg");	
}
}

/* Visible */
.look-image-visible .look-image:before {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


/* Each */
.look-01 .look-detail:before {
	background-image: url("../images/gra_main2_pc.jpg");
	left: 0;
}
@media screen and (max-width: 812px) {
.look-01 .look-detail:before {
	background-image: url("../images/gra_main2.jpg");	
}
}

.look-02 .look-detail:before {
	background-image: url("../images/sp1_main2_pc.jpg");
	right: 0;
}
@media screen and (max-width: 812px) {
.look-02 .look-detail:before {
	background-image: url("../images/sp1_main2.jpg");	
}
}

.look-03 .look-detail:before {
	background-image: url("../images/sp2_main2_pc.jpg");
	left: 0;
}
@media screen and (max-width: 812px) {
.look-03 .look-detail:before {
	background-image: url("../images/sp2_main2.jpg");	
}
}


/* Look Detail Container
---------------------------- */
.look-detail {
	width: 50%;
	overflow: hidden;
	position: fixed;
	top: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity 0.8s, width 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	pointer-events: none;
}

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

/* Each */
.look-01 .look-detail { left: 0; }
.look-02 .look-detail { right: 0; }
.look-03 .look-detail { left: 0; }

/* Visible */
.look-detail-visible .look-detail {
	opacity: 1;
}

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


/* Look Detail Main
---------------------------- */
.look-detail:before {
	content: "";
	display: block;
	width: 50vw;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	bottom: 0;
	transition: all 0.8s;
}

@media screen and (max-width: 812px) {
	.look-detail:before {
		width: 100vw;
	}
}




/* Look Title
---------------------------- */
.look-title {
	position: fixed;
	top: -100px;
	left: 50%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.8s;
	pointer-events: none;
}
.look-title img {
	max-width: none;
	width: 100%;
}

@media screen and (max-width: 812px) {
	.look-title {
		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;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
	}
}

/* Each */
.look-01 .look-title {
	margin-top: 37em;
    margin-left: -48%;
	width: 49%;
}
.look-02 .look-title {
	margin-top: 13.076923077em;
	margin-left: -27.25%;
	width: 36%;
}
.look-03 .look-title {
	margin-top: 10.538461538em;
	margin-left: -13.5833333%;
	width: 36%;
}

@media screen and (max-width: 812px) {
	.look-01 .look-title {
		margin-top: 0;
		margin-left: auto;
		width: 83.0666667%;
	}
	.look-02 .look-title {
		margin-top: 0;
		margin-left: auto;
		width: 74%;
	}
	.look-03 .look-title {
		margin-top: 0;
		margin-left: auto;
		width: 71.6%;
	}
}

@media screen and (max-width: 812px) and (orientation: landscape) {
	.look-01 .look-title {
		max-width: 311.5px;
	}
	.look-02 .look-title {
		max-width: 277.5px;
	}
	.look-03 .look-title {
		max-width: 268.5px;
	}
}

/* Title Visible */
.look-title-visible .look-title {
	opacity: 1;
	visibility: visible;
}

@media screen and (max-width: 812px) {
	.look-image-visible.look-title-visible .look-title {
		opacity: 0;
		visibility: hidden;
	}
}



/* Look Body
---------------------------- */
.look-body {
	margin-top: 150vh;
	width: 50%;
}

@media screen and (max-width: 812px) {
	.look-body {
		padding-top: 100vh;
		width: 100%;
		position: relative;
	}
}

@media screen and (max-width: 812px) and (orientation: landscape) {
	.look-body {
		margin-top: 150vw;
		padding-top: 100vw;
	}
}

/* Each */
.look-01 .look-body { margin-left: auto; }
.look-02 .look-body { margin-left: 0; }
.look-03 .look-body { margin-left: auto; }



/* Look Image Sub
---------------------------- */
.look-image-sub {
	width: 86%;
	font-size:14px;
	line-height:1.8em
}
.look-image-sub img {
	display: block;
	max-width: none;
	width: 100%;
}

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

/* Each */
.look-01 .look-image-sub {
	margin-left: 7%;
}
.look-02 .look-image-sub {
	margin-left:7%;
}
.look-03 .look-image-sub {
	margin-left: 7%;
}

@media screen and (max-width: 812px) {
	.look-01 .look-image-sub,
	.look-02 .look-image-sub,
	.look-03 .look-image-sub {
		margin-left: 4%;
	}
}



/* ----------------------------
  Detail
---------------------------- */
.detail {
	box-sizing: border-box;
	width: 86%;
    margin: 0 auto;
}

@media screen and (max-width: 812px) {
	.detail {
		padding: 0;
		background: none;
		width:92%
	}
}

@media screen and (max-width: 812px) and (orientation: landscape) {
	.detail {
		margin-top: 100vw;
	}
}


/* Detail Inner
---------------------------- */
.detail-inner {
	margin: 0 auto;
	max-width: 400px;
	width: 66.6666667%;
}

@media screen and (max-width: 812px) {
	.detail-inner {
		padding: 8.8% 2.6666667% 21.3333333%;
		max-width: none;
		width: 100%;
		box-sizing: border-box;
		/*background: #fff;*/
	}
}





/* ----------------------------
  Latest Look
---------------------------- */
.latest {
	height: 48.461538462em;
	position: relative;
	transition: background 0.8s;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	background:#fff
}
.latest .container {
	height: 100%;
}

@media screen and (max-width: 812px) {
	.latest {
	/*	overflow: hidden;
		height: 44.615384615em;
		*/
	}
}






/* ----------------------------
  Menu
---------------------------- */
.menu {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	background: #fff;
	line-height: 1;
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10001;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s, visibility 0.8s;
	transition-delay: 0.6s;
	font-family: 'Montserrat', sans-serif;
	font-weight:600;
	font-size:2.4em;
	color:#000
}
.menu-open .menu {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

@media screen and (max-width: 812px) and (orientation: landscape) {
	.menu {
		display: block;
		
	}
}


/* Menu Body
---------------------------- */
@media screen and (max-width: 812px) {
	.menu-body {
		padding: 3.076923077em 0;
	}
}


/* Menu Button
---------------------------- */
.menu-button {
	width: 8.461538462em;
	height: 6.153846154em;
	position: fixed;
	top: 0px;
	right: 0px;
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s;
}
@media screen and (max-width: 812px) {
.menu-button {
	top: 4px;
	right: 4px;
}
	
}

.menu-button-visible .menu-button {
	opacity: 1;
	visibility: visible;
}
.menu-button span {
	position: absolute;
	width: 36.3636364%;
	height: 0;
	border-top: 1px solid #000;
	border-bottom: 1px solid #fff;
	top: 50%;
	left: 0;
	right: 0;
	margin: -1px auto 0;
	transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.menu-button span:nth-child(1) {
	-webkit-transform: translate3d(0, -.692307692em, 0);
	transform: translate3d(0, -.692307692em, 0);
}
.menu-button span:nth-child(3) {
	-webkit-transform: translate3d(0, .692307692em, 0);
	transform: translate3d(0, .692307692em, 0);
}

@media screen and (max-width: 812px) {
	.menu-button {
		padding-top: 9.3333333%;
		width: 13.3333333%;
		height: 0;
	}
	.menu-button span {
		width: 60%;
	}
	.menu-button span:nth-child(1) {
		-webkit-transform: translate3d(0, -.423076923em, 0);
		transform: translate3d(0, -.423076923em, 0);
	}
	.menu-button span:nth-child(3) {
		-webkit-transform: translate3d(0, .423076923em, 0);
		transform: translate3d(0, .423076923em, 0);
	}
}



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

/* Menu Open */
.menu-items li {
	opacity: 0;
	-webkit-transform: translate3d(0, 1.538461538em, 0);
	transform: translate3d(0, 1.538461538em, 0);
	transition: all 0.8s;
	line-height:2em
}

@media screen and (max-width: 812px) {
.menu-items li {	
line-height:1.7em;
font-size:0.9em
}
}
.menu-items li:nth-child(1) { transition-delay: 0.42s; }
.menu-items li:nth-child(2) { transition-delay: 0.38s; }
.menu-items li:nth-child(3) { transition-delay: 0.34s; }
.menu-items li:nth-child(4) { transition-delay: 0.3s; }
.menu-items li:nth-child(5) { transition-delay: 0.26s; }
.menu-items li:nth-child(6) { transition-delay: 0.22s; }
.menu-items li:nth-child(7) { transition-delay: 0.18s; }
.menu-items li:nth-child(8) { transition-delay: 0.14s; }
.menu-items li:nth-child(9) { transition-delay: 0.1s; }


.menu-open .menu-items li {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.menu-open .menu-items li:nth-child(1) { transition-delay: 0.2s; }
.menu-open .menu-items li:nth-child(2) { transition-delay: 0.26s; }
.menu-open .menu-items li:nth-child(3) { transition-delay: 0.32s; }
.menu-open .menu-items li:nth-child(4) { transition-delay: 0.38s; }
.menu-open .menu-items li:nth-child(5) { transition-delay: 0.44s; }
.menu-open .menu-items li:nth-child(6) { transition-delay: 0.5s; }
.menu-open .menu-items li:nth-child(7) { transition-delay: 0.56s; }
.menu-open .menu-items li:nth-child(8) { transition-delay: 0.62s; }
.menu-open .menu-items li:nth-child(9) { transition-delay: 0.68s; }

/* Button Hover */
.menu-items button {
	transition: opacity 0.4s;
}
.menu-items button:hover {
	opacity: 0.6;
}

@media screen and (max-width: 812px) {
	.menu-items button:hover {
		opacity: 1;
	}
}

/* Image */
.menu-items img {
	width: 120px;
	max-width: none;
	margin-bottom:25px
}
@media screen and (max-width: 812px) {
.menu-items img {
	width: 100px;	
	
}
}


/* Menu Close
---------------------------- */
.menu-close {
	width: 1.3em;
	height:  1.3em;
	position: absolute;
	top: 1.692307692em;
	right: 2.461538462em;
	transition: opacity 0.4s;
	top: 18px;
    right: 36px;
}
.menu-close:hover {
	opacity: 0.6;
}




@media screen and (max-width: 812px) {
	.menu-close {
		padding-top: 9.3333333%;
		width: 13.3333333%;
		height: 0;
		top: 0;
		right: 0;
	}
	.menu-close:hover {
		opacity: 1;
	}
	.menu-close img {
		width: 44%;
		height: 100%;
		position: absolute;
		top: 7px;
    	left: 0;
    	right: 6px;
		bottom: 0;
		margin: auto;
	}
}