/* */
html, body {
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	/* font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif; */
	color: #fff;
	overflow: hidden;
	height: 100%;
	
	/* */
	font-size: 85%;
	
	background-color: #252525;
	
}

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

.mockup-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	display: table;
	z-index: 100;
	
	padding-top: 5rem;
	
	transition: all 1s ease-in-out;
}
.mockup-wrap-close {
	left: -1000px;
}
.mockup {
	display: table-cell;
    vertical-align: middle;
	width: 100%;
	height: 100%;
	
}

.mockup-display {
	width: 100%;
	height: 100%;
	background-image: url(../images/iphone_mockup_0.png);
	background-repeat: no-repeat;
	background-position: center;
	transition: all 1s ease-in-out;
}


.mockup img {
	display: block;
	margin: 0 auto;
}


.side-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 5rem;
	height: 100%;
	display: table;
	z-index: 100;
	padding-top: 5rem;
}
.side {
	display: table-cell;
    vertical-align: middle;
}
.side-dot {
	width: 10px;
	height: 10px;
	background-color: #fff;
	border-radius: 50%;
	
	margin: 25px auto;

	display: block;
	
	transition: all 0.1s ease-in-out;
}
.side-dot-active {
	background-color: #ef4135;
}


#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 4.5rem;
	background-color: #252525;
	z-index: 50;
}
#header .logo {
	position: fixed;
	top: 0;
	left: 0;
	width: 12.5rem;
	height: 4.5rem;
	background-color: #FFFFFF;
	z-index: 100;
	background-image: url(../images/header_logo.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#header .menu {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
}
#header .menu-appstore, #header .menu-facebook, #header .menu-twitter, #header .menu-menu {
	font-size: 1.25rem;
	text-align: center;
	line-height: 4.5rem;
	width: 4.5rem;
	height: 4.5rem;
	background-color: #ef4135;
	float: left;
}
#header .menu-appstore {
	width: 15rem;
	background-color: #252525;
	background-image: url(../images/logo_appstore.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: 1.5rem;
}
#header .menu-facebook {
	background-color: #1e5877;
}
#header .menu-twitter {
	background-color: #269bd9;
}
#header .menu-menu {
	background-color: #ef4135;
}

.menu-hidden {
	position: fixed;
	right: 13.5rem;
	top: 0;
	width: 13.5rem;
	padding-top: 5rem;
	height: 100%;
	background-color: #252525;
	transition: all 0.5s ease-in-out;
	opacity: 0;
}
.menu-hidden-open {
	right: 0;
	opacity: 1;
}
.menu-hidden a {
	width: 100%;
	padding: 1.5rem 0;
	text-align: center;
	display: block;
	color: #fff;
	background-color: #252525;
}
.menu-hidden a:nth-child(odd) {
	background-color: #2c2c2c;
}

#footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3.5rem;
	z-index: 50;
	text-align: center;
}
#footer a {
	font-size: 1.25rem;
	text-align: center;
	line-height: 3rem;
	width: 3rem;
	height: 3rem;
	background-color: rgba(255, 255, 255, 0.25);
	display: inline-block;
	border-radius: 50%;
}
#footer a:nth-child(odd) {
	margin-right: 0.25rem; 
}



.pt-wrap {
	height: 100%;
	
	padding-top: 4.5rem;
	
	background-color: #000;
	
	position: relative;
	
	right: 0;
	
	transition: all 0.5s ease-in-out;
}
.menu-open {
	right: 13.5rem;
}


.background_video {}
.background_video video {
	position: fixed;
	top: 0;
	left: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background-image: url(../images/bg_video_0001.png) no-repeat;
	background-size: contain;
}


.pt-perspective {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
}

