@charset "UTF-8";

/* CSS Document */

/*　Common Styles */

a {
	color: #000000;
	text-decoration: none;
}

ul{
	padding: 0;
}

li{
	list-style: none;
}

html {
  overflow: hidden;
  height: 100%;
  font-size: 10px;
  font-weight: 600;
  font-family: Helvetica,  Arial, "sans-serif";
}


body {
　background-color: #FCFCFC;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
　scroll-behavior: smooth;
}

body::-webkit-scrollbar {
    display:none;
  }

body.noscroll {
	overflow: hidden;
}

.contents.noscroll {
	overflow: hidden;
	pointer-events: none;
}

p {
	color:#FFF;
	font-size: 10px;
	line-height: 1em;
}

img {
	-o-object-fit: contain;
	   object-fit: contain;
}

.burger-btn,.shop,.shs,.ec{
	pointer-events: auto;
}


header {
	width: 100vw;
	height:100%;
    position: fixed;
	z-index: 999;
	mix-blend-mode: difference;
	pointer-events: none;
	padding: 30px 2.5rem 35px 2.5rem;
	display: grid;
	display: -ms-grid;
    grid-template-rows: auto 1fr auto;
	-ms-grid-rows: auto 1fr auto;
}

header div {
	
}

.menu1 {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /*pointer-events: none;*/
	white-space: nowrap;
}

.menu2 {
	display: flex;
    --webkit-box-orient: horizontal;
	flex-direction: row-reverse;
    align-items: center;
	text-align: right;
}

.menu3 {
	display: flex;
    --webkit-box-orient: horizontal;
	flex-direction: row-reverse;
    align-items: center;
	text-align: right;
}


/* MENU */

.burger-btn {
	display: block;
	margin-left: 20px;
    position: relative;
}

#btncls {
	display: none;
}

#btnopn.burger-btn.close {
	display: none;
}

#btncls.burger-btn.close {
	display: block;
	margin-left: 20px;
    position: relative;
	z-index: 999
}



header.close {
	mix-blend-mode: normal;
	 backdrop-filter: blur(5px);
	 -webkit-backdrop-filter: blur(5px);
	z-index: 999;
}





.lg.close .st0{
	fill:#000000!important;
	z-index: 999!important;
}

.lgs.close .st0{
	fill:#000000!important;
	z-index: 999!important;
}

.menu1.close {
	z-index: 999;
}


.menu3 p.close{
	display: block;
	color: #000000;
	z-index: 999;
}

