@charset "utf-8";
html.shopmodalopen,
body.shopmodalopen {overflow:hidden;}
html.shopmodalopen.shopmodalclose,
body.shopmodalopen.shopmodalclose{overflow:visible;}

#shopmodalbase {z-index: -1000000; background: rgba(255,255,255,0); width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; overflow: hidden; transition: 1s 0s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0; overflow-y: scroll;}
.windowloaded #shopmodalbase{opacity: 1;}
#shopmodalbase .wrap {min-width: 600px; margin: 0 auto ; transition: 1s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0,-101%);/* height: 1011px;*/ padding: 70px 0 20px; display: flex; align-items: center;}
#shopmodalbase .wrap article {position: relative; z-index: 10; background: rgba(255,255,255,0.78); border: 1px solid #897f62; padding: 0 60px;}
#shopmodalbase .wrap article {text-align: center;}
#shopmodal header {position: relative; padding: 0 0 0; z-index: 0; text-align: center; margin-top: 0;}
#shopmodal header h3 {font-size: 39px; line-height: 69px; font-weight: normal; background: url(../images/common/bg_modaltitle.png) center bottom no-repeat #897f62; color: #fff; margin: 0 -61px 50px; background-size: 100% auto;}
#shopmodalbase .wrap article p {font-size: 24px; line-height: 34px; color: #977aaf; padding: 30px 0 48px;}
#shopmodal footer {position: absolute; right: 1px; top: -52px; z-index: 10; width: 39px; height: 39px; overflow: hidden; font-size: 0;}
#shopmodal footer a{display: block; width: 39px; height: 39px; transition: 0.4s ease-out;background: url(../images/common/btn_close.png) left top no-repeat;}
#shopmodal footer a:hover {opacity: 0.7; transition: 1s;}
.shopmodalopen #shopmodalbase{z-index: 1000000; background: rgba(255,255,255,0.9);}
.shopmodalclose #shopmodalbase {z-index: 1000000; background: rgba(255,255,255,0);}
#shopmodalbase .wrap article {display: none;}
#shopmodalbase .wrap article.show{display: block;}
.shopmodalopen #shopmodalbase .wrap{transform: translate(0,0);}
.shopmodalclose #shopmodalbase .wrap{transform: translate(0,-101%); transition: 0.6s 0s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0;}


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

/*body{background:url(../images/products/bg.jpg) center top no-repeat fixed;}*/

#wrapper{padding-top:126px;}
#wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/products/bg-top.png) no-repeat center top;}
#wrapper .wrap{max-width:1400px; width:100%; min-width:1200px;}
main h1{height:91px; margin-bottom:68px; background:url(../images/products/title.png) no-repeat center top;}

/*product*/
#product nav{position:relative;}
#product nav #details-area{position:absolute; top:-100px; left:0; width:100%; height:1px; opacity:0;}
#shop #shop-area{position:absolute; top:-100px; left:0; width:100%; height:1px; opacity:0;}
#sound #sound-area{position:absolute; top:-100px; left:0; width:100%; height:1px; opacity:0;}

