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


 @media screen and (min-width : 951px) {/* large */
 
 
 
 
 
 
 
 /* ↓↓↓220622↓↓↓  */
#topbutton img {
width: 70%;
}

#topbutton {
position: fixed;
bottom: 5px;
right: 5px;
z-index:100;
display: none;
text-align: center; 
margin: 0px; 
transition: filter 0.3s ease;
filter: brightness(1.0);
}

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 80%;
}
 
#character001 {
max-width: 1000px;
margin: 0 auto 0 auto;
}

#character001 img {
width: 100%;
}

#character001-02 {
display: none;
}

#character002 {
max-width: 1000px;
margin: 0 auto 0 auto;
}

#character002 img {
width: 100%;
}

#character003 {
max-width: 1000px;
margin: 0 auto 0 auto;
}

#character003 img {
width: 100%;
}

#character004 {
max-width: 1000px;
margin: 0 auto 0 auto;
}

#character004 img {
width: 100%;
}

#character005 {
max-width: 1000px;
margin: 0 auto 0 auto;
}

#character005 img {
width: 100%;
}

#character006 {
max-width: 1000px;
margin: 0 auto 0 auto;
}

#character006 img {
width: 100%;
}

#character007 {
max-width: 1000px;
margin: 0 auto 0 auto;
}

#character007 img {
width: 100%;
}

#character008 {
max-width: 1000px;
margin: 0 auto 0 auto;
}

#character008 img {
width: 100%;
}

#character009 {
max-width: 1000px;
margin: 0 auto 0 auto;
}

#character009 img {
width: 100%;
}

#character010 {
max-width: 1000px;
margin: 0 auto 0 auto;
}

#character010 img {
width: 100%;
}


#main {
background-image: url("img/main.png");
background-size:  contain;
background-repeat: no-repeat;
max-width: 1920px;
text-align: center;
position: relative;
}

#language {
position: absolute;
z-index: 1;
top: 0;
max-width: 1920px;
margin:  0.3% 24.6% 0 69.3%;
}

#language img {
max-width: 100%;
}

#mainsp {
display: none;
}

.logo {
max-width: 100%;
}

.maincopy {
max-width: 100%;
}

#contentmain02 {
max-width: 1920px;
text-align: left;
}

#pvbox {
max-width: 900px;
padding: 0 20% 0 20%;
margin: -1% auto 4% auto;
}

#pv {
max-width: 730px;
margin: 0 auto 0 auto;
}


#movie {
position: relative;
width: 100%;
padding-top: 56.25%;
margin: 5% auto 5% auto;
border: 3px solid rgba(255,255,255,1.00); background: #fff; 
}

#movie iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: 100%;
height: 100%;
margin: auto;
}

#story {
max-width: 1000px;
margin: 0 auto 5% auto;
}
#story img {
width: 100%;
}

#chara {
max-width: 1000px;
height: 710px;
margin: 0 auto 4% auto;
background-image: url("img/chara.png");
background-size: contain;
background-repeat: no-repeat;
}

#charabtn {
max-width: 1000px;
height: 59px;
padding: 64.5% 0 0 2%;
}
#charabtn img {
width: 37%
}

#system001 {
margin: 0 auto 4% auto;
max-width: 1000px;
text-align: center;
}

#system001 img{
width: 100%;
}

#system002 {
margin: 0 auto 0 auto;
max-width: 1000px;
padding:  1% 0 1.5% 0;
}

#system003 {
margin: 0 auto 0 auto;
max-width: 1000px;
padding:  4% 0 2.1% 0;
}

#system002 img,#system003 img {
max-width: 84%;
filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.8));
}

#tokuten {
margin: 0 auto 0 auto;
max-width: 1000px;
text-align: center;
}

#tokuten img{
width: 100%;
}

#product {
margin: 0 auto 0 auto;
max-width: 1000px;
text-align: center;
}

#product img{
width: 100%;
}

