@charset "UTF-8";
/* CSS Document */
html {
	touch-action: manipulation;
	overflow-x: hidden;
}

body
{
	margin-left:0;
	margin-top: 0;
	margin-right:0;
	margin-bottom: 0;
	height: available;
	height: -moz-available;
}
h1
{
	width: 100%;
	max-width: 611px;
	margin: auto;
}

.title-background
{
	width: 100%;
}

.title-background .content
{
	display: flex;
	width: 100%;
}

.title-background .left
{
	width: 50%;
}

.title-background .left img
{
	width: inherit;
	margin-top: 20px;
	max-width: 100%;
}

.title-background .right
{
	width: 50%;
	text-align: right;
}

.title-background .right img
{
	width: inherit;
	max-width: 100%;
}

.contents
{
	margin: 0 auto;
	width: 100%;
	min-height: 100%;
	height: -moz-fit-content;
	height: fit-content;
	background-image: url("../assets/images/mobile/ozlp_background.png");
	background-repeat: repeat;
	z-index: 2;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;

}

.side-thumb
{
	position: relative;
	display: flex;
	width: 100%;
	margin-top: 3em;
}

.side-thumb .content
{
	display: flex;
	width: 100%;
}

.side-thumb .left
{
	width: 50%;
}

.side-thumb .left img
{
	width: inherit;
	max-width: 100%;
}

.side-thumb .right
{
	text-align: right;
	width: 50%;
}

.side-thumb .right img
{
	width: inherit;
	max-width: 100%;
}

.side-thumb span
{
	margin-top: -50px;
}


.title-message-background
{
	background-position-x: center;
	background-position-y: bottom;
	background-size: contain;
}


.title-message
{
	width: 90%;
	max-width: max-content;
	margin: 0 auto;
	text-align: center;
	display: ruby;
}

.title-message img
{
	width: 100%;
	max-width: max-content;
}

.title-message .capture
{
	width: 100%;
	margin-top: -20px;
}

.title-message .pc
{
	display: flex;
}


.title-message .tablet
{
	width: initial;
}

.title-message a:hover img
{
	opacity: 0.6;
}

.release-message
{
	max-width: 90%;
	margin: 0 auto;
}

.release-message img
{
	max-width: 90%;
	margin: 0 auto;
}

.contents .background
{
	position: absolute;
	display: grid;
	width: 100%;
}

.contents .aligncenter
{
	text-align: center;
	position: relative;
}

.contents .aligncenter li
{
	list-style: none;
}

.contents .aligncenter img
{
	max-width: 100%;
}

.contents .copyright
{
	margin-top: 10px;
}

.contents .twitter
{
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background-repeat: no-repeat;
	background-size: contain;
	-ms-background-position-x: center;
	background-position-x: center;
}

.contents .twitter-iframe
{
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling:touch !important;
}

.contents .video
{
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background-repeat: no-repeat;
	background-size: contain;
	-ms-background-position-x: center;
	background-position-x: center;
}

.contents .video-box
{
	height: 100%;
	margin-top: 9%;
}

.contents .video
{
	width: 90vw;
	height: calc(90vw / 16 * 9);
	max-width: 807px;
	max-height: 446px;
	background-image: url("../assets/images/pc/ozlp_video_bg.png");
}

.contents .video video
{
	width: 68vw;
	height: calc(68vw / 16 * 9);
	max-width: 600px;
	max-height: 337px;
}