#product h2{background:url(../images/top/h2_product.png) center top no-repeat; height:80px; margin-bottom:45px;}
#product .text{position:relative; min-height:392px; padding:60px 108px 50px 100px; margin:10px 10px 80px; background-color:rgba(255,255,255,0.5); background-image:url(../images/top/product_cos.png), url(../images/top/product-img-bg.png); background-repeat:no-repeat, no-repeat; background-position:center bottom, 672px -112px; background-size:100% auto, 540px 1289px; border:1px #6a5e3c75 solid;}
#product .text::after{content:''; clear: both; display: block; zoom:1;}
#product .text::before{content:''; width:calc(100% + 20px); height:calc(100% + 20px); position:absolute; left:-10px; top:-10px; background:rgba(255,255,255,0.42); border:2px #6a5e3c75 solid; z-index:-1;}
#product .text div {zoom:1; overflow: hidden; padding-right: 90px; text-align: left;}
#product .text h3 img{width: 100%; height: auto; max-width: 562px; margin-bottom: 30px;}
#product .text p {font-size: 17px; line-height: 28px; padding:0 0 0 5px;}
#product .text figure{position:absolute; top:-98px; right:115px; width:276px; height:528px; transition:right 0.3s;}
#product .text figure img{width:100%; height:auto;}
#product .text div {zoom:1; overflow: hidden; padding-right: 90px; text-align: left;}
#product .text h3 img{width: 100%; height: auto; max-width: 562px; margin-bottom: 30px;}
#product .text p {font-size: 17px; line-height: 28px; padding:0 0 0 5px;}
#product input{position: fixed; left: -9999px; opacity: 0;}
#product nav {width: 1120px; height: 206px; display: flex; margin: 0 auto; align-items: flex-start; align-content: flex-start; justify-content: flex-start; overflow: hidden;}
#product nav label{display:block; height: 208px; width: 360px; position: relative; margin-right: 20px; transition: 0.5s; cursor: pointer;}
#product nav label:hover{opacity: 0.7; transition: 1s;}
#product nav label::before,
#product nav label::after{content: ''; background:url(../images/top/tab.png) left top no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#product nav label[for*='03'] {margin-right: 0;}
#product nav label[for*='02']::before{background-position: -380px 0px;}
#product nav label[for*='03']::before{background-position: -760px 0px;}
#product nav label::after {opacity: 0;}
#product nav label[for*='01']::after{background-position: 0 -212px;}
#product nav label[for*='02']::after{background-position: -380px -212px;}
#product nav label[for*='03']::after{background-position: -760px -212px;}
#product .tab{display: none;}
#product #tab01:checked ~ nav label[for*='01']::before{opacity: 0;}
#product #tab01:checked ~ nav label[for*='01']::after{opacity: 1;}
#product #tab01:checked ~ .tab.tab01{display: block;}
#product #tab02:checked ~ nav label[for*='02']::before{opacity: 0;}
#product #tab02:checked ~ nav label[for*='02']::after{opacity: 1;}
#product #tab02:checked ~ .tab.tab02{display: block;}
#product #tab03:checked ~ nav label[for*='03']::before{opacity: 0;}
#product #tab03:checked ~ nav label[for*='03']::after{opacity: 1;}
#product #tab03:checked ~ .tab.tab03{display: block;}
#product .tab{border: 5px solid #6a5e3c; padding: 8px; color: #6a5e3c;}
#product .tab .in {border: 1px solid #6a5e3c; background: rgba(255,255,255,0.3); padding: 50px 0 0;}
#product .tab .in h4 {font-size: 25px; line-height: 37px; font-style: italic; font-weight: bold; margin: 5px 0 48px;}
#product .tab p.note{margin:-20px 0 50px; font-size:21px; line-height:33px;text-align:center; color:#000;}
#product .tab .flex {display: flex; justify-content: center; align-items: center; padding-bottom: 30px;}
#product .tab .flex img,
#product .tab .flex div {margin: 0 35px;}
#product .tab .flex ul {border-bottom: 2px solid #6a5e3c; margin-bottom: 18px; padding:5px 0 30px;}
#product .tab .flex ul li {font-size: 21px; line-height: 33px; text-align: left; position: relative; padding-left: 1em;}
#product .tab .flex ul li p.small{font-size: 15px; line-height: 22px; padding-bottom: 10px; font-weight: normal; color: #644384;}
#product .tab .flex ul li::before {color: #d065ae; content: '◆'; font-size:16px; position: absolute; left: 0; top: 0;}
#product .tab .flex p {font-size: 25px; line-height: 40px; color: #5ab6c5; font-weight: bold;}
#product .tab .flex p em{font-size: 39px; color: #d065ae; font-weight: bold;}
#product .tab .flex p small{font-size: 20px;}
#product .tab .btns {background: url(../images/top/product_btns.png) center top no-repeat; width: 953px; margin: 0 auto 37px; display: flex; flex-wrap: wrap; justify-content: center; padding: 101px 0 0;}
#product .tab .btns li + li {margin-top: -13px;}
#product .tab .btns p {width: 100%; margin-top: -3px;}
#product .tab .btns a{display: inline-block; position: relative; transition: 0.5s;}
#product .tab .btns a:hover{filter:brightness(1.2); transition: 1s;}
#product .tab .btns a.comingsoon{pointer-events: none;}
#product .tab .btns .gast a.comingsoon::after{content: ''; width: 423px; height: 71px; background: url(../images/top/btn_gastshop-comingsoon.png) center top no-repeat; position: absolute; left: 16px; top: 11px; z-index: 10;}
#product .tab .btns .amazon a.comingsoon::after{content: ''; width: 423px; height: 71px; background: url(../images/top/btn_amazon-comingsoon.png) center top no-repeat; position: absolute; left: 16px; top: 11px; z-index: 10;}
#product .tab .btns .ps a.comingsoon::after{content: ''; width: 423px; height: 103px; background: url(../images/top/btn_playstation-comingsoon.png) center top no-repeat; position: absolute; left: 16px; top: 0; z-index: 10;}
#product .tab .btns .nintendo a.comingsoon::after{content: ''; width: 423px; height: 103px; background: url(../images/top/btn_nintendo-comingsoon.png) center top no-repeat; position: absolute; left: 16px; top: 0; z-index: 10;}
#product .tab.tab01 .offset {position: relative; top: -24px;}
#product .tab.tab01 .in .flex h3.pc-item {width: 100%; margin: 0; font-size: 0; line-height: 1; padding:0 0 25px;}
#product .tab.tab01 .flex h3 img{width: 309px; height: 106px; min-width: inherit;}
#product .tab.tab02 h3{margin-bottom: 50px;}
#product .tab.tab03 h3{margin-bottom: 25px;}