.nav-list{
    /* navの横並び */
    display: flex;
}
.nav-item{
    /* メニューの右側に余白 */
    margin-right: 2.5rem;
}
.nav-wrapper{
      display: none;
      width: 100vw;
      height: 100%;
      position: fixed;
	  background-color: rgba(255,255,255,0.95);
      top: 0;
      left: 0;
      z-index: 998;/*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/
     }
.header-nav{
        width: 100%;
        height: 100%;
        z-index: 998;
      }
.header-nav .nav-list{
        display: block;
    	position: relative;
    	top: 50%;
    	transform: translate(0,-50%);
	    pointer-events: all;
      }
.header-nav .nav-item{
        text-align: right;
		color:#000000;
	    line-height: 1.5em;
      }

.nav-list a{
	font-size: 1.5em;
}

.ec a{
	color:#ffffff;
	z-index: 999;
	text-decoration: underline;
}

.ec.close a{
	color:#000000;
}





.contents {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
  height: 100vh;
height: -webkit-fill-available;
　scroll-behavior: smooth;
}

.contents::-webkit-scrollbar {
    display:none;
  }

.cover {
  scroll-snap-align: start;
  height: 100%;
height: -webkit-fill-available;
}

#menu figure {
   display: flex;
   margin: 0 0 0 auto;
}

#menu p{
   font-size: 2rem;
   position: relative;
   letter-spacing: -0.03em;
}


#menu p a{
   position: relative;
   letter-spacing: -0.03em;
}

.shop p a{
	color:#ffffff!important;
}

#menu .menu2 .atd p{
   font-size: 1.5rem;
   position: relative;
   letter-spacing: -0.02em;
}

#menu .menu2 .nmbr p{
   font-size: 2.8rem;
   position: relative;
}

#menu .menu3 p{
   font-size: 3rem;
   position: relative;
   letter-spacing: -0.02em;
   text-decoration: underline;
}

#menu.menu3.ec a{
   font-size: 3rem!important;
   position: relative;
   letter-spacing: -0.02em;
   text-decoration: underline;
   color:#ffffff!important;
}

.top {
	position: absolute;
  	width: 100%;
  	height;100%;
height: -webkit-fill-available;
  	background: url("../images/top.jpg")
    center / cover;
background-position:center bottom;
	background-size: cover;
	z-index: -999;
}

.shop {
	position: relative;
	top:2px;
}

.logo {
	width:10em;
	position: relative;
    top: 2px;
}

.lgs {
	display:none;
}

.shs {
	display: none;
}


article {
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
  height: 100vh;
height: -webkit-fill-available;
  -ms-overflow-style: none;
  scrollbar-width: none;
　scroll-behavior: smooth;
}

.snap {
  scroll-snap-align: start;
}

#bgcolor {
	  background-color: #FCFCFC;
}

article::-webkit-scrollbar {
    display:none;
  }

section {
	display: grid;
	display: -ms-grid;
	height: 100vh;
	height: -webkit-fill-available;
	grid-template-columns: repeat(12, 1fr);
	-ms-grid-columns:repeat(12, 1fr);
	grid-template-rows: repeat(18, 1fr);
	-ms-grid-rows:repeat(18, 1fr);
	gap: 0px 5px;
	align-items: center;
}

.item1,.item2,.item3 {
	justify-content: center;
	width: 100%;
  	height: 100%;
}

.item0_1,.item0_2,.item0_3 {
	justify-content: center;
    /* width: 100%; */
    /* height: 100%; */
    display: flex;
}

#b-btxt {
	background: url("../images/b2_back.png")
	center / cover;
	background-size: cover;
}

#b-btxt p{
	font-family: 'Bodoni Moda', serif;
	font-weight: 100;
	color: #ACACAC;
	font-size: 1.1rem;
	letter-spacing: -0.13px;
}


#b-collage,#b-last {
	background-color: #000000;
}

#b-sign .item0_2 {
	display: block;
	}

#b-sign .item0_3 {
	display: none;
	}

#b-sc section .item1{
	display: flex;
	flex-direction: column;
	}
	
#b-sc section .item1 p{
	color: #000000;
	font-size: 1em;
	line-height: 1.3em;
	letter-spacing: -0.35px;
	margin-bottom: 10px;
	font-family: 'IBM Plex Mono', monospace;
	}


#b-sc,#b-last {
	position: relative;
}

#b-last {
  	background: url("../images/last.jpg")
    center / cover;
	background-size: cover;
}



.footer {
	position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
	color: white;
    mix-blend-mode: difference;
}

main {
	z-index: -999;
}



section.back{
	display: block;
}

.logo_fadein{
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1000;
}
.logo_fadein p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 1001;
	width: 15rem;
	opacity: 0.5;
}

.look_fadein{
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 997;
}

.b1,.b2,.b3,.b4,.b5{
  transition: all 1s linear;
  opacity: 0;
}

.b1.run,.b2.run,.b3.run,.b4.run,.b5.run{
  opacity: 1;
}





_::-webkit-full-page-media, _:future, :root .css_selector {
position: absolute;
top: 15px;
text-align: center;
}










/*　SmartPhone (mini)　*/

@media screen and (min-width:320px) and ( max-width:479px) { 

header {
	padding: 25px 2rem 25px 2rem;
	}	

	
.container {
	margin: auto 40px;
	}
	
p {
	transform: scale(1.0); 
}
	
.logo {
	width:20px;
}
	
.lgs {
	display: block;
	position: relative;
    top: 2px;
	}
	
	.lg {
		display: none;
	}
	
#menu a{
	font-size: 2em;
}
	
#menu p a{
		font-size:1.8rem
	}
	
	.nav-item {
		margin-left: 2rem;
	}

.header-nav .nav-item{
        text-align: left;
		color:#000000;
	    line-height: 2em;
      }
	

.burger-btn {
		margin: 0;
	}
	