.bottom
{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.bottom .link-content
{
	width: 100%;
	z-index: 1;
}

.bottom .link-content .textlink
{
	width: 100%;
	color: #3EAACE;
}

.bottom .link-content .textlink a
{
	color: #3EAACE;
	text-decoration-line: none;
}

.bottom .link-content .textlink a:hover
{
	color: #999999;
	text-decoration-line: underline;
}

.topicon
{
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: 3;
}

.topicon img
{
	opacity: 1;
}

.topicon a:hover img
{
	opacity: 0.6;
}

@media screen and (min-width: 600px)
{
	.contents
	{
		background-image: url("../assets/images/tablet/ozlp_background.png");
	}

	.title-message .middle
	{
		margin-bottom: 8px;
	}

	.campaign-background
	{
		width: 100%;
		margin: 0 auto;
		background-repeat: round;
		background-size: auto;
		background-image: url("../assets/images/tablet/ozlp_background_2.png");
		-ms-background-position-x: center;
		background-position-x: center;
	}

	.campaign .content2
	{
		margin: 0 auto;
		margin-top:3em;
		background-repeat: no-repeat;
		background-size: auto;
		background-image: url("../assets/images/tablet/ozlp_background_3.png");
		-ms-background-position-x: left;
		background-position-x: left;
		background-position-y: 10em;
		width: 90%;
	}

}

@media screen and (min-width: 801px)
{
	.contents
	{
		background-image: url("../assets/images/pc/ozlp_background.png")
	}

	.title-message .tablet
	{
		display: none;
	}

	.title-message .pc .right
	{
		width: max-content;
		text-align:left;
		display: grid;
		max-width: 50%;
	}

	.title-message .pc .right img
	{
		max-width: max-content;
		max-width: -moz-max-content;
	}

	.title-message .download-message
	{
		max-width: 65%;
		margin-left: 3%;
	}

	.title-message .appbutton
	{
		display: flex;
	}

	.title-message .appstore
	{
		width: fit-content;
		padding-left: 3%;
	}

	.contents .twitter-size
	{
		width: 90vw;
		height: calc(90vw * 0.5);
		max-width: 771px;
		max-height: 380px;
		background-image: url("../assets/images/pc/ozlp_twitter.png");
		transform: translateX(-20px);
	}

	.contents .twitter-iframe
	{
		width: 75vw;
		height: calc(75vw / 8 * 3);
		max-width: 620px;
		max-height: 250px;
		transform: translate(10px, 10px)
	}

	.campaign-background
	{
		max-width: -mos-max-content;
		background-repeat: no-repeat;
		background-size: auto;
		background-image: url("../assets/images/pc/ozlp_background_2.png");
		-ms-background-position-x: center;
		background-position-x: center;
		background-position-y: 50em;
		margin-block-start: 1em;
		text-align: right;
	}

	.campaign .content
	{
		margin-left: -3em;
	}

	.campaign .content2
	{
		margin: 0 auto;
		margin-top:3em;
		background-repeat: no-repeat;
		background-size: auto;
		background-image: url("../assets/images/pc/ozlp_background_3.png");
		-ms-background-position-x: center;
		background-position-x: center;
		background-position-y: 10em;
	}

	.campaign-contents
	{
		margin: 0 auto;
		width: -moz-fit-content;
		width: fit-content;
	}

	.bottom
	{
		height: 140px;
		margin: 0 auto;
	}

	.bottom .link-content .textlink
	{
		font-size: 1.6rem;
	}
}

@media screen and (max-width: 800px)
{
	.title-message-background
	{
		background-image: url("../assets/images/tablet/ozlp_background_1.png");
		background-repeat: no-repeat;
	}

	.side-thumb
	{
		display: none;
	}

	.title-message .pc
	{
		display: none;
	}

	.title-message img
	{
		width: initial;
	}

	.title-message .download-message
	{
		max-width: 90%;
		margin: 0 auto;
	}

	.title-message .appbutton
	{
		display: flex;
		display: ruby;
		width: fit-content;
		width: -moz-fit-content;
		margin: 0 auto;
		position:relative;
	}

	.title-message .appbutton img
	{
		max-width: initial;
	}

	.title-message .googleplay
	{
		margin-right: 18px;
	}

	.title-message .appstore
	{
		display: initial;
		width:initial;
		padding-left: 0;
		margin: auto;
	}

	.contents .video
	{
		width: 100%;
		height: calc(100vw / 16 * 9);
		max-width: 807px;
		max-height: 446px;
		background-image: url("../assets/images/tablet/ozlp_video_bg.png");
		margin-bottom: -0.3em;
	}

	.contents .video video
	{
		width: 78vw;
		height: calc(78vw / 16 * 9);
		max-width: 600px;
		max-height: 337px;
	}

	.contents .twitter-size
	{
		width: 90vw;
		height: calc(90vw * 0.5);
		max-width: 720px;
		max-height: 338px;
		margin-top: -0.7em;
		background-image: url("../assets/images/tablet/ozlp_twitter.png");
		background-position-y: 1em;
		transform: translateY(-16px);
	}

	.contents .twitter-iframe
	{
		width: 75vw;
		height: calc(75vw / 5 * 2);
		max-width: 570px;
		max-height: 250px;
		transform: translate(5px, 16px);
	}

	.campaign .content
	{
		width: 90%;
		max-width: -mos-max-content;
		max-width: max-content;
		margin: 0 auto;
	}
	.bottom
	{
		height: 120px;
		margin: 0 auto;
	}

	.bottom .link-content .textlink
	{
		font-size: 1.3rem;
	}
}

@media screen and (max-width: 599px)
{
	html
	{
		height: 100%;
	}

	body
	{
		height: 100%;
	}


	.all
	{
		height: 100%;
	}

	.title-message-background
	{
		background-image: url("../assets/images/mobile/ozlp_background_1.png");
		background-repeat: no-repeat;
	}

	.title-message .tablet .appbutton img
	{
		max-width: 100%;
	}

	.release-message img
	{
		max-width: -moz-fit-content;
		max-width: fit-content;
	}

	.contents .video
	{
		width: 320px;
		height: 180px;
		max-width: 100%;
		max-height: calc(100vw / 5 * 3);
		margin: 0 auto;
		background-image: url("../assets/images/mobile/ozlp_video_bg.png");
	}

	.contents .video video
	{
		width: 75%;
		height: auto;
	}

	.contents .twitter-size
	{
		width: 100vw;
		height: calc(100vw / 3 * 2);
		max-width: 380px;
		max-height: 264px;
		background-image: url("../assets/images/mobile/ozlp_twitter.png");
		background-repeat: no-repeat;
		background-position-y: 0;
		transform: translate(0);
		margin-top: 0;
		overflow:auto;
	}
	.contents .twitter-iframe
	{
		width: 70vw;
		height: calc(70vw / 7 * 4);
		max-width: 280px;
		max-height: 170px;
		transform: translateY(5px);
	}

	.bottom .link-content .textlink
	{
		font-size: 0.7rem;
	}

	.campaign .content
	{
		width: 90%;
		max-width: 600px;
		margin: 0 auto;
	}
}