/*shop*/
#shop h2{background: url(../images/top/h2_shop.png) center top no-repeat; height: 80px; margin: 78px auto 35px;}
#shop .list{display: flex; justify-content: center; align-items:  flex-start; flex-wrap: wrap; margin-bottom:60px;}
#shop .list .shop {width: 310px; margin: 15px 15px 15px; border: 1px solid #897e60; background: rgba(255,255,255,0.78); position: relative; padding-bottom: 30px;}
#shop .list .shop::after{content:''; width: 330px; height: calc(100% + 20px); border: 10px solid rgba(255,255,255,0.48); position: absolute; left:-10px; top: -10px; z-index: -1;}
#shop .list .shop h3 {background: #897e60; line-height: 50px; text-align: center; color: #fff; font-size: 25px; margin-bottom: 38px;}
#shop .list .shop p {font-size: 18px; line-height: 28px; color: #977aaf; padding: 0 0 0; display: flex; justify-content: center; align-items: center; margin: -6px 0 -6px;
min-height: 56px;}
#shop .list .shop p span {display:block; padding: 0 1em;}
#shop .list .shop a.imgmodal{display: inline-block; position: relative; transition: 0.5s; margin-bottom: 30px;}
#shop .list .shop a.imgmodal::after{content: ''; background: url(../images/common/icon_zoom.png) left top no-repeat; width: 36px; height: 36px; position: absolute; right: 0; bottom: 0;}
#shop .list .shop a:hover{filter:brightness(1.2); transition: 1s;}
#shop .list .shop a.comingsoon {pointer-events: none;}
#shop .list .shop a.comingsoon::after{display: none;}
#shop .list .shop a.yoyaku {display: block; margin: 15px 0 -21px;}



/*sound*/
#sound h2{background:url(../images/products/h2.png) center top no-repeat; height:80px; margin-bottom:45px;}
#sound .wrap .box{box-shadow :0 0 0 1px rgba(185,175,38,0.42), 0 0 0 8px rgba(255,255,255,0.8), 0 0 0 10px rgba(185,174,152,0.42); background: url(../images/products/box-bg.png) center top no-repeat; background-color: rgba(255,255,255,0.8); position: relative; width: 1378px; padding-bottom: 20px; margin-bottom: 100px;}
#sound .wrap .box p:first-child{padding: 65px 0 30px; text-shadow:#fff 1px 1px 0px,#fff -1px 1px 0px,#fff 1px -1px 0px,#fff -1px -1px 0px;}
#sound .wrap .box p{font-size: 17px; line-height: 32px;}
#sound .wrap .box h4{font-size: 34px; line-height: 32px; color: #e435ac; margin-bottom: 10px; margin-left: 115px;}
#sound .wrap .box .info::before{content: ''; background: url(../images/products/line.png) center top no-repeat; width: 1200px; height: 72px; position: absolute; right: 0; top: 0;}
#sound .wrap .box .info::after{content: ''; background: url(../images/products/line.png) center top no-repeat; width: 1200px; height: 72px; position: absolute; right: 0; bottom: 0;}
#sound .wrap .box .info{padding:100px 0 0 550px; position: relative; width: 1200px; text-align: left; margin: 0 auto 50px; height:620px;}
#sound .wrap .box .info img{top:100px; left: 100px; position: absolute; }
#sound .wrap .box .info h3{font-size: 23px; line-height: 34px; color: #e435ac; margin-bottom: 30px;}
#sound .wrap .box .info dl{margin-bottom: 40px;}
#sound .wrap .box .info dl dt,#sound .wrap .box .info dl dd{font-size: 18px; line-height: 32px;}
#sound .wrap .box .info dl dt{color:#644384;}
#sound .wrap .box .info dl dd{margin-bottom: 10px;}
#sound .wrap .box .info ul li{top: 343px; left: 437px; position: absolute; }
#sound .wrap .box .info ul li + li{bottom:50px; left: 710px; position: absolute; }

