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

/*inner*/
.pkpk{width: 80px;position: absolute;left: 29%;bottom: -20%;}
.kireupmin{width:268px;padding-top:30px;margin: 0;position: absolute;top: 0;left: 0;}
section#ttlbox{height:580px;width:100%;background:url("/assets/img/waterdrop3.jpg") top left repeat-x;position:relative;}
section#ttlbox div.ttlitems{position:absolute;right:0;top:0;}
section#ttlbox h1{position: absolute;z-index: 10;top: 80px;width: 312px;left: 20%;}
section#ttlbox .mnimg{position:absolute;z-index:10;left:0;right:0;top:0;bottom:0;width:530px;line-height:580px;margin: auto;}
section#ttlbox .mnimg img{vertical-align:middle;}

.blgr{position:absolute;z-index:10;left:5%;bottom:0;width:226px;margin: auto;}
.pkpp{position:absolute;z-index:10;right:0;top:0;width:226px;margin: auto;}
.ppka{position: absolute;width: 150px;top: -60px;left: 10%;}
div.grdbox_in01 {
background: linear-gradient(36deg, rgba(245,166,56,0.5), rgba(236,247,80,0.5));background-size: 400% 400%;
    -webkit-animation: boxgrade 8s ease infinite;
    -moz-animation: boxgrade 8s ease infinite;
    animation: boxgrade 8s ease infinite;}
div.grdbox_in02 {
background: linear-gradient(36deg, rgba(249,133,158,0.5), rgba(247,204,193,0.5));background-size: 400% 400%;
    -webkit-animation: boxgrade 8s ease infinite;
    -moz-animation: boxgrade 8s ease infinite;
    animation: boxgrade 8s ease infinite;}
div.grdbox_in02-2 {
background: linear-gradient(36deg, rgba(233,171,96,0.5), rgba(169,92,151,0.5));background-size: 400% 400%;
    -webkit-animation: boxgrade 8s ease infinite;
    -moz-animation: boxgrade 8s ease infinite;
    animation: boxgrade 8s ease infinite;}

div.grdbox_in03 {
background: linear-gradient(36deg, rgba(97,158,79,0.5), rgba(220,252,120,0.5));background-size: 400% 400%;
    -webkit-animation: boxgrade 8s ease infinite;
    -moz-animation: boxgrade 8s ease infinite;
    animation: boxgrade 8s ease infinite;}


div.grdbox_in02_m {
background: linear-gradient(60deg, rgba(182,122,144,1.0), rgba(228,170,99,0.4));background-size: 400% 400%;
    -webkit-animation: boxgrade 8s ease infinite;
    -moz-animation: boxgrade 8s ease infinite;
    animation: boxgrade 8s ease infinite;}

div.grdbox_in03_m {
background: linear-gradient(60deg, rgba(148,155,69,1.0), rgba(177,210,30,0.4));background-size: 400% 400%;
    -webkit-animation: boxgrade 8s ease infinite;
    -moz-animation: boxgrade 8s ease infinite;
    animation: boxgrade 8s ease infinite;}

div.grdbox_in01.in01-1,div.grdbox_in02.in02-1,div.grdbox_in03.in03-1{position: absolute;top: 30%;right: 0;margin: auto;z-index: 1;width:100%;height:115px;}
div.grdbox_in01.in01-2,div.grdbox_in02-2.in02-2,div.grdbox_in03.in03-2 {position: absolute;bottom:0;left: 0;z-index:1;width:68px;height:68px;cursor:pointer;}
div.grdbox_in02_m.in02-2_m,div.grdbox_in03_m.in03-2_m{position: absolute;bottom:0;left: 68px;z-index:1;width:68px;height:68px;cursor:pointer;}




@-webkit-keyframes boxgrade {
    0%{background-position:96% 0%}
    50%{background-position:5% 100%}
    100%{background-position:96% 0%}
}
@-moz-keyframes boxgrade {
    0%{background-position:96% 0%}
    50%{background-position:5% 100%}
    100%{background-position:96% 0%}
}
@keyframes boxgrade {
    0%{background-position:96% 0%}
    50%{background-position:5% 100%}
    100%{background-position:96% 0%}
}


#desctop h2{height:52px;margin:0 auto;}
#desctop h2 img{height:100%;width:auto;}

section#desctop .orgrsh{position: absolute;z-index: 10;right: 0;top: -100px;width: 150px;margin: auto;}

section#lineup div.shopbox{width:480px;float:left;margin-bottom:56px;}
section#lineup div.shopbox:nth-child(even){margin-right:40px;}
section#lineup div.shopbox .phtbox{padding:0;margin:0;}
section#lineup div.shopbox .phtbox img{vertical-align: bottom;width: 100%;}