.shs {
	display: block;
	position: relative;
	top:2px;
}
	
	.shop {
		display: none;
	}
	
.menu1 {
    display: flex;
    justify-content: space-between;
	}
	
#menu p{
   font-size: 1.8rem;
   position: relative;
   letter-spacing: -0.05em;
}

#menu .menu2 .atd p{
   font-size: 1.3rem;
   position: relative;
   letter-spacing: -0.04em;
}

#menu .menu2 .nmbr p{
   font-size: 2.6rem;
   position: relative;
}

#menu .menu3 p{
   font-size: 2.8rem;
   position: relative;
   letter-spacing: -0.04em;
   text-decoration: underline;
}

	
#b-film section{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: repeat(7, 1fr);
    grid-template-areas:
	"."
	"."
	"item1"
    "item2"
	"item3"
	"."
	".";
	margin: auto;
	max-width: 100px;
	gap:3px;
}

	#b-film .item0 {
	grid-row: 5 / 6;
    grid-column: 1 / 2;
    position: relative;
    top: 80px;;
    right: 50%;
	}
	
#b-btxt section{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
	"."
	"."
    "item1"
    "item2"
	".";
  gap:20px;
  margin: auto;
  max-width: 280px;
}
	
#b-btxt p{
		transform: scale(1.0); 
	}
	

	
#b-sign section{
 	display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-template-areas:
        ". . . . ."
		". . . . ."
        "item1 item1 . . ."
		"item1 item1 . . ."
		". . . . ."
        ". . item2 item2 item2 "
		". . . . ."
		". . . . .";
    margin: auto;
	max-width: 300px;
}

#b-sign .item0_1 {
	grid-row: 4 / 5;
    grid-column: 3 / 5;
    position: relative;
	bottom: -3em;
	}
	
#b-sign .item0_2 {
	display: none;
	}
	
#b-sign .item0_3 {
	grid-row: 6 / 7;
    grid-column: 1 / 3;
    position: relative;
	right: -3em;
	bottom: -5em;
	width: 85px;
	display:block;
	}
	



#b-collage {
		overflow: hidden;
	}

#b-collage section{
	display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(15, 1fr);
  grid-template-areas:
	". . . . . . . . . . . ."
        ". . . . . . . . . . . ."
	". . . item1 item1 item1 item1 item1 item1 item1 item1 item1"
	". . . item1 item1 item1 item1 item1 item1 item1 item1 item1"
	". . . item1 item1 item1 item1 item1 item1 item1 item1 item1"
    ". . . item1 item1 item1 item1 item1 item1 item1 item1 item1"
    ". . . item1 item1 item1 item1 item1 item1 item1 item1 item1"
        ". . . . . . . . . . . ."
        ". . . . . . . . . . . ."
    "item2 item2 item2 item2 item2 item2 item2 item2 item2 item2 . . "
    "item2 item2 item2 item2 item2 item2 item2 item2 item2 item2 . . "
    "item2 item2 item2 item2 item2 item2 item2 item2 item2 item2 . . "
	"item2 item2 item2 item2 item2 item2 item2 item2 item2 item2 . . "
	"item2 item2 item2 item2 item2 item2 item2 item2 item2 item2 . . "
	". . . . . . . . . . . .";
	margin: auto;
	position: relative;
    width: 120%;
    left: -15%;
}
	
#b-sc section{
	position: relative;
	display: flex;
	margin: 0 auto;
    width: 100%;
    overflow: hidden;
}

#b-sc section .item1{
	transform: rotate( -90deg );
	position: relative;
	right: 5%;
	}
	
#b-sc section .item1 p{
	transform: scale(1.0); 
	}
	
	
#b-last section{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
    ". . ."
    "item1 item1 item1"
    ". . .";
}

.footer {
    position: absolute;
    bottom: 25px;
    left: 2em;
	transform: translateY(0%) translateX(0%);
    -webkit-transform: translateY(0%) translateX(0%);
	}



.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }

	
	
}

/*　SmartPhone　*/

@media screen and (min-width:480px) and ( max-width:767px) { 

.container {
	margin: auto 40px;
	}
	
	p {
	transform: scale(1.0); 
}
	
	
	.shs {
		display: none;
	}
	
	
	
.menu1 {
    display: flex;
    justify-content: space-between;
	}


#menu p{
   font-size: 1.9rem;
   position: relative;
   letter-spacing: -0.04em;
}