#sound .wrap .box .profile{box-shadow :0 0 0 3px #6a5e3c, 0 0 0 5px #fff, 0 0 0 7px #6a5e3c; padding:73px 100px 70px 480px; position: relative; width: 1200px; margin: 0 auto 60px;  text-align: left; position: relative;}
#sound .wrap .box .profile::before{content: ''; background: url(../images/products/ornament01.png) left top no-repeat; width: 136px; height: 88px; position: absolute; left: 0; top: 0;}
#sound .wrap .box .profile::after{content: ''; background: url(../images/products/ornament02.png) right top no-repeat; width: 136px; height: 88px; position: absolute; right: 0; bottom: 0;}
#sound .wrap .box .profile img.photo{top:70px; left: 100px; position: absolute; }
#sound .wrap .box .profile p{font-size: 15px; line-height: 29px;}
#sound .wrap .box .profile p strong{font-size: 22px; color: #e435ac;}
#sound .wrap .box .profile p.artist{ position: absolute; top: 10px; left: 474px;}
#sound .wrap .box .profile h4 + p{margin: 10px 0;}



/*アニメーション*/
/* product */
#product h2,
#product .text ,
#product nav ,
#product .tab{opacity: 0; transform: translate(0,50px); transition:opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 2s cubic-bezier(0.23, 1, 0.32, 1);}
#product h2.animated,
#product h2.animated ~ .text ,
#product nav.animated ,
#product nav.animated ~ .tab{opacity: 1; transform: translate(0,0);} 

/* shop */
#shop h2,
/*#shop .list{opacity: 0; transform: translate(0,50px); transition:opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 2s cubic-bezier(0.23, 1, 0.32, 1);}*/
#shop.animated h2,
#shop.animated .list{opacity: 1; transform: translate(0,0);} 

}


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

#wrapper::before{background-size:cover;}

}


@media screen and (max-width:1400px) and (min-width:641px){

#product .text figure{right:70px;}
#product .tab .flex img{width: calc(700/1400*100vw); height: auto; min-width: 600px;}
#product .tab01.tab .flex img{width: 282px; min-width: 282px;}

}


/*

		SP site

*******************************************************************************************/

