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

/* =========================================================
		Reset
========================================================= */

/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight: normal;list-style-type:none;}
body {line-height:1}
pre,textarea{overflow:auto}
[hidden],audio:not([controls]),template{display:none}
details,main,summary{display:block}
input[type=number]{width:auto}
input[type=search]{-webkit-appearance:textfield}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
progress{display:inline-block}
small{font-size:75%}
textarea{resize:vertical}
[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
*,::after,::before{box-sizing:inherit;border-style:solid;border-width:0}
*{font-size:inherit;line-height:inherit;margin:0;padding:0}
::after,::before{text-decoration:inherit;vertical-align:inherit}
a{text-decoration:none}
audio,canvas,iframe,img,svg,video{vertical-align:middle}
button,input,textarea{background-color:transparent;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;min-height:1.5em}
code,kbd,pre,samp{font-family:monospace,monospace}
nav ol,nav ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
::-moz-selection{background-color:#B3D4FC;text-shadow:none}
::selection{background-color:#B3D4FC;text-shadow:none}
@media screen{[hidden~=screen]{display:inherit}
[hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0 0 0 0)!important;position:absolute!important}
}

/* =========================================================
		Common
========================================================= */
* {
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
	height: 100%;
}
body {
	color: #000;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Helvetica, Sans-Serif;
	font-size: 1.4rem;
	max-height: 999999px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
	height: 100%;
	background: url(../img/mainbg.gif);
	background-size: 65px 65px;
}
a {
	color: #555;
	text-decoration: none;
	-webkit-transition: all .25s ease-in;
	transition: all .25s ease-in;
}
a:focus {
	outline: none;
}
a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
}
img {
	width: 100%;
	height: auto;
}
.spOnly {
	display: none;
}
@media screen and (max-width:736px) {
	body {
		margin-top: 72px;
	}
	.spOnly {
		display: block;
	}
	.pcOnly {
		display: none;
	}
	.modaal-container {
		height: 450px !important;
	}
	.modaal-iframe-elem {
		height: 320px !important;
	}
}
/* =========================================================
		Header
========================================================= */
.header {
	background: url(../img/headbg.jpg) no-repeat;
	background-size: cover;
	max-width: 900px;
	margin: 0 auto;
	position: relative;
}
.header .switch {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 80px;
	width: 9%;
}
.header .news {
	position: absolute;
	left: 2%;
	bottom: 20px;
	width: 30%;
}
.header .news .title {
	width: 55px;
	position: relative;
	left: 3%;
	top: 10px;
}
.header .news .newsBox {
	background: #fff;
	border-radius: 10px;
	padding: 15px 5% 0;
	height: 80px;
	overflow-x: auto;
}
.header .news .newsBox dl {
	display: flex;
	font-size: 1.1rem;
	letter-spacing: 1px;
	line-height: 13px;
	padding-bottom: 3px;
}
.header .news .newsBox dt {
	color: #ff5277;
	white-space: nowrap;
	margin-right: 5%;
}
.header .spMenu,
.innerHeader .spMenu {
	display: none;
}
.innerHeader {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	background: url(../img/innerheadbg.jpg) no-repeat;
	background-size: cover;
	padding-right: 2.5%;
}
.innerHeader .switch {
	width: 12%;
	max-width: 80px;
}
.innerHeader h1 {
	width: 15%;
	max-width: 107px;
	margin: 16px 14px 0;
}
@media screen and (max-width:860px) {
	.header .news {
		width: 36%;
		bottom: 10px;
	}
	.header .news .newsBox {
		padding: 10px 5% 8px;
		height: 70px;
	}
	.header .news .newsBox dl {
		font-size: 1rem;
	}
}
@media screen and (max-width:736px) {
  .header {
    background: url(../img/menu_bg.gif) ;
    background-size: 69px 69px;
  }
  .header .spMenu,
	.innerHeader .spMenu {
    display: block;
  }
  .header .spMenu dt,
  .innerHeader .spMenu dt {
    text-indent: -9999px;
    overflow: hidden;
    width: 100%;
    height: 72px;
    background: url(../img/menu_c.png) 50% 50% no-repeat;
    background-size: 296px 57px;
  }
  .header .spMenu dt.open,
  .innerHeader .spMenu dt.open {
    background: url(../img/menu_o.png) 50% 50% no-repeat;
    background-size: 296px 57px;
  }
  .header .spMenu dd,
  .innerHeader .spMenu dd {
    background: url(../img/globalnav_bg.png) no-repeat 0 bottom;
    background-size: 100%;
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    display: none;
    z-index: 999;
  }
  .header .spMenu .navWrap,
  .innerHeader .spMenu .navWrap {
    background: url(../img/menu_bg.gif);
    background-size: 69px 69px;
  }
  .header .switch,
  .innerHeader .switch {
    width: 68px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .innerHeader {
    display: block;
		padding: 0;
  }
	.header .fixMenu,
	.innerHeader {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		height: 72px;
		background: url(../img/menu_bg.gif) ;
    background-size: 69px 69px;
	}
  .innerHeader h1 {
    display: none;
  }
  .innerHeader .navWrap h1 {
    display: block;
    width: 35%;
    margin: 0 auto;
    padding: 14px 0 0;
    max-width: none;
  }
  .header .news {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    background: url(../img/news_bg.jpg);
    background-size: 100%;
    padding: 0 5% 20px;
  }
  .header .news .title {
    width: 74px;
    position: relative;
    left: 2%;
    top: 13px;
  }
  .header .news .newsBox {
    padding: 20px 4% 12px;
    height: auto;
    border-radius: 5px;
  }
  .header .news .newsBox dl {
    font-size: 1rem;
  }
}
.your-special-css-class {
    max-width: 350px !important;
    height: 85%;
    margin: auto;
    max-height: 780px;
    padding: 140% 16px 0 13px !important;
}
.movieFrame {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding-top: 56.25%;
}
.movieFrame iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
.movieBtn a {
	display: block;
	color: #333;
	background: #fff;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
	width: 50%;
	margin: 30px auto;
	padding: 10px 0;
}
 
@media screen and (max-width: 736px) {
 
	.movieBtn a {
		font-size: 1.6rem;
		width: 90%;
		margin: 20px auto;
		padding: 10px 0;
	}
 
}
/* =========================================================
		Globak Navi
========================================================= */
.globalNav {
	max-width: 900px;
	margin: 0 auto;
}
.globalNav.topNav {
	background: url(../img/top_navbg.gif) no-repeat;
	background-size: cover;
	padding: 16px 0 17px;
}
.globalNav.innerNav {
	padding: 18px 0 14px;
}
.globalNav ul {
	display: flex;
}
.globalNav.topNav .nav01 {
	margin: 0 2% 5px;
}
.globalNav.innerNav .nav01 {
	margin: 0 0 4px;
}
.globalNav .nav01 li {
	width: 25%;
	text-align: center;
}
.globalNav .nav01 li img {
	max-width: 211px;
}
.globalNav.topNav .nav02 {
	margin: 0 1%;
}
.globalNav .nav02 li {
	width: 20%;
}
.globalNav .nav02 li img {
	max-width: 175px;
}
@media screen and (max-width:736px) {
  .globalNav {
    margin: 0 4%;
    padding: 18px 0 16px;
  }
  .globalNav.topNav {
  	background: none;
  	padding: 0;
  }
  .globalNav.innerNav {
    padding: 0;
  }
  .globalNav ul {
    display: flex;
    flex-wrap: wrap;
  }
  .globalNav.topNav .nav01 {
    margin: 0;
  }
  .globalNav .nav01 li {
    width: 49%;
    margin: 0 2% 2px 0;
  }
  .globalNav .nav01 li:nth-child(2n) {
    margin-right: 0;
  }
  .globalNav .nav01 li img {
    max-width: none;
  }
  .globalNav ul.nav02 {
    margin: 0 7%;
    display: block;
    font-size: 0;
    text-align: center;
  }
  .globalNav .nav02 li {
    width: 48%;
    margin-right: 4%;
    display: inline-block;
  }
  .globalNav .nav02 li:nth-child(2n) {
    margin-right: 0;
  }
  .globalNav .nav02 li img {
    max-width: none;
  }
  .globalNav.pcNav {
    display: none;
  }
}
/* =========================================================
		Globak Navi
========================================================= */
.mainContents {
	display: block;
	max-width: 900px;
	margin: 0 auto;
}
/* --------- ぷるぷるの島 ---------- */
.islandBlock {
	position: relative;
}
.islandBlock .islandImg {
	width: 50%;
	height: auto;
	max-width: 439px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}
.islandBlock .islandDescription li {
	position: absolute;
	z-index: 2;
}
.islandBlock .islandDescription .island01 {
	max-width: 198px;
	width: 22%;
	top: 21%;
	left: 15%;
}
.islandBlock .islandDescription .island02 {
	max-width: 209px;
	width: 24%;
	top: 49%;
	left: 8%;
}
.islandBlock .islandDescription .island03 {
	max-width: 270px;
	width: 31%;
	bottom: 4%;
	left: 17%;
}
.islandBlock .islandDescription .island04 {
	max-width: 209px;
	width: 24%;
	top: 19%;
	right: 13%;
}
.islandBlock .islandDescription .island05 {
	max-width: 193px;
	width: 22%;
	bottom: 18%;
	right: 11%;
}
@media screen and (max-width:736px) {
	.islandBlock .islandImg {
		width: 100%;
		max-width: none;
		margin-top: 8%;
	}
	.islandBlock .islandDescription li {
		animation:blink 1s ease-in-out infinite alternate;
	}
	.islandBlock .islandDescription .island01 {
		max-width: 280px;
		width: 37.2%;
		top: 18%;
		left: 5%;
	}
	.islandBlock .islandDescription .island02 {
		max-width: 274px;
		width: 36.5%;
		top: 62%;
		left: 1%;
	}
	.islandBlock .islandDescription .island03 {
		max-width: 280px;
		width: 37.2%;
		bottom: 2%;
		left: 29%;
	}
	.islandBlock .islandDescription .island04 {
		max-width: 278px;
		width: 37%;
		top: 21%;
		right: 0;
	}
	.islandBlock .islandDescription .island05 {
		max-width: 260px;
		width: 34.5%;
		bottom: 13%;
		right: 3%;
	}
}
/* --------- ほっぺちゃんの部屋 ---------- */
.roomBlock {
	position: relative;
}
.roomBlock .roomList {
	height: auto;
	max-width: 886px;
	left: 0;
	right: 0;
	bottom: 6px;
	margin: auto;
	position: absolute;
}
.roomBlock .roomList .listTitle {
	max-width: 202px;
	position: absolute;
	left: 3.5%;
	top: 1%;
}
.roomBlock .roomListDescription li {
	position: absolute;
	z-index: 2;
	max-width: 125px;
	width: 15%;
}
.roomBlock .roomListDescription .roomList01 {
	top: 26%;
	left: 7%;
}
.roomBlock .roomListDescription .roomList02 {
	top: 49%;
	left: 22%;
}
.roomBlock .roomListDescription .roomList03 {
	top: 24%;
	left: 31%;
}
.roomBlock .roomListDescription .roomList04 {
	top: 35%;
	left: 46%;
}
.roomBlock .roomListDescription .roomList05 {
	top: 17%;
	right: 26%;
}
.roomBlock .roomListDescription .roomList06 {
	top: 20%;
	right: 7%;
}
@media screen and (max-width:736px) {
	.roomBlock .roomList {
		bottom: 4px;
	}
	.roomBlock .overWrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.roomBlock .roomList .listTitle {
		max-width: none;
		left: 6.5%;
		top: -4%;
		width: 60%;
		z-index: 3;
	}
	.roomBlockWrap {
		width: 200%;
		position: relative;
	}
	.roomBlock .roomListDescription li {
		animation:blink 1s ease-in-out infinite alternate;
	}
}
@keyframes blink{
	0% {opacity:0.6;}
	100% {opacity:1;}
}
/* --------- 早期購入特典 ---------- */

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}




.purchase {
	position: relative;
}
.purchase .purchaseDetails {
	position: absolute;
	width: 100%;
	margin: 0 auto;
	top: 20%;
}
@media all and (-ms-high-contrast: none){
  .purchase .purchaseDetails {
    top: 17%;
  }
}
.purchase .purchaseDetails .block {
	display: flex;
	margin-bottom: 20px;
}
.purchase .purchaseDetails .block .img {
	max-width: 277px;
	width: 31%;
	margin-right: 5%;
}
.purchase .purchaseDetails .block .img img {
	position: relative;
	top: -15px;
}
.purchase .purchaseDetails .block .listBlock {
	width: 80%;
}
.purchase .purchaseDetails .block .listBlock .listBlockDetails {
	border-radius: 8px;
	background: #fff;
	box-shadow:0px 0px 6px 3px #40b05a;
	padding: 16px 6% 10px;
	margin-left: 5%;
}
.purchase .purchaseDetails .block:nth-of-type(2) .listBlock .listBlockDetails {
	padding: 28px 6% 10px;
}
.purchase .purchaseDetails .block .listBlock ul {
	display: flex;
	flex-wrap: wrap;
}
.purchase .purchaseDetails .block .listBlock li {
	width: 29%;
	margin: 0 6.5% 16px 0;
}
.purchase .purchaseDetails .block:nth-of-type(2) .listBlock li {
	margin-bottom: 26px;
}
.purchase .purchaseDetails .block .listBlock li:nth-child(3n) {
	margin-right: 0;
}
.purchase .purchaseDetails .block .listBlock p {
	font-size: 1rem;
	font-weight: bold;
	text-indent: -1em;
	margin-left: 1em;
}
@media screen and (max-width:860px) {
	.purchase .purchaseDetails .block .img {
		width: 25%;
	}
	.purchase .purchaseDetails .block .listBlock {
		width: 70%;
	}
	.purchase .purchaseDetails .block .listBlock .listBlockDetails {
		padding: 16px 4% 10px;
		margin-right: 5%;
	}
	.purchase .purchaseDetails .block:nth-of-type(2) .listBlock .listBlockDetails {
		padding: 20px 4% 10px;
	}
	.purchase .purchaseDetails .block .listBlock li {
		margin-bottom: 10px;
	}
	.purchase .purchaseDetails .block:nth-of-type(2) .listBlock li {
		margin-bottom: 10px;
	}
}
@media screen and (max-width:736px) {
	.purchase {
		margin-bottom: -10%;
	}
	.purchase .purchaseDetails {
		top: 15.5%;
	}
	.purchase .purchaseDetails .block {
		display: block;
		margin-bottom: 40px;
	}
	.purchase .purchaseDetails .block .img {
		max-width: none;
		width: 80%;
		margin: 0 auto 20px;
	}
	.purchase .purchaseDetails .block .img img {
		position: relative;
		top: 0;
	}
	.purchase .purchaseDetails .block .listBlock {
		width: 90%;
		margin: 0 auto;
	}
	.purchase .purchaseDetails .block .listBlock .listBlockDetails {
		border-radius: 8px;
		background: #fff;
		box-shadow:0px 0px 6px 3px #40b05a;
		padding: 16px 6% 10px;
		margin-right: 0;
	}
	.purchase .purchaseDetails .block:nth-of-type(2) .listBlock .listBlockDetails {
		padding: 28px 6% 10px;
	}
	.purchase .purchaseDetails .block .listBlock li {
		margin: 0 6.5% 16px 0;
	}
	.purchase .purchaseDetails .block:nth-of-type(2) .listBlock li {
		margin-bottom: 26px;
	}
}
@media screen and (max-width:320px) {
	.purchase {
		margin-bottom: 0;
	}
	.purchase .purchaseDetails {
		top: 15.5%;
	}
	.purchase .purchaseDetails .block {
		margin-bottom: 20px;
	}
}
/* =========================================================
		Footer
========================================================= */
.footer {
	background: url(../img/footerbg.jpg) no-repeat;
	background-size: cover;
	max-width: 900px;
	margin: 0 auto;
	padding: 26px 0;
}
.footer .logo {
	display: flex;
	align-items: flex-end;
	padding: 0 2%;
}
.footer .logo .neos {
	display: flex;
	align-items: flex-end;
	padding-right: 20px;
}
.footer .logo .neos img {
	width: 135px;
}
.footer .logo .neos p {
	font-size: 1rem;
	padding-left: 10px;
}
.footer .logo .right {
	margin: 0 0 0 auto;
}
.footer .logo .right ul {
	display: flex;
}
.footer .logo .right li:first-child {
	width: 113px;
}
.footer .logo .right li:last-child {
	width: 96px;
	margin-left: 26px;
}
@media screen and (max-width:736px) {
  .footer {
  	padding: 0;
  	z-index: 2;
  	position: relative;
  }
  .footer .logo {
    display: none;
  }

}