#menu .menu2 .atd p{
   font-size: 1.4rem;
   position: relative;
   letter-spacing: -0.03em;
}

#menu .menu2 .nmbr p{
   font-size: 2.7rem;
   position: relative;
}

#menu .menu3 p{
   font-size: 2.9rem;
   position: relative;
   letter-spacing: -0.03em;
   text-decoration: underline;
}



	
#b-film section{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
        ". . ."
        "item1 item2 item3"
        ". . .";
    margin: auto;
	max-width: 300px;
}
	
	#b-film .item0 {
	grid-row: 2 / 3;
    grid-column: 1 / 2;
    position: relative;
    top: 80px;
    right: 50%;
	}
	
	
#b-btxt section{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
	"."
	"."
    "item1"
    "item2"
	".";
  gap:20px;
  margin: auto;
  max-width: 300px;
}

#b-btxt p{
		transform: scale(1.0); 
	}
	
	
#b-sign section{
 	display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
        ". . . . . . . . ."
        "item1 item1 . . . . . . ."
        ". . . . item2 item2 item2 . ."
		". . . . . . . . .";
    margin: auto;
	max-width: 460px;
}

#b-sign .item0_1 {
	grid-row: 2 / 3;
    grid-column: 3 / 5;
    position: relative;
	bottom: -6em;
	}
	
#b-sign .item0_2 {
	grid-row: 3 / 4;
    grid-column: 8 / 10;
    position: relative;
	bottom: -4em;
	width:90px;
	}

#b-collage {
		overflow: hidden;
	}

#b-collage section{
	display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(15, 1fr);
  grid-template-areas:
    ". . . . . . . . . . . ."
	". . . . . . . . . . . ."
	". . . . item1 item1 item1 item1 item1 item1 item1 item1"
	". . . . item1 item1 item1 item1 item1 item1 item1 item1"
	". . . . item1 item1 item1 item1 item1 item1 item1 item1"
    ". . . . item1 item1 item1 item1 item1 item1 item1 item1"
    ". . . . item1 item1 item1 item1 item1 item1 item1 item1"
	". . . . . . . . . . . ."
    "item2 item2 item2 item2 item2 item2 item2 item2 item2 . . . "
    "item2 item2 item2 item2 item2 item2 item2 item2 item2 . . . "
    "item2 item2 item2 item2 item2 item2 item2 item2 item2 . . . "
	"item2 item2 item2 item2 item2 item2 item2 item2 item2 . . . "
	"item2 item2 item2 item2 item2 item2 item2 item2 item2 . . . "
	". . . . . . . . . . . ."
	". . . . . . . . . . . .";
	margin: auto;
	position: relative;
    width: 600px;
    left: -5%;
}

#b-sc section{
	position: relative;
	display: flex;
	margin: 0 auto;
	width:450px;
}
	
#b-sc section .item1 p{
	transform: scale(1.0); 
	}

	
#b-last section{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
    ". . . . . . ."
    ". item1 item1 item1 item1 item1 ."
    ". . . . . . .";
}
	


	
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }

.item0,.item1,.item2,.item3 {
		display:flex;
	}
	
	
}

/*　Tablet　*/

@media screen and (min-width:768px) and ( max-width:991px) {

.container {
	margin: auto 60px;
	}
	

#b-film section{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
        ". . ."
        "item1 item2 item3"
        ". . .";
    margin: auto;
	max-width: 350px;
}
	
	#b-film .item0 {
	grid-row: 2 / 3;
    grid-column: 1 / 2;
    position: relative;
    top: 90px;
    right: 50%;
	}
	
#b-btxt section{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
	"."
	"."
    "item1"
    "item2"
	".";
  gap:20px;
  margin: auto;
  max-width: 350px;
}
	
#b-sign section{
 	display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
        ". . . . . . . . ."
        "item1 item1 . . . . . . ."
        ". . . . item2 item2 item2 . ."
		". . . . . . . . .";
    margin: auto;
	max-width: 600px;
}