@media screen and (max-width:640px){

#wrapper{padding-top:13.594vw;}
#wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/characters/sp/bg-top.png) no-repeat center top / 100% auto;}
main h1{width:51.875vw; height:14.219vw; margin:0 auto 13.75vw; background:url(../images/products/title.png) no-repeat left top / 100% auto;}

#product nav{position:relative;}
#product nav #details-area{position:absolute; top:-62.5vw; left:0; width:100%; height:1px; opacity:0;}
#shop #shop-area{position:absolute; top:-62.5vw; left:0; width:100%; height:1px; opacity:0;}
#sound #sound-area{position:absolute; top:-21.875vw; left:0; width:100%; height:1px; opacity:0;}

#product h2{height:10.781vw; margin-bottom:6.719vw; background:url(../images/top/h2_product.png) center top no-repeat / auto 100%;}
#product .text{position:relative; min-height:97.813vw; padding:8.594vw 0 0; margin:calc(10/640*100vw) calc(20/640*100vw) 11.25vw;
background:rgba(255,255,255,0.78) url(../images/top/sp/product_cos.png) no-repeat center bottom / 100% auto;}
#product .text::after{content: ''; clear: both; display: block; zoom:1;}
#product .text::before{content: ''; width: calc(100% + calc(20/640*100vw)); height: calc(100% + calc(20/640*100vw)); position: absolute; left: -10px; top: -10px; background: rgba(255,255,255,0.42); z-index: -1;}
#product .text h3 img{width: auto; height:calc(94/640*100vw) ; margin-bottom:5.781vw;}
#product .text h3 + img {height: calc(281/640*100vw); width: auto; margin-left: calc(12/640*100vw);}
#product .text div{position:relative; margin-top:41.406vw; z-index:1;}
#product .text p{font-size:calc(21/640*100vw); line-height:calc(39/640*100vw); padding:0 7.813vw; text-align:left;}
#product .text figure{position:absolute; left:0; bottom:0; width:93.75vw; height:77.188vw; background:url(../images/top/sp/product-img-bg.png) no-repeat left bottom / 100% auto;}
#product .text figure img{display:none;}
#product input{position: fixed; left: -9999px; opacity: 0;}
#product nav {width: calc(640/640*100vw); height: calc(110/640*100vw); display: flex; margin: 0 auto; align-items: flex-start; align-content: flex-start; justify-content: flex-start; overflow: hidden;}
#product nav label{display:block; height: 100%; width: calc(220/640*100vw); position: relative; transition: 0.5s; cursor: pointer;}
#product nav label::before,
#product nav label::after{content: ''; background:url(../images/top/sp/tab.png) left top no-repeat / calc(640/640*100vw) auto; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#product nav label[for*='02'] {width: calc(200/640*100vw);}
#product nav label[for*='02']::before{background-position: calc(-220/640*100vw) 0px;}
#product nav label[for*='03']::before{background-position: calc(-420/640*100vw) 0px;}
#product nav label::after {opacity: 0;}
#product nav label[for*='01']::after{background-position: 0 calc(-120/640*100vw);}
#product nav label[for*='02']::after{background-position: calc(-220/640*100vw) calc(-120/640*100vw);}
#product nav label[for*='03']::after{background-position: calc(-420/640*100vw) calc(-120/640*100vw);}
#product .tab{display: none;}
#product #tab01:checked ~ nav label[for*='01']::before{opacity: 0;}
#product #tab01:checked ~ nav label[for*='01']::after{opacity: 1;}
#product #tab01:checked ~ .tab.tab01{display: block;}
#product #tab02:checked ~ nav label[for*='02']::before{opacity: 0;}
#product #tab02:checked ~ nav label[for*='02']::after{opacity: 1;}
#product #tab02:checked ~ .tab.tab02{display: block;}
#product #tab03:checked ~ nav label[for*='03']::before{opacity: 0;}
#product #tab03:checked ~ nav label[for*='03']::after{opacity: 1;}
#product #tab03:checked ~ .tab.tab03{display: block;}
#product .tab{border: calc(5/640*100vw) solid #6a5e3c; padding:calc(8/640*100vw); color: #6a5e3c;}
#product .tab .in {border: 1px solid #6a5e3c; background: rgba(255,255,255,0.3); padding: calc(50/640*100vw) 0 0;}
#product .tab .in h4 {font-size: calc(25/640*100vw); line-height: calc(37/640*100vw); font-style: italic; font-weight: bold; margin: calc(5/640*100vw) 0 calc(40/640*100vw);}
#product .tab p.note{margin:-3.125vw 0 calc(42/640*100vw); font-size:calc(21/640*100vw); line-height:calc(33/640*100vw); text-align:center;}
#product .tab .flex {display: flex; justify-content: center; align-items: center; padding:0 calc(30/640*100vw) calc(30/640*100vw); flex-wrap: wrap;}
#product .tab .flex img {width: 100%; height: auto; margin-bottom: calc(40/640*100vw);}
#product .tab.tab01 .flex img {width: auto; height: calc(370/640*100vw);}
#product .tab.tab01 .flex h3.sp-item {width: 100%; margin: calc(-6/640*100vw) 0 calc(-10/640*100vw);}
#product .tab.tab01 .flex h3 img{width: auto; height:calc(97/640*100vw);}
#product .tab.tab02 h3 {margin-bottom:calc(42/640*100vw);}
#product .tab.tab02 h3 img{width: auto; height:calc(51/640*100vw);}
#product .tab.tab03 h3 {margin-bottom:calc(25/640*100vw);}
#product .tab.tab03 h3 img{width: auto; height:calc(103/640*100vw);}
#product .tab .flex div {margin: 0 calc(35/640*100vw);}
#product .tab .flex ul {border-bottom: calc(2/640*100vw) solid #6a5e3c; margin-bottom: calc(18/640*100vw); padding:0 0 calc(30/640*100vw);}
#product .tab .flex ul li {font-size: calc(21/640*100vw); line-height: calc(33/640*100vw); text-align: left; position: relative; padding-left: 1em;}
#product .tab .flex ul li p.small{font-size:calc(15/640*100vw); line-height: calc(22/640*100vw); padding-bottom: calc(10/640*100vw); font-weight: normal; color: #644384;}
#product .tab .flex ul li::before {color: #d065ae; content: '◆'; font-size:calc(16/640*100vw); position: absolute; left: 0; top: 0;}
#product .tab .flex p {font-size: calc(25/640*100vw); line-height: calc(40/640*100vw); color: #5ab6c5; font-weight: bold;}
#product .tab .flex p em{font-size: calc(39/640*100vw); color: #d065ae; font-weight: bold;}
#product .tab .flex p small{font-size: calc(20/640*100vw);}
#product .tab .btns {background: url(../images/top/sp/product_btns.png) center top no-repeat / cover; width: 100vw; margin: 0 auto calc(24/640*100vw) calc(-13/640*100vw); display: flex; flex-wrap: wrap; justify-content: center; padding: calc(76/640*100vw) 0 0;}
#product .tab .btns li + li {margin-top: calc(-4/640*100vw);}
#product .tab .btns li img{width: auto; height: calc(71/640*100vw);}
#product .tab .btns p img{width: auto; height: calc(89/640*100vw);}
#product .tab .btns p {width: 100%; margin-top: calc(-3/640*100vw);}
#product .tab .btns a{display: inline-block; position: relative; transition: 0.5s;}