#shop {
margin: 3% auto 2% auto;
position: relative;
text-align: center;
max-width: 1000px;
}

#shopttl {
max-width: 1000px;
margin: 0 auto 0 auto;
text-align: center;
position: absolute;
top: -1%;
}

#shopttl img{
width: 100%;
}

.shopmainbox {
margin: 0 auto 0 auto;
display: flex;
max-width: 1000px;

}

#shopbox001 {
background-image: url("img/shop001.png");
background-size: cover;
text-align: center;
width: 100%;
height: 100%;
}
#shopbox002 {
background-image: url("img/shop002.png");
background-size: cover;
text-align: center;
width: 100%;
height: 100%;
}
#shopbox003 {
background-image: url("img/shop003.png");
background-size: cover;
text-align: center;
width: 100%;
height: 100%;
}

#shopbox004 {
background-image: url("img/shop004.png");
background-size: cover;
text-align: center;
width: 100%;
height: 100%;
}

#shopbox005 {
background-image: url("img/shop005.png");
background-size: cover;
text-align: center;
width: 50%;
height: 100%;
}

#shopbox006 {
background-image: url("img/shop006.png");
background-size: cover;
text-align: center;
width: 100%;
height: 100%;
}

#shopbox007 {
background-image: url("img/shop007.png");
background-size: cover;
text-align: center;
width: 100%;
height: 100%;
}


.shopbtnbox {
max-width: 500px;
margin: 86.5% auto 7% auto;
}

.shopbtn001 {
margin: 0 0 0 1%;
width: 45%;
}

.shopbtn002 {
margin: 0 0 0 -1%;
width: 45%;
}

  /* ↑↑↑220622↑↑↑ */
#contentmain01{
max-width: 1100px;
background-image: url("img/topbg.png");
-moz-background-size:100% auto;
background-size:100% auto;
}
#contentmain01 img{
width: 100%;
margin: 0;
padding: 0;
display: block;
}
#topblock01{
max-width: 1100px;
background-image: url("img/topblock01bg.png");
-moz-background-size:100% auto;
background-size:100% auto;
}

#topblock01 img{
width: 100%;
margin: 0;
padding: 0;
display: block;
}
#topblock02{
}

#topblock02 img{
width: 100%;
margin: 0;
padding: 0;
display: block;
}

#topblock03{
}

#topblock03 img{
width: 100%;
margin: 0;
padding: 0;
display: block;
}

#footerbox{
text-align: center;
margin: 4% 0 0 0;
}

#footerbtn {
margin: 0 auto 0 auto;
}

#footeritem001 {
max-width: 100%;
height:auto;
padding: 0 0 0 0;
}
#footeritem002 {
max-width: 100%;
height:auto;
padding: 0 0 1% 0;
}
#footeritem003 {
max-width: 100%;
height:auto;
padding: 0 0 1% 0;
}
#footeritem004 {
max-width: 100%;
height:auto;
padding: 0 0 1% 0;
}

#copy {
color: #fff;
text-align: center;
margin: 4% 0 0 0;
}

#copy p {
margin: 0;
font-size: 90%;
}

#guideline {
background-image: url("img/guideline_bk.png");
padding: 1em 3em 2.5em 2.5em;
text-align: left;
border: solid #ccc 3px;
color: #fff;
font-size: 90%;
width: 100%;
max-width: 55%;
margin: 5% auto 5% auto;
}

#guideline h4 {
margin: 0 0 -0.5em 0;
}

#guideline h3 {
font-size: 180%;
text-align:  center;
}

#guideline img {
width: 100%;
text-align: center;
max-width: 35%;
}

.guideline_btnbox {
margin: 1em auto 0 auto;
text-align: center;
}
#guideline a:link {
color: #CFAD00;
}

}
 @media screen and (max-width : 950px) {/* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small */
#topbutton img {
width: 45%;
}