#b-sign .item0_1 {
	grid-row: 2 / 3;
    grid-column: 3 / 5;
    position: relative;
	bottom: -7em;
	}
	
#b-sign .item0_2 {
	grid-row: 3 / 4;
    grid-column: 8 / 10;
    position: relative;
	bottom: -5em;
	width:90px;
	}

	
#b-collage section{
	display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-template-areas:
    ". . . . . . . . . . . ."
	". . . . item2 item2 item2 item2 item2 item2 item2 item2"
	". . . . item2 item2 item2 item2 item2 item2 item2 item2"
	". . . . item2 item2 item2 item2 item2 item2 item2 item2"
    ". . . . item2 item2 item2 item2 item2 item2 item2 item2"
    ". . . . item2 item2 item2 item2 item2 item2 item2 item2"
	". . . . . . . . . . . ."
	". . . . . . . . . . . ."
    "item1 item1 item1 item1 item1 item1 item1 . . . . . "
    "item1 item1 item1 item1 item1 item1 item1 . . . . . "
    "item1 item1 item1 item1 item1 item1 item1 . . . . . "
	"item1 item1 item1 item1 item1 item1 item1 . . . . . "
	"item1 item1 item1 item1 item1 item1 item1 . . . . . "
	". . . . . . . . . . . .";
	margin: auto;
	max-width: 720px;
}
	
	
#b-sc section{
	position: relative;
	display: flex;
	margin: 0 auto;
	width:500px;
}

#b-last section{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
    ". . . . ."
    ". item1 item1 item1 ."
    ". . . . .";
}
	

.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }

.item0,.item1,.item2,.item3 {
		display:flex;
	}
	
	
}


/* PC */

@media screen and (min-width:992px) {
	
	
.container {
	margin: auto 80px;
	}
	
p {
	font-size: 11px;
	}	
	

	
#b-film section{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
        ". . ."
        "item1 item2 item3"
        ". . .";
    margin: auto;
	max-width: 400px;
}
	

#b-film .item0 {
	grid-row: 2 / 3;
    grid-column: 1 / 2;
    position: relative;
    top: 100px;
    right: 50%;
	}



	
#b-btxt section{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
	"."
	"."
    "item1"
    "item2"
	".";
  gap:20px;
  margin: auto;
  max-width: 400px;
}
	
#b-sign section{
 	display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
        ". . . . . . . . . ."
        "item1 item1 . . . . . . . ."
        ". . . . . item2 item2 item2 . ."
		". . . . . . . . . .";
    margin: auto;
	max-width: 700px;
}

#b-sign .item0_1 {
	grid-row: 2 / 3;
    grid-column: 3 / 5;
    position: relative;
	bottom: -8em;
	}
	
#b-sign .item0_2 {
	grid-row: 3 / 4;
    grid-column: 9 / 11;
    position: relative;
	bottom: -6em;
	width:105px;
	}

#b-collage section{
	display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-template-areas:
    ". . . . . . . . . . . . . . . ."
	". . . . . . . . item2 item2 item2 item2 item2 item2 item2 item2"
	". . . . . . . . item2 item2 item2 item2 item2 item2 item2 item2"
	". . . . . . . . item2 item2 item2 item2 item2 item2 item2 item2"
    ". . . . . . . . item2 item2 item2 item2 item2 item2 item2 item2"
    ". . . . . . . . item2 item2 item2 item2 item2 item2 item2 item2"
    "item1 item1 item1 item1 item1 item1 item1 . . . . . . . . ."
    "item1 item1 item1 item1 item1 item1 item1 . . . . . . . . ."
    "item1 item1 item1 item1 item1 item1 item1 . . . . . . . . ."
	"item1 item1 item1 item1 item1 item1 item1 . . . . . . . . ."
	"item1 item1 item1 item1 item1 item1 item1 . . . . . . . . ."
	". . . . . . . . . . . . . . . .";
	margin: auto;
	max-width: 900px;
}

#b-sc section{
	position: relative;
	display: flex;
	margin: 0 auto;
	width:500px;
}


	
#b-last section{
	position: relative;
	display: flex;
	margin: 0 auto;
	width:500px;
}
	

	
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }

.item0,.item1,.item2,.item3 {
		display:flex;
	}
	
	
}