body{
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	max-width: 500px;
	overflow-x: hidden;
}

img{
	width: 100%;
}

header{
	width: 100%;
	max-width: 750px;
	padding:2% 5%;
	background: #ffffff;
	position: fixed;
	top: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header__left{
width: 15%;
margin-right: 5%;
}

.header__left img{
	filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.4));
}

.header__right {
  position: relative;
  display: inline-block;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
	border-radius: 10px;
  background: #36a8f1;
	color: #fff;
}

.header__right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #36a8f1;
}

.premire_scrbnr * {
	padding: 0;
	margin: 0;
}

.premire_scrbnr .premire_scrbnr-top {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	text-decoration: none !important;
	display: block;
	position: relative;
	background-color: #000;
}

.premire_scrbnr .scrbnr_img {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: scroll;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100 !important;
	overscroll-behavior: contain;
}

.premire_scrbnr .scrbnr_img::-webkit-scrollbar {
	display:none;
}

.premire_scrbnr .scrbnr_img video,
.premire_scrbnr .scrbnr_img img{
	width: 200vw !important;
	min-width: 200vw;
	height: auto !important;
	display: block;
}


.premire_scrbnr .scrbnr_cover {
	position: relative;
	overflow-x: hidden;
	z-index: 200 !important;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	pointer-events: none !important;
}
.premire_scrbnr .scrbnr_cover img {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 10;
}
.premire_scrbnr .scrbnr_arrow {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8;
	opacity: 1;
	transition: all 0.5s;
}

.premire_scrbnr .scrbnr_filter{
	width: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.5s;
	z-index: 9;
}

.premire_scrbnr .scrbnr_ring {
	width: 150px;
	height: 150px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.premire_scrbnr .scrbnr_ring img {
	width: 100%;
	height: auto;
	display: block;
	position: absolute;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

}


.scrbnr_finger{
	top: 50%;
	left: 50%;
	z-index: 1;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0.7;
}

.btnPremireRipple{
	/*波紋の基点とするためrelativeを指定*/
position: relative;
	/*波紋の形状*/
display:inline-block;
width:80px;
height:80px;premireRipple
border-radius: 50%;
color:#ccc;
	outline: none;
	/*アニメーションの設定*/
	transition: all .3s;
}

/*hoverした際の背景色の設定*/
.btnPremireRipple:hover{
background:#666;  
}

/*波形を2つ設定*/
.btnPremireRipple::after,
.btnPremireRipple::before {
	content: '';
	/*絶対配置で波形の位置を決める*/
	position: absolute;
	left: -25%;
	top: -25%;
	/*波形の形状*/
	border: 2px solid #ffffff;
	width: 150%;
	height: 150%;
	border-radius: 50%;
	/*はじめは不透明*/
	opacity: 1;
	/*ループするアニメーションの設定*/
	animation:1s circleanime linear infinite;
}

/*波形の2つ目は0.5秒遅らせてアニメーション*/
.btnPremireRipple::before {
	animation-delay:.5s; 
}

/*波形のアニメーション*/
@keyframes circleanime{
0%{
	transform: scale(0.68);
}
100%{
	transform: scale(1.2);
	opacity: 0;
}
}

/*中央矢印*/
.btnPremireRipple span::after {
	content: '';
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 38%;
	left: 45%;
	/*矢印の形状*/
	border: 14px solid transparent;
	border-top-width: 10px;
	border-bottom-width: 10px;
	border-left-color: #fff;
}

.premireRipple{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}


.scrbnr_filter img{
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-height: 100dvh;
}

.scrbnrMainbtn{
	position: absolute;
	width: 92vw;
	left: 4vw;
	bottom: 3%;
	z-index: 201;
	text-align: center;
}

.scrbnrMainbtn a{
	color: #fff;
	display: inline-block;
	padding: 30px;
	text-decoration: none;
}

.scrbnr_text{
	width: 90%;
	margin: 0 auto;
}

.scrbnr_text-top{
	padding: 24% 0 16px;
}

footer{
	padding: 8px 0;
	font-size: 10px;
	text-align: center;
	line-height: 2;
}

/* btn */
.scrbnr__btn-wrapper{
	position: absolute;
	bottom: 0;
	z-index: 220;
	width: 100%;
	padding: min(5vw,34px) 0;
}

.scrbnr__btn{
	position: relative;
	width: 70%;
	max-width: 450px;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	padding: min(3vw,22px);
	border-radius: 30px;
	font-size: 16px;
	background: #ffffffeb;
	color:#36a8f1;
}

.scrbnr__btn span{
	font-size: 10px;
}

.scrbnr__btn.women{
	margin: min(3vw,22px) auto;
}

.scrbnr__btn.login{
	background: #36a9f1eb;
	color: #fff;
}

.scrbnr__btn:after{
	position: absolute;
	display: block;
	content: "▶︎";
	font-size: 16px;
	top: 50%;
	right: 7%;
	transform: translateY(-50%);
}

.scrbnr__cc-wrapper{
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

.scrbnr__cc{
	position: absolute;
	font-size: 20px;
	padding: 3%;
	font-weight: bold;
	color: #fff;
	background: #ff4388a4;
	z-index: 500;
	border-radius: 10px 0 0 10px;
}

.scrbnr__cc.first{
	top: 30%;
	right: -5px;
	padding-right: 5%;
	rotate: -5deg;
	animation-duration: 0.3s;
}

.scrbnr__cc.second{
	top: 45%;
	left: -5px;
	padding-left: 5%;
	rotate: 5deg;
	border-radius:0 10px 10px 0;
	animation-duration: 0.3s;
}

.scrbnr__cc.third{
	top: 60%;
	right: 0;
	padding-right: 5%;
	right: -5px;
	rotate: -5deg;
	animation-duration: 0.3s;
}

@media screen and (min-width:600px) {
 body{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
 }


.premire_scrbnr .premire_scrbnr-top {
	width: 100%;
	height: 96vh;
	overflow: hidden;
	text-decoration: none !important;
	display: block;
	position: relative;
	background-color: #000;
}
.premire_scrbnr .scrbnr_img {
	width: 100%;
	height: 96vh;
	overflow: scroll;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100 !important;
	overscroll-behavior: contain;
}

.premire_scrbnr .scrbnr_img::-webkit-scrollbar {
	display:none;
}

.premire_scrbnr .scrbnr_img video,
.premire_scrbnr .scrbnr_img img{
	width: 150% !important;
	min-width: 150% !important;
	height: auto !important;
	display: block;
}

.premire_scrbnr .scrbnr_cover {
	position: relative;
	overflow: hidden;
	z-index: 200 !important;
	width: 100%;
	height: 96vh;
	pointer-events: none !important;
}


.scrbnr_filter img{
	width: 100%;
	height: 96vh;
	max-height: 100%;
}

.scrbnrMainbtn{
	position: absolute;
	width: 80%;
	left: 10%;
	bottom: 3%;
	z-index: 201;
	text-align: center;
}

.scrbnr_text{
	width: 70%;
	margin: 0 auto;
}

.scrbnr_text-top{
	padding: 32% 0 16px;
}

}

.delay01{
  animation-delay: 0.3s;
}

.delay02{
	animation-delay: 0.6s;
}

.scrbnr__anonymous{
  text-align: center;
  color: #fff;
  border: 2px solid #fff;
  width: 45%;
  font-weight: bold;
	max-width: 500px;
  margin: 0 auto;
  padding: 2% 6%;
}