section#lineup div.shopdet{height:250px;background:#fff;position:relative;}
section#lineup div.shopdet.hg3 {min-height: 300px;background: #fff;position: relative;}
section#lineup div.shopdet div.lftminbox{width:45%;float:left;margin:3% 0 0 5%;}
section#lineup div.shopdet div.rgtminbox{width:44%;float:right;margin:0 3%;text-align: justify;}
section#lineup h3{width:150px;margin:0 auto;}


.inn03 .novelty{background:#ccd321;padding: 5px 8px;font-size: 1.2rem;text-align:left;}
.inn03 .novelty span{color:#fff;display:block;}

section#lineup div.shopdet div.lftminbox p{margin:0;}
section#lineup .shoplist{width:1000px;margin:0 auto;padding:80px 0;}
section#lineup .itembox{font-size:1.2rem;text-align:left;}
section#lineup .shopname{font-size:1.9rem;font-weight: 600;}
section#lineup .shopname span{letter-spacing:-0.1rem;}
_:-ms-lang(x)::-ms-backdrop, section#lineup .shopname span {letter-spacing:-0.2rem;}

section#lineup .shopname span.gy{letter-spacing:-0.3rem;}
.chaye{position: absolute;bottom: 20%;right: 10%;z-index: 2;width: 240px;}
.pram{position: absolute;bottom: -5%; right: 2%;z-index: 2;width: 200px;}
section#lineup div.shopbox .shopinfo {line-height: 68px;width: 34px;margin:0 auto!important;}
section#lineup div.shopbox .shopinfo img,section#lineup div.shopbox .movib img{vertical-align:middle;}
section#lineup div.shopbox .movib{line-height: 68px;width: 40px;margin:0 auto!important;}

section#lineup ul{padding:0;margin:0;}
section#lineup ul li{width: 240px;padding:0;margin: 0 auto;}
section#lineup ul li span{font-size:0.8rem;display:block;}
section#lineup ul li span.bb{margin:0;border-bottom: 1px solid #000;font-size:2.1rem;display: inline-block;}
section#lineup .mid{font-size:2.6rem;margin:0;}













div.grdbox3 {z-index:1;width: 100%;height:840px;background: radial-gradient(ellipse at top right, #cfc7e9, transparent),
radial-gradient(ellipse at bottom left, #4d9f0c, transparent);
opacity: 0.5;animation: huerotator 8s infinite alternate;}

section#desctop{text-align: center;margin:50px auto;}
section#desctop h2{margin-bottom:0;}
p.desc{line-height:180%;}



.whsr{position:absolute;z-index:10;left: -5%;bottom:20%;width:226px;margin: auto;}
.whmin{position:absolute;z-index:10;left: 20%;top: 20%;width: 120px;margin: auto;}
.yeor{position:absolute;z-index:10;right: 5%;bottom: 5%;width: 188px;margin: auto;}
.ppgr{position:absolute;z-index:10;right: 5%;top: 40%;width: 188px;margin: auto;}

section#ttlbox div.cont12box,section#ttlbox div.lftbox,section#ttlbox div.rgtbox{height: 500px;}

.midashi{border-top:1px solid #000;border-bottom:1px solid #000;margin:50px auto 5px;width: 120px;line-height: 2.6rem;}




.ugou{position:absolute;z-index:10;left: 5%;top: -10%;width:200px;margin: auto;}
.aopp{position:absolute;z-index:10;right: 5%;bottom: -30%;width:200px;margin: auto;}

@keyframes huerotator {
0% {-webkit-filter: hue-rotate(0deg);filter: hue-rotate(0deg);}
100% {-webkit-filter: hue-rotate(360deg);filter: hue-rotate(360deg);}
}



@media only screen and (max-width: 768px) {
	.kireupmin{left:5%;}
	section#ttlbox{height:600px;}
	section#ttlbox div.cont12box, section#ttlbox div.lftbox, section#ttlbox div.rgtbox{height:400px;}
	section#ttlbox .mnimg{width: 70%;
    left: auto;
    right: 5%;
    bottom: auto;
    top: 100px;
    line-height: inherit;}
	section#ttlbox .mnimg img{width:100%;}
	#desctop .contbox{width:90%;}
	section#lineup .shoplist{width:100%;}
	section#lineup div.shopbox{width:80%;float:none;margin:0 auto 50px;}
	section#lineup div.shopbox:nth-child(even){margin-right:auto;}
	section#lineup div.shopdet{width:100%;height:auto;min-height: 300px;}
	section#ttlbox h1{right: 5%;top: 10%;width: 70%;left: auto;bottom: auto;}
	.chaye{width: 140px;bottom: 0;}
	.pram{width: 140px;bottom: 0;}
}
@media only screen and (max-width: 450px) {
	section#ttlbox{height:auto;}
}

@media (max-width: 375px) {
  
}