@charset "UTF-8";
html {
width: 100%;
overflow-y:scroll;
background:#000000;
height: -webkit-fill-available;
margin: 0px;
padding: 0px;
}
body {
margin:0;
padding:0;
height: 100%;
width: 100%;
-webkit-text-size-adjust: 100%;
background:#000000;
min-height: 100vh;
min-height: -webkit-fill-available;
font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-style: normal;
font-weight: 400;
color:#FFF;
line-height:120%;
}
.webfont {
font-family: 'Noto Serif JP', serif;
}
div {
margin:0;
padding:0;
}
P {
margin:0;
padding:0;
}
.slow * {
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
*{
margin: 0;
padding: 0;
}
img{
border:none;
max-width: 100%;
height: auto;
width /***/:auto;
margin:0;
padding:0;
vertical-align:bottom;
line-height: 1.0em;
}
a img {
border:none;
}
.ended {
position:absolute;
top:0;
left:0;
right:0;
bottom:50px;
width:200px;
height:60px;
margin:auto;
z-index:999;
background:#000;
color:#ffffff;
display:flex;
align-items: center;
justify-content:center;
font-size:22px;
border:3px solid #ffffff;
}
.space5px {
margin-bottom:10px;
}
.space10px {
margin-bottom:15px;
}
.space30px {
margin-bottom:30px;
}
.leftwhiteborder {
border-left:2px solid #ffffff;
padding-left:20px;
margin-left:3px;
}
.chuki100 {
position:relative;
width:100%;
display:block;
margin-top:10px;
}
.parking {
background:#fcd651;
color:#000000;
box-sizing:border-box;
padding:15px 20px;
margin-top:30px;
}
#loading {
position:fixed;
overflow:hidden;
width:100vw;
height: 100vh;
height:100dvh;
z-index:9999;
}
#loading:after {
content:"";
position:fixed;
background:url("../images/loading_back.gif") no-repeat;
background-position:center;
background-size: cover;
overflow:hidden;
width:100vw;
height: 100vh;
height:100dvh;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transform-origin:center;
animation: zoom 25s infinite;
animation-fill-mode: forwards;
}
.zoomimg {
animation: zoom 7s infinite;
animation-fill-mode: forwards;
transform-origin:center;
}
@keyframes zoom {
0% {
transform: scale(1);
}
15% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
.loadback {
position:relative;
width:100%;
height:100dvh;
}
.loader {
background:url("../images/load_doku_01.gif") no-repeat;
background-position: center;
background-size: cover;
transform-origin:center;
animation: derutate 0.3s 0.4s linear 1 forwards;
z-index:99991;
}
.loader1 {
background:url("../images/load_doku_02.gif") no-repeat;
background-position: center;
background-size: cover;
animation: deruyoko 0.3s 0.7s linear 1 forwards;
z-index:99992;
}
.loader2 {
background:url("../images/load_doku_03.gif") no-repeat;
background-position: center;
background-size: cover;
animation: derutate 0.3s 1.0s linear 1 forwards;
z-index:99993;
}
.loader3 {
background:url("../images/load_doku_04.gif") no-repeat;
background-position: center;
background-size: cover;
animation: deruyoko 0.3s 1.3s linear 1 forwards;
z-index:99994;
}
.loader4 {
background:url("../images/load_doku_05.gif") no-repeat;
background-position: center;
background-size: cover;
animation: derutate 0.3s 1.6s linear 1 forwards;
z-index:99995;
}
.loader5 {
background:url("../images/load_doku_06.gif") no-repeat;
background-position: center;
background-size: cover;
animation: derutate 0.3s 1.9s linear 1 forwards;
z-index:99996;
}
.loader6 {
background:url("../images/load_doku_07.png") no-repeat;
background-position: center;
background-size: cover;
animation: deta 0.3s 2.2s linear 1 forwards;
z-index:99997;
}
.loader7 {
background:url("../images/load_doku_08.png") no-repeat;
background-position: center;
background-size: cover;
animation: deta 0.3s 2.2s linear 1 forwards;
z-index:99998;
}
.loaded {
opacity: 0;
visibility: hidden;
}
@keyframes derutate {
0% { opacity: 0; 
transform: translate(0, 1%) scale(1.0) ;}
10% { opacity: 1; 
transform: translate(0, -1%) scale(1.05) ;}
20% { opacity: 1; 
transform: translate(0, 1%) scale(1.0) ;}
30% { opacity: 1; 
transform: translate(0, -1%) scale(1.05) ;}
40% { opacity: 1; 
transform: translate(0, 1%) scale(1.0) ;}
50% { opacity: 1; 
transform: translate(0, -1%) scale(1.05) ;}
100% { opacity: 0; 
transform: translate(0, -1%) scale(1.10) ;}
}
@keyframes deruyoko {
0% { opacity: 0; 
transform: translate(1%, 0) scale(1.0) ;}
10% { opacity: 1; 
transform: translate(-1%, 0) scale(1.05) ;}
20% { opacity: 1; 
transform: translate(1%, 0) scale(1.0) ;}
30% { opacity: 1; 
transform: translate(-1%, 0) scale(1.05) ;}
40% { opacity: 1; 
transform: translate(1%, 0) scale(1.0) ;}
50% { opacity: 1; 
transform: translate(-1%, 0) scale(1.05) ;}
100% { opacity: 0; 
transform: translate(-1%, 0) scale(1.10) ;}
}
@keyframes deta {
0% { opacity: 0; 
transform: translate(0, 0) scale(1.1) ;}
10% { opacity: 1; 
transform: translate(0, 0) scale(1.2) ;}
20% { opacity: 1; 
transform: translate(0, 0) scale(1.1) ;}
30% { opacity: 1; 
transform: translate(0, 0) scale(1.2) ;}
40% { opacity: 1; 
transform: translate(0, 0) scale(1.1) ;}
50% { opacity: 1; 
transform: translate(0, 0) scale(1.1) ;}
100% { opacity: 1; 
transform: translate(0, 0) scale(1.2) ;}
}
@keyframes spin{
0%   { transform: rotate(0deg)scale(1.2);; }
50% { transform: rotate(-180deg)scale(1.3); }
100% { transform: rotate(-360deg)scale(1.2); }
}
.yura {
animation:yurayura 2.5s infinite ease-in-out alternate;
-webkit-animation:yurayura 2.5s infinite ease-in-out alternate;
}
@-webkit-keyframes yurayura {
0% {transform: translate(0, -20px);
-webkit-transform: translate(0, -20px);
}
100% {transform: translate(0, 10px);
-webkit-transform: translate(0, 10px); }
}
.kata {
animation:katakata 4s infinite ease-in-out alternate;
}
.katata {
animation:katakata 6s infinite ease-in-out alternate;
}
.katatata {
animation:katakata 8s infinite ease-in-out alternate;
}
@keyframes katakata {
0% {transform:translate(0, 0) rotate(0deg);}
21% {transform:translate(0, 0) rotate(0deg);}
22% {transform:translate(0, 0) rotate(-3deg);}
23% {transform:translate(0, -0.8px) rotate(0deg);}
24% {transform:translate(0, -0.8px) rotate(3deg);}
25% {transform:translate(0.8px, 0) rotate(-2deg);}
26% {transform:translate(0, 0.8px) rotate(0deg);}
27% {transform:translate(0, 0) rotate(3deg);}
28% {transform:translate(0, 0) rotate(0deg);}
100% {transform:translate(0, 0) rotate(0deg);}
}
.pyon {
animation: pyonpyon 2s infinite ease-in-out;
}
@keyframes pyonpyon {
0% {transform: translate(0, 0) scale(1.0)}
3% {transform: translate(0, 0) scale(1.0)}
6% {transform: translate(0, 0) scale(1.0);}
9% {transform: translate(0, -1%) scale(1.05);}
12% {transform: translate(0, 0) scale(1.0);}
15% {transform: translate(0, -1%) scale(1.05);}
18% {transform: translate(0, 0) scale(1.0);}
100% {transform: translate(0, 0) scale(1.0);}
}
@keyframes uneune {
50% {border-radius: 80% 50% 59% 41% / 60% 40% 79% 50%;}
75% {border-radius: 100% 69% 100% 83% / 68% 99% 53% 93%;}
}
@keyframes uneunene {
50% {border-radius: 55% 60% 55% 60% / 65% 75% 65% 75%;}
75% {border-radius: 60% 55% 60% 55% / 65% 75% 65% 75%;}
}
.bigsmall1  {
animation: big1 3s infinite ease-in-out alternate;
transform-origin:center;
}
.bigsmall2  {
animation: big1 4s infinite ease-in-out alternate;
transform-origin:center;
}
@keyframes big1 {
0% {transform: scale(1.0,1.0);}
3%{transform: scale(1.1,1.1);}
6% {transform: scale(1.0,1.0);}
9%{transform: scale(1.05,1.05);}
12%{transform: scale(1.00,1.00);}
100%{transform: scale(1.00,1.00);}
}
.tare {
position:relative;
width:100%;
}
.tare p img {
width:100%;
vertical-align:top;
margin-top:-0.5px;
transform: scaleY(1.002);
}
.tarebig {
position:absolute;
top:0;
width:100%;
z-index:2;
margin-top:-1px;
}
.tarebig img {
width:100%;
vertical-align:top;
margin-top:-0.5px;
transform: scaleY(1.002);
}
.parallax_img{
position:relative;
width:100vw;
min-height:100%;
display:block;
}
.parallax_img_none {
position:relative;
width:100vw;
min-height:100%;
display:block;
background:#000000;
}
.loop {
position:absolute;
top:0;
width:100%;
min-height:100%;
display:block;
overflow: hidden;
z-index:1;
}
.loopawa1,.loopawa2,.loopawa3,.loopawa4 {
position:absolute;
top:0;
width:100%;
z-index:1;
}
.loopawa1 li,.loopawa2 li,.loopawa3 li,.loopawa4 li  {
width:100%;
}
.loopawa1 li img,.loopawa2 li img,.loopawa3 li img,.loopawa4 li img {
width:100%;
vertical-align:top;
transform: scale(1.3, 1.3);
}
/*PC--------------------------------*/
@media print, screen and (min-width: 961px) {
.pc {
display:block;
}
.sp {
display:none;
}

.loader,.loader1,.loader2,.loader3,.loader4,.loader5,.loader6,.loader7 {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
width:100vw;
height: calc(100vw * 1);
transform-origin:center;
display:block;
opacity:0;
filter: drop-shadow(0px 0px 6px rgba(0,0,0,1));
}
.container {
opacity:0;
z-index: 999;
position:relative;
width:100%;
margin:0 auto;
padding:0;
height:auto !important;
height: 100%;
min-height: 100%;
overflow:hidden;
font-family: 'Noto Serif JP', serif;
}
.shindan {
position:absolute;
width:20%;
max-width:340px;
top:2%;
left:15%;
display:block;
z-index:999;
}
.shindan img{
width:100%;
filter: drop-shadow(0px 0px 10px rgba(0,0,0,1));
}
.shindan img:hover{
width:100%;
filter: drop-shadow(0px 0px 10px rgba(255,255,255,1));
}
#shindanicon {
display:block;
width: 200px;
height:129px;
z-index: 9999;
position: fixed;
bottom:0;
left: 1%;
padding:0;
margin:0;
}
#shindanicon a {
text-align:center;
display: table-cell;
vertical-align: middle;
width: 200px;
height:129px;
padding:0;
margin:0;
filter: drop-shadow(0px 0px 5px rgba(0,0,0,1));
}
#shindanicon a:hover {
text-align:center;
display: table-cell;
vertical-align: middle;
width: 200px;
height:129px;
padding:0;
margin:0;
filter: drop-shadow(0px 0px 15px rgba(0,0,0,1));
}
#shindanicon a:link { 
text-decoration: none;
}
#shindanicon a:visited { 
text-decoration: none;
}
#shindanicon a:active { 
text-decoration: none;
}
.english {
font-size:12px;
line-height:160%;
font-weight:500;
}
.content{
padding:30px 0;
}
.box{
position:relative;
width:100%;
max-width: 1280px;
margin: 0 auto;	
z-index:4;
}
.menudummy　{
width:100%;
display: block;
}
.menudummy img　{
width:100%;
vertical-align:bottom;
}
.menu {
z-index:99999999;
position:fixed;
width:100%;
}
.menuborder {
border-right:1px solid #ffffff;
box-sizing: border-box;
padding:-5% 0;
}
.menu ul {
width:100%;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
background:#000000;
}
.menu ul li {
width:12.5%;
display: block;
vertical-align:middle;
text-align:center;
background:#000000;
margin:15px 0 15px 0;
padding:0px 0;
font-family: 'Noto Serif JP', serif;
box-sizing: border-box;
font-size:max(1vw,12px);
font-weight:700;
}
.menu ul li a {
width:100%;
color:#ffffff;
text-decoration: none;
display: block;
box-sizing: border-box;
background:#000000;
}
.menu ul li a:hover {
color:#920783;
}
.maeuri {
position:absolute;
top:0;
right:0;
display:block;
width:14%;
max-width:220px;
border-radius: 50px;
margin-top:-3%;
margin-right:-1%;
filter: drop-shadow(0px 0px 14px rgba(0,0,0,1));
}
.maeuri a:hover {
filter: drop-shadow(0px 0px 14px rgba(255,255,255,1));
}
h1 {
position:relative;
width:40%;
max-width:640px;
margin:0 auto;
display:block;
z-index:9999;
}
h1 p img {
filter: drop-shadow(0px 0px 8px rgba(0,0,0,1));
}
h2 {
width:70%;
max-width:640px;
margin:0 auto;
display:block;
z-index:999;
}
h2 img {
width:100%;
vertical-align: bottom;
}
.title {
z-index:10;
position:relative;
width:100%;
margin:0;
display:block;
overflow: hidden;
background:#188c3b;
padding-top:7%;
}
.titlebottom {
position:relative;
width:100%;
background:url("../images/gradation.png") no-repeat;
background-position: bottom center;
background-size:100% auto;
margin-bottom:-1px;
z-index:2;
}
.dokuflex {
position:relative;
width:22%;
max-width:360px;
margin:0 auto -3% auto;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
text-align: left;
}
.dokuflex li{
width:33.333%;
display:block;
filter: drop-shadow(0px 0px 7px rgba(0,0,0,1));
list-style: none;
}
.dokuflex li img{
width:100%;
filter: drop-shadow(0px 0px 7px rgba(0,0,0,1));
}
.dokuflex p{
width:100%;
filter: drop-shadow(0px 0px 7px rgba(0,0,0,1));
}
.dokuflex p img{
width:100%;
filter: drop-shadow(0px 0px 7px rgba(0,0,0,1));
}
.gaiyoflex {
position:relative;
width:90%;
max-width:1200px;
z-index:999;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
margin:2% auto 1% auto;
}
.gaiyoflex p{
display:block;
width:49%;
z-index:999;
}
.gaiyoflex p img{
width:100%;
z-index:999;
filter: drop-shadow(0px 0px 2px rgba(0,0,0,1));
}
.copy {
position:absolute;
top:2%;
right:13%;
width:9%;
max-width:100px;
padding:0;
display:block;
z-index:999;
}
.fugu {
position:absolute;
bottom:45%;
left:0;
width:25%;
max-width:400px;
padding:0;
display:block;
z-index:1;
}
.fugu img {
width:100%;
vertical-align:top;
}
.kaeru {
position:absolute;
bottom:13%;
right:0;
width:34%;
max-width:560px;
padding:0;
display:block;
z-index:1;
}
.kaeru img {
width:100%;
vertical-align:top;
}
.kaeru2 {
position:absolute;
bottom:13%;
right:-3%;
width:34%;
max-width:560px;
padding:0;
display:block;
z-index:1;
}
.kaeru2 img {
width:100%;
vertical-align:top;
}
.main {
width:90%;
max-width:1280px;
color:#FFF;
margin:0 auto;
padding:0;
text-align: center;
line-height:200%;
font-family: 'Noto Serif JP', serif;
font-weight:500;
}
.story {
width:90%;
max-width:960px;
z-index: 10;
position:relative;
margin:0 auto;
color:#FFF;
text-align:center;
font-size:22px;
line-height:200%;
font-weight:700;
}
.storyimg {
width:70%;
max-width:480px;
margin:0 auto;
}
.slime {
position:absolute;
top:0;
width:100vw;
min-height:100%;
background:url("../images/slime_pink.gif")no-repeat;
background-size:100% 100%;
display:block;
z-index:0;
}
.dokumaru {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 94%;
max-width:1140px;
height:auto;
z-index:2;
mix-blend-mode: color;
transform-origin:center;
}
.dokumaru img {
mix-blend-mode: color;
width: 100%;
height:auto;
}
.infofloat {
width:90%;
max-width:960px;
margin:0 auto;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
font-weight:700;
}
.infofloatleft {
width:13%;
padding-right:3%;
display:block;
margin:-3% auto 0 auto;
}
.infofloatleft p img {
vertical-align: bottom;
width:100%;
}
.infofloatright {
display:block;
width:84%;
text-align: left;
margin:0 auto;
}
.infofloatright p img {
width:85%;
vertical-align: bottom;
padding-top:3%;
}
.infofloatin {
width:100%;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
align-items: center;
}
.infofloatleftin {
width:17%;
padding-right:1%;
display:block;
text-align: left;
font-size:40px;
}
.infofloatrightin {
display:block;
width:81%;
line-height:150%;
text-align: left;
margin:0 auto;
}
.footer {
position:relative;
z-index: 0;
color:#ffffff;
width:100%;
margin:0;
display:block;
padding:0 0 10% 0;
background: #000000;
font-family: 'Noto Serif JP', serif;
}
.copyright {
position:relative;
z-index: 0;
width:90%;
max-width:1000px;
margin:0 auto;
display:block;
}
.infotext {
position:relative;
z-index: 0;
display:block;
padding:0;
font-size:20px;
line-height:180%;
}
.chuki {
position:relative;
padding:0;
font-size:14px;
line-height:150%;
}
.logo {
width:50%;
max-width:600px;
margin:0 auto;
padding:2%;
background:#ffffff;
display:block;
}
.logo img {
width:100%;
vertical-align: bottom;
}
.backredall {
background:#e60012;
padding:2% 3%;
color:#000;
line-height:150%;
}
.banner {
width:100%;
max-width:1000px;
margin:0 auto;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
}
.bannercol {
width:23%;
margin-bottom:2%;
border:1px solid #cccccc;
box-sizing: border-box;
display:block;
background: #ffffff;
}
.bannercol img {
width:100%;
vertical-align: bottom;
}
.bannercoldummy {
width:23%;
margin-bottom:2%;
display:block;
}
.bannercoldummy img {
width:100%;
vertical-align: bottom;
}
.shisetsuwaku {
width:100%;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:stretch;
margin-top:2%;
}
.shisetsuleft {
width:14%;
text-align:center;
color:#ffffff;
font-size:16px;
display: flex;
align-items: center;
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
box-sizing: border-box;
}
.shisetsuleft p {
display:block;
text-align:center;
margin:0 auto;
}
.shisetsuright {
width:86%;
text-align:left;
border:1px solid #ffffff;
box-sizing: border-box;
color:#ffffff;
font-size:16px;
padding:2%;
display:block;
line-height:180%;
}
.shisetsuright p {
display:block;
}
.priceflex {
width:100%;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:stretch;
margin-bottom:1%;
}
.priceleft {
width:17%;
display: flex;
align-items: center;
padding-right:2%;
box-sizing:border-box;
border-right:1px solid #ffffff;
}
.priceright {
width:79%;
display: flex;
align-items: center;
margin-left:2%;
box-sizing:border-box;
}
.specialtext {
position:relative;
font-size:28px;
font-weight:700;
line-height:150%;
color:#c60080;
margin-top:-2%;
}
.text {
position:relative;
font-size:18px;
font-weight:500;
color:#ffffff;
}
.specialflex {
position:relative;
width:90%;
max-width:860px;
margin:0 auto;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
}
.specialcol {
position:relative;
width:49%;
display:block;
}
.specialcolin {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display:block;
margin-top:10%;
}
.specialprice {
font-size:24px;
font-weight:700;
line-height:150%;
margin-bottom:2%;
}
.maintext {
font-size:20px;
font-weight:600;
line-height:170%;
text-align:center
}
.maintextleft {
font-size:20px;
font-weight:600;
line-height:170%;
text-align:left
}
.creatures {
z-index:10;
position:relative;
width:100%;
margin:0;
display:block;
overflow: hidden;
background:#5d0c75;
padding-top:7%;
}
.creatureflex {
position:relative;
width:100%;
z-index:99;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0;
padding:0;
}
.creaturescopy {
position:absolute;
top:3%;
left:0;
right:0;
margin:auto;
width:20%;
max-width:240px;
z-index:2;
}
.creatureleft {
position:relative;
width:45%;
max-width:740px;
display:block;
z-index:3;
color:#ffffff;
margin-bottom:2%;
}
.creaturebackleft {
position:relative;
margin-right:auto;
width:80%;
display:block;
z-index:4;
}
.creaturebackleft img {
width:100%;
vertical-align:bottom;
}
.creatureitem {
position:relative;
z-index:5;
}
.creatureright {
position:relative;
width:45%;
max-width:740px;
display:block;
z-index:3;
color:#ffffff;
margin-bottom:2%;
}
.creaturebackright {
position:relative;
width:80%;
margin-left:auto;
display:block;
z-index:4;
}
.creaturebackright img {
width:100%;
vertical-align:bottom;
}
.creature1 {
position:absolute;
top:10%;
left:4%;
z-index:5;
width:83%;
display:block;
}
.creature2 {
position:absolute;
top:12%;
right:-5%;
z-index:5;
width:100%;
display:block;
}
.creature3 {
position:absolute;
top:0%;
left:0;
z-index:5;
width:90%;
display:block;
}
.creature4 {
position:absolute;
top:0;
right:2%;
z-index:5;
width:100%;
display:block;
}
.creature5 {
position:absolute;
top:10%;
left:2%;
z-index:5;
width:100%;
display:block;
}
.dokucheck {
position:relative;
width:60%;
max-width:540px;
margin:-1% auto 4% auto;
z-index:5;
display:block;
}
.creaturetext {
position:relative;
width:70%;
max-width:420px;
margin:0 auto;
z-index:5;
}
.creaturetext2 {
position:absolute;
top:62%;
right:3%;
width:42%;
max-width:400px;
margin:0 auto;
z-index:5;
}
.creaturetext3 {
position:absolute;
top:62%;
left:3%;
width:42%;
max-width:400px;
margin:0 auto;
z-index:5;
}
.creaturename {
position:relative;
font-size:24px;
font-weight:700;
margin-bottom:15px;
}
.creatureinfo {
position:relative;
font-size:15px;
font-weight:500;
line-height:170%;
}
.dokulevelleft {
position:absolute;
width:30%;
max-width:180px;
top:42%;
left:3%;
z-index:6;
filter: drop-shadow(0px 0px 6px rgba(0,0,0,1));
}