#product .tab .btns a.comingsoon{pointer-events: none;}
#product .tab .btns a.comingsoon img {opacity: 0;}
#product .tab .btns .gast a.comingsoon::after{content: ''; width: calc(289/640*100vw); height: calc(70/640*100vw); background: url(../images/top/sp/btn_gastshop-comingsoon.png) center top no-repeat / cover ; position: absolute; left: calc(0/640*100vw); top: calc(0/640*100vw); z-index: 10;}
#product .tab .btns .amazon a.comingsoon::after{content: ''; width: calc(289/640*100vw); height: calc(71/640*100vw); background: url(../images/top/sp/btn_amazon-comingsoon.png) center top no-repeat / cover; position: absolute; left: calc(0/640*100vw); top: calc(0/640*100vw); z-index: 10;}
#product .tab .btns .ps a.comingsoon::after{content: ''; width: calc(289/640*100vw); height: calc(71/640*100vw); background: url(../images/top/sp/btn_playstation-comingsoon.png) center top no-repeat / cover; position: absolute; left: calc(0/640*100vw); top: calc(0/640*100vw); z-index: 10;}
#product .tab .btns .nintendo a.comingsoon::after{content: ''; width: calc(289/640*100vw); height: calc(71/640*100vw); background: url(../images/top/sp/btn_nintendo-comingsoon.png) center top no-repeat / cover; position: absolute; left: calc(0/640*100vw); top: calc(0/640*100vw); z-index: 10;}

