@charset "utf-8";
/* CSS Document */

*,::after,::before{box-sizing:border-box}html{line-sizing:normal}body{margin:0}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.17rem}h4{font-size:1rem}h5{font-size:.83rem}h6{font-size:.67rem}h1{margin:.67em 0}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle;max-width:100%}canvas,img,svg,video{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}


body {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin: 0;
	padding: 0;
	position: relative;
	background-color: #FFF;
}

.flexBox {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.YouTube > div {
	margin: 0 auto;
	padding-bottom: 56.25%;
	height: 0;
	position: relative;
	overflow: hidden;
}

.YouTube iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

h2,
h3,
.mp1 {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: 900;
}

h2 {
	text-align: center;
	font-size: clamp(24px, 7vw, 42px);
	color: #0f1158;
}

h2,
h3 {
	margin: 20px auto 0;
}

p {
	margin: 20px 0 0;
	line-height: 1.4em;
}

@media only screen and (min-width: 960px) {

}


header {position: relative;}

header h1 {
	width: 100%;
	height: 0;
	margin: 0;
	padding: 100vh 0 0;
	background-image: url("../images/apps/puzzlebobble-vr_h1_bg_sp.jpg");
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	z-index: 0;
	letter-spacing: 0;
}

header.PB3D h1 {
	background-image: url("../images/apps/puzzlebobble-3d_h1_bg_sp.jpg");
	background-size: cover;
	background-position: center center;
	overflow: hidden;
}

header div {
	width: 100%;
	text-align: center;
	position: absolute;
	z-index: 10;
	bottom: 10%;
}

header.PB3D div {
	bottom: 5%;
}

/*header p {
	display: block;
	width: 100%;
	margin: auto;
	text-align: center;
	line-height: 1.5em;
	font-size: clamp(24px, 8vw, 36px);
	text-shadow: 2px 2px 3px #3a1809, -2px 2px 3px #3a1809, 2px -2px 3px #3a1809, -2px -2px 3px #3a1809;
	color: #FF9922;
}*/

header p {
	display: block;
	width: 100%;
	margin: auto;
	text-align: center;
	line-height: 1.5em;
	font-size: clamp(24px, 8vw, 36px);
	color: #FF9922;
	-webkit-text-stroke: 2px #0f1158;
	text-stroke: 2px #0f1158;
	text-shadow: 2px 2px 3px #FFF, -2px 2px 3px #FFF, 2px -2px 3px #FFF, -2px -2px 3px #FFF;
}

header.PB3D p {font-size: clamp(24px, 6vw, 36px);}

header p span {font-size: 1.4em;}

header.PB3D p span {font-size: 1.1em;}

header a {
	width:  clamp(320px, calc(40% - 100px), 420px);
	display: block;
	box-sizing: border-box;
	margin: 30px auto 0;
	padding: 5px 20px;
	border: 4px #0f1158 solid;
	border-radius: 50px;
	background-color: #FFF12F;
	box-shadow: 0px 0px 0px 2px rgba(255,255,255,1), 0px 5px 5px 0px rgba(0,0,0,0.5), 2px 2px 0 0 rgba(255,255,255,0.5) inset;
	font-size: clamp(16px, 1.8vw, 26px);
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	color: #0f1158;
	text-decoration: none;
	transition: all 0.5s ease;
}

header a:hover {
	background-color: #0f1158;
	color: #FFF;
}

@media only screen and (min-width: 960px) {

header div {
	width: 100%;
	text-align: center;
	position: absolute;
	z-index: 10;
	/*top: 75%;
	bottom: 0%;*/
	top: auto;
	bottom: 50px;
}

header h1 {
	width: 100%;
	height: 0;
	margin: 0;
	padding: 56.25% 0 0;
	background-image: url("../images/apps/puzzlebobble-vr_h1_bg.jpg");
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	z-index: 0;
	letter-spacing: 0;
}

header.PB3D h1 {
	background-image: url("../images/apps/puzzlebobble-3d_h1_bg.jpg");
	background-size: cover;
	background-position: center center;
	overflow: hidden;
}

header p {
	line-height: 1.4em;
	font-size: clamp(24px, 3.5vw, 56px);
}

header.PB3D p {font-size: clamp(24px, 3.4vw, 56px);}

header a {
	display: block;
	box-sizing: border-box;
	margin: 20px auto 0;
	padding: 5px 10px;
	border: 4px #0f1158 solid;
}

header .sponly {display: none;}

}
@media only screen and (min-width: 1280px) {

header div {
	top: auto;
	bottom: 40px;
}

}


main {
	letter-spacing: 0.2em;
}

.content {
	margin: 0;
	padding: 50px 20px;
	background-image: url("../images/apps/puzzlebobble-vr_bg1.jpg");
	background-size: cover;
	background-position: center center;
}

.content .YouTube {
	max-width: 640px;
	margin: 50px auto 0px;
}

.content .text {
	max-width: 960px;
	margin: auto;
}

.content .VRmode {
	max-width: 960px;
	margin: 100px auto 0;
}

.content .VRmode .grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	margin-top: 50px;
}