.pt-page {
	width: 100%;
	height: 300%;
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.pt-page-current,
.no-js .pt-page {
	visibility: visible;
	z-index: 1;
}

.no-js body {
	overflow: auto;
}

.pt-page-ontop {
	z-index: 999;
}

/* Text Styles, Colors, Backgrounds */

.pt-half-wrap {
	width: 80%;
	height: 100%;
	float: right;
	display: table;
}
.pt-half {
//	display: table-cell;
    vertical-align: middle;
    padding-top: 3rem;
//	padding-right: 7.5rem;
	padding-right: 1rem;
}

.pt-half h2 {
	font-size: 3rem;
	font-weight: bold;
	
	text-align: right;
	
	line-height: 5rem;
	
	/* text-shadow: 2px 2px rgba(0,0,0, 0.25); */
	
	margin: 0;
}

.pt-half span {
	font-size: 1rem;
	font-weight: normal;
//	line-height: 2rem;
//	display: block;
//	text-align: right;
	
	color: #fff;
}

.pt-half p {
	font-size: 1rem;
	font-weight: normal;
	line-height: 2rem;
	
//	margin-top: 2rem;
	padding: 1rem 0 1rem 2rem;
	background-color: rgba(239, 65, 53, 0.75);
	
	color: #fff;
	
	
	
}
.pt-half p span.rize {
	font-size: 1rem;
	font-weight: normal;
	line-height: 4rem;
}

.pt-half .pt-stores {
	margin-top: 1.5rem;
	text-align: right;
}
.pt-half .pt-stores a img {
	width: 17.5rem;
	margin-right: 0.5rem;
	background-color: rgba(255, 255, 255, 0.25);
	padding: 0.75rem;
	border-radius: 5px;
}


.animated {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	animation-delay: 0.5s;
}


.pt-half form {
	text-align: right;
}
.pt-half input {
	padding: 0.2rem;
	width: 10rem;
	
	border: solid 2px rgba(255, 255, 255, 0.75);
	background-color: rgba(255, 255, 255, 1);
	
	margin-bottom: 0.5rem;
}
.pt-half textarea {
//	padding: 1rem;
	width: 20rem;
	
	border: solid 2px rgba(255, 255, 255, 0.75);
	background-color: rgba(255, 255, 255, 0);

}
.pt-half input.submit {
	padding: 1rem;
	width: 20rem;
	
	background-color: #61e69d;
	border: solid 0px rgba(255, 255, 255, 0);
	border-bottom: 4px solid #5cd994;
	border-radius: 5px;
	
	color: #fff;
	
	margin-top: 1.5rem;
	
}



.pt-page-1 {
	background-color: #ccc; background-image: url(../images/bg_image_0001.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;
}

.pt-page-2 {
	background-color: #ccc; background-image: url(../images/bg_image_0002.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;
}

.pt-page-3 {
	background-color: #ccc; background-image: url(../images/bg_image_0003.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;
}

.pt-page-4 {
	background-color: #ccc; background-image: url(../images/bg_image_0004.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;
}

.pt-page-5 {
	background-color: #ccc; background-image: url(../images/bg_image_0005.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;
}

.pt-page-6 {
	background-color: #ccc; background-image: url(../images/bg_image_0006.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;
}

/*
.pt-page-anim {
	transition: background-size 10s ease;
	transition-delay: 1s;
}
.pt-page-anim:hover {
	background-size: 150%;
}
*/

.pt-message {
	display: none;
	position: absolute;
	z-index: 99999;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #da475c;
	color: #fff;
	text-align: center;
}

.pt-message p {
	margin: 0;
	line-height: 60px;
	font-size: 26px;
}

.no-cssanimations .pt-message {
	display: block;
}




.pt-full-wrap {
	width: 100%;
	height: 100%;
	display: table;
}
.pt-full {
	display: table-cell;
    vertical-align: middle;
	text-align: center;
}
.pt-full h2 {
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
	line-height: 5rem;	
	/* text-shadow: 2px 2px rgba(0,0,0, 0.25); */
	margin: 0;
}
.pt-full .link-wrap {
	display: block;
	margin-top: 2rem;
	margin-bottom: 7.5rem;
}
.pt-full span {
	display: inline-block;
	width: 8.5rem;
	height: 8.5rem;
	border-radius: 50%;
	margin: 1rem;
	border: solid 0.5rem rgba(0, 0, 0, 0.25);
}
.pt-full span a {
	background-color: rgba(255, 255, 255, 0.75);
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	text-align: center;
	color: #ef4135;
	transition: all 1s ease-in-out;
}
.pt-full span > a > div {
	margin-top: 3.25rem;
}
.pt-full span a:hover {
	background-color: rgba(0, 0, 0, 0.75);
}