#shop h2 {background: url(../images/top/h2_shop.png) center top no-repeat / auto 100%; height: calc(65/640*100vw); margin: calc(54/640*100vw) auto calc(35/640*100vw);}
#shop .list {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 75px; align-items: flex-start}
#shop .list .shop {width: calc(262/640*100vw); margin: calc(15/640*100vw) calc(15/640*100vw) calc(15/640*100vw); border: 1px solid #897e60; background: rgba(255,255,255,0.78); position: relative; padding-bottom:  calc(25/640*100vw);}
#shop .list .shop::after{content: ''; width: calc(282/640*100vw); height: calc(100% + calc(20/640*100vw)); border: calc(10/640*100vw) solid rgba(255,255,255,0.48); position: absolute; left: calc(-10/640*100vw); top: -10px; z-index: -1;}
#shop .list .shop h3 {background: #897e60; line-height: calc(42/640*100vw); text-align: center; color: #fff; font-size: calc(21/640*100vw); margin-bottom: calc(32/640*100vw);}
#shop .list .shop p {font-size: calc(15/640*100vw); line-height: calc(24/640*100vw); color: #977aaf; padding: 0 calc(15/640*100vw); min-height: calc(46/640*100vw);}
#shop .list .shop p span {display:block;}
#shop .list .shop img {width:  calc(200/640*100vw);}
#shop .list .shop a.imgmodal{display: inline-block; position: relative; transition: 0.5s; margin-bottom: calc(25/640*100vw);}
#shop .list .shop a.imgmodal::after{content: ''; background: url(../images/common/icon_zoom.png) left top no-repeat / cover; width: calc(36/640*100vw); height: calc(36/640*100vw); position: absolute; right: 0; bottom: 0;}
#shop .list .shop  a.comingsoon {pointer-events: none;}
#shop .list .shop  a.comingsoon::after{display: none;}
#shop .list .shop a.yoyaku {display: block; margin: calc(12/640*100vw) 0 calc(-15/640*100vw);}
#shop .list .shop a.yoyaku img {width:auto; height: calc(80/640*100vw);}


/*sound*/
#sound h2{height:10.781vw; margin-bottom:6.719vw; background:url(../images/products/h2.png) center top no-repeat / auto 100%; }
#sound .wrap .box{box-shadow :0 0 0 1px rgba(185,175,38,0.42), 0 0 0 8px rgba(255,255,255,0.8), 0 0 0 10px rgba(185,174,152,0.42); background-color: rgba(255,255,255,0.8); position: relative; width: calc(610/640*100vw); padding-bottom: calc(20/640*100vw); margin: 0 auto; margin-bottom: calc(100/640*100vw);}
#sound .wrap .box p:first-child{padding: calc(50/640*100vw) calc(20/640*100vw) calc(30/640*100vw); text-shadow:#fff 1px 1px 0px,#fff -1px 1px 0px,#fff 1px -1px 0px,#fff -1px -1px 0px;}
#sound .wrap .box p{font-size: calc(20/640*100vw); line-height: calc(40/640*100vw);}
#sound .wrap .box h4{font-size: calc(33/640*100vw); line-height: calc(36/640*100vw); color: #e435ac; margin-bottom:calc(10/640*100vw); text-align: center;margin-top: calc(40/640*100vw);padding-left: calc(100/640*100vw);}
#sound .wrap .box .info::before{content: ''; background: url(../images/products/line-sp.png) center top no-repeat; width: calc(600/640*100vw); height: calc(72/640*100vw); position: absolute; right: 0; top: 0; background-size: calc(600/640*100vw) calc(72/640*100vw);}
#sound .wrap .box .info::after{content: ''; background: url(../images/products/line-sp.png) center top no-repeat; width: calc(600/640*100vw); height: calc(72/640*100vw); position: absolute; right: 0; bottom: 0; background-size: calc(600/640*100vw) calc(72/640*100vw);}
#sound .wrap .box .info{padding:calc(90/640*100vw) calc(30/640*100vw); position: relative; width: calc(600/640*100vw); margin: 0 auto 50px;}
#sound .wrap .box .info img{width:calc(410/640*100vw) ;}
#sound .wrap .box .info h3{font-size: calc(25/640*100vw); line-height: calc(36/640*100vw); color: #e435ac; margin-bottom:calc(20/640*100vw); margin-top:calc(20/640*100vw);}
#sound .wrap .box .info dl{margin-bottom:calc(40/640*100vw);}
#sound .wrap .box .info dl dt,#sound .wrap .box .info dl dd{font-size: calc(20/640*100vw); line-height: calc(38/640*100vw);}
#sound .wrap .box .info dl dt{color:#644384;}
#sound .wrap .box .info dl dd{margin-bottom:calc(10/640*100vw);}
#sound .wrap .box .info ul {width:calc(600/640*100vw) ;margin-left: calc(-30/640*100vw);}
#sound .wrap .box .info ul li{display:inline-block;width:calc(280/640*100vw) ;}
#sound .wrap .box .info ul li img{width:calc(280/640*100vw) ;}
#sound .wrap .box .info ul li + li{}