.content .VRmode .grid p {
	margin: 10px auto auto;
	text-align: center;
}

.content h2 {
	margin: 0;
}

.slideContent {
	max-width: 640px;
	margin: 40px auto 0;
}

.content p:first-of-type {
	margin: 40px auto 0;
}


.gameMode {
	margin: 0;
	padding: 50px 20px;
}
.gameMode:before{
	content: "";
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	background-image: url("../images/apps/puzzlebobble-vr_bg.jpg");
	background-size: cover;
}

.gameMode .flexBox {
	box-sizing: border-box;
	max-width: 640px;
	margin: 50px auto 0;
	padding: 1% 5% 5%;
	border: 4px #0f1158 solid;
	border-radius: 20px;
	background-color: rgba(255,255,255,0.70);
	box-shadow: 0px 0px 0px 2px rgba(255,255,255,1), 0px 10px 10px 0px rgba(0,0,0,0.4), 2px 2px 0 0 rgba(255,255,255,0.5) inset;
	font-size: 1em;
	line-height: 1.2;
	text-decoration: none;
	transition: all 0.5s ease;
}

.gameMode .flexBox div:nth-of-type(2) {
	margin-top: 20px;
}

.gameMode h2 {
	color: #FFF;
	text-shadow: 2px 2px 4px #0f1158, -2px 2px 4px #0f1158, 2px -2px 4px #0f1158, -2px -2px 4px #0f1158;
}

.gameMode h3 {
	margin: 5% auto;
	text-align: center;
	font-size: clamp(24px, 5vw, 36px);
	color: #0f1158;
}

.gameMode p:first-of-type {}

.gameMode .annotation p {
	max-width: 640px;
	margin: 20px auto auto;
	color: #0f1158;
	font-weight: bold;
	text-shadow: 0px 1px 5px #FFF, 0px -1px 5px #FFF;
}

@media only screen and (min-width: 960px) {

.content .YouTube {
	max-width: 960px;
	margin: 50px auto 0px;
}

.slideContent {
	max-width: 960px;
	margin: 40px auto 0;
}

.gameMode .flexBox {
	max-width: 1080px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	padding: 40px;
}

.gameMode .flexBox div {
	flex: 0 0 calc(50% - 20px);
	text-align: left;
}

.gameMode .flexBox div:nth-of-type(2) {
	margin-top: 0;
}

.gameMode .flexBox:nth-of-type(2) div:nth-child(1) {
	order: 2
}

.gameMode h3 {
	margin: 0% auto 5%;
	text-align: left;
	font-size: clamp(24px, 3vw, 36px);
}

.gameMode .annotation p {
	max-width: 1080px;
}

}



/*SNS ボタン*/
.shareBox {
	width: 230px;
	margin: 20px auto 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: flex-start;
}

.officialAccount .shareBox {width: 120px; margin: 40px auto 0;}

.shareButtons {flex: 0 0 auto;}

.shareButtons a {
	display: block;
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
	background-size: 30px;
}