.dokulevelright {
position:absolute;
width:30%;
max-width:180px;
top:42%;
right:3%;
z-index:6;
filter: drop-shadow(0px 0px 6px rgba(0,0,0,1));
}
.smell {
position: relative;
width:90%;
max-width:1000px;
margin:0 auto;
background:url("../images/smell_back.png") no-repeat;
background-size:100% 100%;
z-index:4;
}
.smelltop {
position: relative;
width:70%;
max-width:860px;
z-index:5;
margin:0 auto;
display:block;
}
.smelltop div p {
width:100%;
}
.smelltop div p img {
width:100%;
}
.smelltopin {
position:absolute;
top:54%;
left:0;
right:0;
width:80%;
max-width:640px;
margin:0 auto;
color:#ffffff;
text-align:center;
z-index:5;
}
.smelltext {
position: relative;
font-size:18px;
font-weight:500;
line-height:160%;
text-align:center;
}
.smellflex {
position:relative;
width:80%;
margin:-5% auto 0 auto;
z-index:99;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
align-items: center;
padding-bottom:5%;
}
.smellleft {
width:40%;
}
.smellright {
width:60%;
color:#000000;
box-sizing: border-box;
padding-right:7%;
}
.othersback {
position:relative;
width:90%;
max-width:1280px;
margin:0 auto;
background:url("../images/others_back.jpg")no-repeat;
background-size:100% 100%;
padding:5%;
color:#000000;
box-sizing: border-box;
}
.otherstitle {
position:relative;
width:80%;
max-width:540px;
margin:0 auto;
}
.othersflex {
position:relative;
width:100%;
z-index:99;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0;
padding:0;
}
.othersflex2 {
position:relative;
width:80%;
max-width:960px;
margin:0 auto;
z-index:99;
display: flex;
flex-wrap:wrap;
align-items: center;
justify-content:space-between;
padding:0;
}
.otherscol {
position:relative;
width:48%;
display:block;
}
.othersleft {
position:relative;
width:40%;
margin-right:3%;
display:block;
}
.othersright {
position:relative;
width:57%;
display:block;
text-align:left;
}
.otherscopy {
font-size:26px;
font-weight:700;
text-align:center;
margin:3% 0;
}
.goods {
z-index:10;
position:relative;
width:100%;
margin:0;
display:block;
overflow: hidden;
background:#0d176c;
padding-top:7%;
}
.goodstitle {
width:80%;
max-width:360px;
margin:0 auto;
display:block;
}
.stickerflex {
position:relative;
width:90%;
max-width:1200px;
z-index:99;
display: flex;
flex-wrap:wrap;
justify-content:center;
margin:0 auto;
padding:0;
}
.stickercol {
position:relative;
width:25%;
padding:0 2%;
box-sizing:border-box;
text-align:center;
font-size:14px;
color:#ffffff;
margin-bottom:1%;
}
.stickercol p img {
width:100%;
}
.goodsprice{
position:relative;
width:100%;
max-width:480px;
margin:0 auto;
color:#000000;
display:block;
}
.goodspricein {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin-top:6%;
text-align:center;
display:block;
}
.goodspricein2 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin-top:3.4%;
text-align:center;
}
.goodsname {
font-size:20px;
font-weight:700;
margin-bottom:1%;
line-height:140%;
}
.goodschuki {
font-size:14px;
font-weight:500;
}
.goodsflex { 
position:relative;
width:100%;
max-width:1280px;
z-index:99;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
padding:0;
}
.goodscol {
position:relative;
width:45%;
display:block;
margin:0 auto 8% auto;
}
.goodsphoto {
width:80%;
max-width:860px;
margin:0 auto 1% auto;
}
.goodsphoto img {
width:100%;
}
.collaboname {
font-size:20px;
font-weight:700;
margin-bottom:1%;
line-height:140%;
color:#ffffff;
display:block;
}
.collaboname a {
color:#ffffff;
text-decoration: none;
display:block;
}
.collabocol {
position:relative;
width:48%;
display:block;
margin:0 auto;
}
.collabopricein {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin-top:6%;
text-align:center;
display:block;
}
.time {
font-size:200%;
}
}
/*SP-------------------------------*/
@media only screen and (max-width: 960px) {
.pc {
display:none;
}
.sp {
display:block;
}
.loader,.loader1,.loader2,.loader3,.loader4,.loader5,.loader6,.loader7 {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
width:100%;
height: 100vh;
height: 100dvh;
transform-origin:center;
display:block;
opacity:0;
overflow:hidden;
filter: drop-shadow(0px 0px 6px rgba(0,0,0,1));
}
.container {
opacity:0;
z-index: 999;
position:relative;
width:100%;
margin:0 auto;
padding:0;
height:auto !important;
height: 100%;
min-height: 100%;
overflow:hidden;
font-family: 'Noto Serif JP', serif;
}
.shindan {
position:fixed;
width:50%;
max-width:300px;
bottom:-3%;
left:-3%;
display:block;
z-index:999999;
}
.shindan img{
width:100%;
filter: drop-shadow(0px 0px 10px rgba(0,0,0,1));
}
.shindan img:hover{
width:100%;
filter: drop-shadow(0px 0px 10px rgba(255,255,255,1));
}
.spbottom {
position:fixed;
bottom:0;
z-index:9999;
width:100%;
background-size: 100% auto;
display:flex;
align-items: center;
}
.spbottom img {
width:100%;
vertical-align:bottom;
}
.spbottomin {
position: relative;
width:50%;
display:block;
}
.maeurisp {
width:100%;
display:block;
}
.maeurispcolor {
background:#fff100;
}
.shindansp {
width:100%;
display:block;
}
.shindanspcolor {
background:#2140a5;
}
.maeurispcolor img,.shindanspcolor img{
width:90%;
max-width:220px;
margin:0 auto;
display:block;
padding:10px 0 20px 0;
}
.hanbargericon {
z-index:9999;
position: fixed;
top:0;
right:0;
width: 65px;
height: 65px;
background:#5d0053;
}
.fullscreenmenu {
position:relative;
z-index:999;
}
.hanbarger span {
display: inline-block;
-webkit-transition:all .4s;
transition: all .4s;
box-sizing: border-box;
}
.hanbarger {
z-index:9999;
position: fixed;
top: 13px;;
right: 12px;
width: 40px;
height: 40px;
background:none;
border:none;
color:#ffffff;
font-weight:700;
font-size:80%;
line-height:100%;
}
.hanbarger span:nth-of-type(1) {
top:0px;
position: absolute;
left: 0;
width: 100%;
z-index: 10;
}
.hanbarger span:nth-of-type(2) {
top:18px;
position: absolute;
left: 0;
width: 100%;
height: 4px;
background:#ffffff;
z-index: 10;
}
.hanbarger span:nth-of-type(3) {
top: 27px;
position: absolute;
left: 0;
width: 100%;
height: 4px;
background:#ffffff;
z-index: 10;
}
.hanbarger span:nth-of-type(4) {
bottom: 0px;
position: absolute;
left: 0;
width: 100%;
height: 4px;
background:#ffffff;
z-index: 10;
}
.hanbarger.active span:nth-of-type(1) {
color:#ffffff;
}
.hanbarger.active span:nth-of-type(2) {
-webkit-transform: translateY(9px) rotate(45deg);
transform: translateY(9px) rotate(45deg);
background:#ffffff;
}
.hanbarger.active span:nth-of-type(3) {
opacity: 0;
}
.hanbarger.active span:nth-of-type(4) {
-webkit-transform: translateY(-9px) rotate(-45deg);
transform: translateY(-9px) rotate(-45deg);
background:#ffffff;
}
#nav {
position: fixed;
top:0;
right: 0;
z-index: 10;
width: 100%;
height:auto !important;
height: 100%;
min-height: 100%;
overflow-y:scroll;
transition: .3s;
font-family: 'Noto Sans JP', sans-serif;
text-decoration:none;
-webkit-transform: translateX(110%);
-ms-transform: translateX(110%);
transform: translateX(110%);
-webkit-transform: translateX(110%) translateZ(0);
-webkit-transition: -webkit-transform 500ms 0s ease;
transition: -webkit-transform 500ms 0s ease;
transition: transform 500ms 0s ease;
transition: transform 500ms 0s ease, -webkit-transform 500ms 0s ease;
-webkit-overflow-scrolling: touch;
background:url("../images/slime_pink_hanbarger.gif") no-repeat;
background-size: cover;
background-position: center center;
}
#nav.active{
right: 0;
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
visibility: visible;
}
#nav ul li a img{
width:70%;
margin:0 auto;
padding:10px 0;
display: block;
}
.hanbargermenu img {
width:55%;
max-width:440px;
margin:15px auto 10px auto;
display:block;
}
#nav ul{
position: relative;
z-index:9999;
overflow-y:scroll; 
max-height:100vh;
display: flex;
align-items: center;
justify-content: left;
flex-wrap: wrap;
scrollbar-width: none;
-ms-overflow-style: none;
}
#nav ul::-webkit-scrollbar {
display: none
}
#nav ul li{
width:100%;
list-style-type: none;
display:block;
margin:0 auto;
font-family: 'Kaisei Tokumin', serif;
}
#nav ul li a{
padding:7% 0;
display: block;
transition: all 0.2s ease-in-out;
margin:0 auto;
text-decoration: none;
color:#ffffff;
text-align:center;
font-size:150%;
font-weight:700;
line-height:120%;
}
#nav ul li a:active {
text-decoration:none;
}
#nav ul li a:link {
text-decoration:none;
}
#nav ul li a:visited {
text-decoration:none;
}
.hanbargermenu {
width:100%;
background: #03004C;
padding:5px 0;
display:block;
}
.hanbargerspace {
margin-bottom:40px;
}
.english {
font-size:12px;
line-height:160%;
font-weight:500;
}
.content{
padding:30px 0;
}
.box{
position:relative;
width:100%;
max-width: 1280px;
margin: 0 auto;	
}
.menudummy　{
width:100%;
display: block;
}
.menudummy img　{
width:100%;
vertical-align:bottom;
}
.menu {
z-index:99999999;
position:fixed;
width:100%;
}
.menuborder {
border-right:1px solid #ffffff;
box-sizing: border-box;
padding:-5% 0;
}
.menu ul {
width:100%;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
background:#000000;
}
.menu ul li {
width:14.2857%;
display: block;
vertical-align:middle;
text-align:center;
background:#000000;
margin:10px 0 5px 0;
padding:5px 0;
font-family: 'Noto Serif JP', serif;
box-sizing: border-box;
font-size:1.1vmax;
font-weight:700;
}
.menu ul li a {
width:100%;
color:#ffffff;
text-decoration: none;
display: block;
box-sizing: border-box;
background:#000000;
}
.menu ul li a:hover {
color:#920783;
}
.maeuri {
position:absolute;
top:0;
right:0.5%;
display:block;
width:13%;
max-width:220px;
border-radius: 50px;
margin-top:-2%;
filter: drop-shadow(0px 0px 14px rgba(0,0,0,1));
}
.maeuri a:hover {
filter: drop-shadow(0px 0px 14px rgba(255,255,255,1));
}
h1 {
position:relative;
width:90%;
max-width:640px;
margin:0 auto;
display:block;
z-index:9999;
}
h1 p img {
filter: drop-shadow(0px 0px 8px rgba(0,0,0,1));
}
h2 {
width:96%;
max-width:480px;
margin:5% auto 3% auto;
display:block;
}
h2 img {
width:100%;
vertical-align: bottom;
}
.title {
z-index:10;
position:relative;
width:100%;
margin:0;
display:block;
overflow: hidden;
background:#188c3b;
padding-top:7%;
}
.titlebottom {
position:relative;
width:100%;
background:url("../images/gradation_sp.png") no-repeat;
background-position: bottom center;
background-size:100% auto;
margin-bottom:-1px;
z-index:2;
}
.dokuflex {
position:relative;
width:60%;
max-width:400px;
margin:0 auto -1% auto;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
text-align: left;
}
.dokuflex li{
width:33.333%;
display:block;
filter: drop-shadow(0px 0px 7px rgba(0,0,0,1));
list-style: none;
}
.dokuflex li img{
width:100%;
filter: drop-shadow(0px 0px 7px rgba(0,0,0,1));
}
.dokuflex p{
width:100%;
filter: drop-shadow(0px 0px 7px rgba(0,0,0,1));
}
.dokuflex p img{
width:100%;
filter: drop-shadow(0px 0px 7px rgba(0,0,0,1));
}
.gaiyoflex {
position:relative;
width:90%;
max-width:640px;
z-index:999;
display:block;
margin:2% auto 1% auto;
}
.gaiyoflex p{
display:block;
width:100%;
z-index:999;
margin:2% auto 1% auto;
}
.gaiyoflex p img{
width:100%;
z-index:999;
filter: drop-shadow(0px 0px 2px rgba(0,0,0,1));
}
.copy {
position:absolute;
top:10%;
right:4%;
width:15%;
max-width:70px;
padding:0;
display:block;
z-index:999;
}
.fugu {
position:absolute;
bottom:52%;
left:0;
width:35%;
max-width:400px;
padding:0;
display:block;
z-index:1;
}
.fugu img {
width:100%;
vertical-align:top;
}
.kaeru {
position:absolute;
bottom:40%;
right:0;
width:47%;
max-width:500px;
padding:0;
display:block;
z-index:1;
}
.kaeru img {
width:100%;
vertical-align:top;
}
.kaeru2 {
position:absolute;
bottom:40%;
right:-3%;
width:47%;
max-width:500px;
padding:0;
display:block;
z-index:1;
}
.kaeru2 img {
width:100%;
vertical-align:top;
}
.main {
width:90%;
max-width:1280px;
color:#FFF;
margin:0 auto;
padding:0;
text-align: center;
line-height:200%;
font-family: 'Noto Serif JP', serif;
font-weight:500;
z-index:3;
}
.story {
width:90%;
max-width:960px;
z-index: 10;
position:relative;
margin:0 auto;
color:#FFF;
text-align:center;
font-size:18px;
line-height:170%;
font-weight:700;
}
.storyimg {
width:80%;
max-width:480px;
margin:0 auto;
}
.slime {
position:absolute;
top:0;
width:100vw;
min-height:100%;
background:url("../images/slime_pink_sp.gif")no-repeat;
background-size:100% 100%;
display:block;
z-index:0;
}
.dokumaru {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.4,1.4);
width: 100%;
height:auto;
z-index:2;
mix-blend-mode: color;
transform-origin:center;
}
.dokumaru img {
width: 100%;
height:auto;
}
.infofloat {
width:100%;
max-width:960px;
margin:0 auto;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
font-weight:700;
}
.infofloatleft {
width:22%;
padding-right:3%;
display:block;
margin:0 auto;
}
.infofloatleft p img {
vertical-align: bottom;
width:100%;
}
.infofloatright {
display:block;
width:75%;
text-align: left;
margin:0 auto;
padding-top:3%;
}
.infofloatright p img {
width:85%;
vertical-align: bottom;
padding-top:5%;
}
.infofloatin {
width:100%;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
align-items: center;
}
.footer {
position:relative;
z-index: 0;
color:#ffffff;
width:100%;
margin:0;
display:block;
padding:0 0 10% 0;
background: #000000;
font-family: 'Noto Serif JP', serif;
}
.copyright {
position:relative;
z-index: 0;
width:90%;
max-width:960px;
margin:0 auto;
display:block;
}
.infotext {
position:relative;
z-index: 0;
display:block;
padding:0;
font-size:20px;
line-height:180%;
}
.chuki {
position:relative;
padding:0;
font-size:14px;
line-height:140%;
}
.logo {
width:90%;
max-width:350px;
margin:5% auto;
display:block;
padding:2%;
background:#ffffff;
}
.logo img {
width:100%;
vertical-align: bottom;
}
.backredall {
background:#e60012;
padding:2% 3%;
color:#000;
line-height:150%;
}
.banner {
width:100%;
max-width:960px;
margin:0 auto;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
}
.bannercol {
width:32%;
margin-bottom:2%;
border:1px solid #cccccc;
box-sizing: border-box;
display:block;
background: #ffffff;
}
.bannercol img {
width:100%;
vertical-align: bottom;
}
.bannercoldummy {
width:32%;
margin-bottom:2%;
display:block;
}
.bannercoldummy img {
width:100%;
vertical-align: bottom;
}
.shisetsuwaku {
width:100%;
display:block;
margin-top:5%;
margin-bottom:6%;
}
.shisetsuleft {
width:100%;
text-align:center;
color:#ffffff;
font-size:16px;
line-height:180%;
display:block;
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
box-sizing: border-box;
padding:2% 4%;
}
.shisetsuleft p {
display:block;
text-align:center;
margin:0 auto;
}
.shisetsuright {
width:100%;
text-align:left;
border:1px solid #ffffff;
box-sizing: border-box;
color:#ffffff;
font-size:16px;
padding:2% 4%;
display:block;
line-height:180%;
}
.shisetsuright p {
display:block;
}
.priceflex {
width:100%;
display:block;
margin-bottom:2%;
}
.priceleft {
width:100%;
display:block;
box-sizing:border-box;
margin-bottom:2%;
}
.priceright {
width:100%;
display:block;
}
.specialtext {
position:relative;
font-size:26px;
font-weight:700;
line-height:150%;
color:#c60080;
margin-top:-2%;
}
.text {
position:relative;
font-size:18px;
font-weight:500;
color:#ffffff;
}
.specialflex {
position:relative;
width:90%;
max-width:860px;
margin:3% auto;
display:block;
}
.specialcol {
position:relative;
width:100%;
display:block;
margin:3% auto;
}
.specialcolin {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display:block;
margin-top:10%;
}
.specialprice {
font-size:24px;
font-weight:700;
line-height:150%;
margin-bottom:2%;
}
.maintext {
font-size:18px;
font-weight:600;
line-height:170%;
text-align:center
}
.maintextleft {
font-size:18px;
font-weight:600;
line-height:170%;
text-align:center
}
.creatures {
z-index:10;
position:relative;
width:100%;
margin:0;
display:block;
overflow: hidden;
background:#5d0c75;
padding-top:7%;
}
.creatureflex {
position:relative;
width:100%;
z-index:99;
display:block;
margin:0;
padding:0;
}
.creaturescopy {
position:relative;
width:90%;
max-width:400px;
margin:5% auto 0 auto;
z-index:2;
}
.creatureleft {
position:relative;
width:100%;
display:block;
z-index:3;
color:#ffffff;
margin-bottom:5%;
}
.creaturebackleft {
position:relative;
margin-right:auto;
width:80%;
display:block;
z-index:4;
}
.creaturebackleft img {
width:100%;
vertical-align:bottom;
}
.creatureitem {
position:relative;
z-index:5;
}
.creatureright {
position:relative;
width:100%;
display:block;
z-index:3;
color:#ffffff;
margin-bottom:5%;
margin-left:auto;
}
.creaturebackright {
position:relative;
width:80%;
margin-left: auto;
margin-right: 0px;
display:block;
z-index:4;
}
.creaturebackright img {
width:100%;
vertical-align:bottom;
}
.creature1 {
position:absolute;
top:10%;
left:4%;
z-index:5;
width:90%;
max-width:640px;
display:block;
}
.creature2 {
position:absolute;
top:12%;
right:2%;
z-index:5;
width:92%;
max-width:640px;
display:block;
}
.creature3 {
position:absolute;
top:10%;
left:2%;
z-index:5;
width:90%;
max-width:640px;
display:block;
}
.creature4 {
position:absolute;
top:0;
right:-2%;
z-index:5;
width:100%;
max-width:640px;
display:block;
}
.creature5 {
position:absolute;
top:10%;
left:2%;
z-index:5;
width:100%;
max-width:640px;
display:block;
}
.dokucheck {
position:relative;
width:66%;
max-width:400px;
margin:2% auto 6% auto;
z-index:5;
display:block;
}
.creaturetext {
position:relative;
width:90%;
max-width:420px;
margin:0 auto;
z-index:5;
}
.creaturetext2 {
position:relative;
width:90%;
max-width:420px;
margin:0 auto;
z-index:5;
}
.creaturetext3 {
position:relative;
width:90%;
max-width:420px;
margin:0 auto;
z-index:5;
}
.creaturename {
position:relative;
font-size:22px;
font-weight:700;
margin-bottom:15px;
line-height:140%;
}
.creatureinfo {
position:relative;
font-size:15px;
font-weight:500;
line-height:170%;
}
.dokulevelleft {
position:absolute;
width:30%;
max-width:180px;
top:35%;
left:3%;
z-index:6;
filter: drop-shadow(0px 0px 6px rgba(0,0,0,1));
}
.dokulevelright {
position:absolute;
width:30%;
max-width:180px;
top:35%;
right:3%;
z-index:6;
filter: drop-shadow(0px 0px 6px rgba(0,0,0,1));
}
.smell {
position: relative;
width:94%;
max-width:640px;
margin:0 auto;
background:url("../images/smell_back_sp.png") no-repeat;
background-size:100% 100%;
z-index:4;
}
.smelltop {
position: relative;
width:92%;
max-width:420px;
z-index:5;
margin:0 auto;
display:block;
}
.smelltop div p {
width:100%;
}
.smelltop div p img {
width:100%;
}
.smelltopin {
position:absolute;
top:47%;
left:0;
right:0;
width:88%;
max-width:640px;
margin:0 auto;
color:#ffffff;
text-align:center;
z-index:5;
}
.smelltext {
position: relative;
font-size:17px;
font-weight:500;
line-height:150%;
text-align:center;
}
.smellflex {
position:relative;
width:80%;
margin:-2% auto 0 auto;
z-index:99;
display: block;
padding-bottom:5%;
}
.smellleft {
width:90%;
margin:0 auto;
text-align:center;
}
.smellright {
width:86%;
margin:0 auto;
color:#000000;
box-sizing: border-box;
margin-top:-15%;
padding-bottom:20%;
text-align:center;
}
.othersback {
position:relative;
width:100%;
max-width:640px;
margin:0 auto;
background:url("../images/others_back_sp.jpg")no-repeat;
background-size:100% 100%;
padding:5% 10% 10% 10%;
color:#000000;
box-sizing: border-box;
}
.otherstitle {
position:relative;
width:90%;
max-width:540px;
margin:5% auto 2% auto;
}
.othersflex {
position:relative;
width:100%;
z-index:99;
display:block;
margin:0;
padding:0;
}
.othersflex2 {
position:relative;
width:100%;
max-width:640px;
margin:0 auto;
z-index:99;
display:block;
padding:0;
}
.otherscol {
position:relative;
width:90%;
max-width:640px;
margin:3% auto 9% auto;
display:block;
}
.othersleft {
position:relative;
width:90%;
margin:0 auto 5% auto;
display:block;
}
.othersright {
position:relative;
width:100%;
display:block;
margin:0 auto;
text-align:center;
}
.otherscopy {
font-size:26px;
font-weight:700;
text-align:center;
margin:3% 0;
}
.goods {
z-index:10;
position:relative;
width:100%;
margin:0;
display:block;
overflow: hidden;
background:#0d176c;
padding-top:7%;
}
.goodstitle {
width:70%;
max-width:300px;
margin:10% auto 0 auto;
display:block;
}
.stickerflex {
position:relative;
width:90%;
max-width:1200px;
z-index:99;
display: flex;
flex-wrap:wrap;
justify-content:center;
margin:0 auto;
padding:0;
}
.stickercol {
position:relative;
width:50%;
padding:0 1%;
box-sizing:border-box;
text-align:center;
font-size:14px;
color:#ffffff;
margin-bottom:5%;
}
.stickercol p img {
width:100%;
}
.goodsprice{
position:relative;
width:90%;
max-width:480px;
margin:0 auto;
color:#000000;
display:block;
}
.goodspricein {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin-top:5%;
text-align:center;
display:block;
}
.goodspricein2 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin-top:3.5%;
text-align:center;
}
.goodsname {
font-size:20px;
font-weight:700;
margin-bottom:1%;
line-height:140%;
}
.goodschuki {
font-size:14px;
font-weight:500;
}
.goodsflex { 
position:relative;
width:90%;
max-width:640px;
margin:0 auto;
z-index:99;
display:block;
padding:0;
}
.goodscol {
position:relative;
width:90%;
display:block;
margin:0 auto;
}
.goodsphoto {
width:100%;
margin:0 auto;
}
.goodsphoto img {
width:100%;
}
.collaboname {
font-size:20px;
font-weight:700;
margin-bottom:1%;
line-height:140%;
color:#ffffff;
display:block;
}
.collaboname a {
color:#ffffff;
text-decoration: none;
display:block;
}
.collabocol {
position:relative;
width:90%;
display:block;
margin:0 auto 3% auto;
}
.collabopricein {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin-top:5%;
text-align:center;
display:block;
}
.time {
font-size:180%;
}
}
.att {
padding-left: 1em;
text-indent: -1em;
}
.att2 {
text-indent:-0.5em;
}
.bartop {
position:relative;
z-index: 1;
width:100%;
padding:0;
display:block;
}
.bartop p img {
width:100%;
vertical-align:top;
display:block;
margin-top:-0.5px;
transform: scaleY(1.002);
}
.barbottom {
position:relative;
z-index: 0;
width:100%;
padding:0;
display:block;
}
.barbottom p img {
width:100%;
vertical-align:bottom;
display:block;
margin-bottom:-0.5px;
padding:0;
transform: scaleY(1.002);
}
.alpha a:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)";
}
.alpha100 a:hover {
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
}
#page-top,
#page-top-sp {
display:block;
width: 100px;
height:100px;
z-index: 9999;
position: fixed;
bottom:0;
right: 1.5%;
padding:0;
margin:0;
}
#page-top a,
#page-top-sp a {
text-align:center;
display: table-cell;
vertical-align: middle;
width: 100px;
height:100px;
padding:0;
margin:0;
filter: drop-shadow(0px 0px 5px rgba(0,0,0,1));
}
#page-top a:hover,
#page-top-sp a:hover {
filter: drop-shadow(0px 0px 15px rgba(0,0,0,1));
}
#page-top a:link,
#page-top-sp a:link{ 
text-decoration: none;
}
#page-top a:visited,
#page-top-sp a:visited { 
text-decoration: none;
}
#page-top a:active,
#page-top-sp a:active{ 
text-decoration: none;
}
.space05 {
padding-top:0.6%;
display:block;
}
.space1 {
padding-top:1%;
display:block;
}
.space2 {
padding-top:2%;
display:block;
}
.space3 {
padding-top:3%;
display:block;
}
.space5 {
padding-top:5%;
display:block;
}
.space10 {
padding-top:10%;
display:block;
}
.fontborder {
border:1px solid #000;
font-weight:700;
padding:1% 2%;
margin:0;
display:block;
}
.fontredback {
color:#FFF;
background:#e60012;
padding:2%;
margin:1% 0;
line-height:120%;
}
.fontbold {
font-weight:700;
}
.font40 {
font-size:40%;
}
.font50 {
font-size:50%;
}
.font60 {
font-size:60%;
}
.font70 {
font-size:70%;
}
.font80 {
font-size:80%;
}
.font90 {
font-size:90%;
}
.font115 {
font-size:115%;
}
.font120 {
font-size:120%;
}
.font130 {
font-size:130%;
}
.font150 {
font-size:150%;
}
.font170 {
font-size:170%;
}
.font200 {
font-size:200%;
}
.font250 {
font-size:250%;
}
.font330 {
font-size:330%;
}
.font13px {
font-size:13px;
}
.font14px {
font-size:14px;
}
.purplefont {
color:#920783;
}
.lineheight180 {
line-height: 180%;
}
.clear {
clear:both;
}
.center {
text-align:center;
margin:0 auto;
}
.animeslow {
-webkit-animation-duration: 0.2s;
animation-delay:0.2s;
}
.animeslow2 {
-webkit-animation-duration: 0.4s;
animation-delay:0.4s;
}
.animeslow3 {
-webkit-animation-duration: 0.6s;
animation-delay:0.6s;
}
.animeslow4 {
-webkit-animation-duration: 0.8s;
animation-delay:0.8s;
}
.animeslow5 {
-webkit-animation-duration: 1.0s;
animation-delay:1.0s;
}
.animeslow6 {
-webkit-animation-duration: 1.2s;
animation-delay:1.2s;
}
.animeslow7 {
-webkit-animation-duration: 1.4s;
animation-delay:1.4s;
}
.animeslow8 {
-webkit-animation-duration: 1.6s;
animation-delay:1.6s;
}
.animeslow9 {
-webkit-animation-duration: 1.8s;
animation-delay:1.8s;
}
.animeslow10 {
-webkit-animation-duration: 2s;
animation-delay:2s;
}
.animeslow11 {
-webkit-animation-duration: 2.2s;
animation-delay:2.2s;
}
.fade {
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
}
#special,#creatures,#others,#goods,#collabo,#information {
z-index: 0;
position:relative;
margin-top:-130px;
padding-top:130px;
}
.hidden {
display:none;
}
.iv {
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
}
.alpha50 {
opacity:0.3;
}
.yellowfont {
color:#fff100;
}
.shadowfont {
filter: drop-shadow(0px 0px 6px rgba(0,0,0,1));
}
.mocchiri {
animation: mocchiri 5s ease-in-out infinite;
}
@keyframes mocchiri {
0% {
transform: scale(1, 1);
}
5% {
transform: scale(0.95, 1.05);
}
10% {
transform: scale(1.05, 0.95);
}
15% {
transform: scale(1, 1);
}
100% {
transform: scale(1, 1);
}
}
@media print {
#page-top{
display:none;
}
}