#sound .wrap .box .profile{box-shadow :0 0 0 3px #6a5e3c, 0 0 0 5px #fff, 0 0 0 7px #6a5e3c; padding:calc(30/640*100vw); position: relative; width:calc(540/640*100vw); margin: 0 auto calc(60/640*100vw);  text-align: left; position: relative;}
#sound .wrap .box .profile::before{content: ''; background: url(../images/products/ornament-sp.png) left top no-repeat; width: calc(542/640*100vw); height: calc(88/640*100vw); position: absolute; left: 0; top: 0; background-size: calc(542/640*100vw) calc(88/640*100vw);}
#sound .wrap .box .profile img.photo{width:calc(343/640*100vw) ; margin: calc(30/640*100vw) calc(65/640*100vw);}
#sound .wrap .box .profile p{font-size: calc(17/640*100vw); line-height: calc(32/640*100vw);}
#sound .wrap .box .profile p strong{font-size:calc(22/640*100vw); color: #e435ac;}
#sound .wrap .box .profile p.artist{ position: absolute; top: calc(20/640*100vw); left: calc(80/640*100vw);}
#sound .wrap .box .profile p.artist img{width:calc(120/640*100vw);}
#sound .wrap .box .profile h4 + p{margin: calc(10/640*100vw) 0; text-align: center;}



/* アニメーション */
/* product */
#product h2,
#product .text ,
#product nav ,
#product .tab{opacity: 0; transform: translate(0,35vw); transition:opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 1.6s cubic-bezier(0.23, 1, 0.32, 1);}
#product h2.animated,
#product h2.animated ~ .text ,
#product nav.animated ,
#product nav.animated ~ .tab{opacity: 1; transform: translate(0,0);} 

/* product */
#shop h2,
#shop .list{opacity: 0; transform: translate(0,35vw); transition:opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 1.6s cubic-bezier(0.23, 1, 0.32, 1);}
#shop.animated h2,
#shop.animated .list{opacity: 1; transform: translate(0,0);} 



#shopmodalbase .wrap {width: calc(600/640*100vw); padding: calc(70/640*100vw) 0 calc(20/640*100vw); min-width: inherit;}
#shopmodalbase .wrap article{padding: 0 calc(60/640*100vw); margin: 0 auto;}
#shopmodal header h3 {font-size: calc(39/640*100vw); line-height: calc(69/640*100vw); font-weight: normal; background: url(../images/common/bg_modaltitle.png) center bottom no-repeat #897f62 / cover; color: #fff; margin: 0 calc(-61/640*100vw) calc(50/640*100vw); background-size: 100% auto;}
#shopmodalbase .wrap article p {font-size: calc(24/640*100vw); line-height: calc(34/640*100vw); color: #977aaf; padding: calc(30/640*100vw) 0 calc(48/640*100vw);}
#shopmodalbase .wrap article img {width: calc(476/640*100vw); height: auto;}
#shopmodal footer {position: absolute; right: 1px; top:calc(-52/640*100vw); z-index: 10; width: calc(39/640*100vw); height: calc(39/640*100vw); overflow: hidden; font-size: 0;}
#shopmodal footer a{display: block; width: calc(39/640*100vw); height: calc(39/640*100vw); transition: 0.3s ease-out;background: url(../images/common/btn_close.png) left top no-repeat / cover;}

.shopmodalopen #shopmodalbase{z-index: 1000000; background: rgba(255,255,255,0.9);}
.shopmodalclose #shopmodalbase {z-index: 1000000; background: rgba(255,255,255,0);}
#shopmodalbase .wrap article {display: none;}
#shopmodalbase .wrap article.show{display: block;}
.shopmodalopen #shopmodalbase .wrap{transform: translate(0,0);}
.shopmodalclose #shopmodalbase .wrap{transform: translate(0,-101%); transition: 0.3s 0s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0;}



}