.fbBtn {background: url("../images/sns_ico_01_fb.svg") no-repeat;}
.tweetBtn {background: url("../images/sns_ico_02_tw.svg") no-repeat;}
.lineBtn {background: url(../images/sns_ico_03_line.svg) no-repeat;}
.officialAccount .tweetBtn {background: url(../images/stayhome/svg_logo_tw_wt.svg) no-repeat;}
.officialAccount .instBtn {background: url("../images/stayhome/svg_logo_inst_wt.svg") no-repeat; }

@media only screen and (min-width: 960px) {

.officialAccount .shareBox {margin: 20px auto 0;}

}


/*----------footer------------*/
footer {
	width: 100%;
    height: auto;
	display: block;
	margin: 100px 0 0;
	padding: 0px 0 0;
	background-color: #FFF;
    align-self: flex-end;
	color: #222;
}

footer > div{
	max-width: 1560px;
	margin: auto;
	padding: 100px 0px 15px;
}

/*タイトーリンク*/
ul.taitoLink{
    margin: 100px auto 0;
    padding: 0 30px 30px;
    text-align: center;
}

ul.taitoLink li {
    font-size: 0.6em;
    display: inline-block;
}
ul.taitoLink li+li {margin-left: 1.0em;}
ul.taitoLink a{color: #222; text-decoration: none;}
ul.taitoLink a:hover{color: #001199;}


.corporateLogo {
	max-width: 960px;
	margin: 100px auto 0;
}

.corporateLogo .bub35th {
	width: calc(calc(100% / 2) - 40px);
	max-width: 200px;
	margin: auto;
	padding-bottom: 40px;
}

.corporateLogo .flexBox {
	display: block;
}

.corporateLogo .flexBox div {
	flex: 0 0 calc(calc(100% / 1.2) - 40px);
	max-width: 300px;
	margin: 5% auto 0;
	padding: 0 20px;
	text-align: center;
}

.corporateLogo .flexBox div.taito {
	flex: 0 0 calc(calc(100% / 2) - 40px);
	max-width: 200px;
}

.corporateLogo .flexBox div.pslogo {
	max-width: 150px;
	padding: 0 20px 15px;
}

.corporateLogo .flexBox div a {
	width: auto;
	display: block;
	margin: 0 0 0 auto;
}

.copy {
	font-family: Arial, Helvetica, "sans-serif";
	padding: 20px;
    margin: 100px 0 0;
	font-size: 0.5em;
	text-align: left;
    border-top: solid 1px #555;
}


@media only screen and (min-width: 960px) {

ul.taitoLink li {font-size: 0.9em;}
footer p:last-child{font-size: 0.8em;}

.corporateLogo .bub35th {
	width: calc(calc(100% / 4) - 40px);
}

.corporateLogo .flexBox {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
}

.corporateLogo .flexBox div {
	flex: 0 0 calc(calc(100% / 3) - 40px);
	margin: 0;
}

.corporateLogo .flexBox div.taito {
	flex: 0 0 calc(calc(100% / 4) - 40px);
	padding-bottom: 10px;
}

.corporateLogo .flexBox div.pslogo {
	flex: 0 0 calc(calc(100% / 4.5) - 40px);
	padding-bottom: 10px;
}

.copy {
	text-align: center;
}

}


:root {
  --animate-delay: 0.2s;
}

.shutter{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#FFF;
	z-index:9999;
	-webkit-animation: byebyeShutter 2.3s forwards;
	animation: byebyeShutter 2.3s forwards;
}

.shutter .bub35th {
	width: calc(calc(80%) - 40px);
	max-width: 480px;
	margin: auto;
	padding-bottom: 40px;
}

@keyframes byebyeShutter {
70% {
	opacity: 1;
}
100% {
	opacity: 0;
	display: none;
	z-index: -1;
}
}


.enOfficial a {
	width:  clamp(320px, calc(40% - 100px), 420px);
	display: block;
	box-sizing: border-box;
	margin: 30px auto 0;
	padding: 10px 20px;
	border-radius: 50px;
	background-color: #3AC8F3;
	font-size: clamp(16px, 1.8vw, 26px);
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s ease;
}

.enOfficial a:hover {
	background-color: #0f1158;
	color: #FFF;
}