#topbutton {
position: fixed;
bottom: 10px;
right: -5%;
z-index:100;
display: none;
text-align: center; 
margin: 0px; 
transition: filter 0.3s ease;
filter: brightness(1.0);
}
#character001 {
display: none;
}

#character001 img {
}

#character001-02 {
max-width: 950px;
margin: 0 auto 0 auto;
}

#character001-02 img {
width: 100%;
}

#character002 {
max-width: 950px;
margin: 0 auto 0 auto;
}

#character002 img {
width: 100%;
}

#character003 {
max-width: 950px;
margin: 0 auto 0 auto;
}

#character003 img {
width: 100%;
}

#character004 {
max-width: 950px;
margin: 0 auto 0 auto;
}

#character004 img {
width: 100%;
}

#character005 {
max-width: 950px;
margin: 0 auto 0 auto;
}

#character005 img {
width: 100%;
}

#character006 {
max-width: 950px;
margin: 0 auto 0 auto;
}

#character006 img {
width: 100%;
}

#character007{
max-width: 950px;
margin: 0 auto 0 auto;
}

#character007 img {
width: 100%;
}

#character008 {
max-width: 950px;
margin: 0 auto 0 auto;
}

#character008 img {
width: 100%;
}

#character009 {
max-width: 950px;
margin: 0 auto 0 auto;
}

#character009 img {
width: 100%;
}

#character010 {
max-width: 950px;
margin: 0 auto 0 auto;
}

#character010 img {
width: 100%;
}


#main {
background-image: url("img/main_sp.png");
background-size:  cover;
background-repeat: no-repeat;
max-width: 950px;
text-align: center;
}

#language {
position: absolute;
z-index: 1;
top: 0;
max-width: 950px;
margin: 1.4% 11.5% 0 76%;
}

#language img {
max-width: 100%;
}

.logo {
max-width: 100%;
}

.maincopy {
max-width: 100%;
margin: 19% 0 0 0;
}

#contentmain02 {
max-width: 1920px;
text-align: left;
}

#pvbox {
max-width: 900px;
padding: 0 12% 0 12%;
}

#pv {
max-width: 730px;
margin: 0 auto 0 auto;
}


#movie {
position: relative;
width: 100%;
padding-top: 56.25%;
margin: 5% auto 5% auto;
border: 3px solid rgba(255,255,255,1.00); background: #fff; 
}

#movie iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: 100%;
height: 100%;
margin: auto;
}

 #story {
max-width: 1000px;
margin: 0 auto 5% auto;
}
#story img {
width: 100%;
}

#chara {
max-width: 950px;
height: 100%;
margin: 0 auto 2% auto;
background-image: url("img/chara_sp.png");
background-size: contain;
background-repeat: no-repeat;
}

#charabtn {
max-width: 950px;
height: 100%;
padding: 53% 0 0 5%;
}
#charabtn img {
width: 47%;
margin:  0 0 5% 0;
}


#system001 {
margin: 0 auto 4% auto;
max-width: 1000px;
text-align: center;
}

#system001 img{
width: 100%;
}

#system002 {
margin: 0 auto 0 auto;
max-width: 1000px;
padding:  1% 0 1.5% 0;
}

#system003 {
margin: 0 auto 0 auto;
max-width: 1000px;
padding:  4% 0 2.1% 0;
}

#system002 img,#system003 img {
max-width: 84%;
filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.8));
}

#tokuten {
margin: 0 auto 0 auto;
max-width: 950px;
text-align: center;
}

#tokuten img{
width: 100%;
}

#product {
margin: 0 auto 0 auto;
max-width: 950px;
text-align: center;
}

#product img{
width: 100%;
}

#shop {
margin: 3% auto 5% auto;
position: relative;
text-align: center;
max-width: 950px;
}

#shopttl {
max-width: 950px;
margin: 0 auto 0 auto;
text-align: center;
position: absolute;
top: -1%;
}

#shopttl img{
width: 100%;
}

.shopmainbox {
margin: 0 auto 0 auto;
display: block;
max-width: 950px;

}

#shopbox001 {
background-image: url("img/shop001_sp.png");
background-size: cover;
max-width: 100%;
height: 100%;
padding: 24.5% 10% 2% 43%;
margin: 0 0 1% 0;
}

.shopbtnbox {
max-width: 400px;
height: 100%;
margin: 2%;
}

.shopbtn001 {
width: 102%
}


.shopbtn002 {
width: 102%
}
#shopbox002 {
background-image: url("img/shop002_sp.png");
background-size: cover;
max-width: 100%;
height: 100%;
padding: 24.5% 10% 2% 43%;
margin: 0 0 1% 0;
}
#shopbox003 {
background-image: url("img/shop003_sp.png");
background-size: cover;
max-width: 100%;
height: 100%;
padding: 24.5% 10% 2% 43%;
margin: 0 0 1% 0;
}

#shopbox004 {
background-image: url("img/shop004_sp.png");
background-size: cover;
max-width: 100%;
height: 100%;
padding: 24.5% 10% 2% 43%;
margin: 0 0 1% 0;
}

#shopbox005 {
background-image: url("img/shop005_sp.png");
background-size: cover;
max-width: 100%;
height: 100%;
padding: 24.5% 10% 2% 43%;
margin: 0 0 1% 0;
}

#shopbox006 {
background-image: url("img/shop006_sp.png");
background-size: cover;
max-width: 100%;
height: 100%;
padding: 24.5% 10% 2% 43%;
margin: 0 0 1% 0;
}

#shopbox007 {
background-image: url("img/shop007_sp.png");
background-size: cover;
max-width: 100%;
height: 100%;
padding: 24.5% 10% 2% 43%;
margin: 0 0 1% 0;
}



  /* ↑↑↑220622↑↑↑ */
 
 
 
#contentmain01{
max-width: 750px;
margin: auto;
background-image: url("img/sp_topbg.png");
-moz-background-size:100% auto;
background-size:100% auto;
}
#contentmain01 img{
width: 100%;
margin: 0;
padding: 0;
display: block;
}

#topblock01{
max-width: 750px;
background-image: url("img/sp_topblock01bg.png");
-moz-background-size:100% auto;
background-size:100% auto;
margin: auto;
}

#topblock01 img{
width: 100%;
margin: 0;
padding: 0;
display: block;
}
#topblock02{
margin: auto;
}

#topblock02 img{
width: 100%;
margin: 0;
padding: 0;
display: block;
}

#topblock03{
margin: auto;
}

#topblock03 img{
width: 100%;
margin: 0;
padding: 0;
display: block;
}

#footerbox{
text-align: center;
}

#footerbtn {
margin: 5% auto 0 auto;
}

#footeritem001 {
max-width: 15%;
height:auto;
margin: 0 0 0 0;
}
#footeritem002 {
max-width: 15%;
height:auto;
padding: 0 0 1% 0;
}
#footeritem003 {
max-width: 15%;
height:auto;
padding: 0 0 1% 0;
}
#footeritem004 {
max-width: 15%;
height:auto;
padding: 0 0 1% 0;
}

#copy {
color: #fff;
text-align: center;
margin: 5% 0 5% 0;
}

#copy p {
margin: 0;
font-size: 50%;
}

#guideline {
background-image: url("img/guideline_bk.png");
padding: 1em 1.5em 1em 1.5em;
text-align: left;
border: solid #ccc 2px;
color: #fff;
font-size: 60%;
width: 100%;
max-width: 75%;
margin: 5% auto 5% auto;
}

#guideline h3 {
font-size: 120%;
text-align:  center;
}

#guideline img {
width: 100%;
text-align: center;
max-width: 65%;
}

.guideline_btnbox {
margin: 1.5em auto 1em auto;
text-align: center;
}

#guideline ul li{
margin: 0 0 0 -2em;
}
#guideline a:link {
color: #CFAD00;
}

#guideline h4 {
margin: 0 0 -0.5em 0;
}
}