@charset "utf-8";
body #wrapper main{-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; font-family:'M PLUS 1p','Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; line-height:1.8;}
/* ** webfont bugfix ** */
main p,main li,main td,main th,main h2,main h3,main h4,main dt,main dd{transform: rotate(0.05deg);}
/* ** webfont bugfix ** */

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

.special #siteheader nav ul li.special a:before{background-position:-560px bottom;}

#wrapper{padding-top:0;}
#wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/special/bg.jpg) no-repeat center top;}

main{padding:128px 0 140px; color: #2c2c2c;}
main p.title{height:97px; background:url(../images/special/title.png) no-repeat center top; font-size: 0; margin-bottom: 50px;}

main p.text-center {text-align: center;}
main img.img-left {float: left; margin: 0 40px 0 0}
main p.update {position: absolute; right: 17px; top: 18px; color: #fff; background: url(../images/special/update.png) no-repeat left top; width: 222px; height: 31px; padding: 0 20px; text-align: right;}
main p.update::after{content: ''; clear: both; display: block;}
main p.update b{display: inline-block; font-weight: normal; float: left;}

main .box {text-align: left; max-width: 1400px; min-width: 1300px; margin: 0 auto; position: relative; min-height: 1150px;}
main .box::after{content: ''; background: url(../images/special/bg_box-bottom.png) left bottom; position: absolute; left: 50%; bottom: 0; width: 1400px; height: 150px; z-index: -1; margin-left: -700px;}
main .box::before{content: ''; background: url(../images/special/bg_box.png) left bottom; position: absolute; left: 50%; top: 0; width: 1400px; height: 1000px; z-index: -1; margin-left: -700px;}
main .boxupdate {text-align: left; max-width: 1400px; min-width: 1300px; margin: 0 auto; position: relative; min-height: 750px;}
main .boxupdate::after{content: ''; background: url(../images/special/bg_box-bottom.png) left bottom; position: absolute; left: 50%; bottom: 0; width: 1400px; height: 150px; z-index: -1; margin-left: -700px;}
main .boxupdate::before{content: ''; background: url(../images/special/bg_boxupdate.png) left bottom; position: absolute; left: 50%; top: 0; width: 1400px; height: 600px; z-index: -1; margin-left: -700px;}
main .in {position: relative; padding:88px 0 100px;}
main .in::after {content: ''; background: url(../images/special/bg_box-mid.png) repeat-y center top; width: 1400px; height: calc( 100% - 1150px ); position: absolute; left: 50%; top: 1000px; z-index: -1; margin-left: -700px;}
main .inupdate {position: relative; padding:88px 0 100px;}
main .inupdate::after {content: ''; background: url(../images/special/bg_box-mid.png) repeat-y center top; width: 1400px; height: calc( 100% - 750px ); position: absolute; left: 50%; top: 600px; z-index: -1; margin-left: -700px;}
main .pad {width: 1000px; margin: 0 auto;}

main .borderbox{border: 4px solid #977aaf; border-radius: 15px; padding: 30px 64px 45px; margin-top: 40px; background: #fff;}
main .borderbox::after{content: ''; clear: both; display: block;}
main .borderbox img.img-left {margin-right: 30px;}
main .borderbox h3{font-size: 24px; color: #7a4da0; font-weight: bold; text-align: center; line-height: 1; margin-bottom: 10px;}
main .borderbox h3 + p {margin-bottom: 40px;}

main h1{font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 600; font-size: 50px; color: #8e6aac; line-height: 1;
text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
margin-bottom: 55px;}
main h1 i {font-style: normal; display: block; font-size: 30px; margin-bottom: 14px;}
main h1 span {display: inline-block; position: relative; padding: 0 150px;}
main h1 span::before,
main h1 span::after {content: ''; width: 131px; height: 80px; background: url(../images/special/bg_dexo_left.png) no-repeat left top; position: absolute; left: 0; bottom: -16px;}
main h1 span::after {background-image: url(../images/special/bg_dexo_right.png); left: inherit; right: 0;}

main h2 {clear: both; font-size: 31px; color: #fff; min-height: 48px; text-align: center; background:url(../images/special/bg_h2.jpg) no-repeat center top #8a6ca3; margin: 80px -100px 50px; letter-spacing: 0.05em; line-height: 1.3; padding: 5px 0;}

main li,
main p {font-size: 17px; line-height: 32px;}
main .lead {margin: 0 -100px; width: 1200px;}
main .lead p {font-size: 19px; line-height: 35px;
text-shadow: 1px 1px 0 #fff,
             -1px 1px 0 #fff,
             1px -1px 0 #fff,
             -1px -1px 0 #fff,
             1px 1px 1px #fff,
             -1px 1px 1px #fff,
             1px -1px 1px #fff,
             -1px -1px 1px #fff;}
main .lead .btn {position: relative; margin: 20px 0 -10px; left: -15px; display: inline-block; font-size: 0; line-height: 1;}
main .btn a{display: inline-block; transition: 0.3s;}
main .lead .btn picture {position: absolute; right: -263px; top: -24px; }
main .lead .btn a:hover {filter: brightness(1.3);}
main strong {color: #e131b1; font-weight: normal;}
main .lead img-left {margin-right: 60px;}
main dt {font-size: 20px; color: #7f55a3; font-weight: bold;}
main dt {margin-bottom: 9px;}
main dd li {padding-left: 1em; position: relative;}
main dd li::before {content: '・'; position: absolute; left: 0; top: 0;}
main dl{border-bottom: 1px solid #977aaf; padding-bottom: 30px;}
main dl + dl { margin-top:30px;}
main dl dd img {margin: 20px 0;}

main table {width: 100%;}
main th {background: #887c5e; color: #fff; font-size: 20px; padding:0 1em; text-align: center; width: 144px; border: 1px solid #887c5e; border-bottom: 1px solid #fff; white-space: nowrap; font-weight: bold; letter-spacing: 0.05em;}
main tr:last-child th {border-bottom: 1px solid #887c5e;}
main td {font-size: 20px; line-height: 30px; padding: 10px 35px; border: 1px solid #887c5e;}
main td small {font-size: 17px; line-height: 29px; display: inline-block;}
main td i {font-style: normal;}

/** DLC **/	
main.dlc h1.products{height:91px; margin-bottom:68px; background:url(../images/products/title.png) no-repeat center top; font-size: 0;}
main.dlc .in { padding: 88px 102px 80px;}	
main.dlc section{ padding:100px 0 50px;}
main.dlc ul.dlc-nav li{display: inline-block;}	
main.dlc ul.dlc-nav li + li{}	
main.dlc ul.dlc-nav li a{display: inline-block; position: relative; transition: 0.5s;}
main.dlc ul.dlc-nav li a:hover{filter:brightness(1.2); transition: 1s;}	
main.dlc .box{}
main.dlc .box h1 {background: url(../images/products/dlc/h1_bg.png) no-repeat center; text-align: center; width: 880px; height: 79px; line-height: 79px; font-size: 43px; margin: -120px auto 0;}	

main.dlc .box .borderbox2{border: 2px solid #ccc7bc; border-radius: 15px; padding: 30px 64px; margin-bottom: 30px; margin-top: 40px; background: #eee9da;}
main.dlc .box .borderbox2::after{content: ''; clear: both; display: block;}
main.dlc .box .borderbox2 img.img-left {margin-right: 30px;}
main.dlc .box .borderbox2 p{font-size: 25px; color: #5ab6c5; text-align: center; line-height: 1;}
main.dlc .box .borderbox2 p strong{font-size: 39px; }	
main.dlc .box .borderbox2 + p {margin-bottom: 30px; }	
main.dlc .box h1 + p {margin-top: 60px; margin-bottom: -30px;}
main.dlc .box .borderbox2 p.note{ font-size: 19px; line-height: 29px; color:#8a6ca3;}	
main.dlc .box h3 + p {margin-bottom: 30px; }	
main.dlc .box h3{font-size: 25px; line-height: 34px; text-align: center; color: #8e6aac; font-weight: bold; margin-bottom: 20px;}	
main.dlc .box p span.pass01{ font-size:17px; margin: 5px 15px; color: #fff; border-radius: 20px; padding: 5px 15px;  background: #d24f9b;}
main.dlc .box p span.pass02{ font-size:17px; margin: 5px 15px; color: #fff; border-radius: 20px; padding: 5px 15px;  background: #5467b6;}
main.dlc .box p span.pass03{ font-size:17px; margin: 5px 15px; color: #fff; border-radius: 20px; padding: 5px 15px;  background: #cc7145;}

	
main.dlc ul.ss{ border: none; margin-left:-100px; width: 1200px; text-align: center;}	
main.dlc ul.ss li{ display: inline-table; font-size:17px; text-align: center;margin-top: 30px; width: 580px;}	
main.dlc ul.ss li:nth-child(even){ margin-left: 40px;}	
main.dlc ul.ss.single li{ width: 1200px; margin-left: 0;}	
main.dlc ul.ss li.center{ margin-left: 20px;}	
	
main.dlc .box p.note{ font-size: 15px; line-height: 24px; margin-bottom: 30px;}	
main.dlc .box .borderbox2 p.note{ margin-bottom: 0;}	
main.dlc .box.box-small::before{content: ''; background: url(../images/products/dlc/bg_box.png) left bottom; position: absolute; left: 50%; top: 0; width: 1400px; height: 310px; z-index: -1; margin-left: -700px;}
main.dlc .box.box-small{min-height:400px;}
main.dlc .box.box-small .in::after {content: ''; background: url(../images/special/bg_box-mid.png) repeat-y center top; width: 1400px; height: calc( 100% - 460px ); position: absolute; left: 50%; top: 310px; z-index: -1; margin-left: -700px;}
	

/** 後続マージン **/
main p + p {margin-top: 18px;}
main .lead p + p {margin-top: 23px;}
main .lead p.note {margin-top: 0;}

main .lead + h2 {margin-top:100px;}
main .borderbox p + p {margin-top: 40px;}

main table + p {margin-top:15px;}
	
	
/** ツイッターアイコン **/	
main .download {display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto 0; width: 1200px;}
main .download li {padding: 0 15px 30px;}
main .download li img {width: 323px; height: auto;}

main .download {display: flex; flex-wrap: wrap; justify-content: center; margin: 40px 0 0 -97px;}
main .download li {padding: 0 6px 15px;}
main .download li img {width: 156px; height: auto;}
main .download a{transition: 0.1s; display: block;}
main .download a img {backface-visibility: hidden;}
main .download a:hover{transform: scale(1.06); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}	
	
  #cboxPrevious, #cboxNext, #cboxSlideshow { border: 0; padding: 0; margin: 0; overflow: visible; text-indent: -9999px; width: 40px; height: 40px; position: absolute; top: -20px; background: url(../images/common/controls.png) no-repeat 0 0; }
  #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active { outline: 0; }
  #cboxNext { right: 57px; top: -50px; width: 35px; height: 35px; background: url(../images/characters/btn-slide-next.png) no-repeat left center/100% auto; transition: 0.5s; }
  #cboxPrevious { right: 112px; top: -50px; width: 35px; height: 35px; background: url(../images/characters/btn-slide-prev.png) no-repeat left center/100% auto; transition: 0.5s; }
  #cboxPrevious:hover, #cboxNext:hover { opacity: 0.7; }

#cboxPrevious:hover,
#cboxNext:hover,
#cboxClose:hover{opacity:0.7;}	
	

}
@media screen and (min-width:1300px) and (max-width:1400px){
}
@media screen and (min-width:1401px){
main .in {padding: 88px 102px 100px;}
}

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

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

}



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

/*

		SP site

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

#wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/special/sp/bg.jpg) no-repeat center top / 100% auto;}
main{position:static; padding:17.519vw 0 13.125vw;  color: #2c2c2c;}
main .wrap{position:static;}

main p.title{position:relative; width:100vw; height:15.9vw; margin:0 auto 0; background:url(../images/special/title.png) no-repeat left top / 100% auto; font-size: 0; line-height: 1;}

main p.text-center {text-align: center;}
main p.update {position: absolute; right: calc(17/640*100vw); top:  calc(18/640*100vw); color: #fff; background: url(../images/special/update.png) no-repeat left top / cover; width:  calc(222/640*100vw); height:  calc(31/640*100vw); padding: 0  calc(20/640*100vw); text-align: right; font-size:  calc(17/640*100vw); line-height: calc(31/640*100vw);}
main p.update::after{content: ''; clear: both; display: block;}
main p.update b{display: inline-block; font-weight: normal; float: left;}

main .box {text-align: left; width: 100vw; margin: 0 auto; position: relative;}
main .box::after{content: ''; background: url(../images/special/sp/bg_box-bottom.png) no-repeat left bottom / 100% auto; position: absolute; left: 0; bottom: 0; width: 100vw; height: calc(100/640*100vw); z-index: -1;}
main .box::before{content: ''; background: url(../images/special/sp/bg_box.png) no-repeat left top / 100% auto; position: absolute; left: 0; top: 0; width: 100vw; height: calc(1200/640*100vw); z-index: -1;}
main .boxupdate {text-align: left; width: 100vw; margin: 0 auto; position: relative;}
main .boxupdate::after{content: ''; background: url(../images/special/sp/bg_box-bottom.png) no-repeat left bottom / 100% auto; position: absolute; left: 0; bottom: 0; width: 100vw; height: calc(100/640*100vw); z-index: -1;}
main .boxupdate::before{content: ''; background: url(../images/special/sp/bg_boxupdate.png) no-repeat left top / 100% auto; position: absolute; left: 0; top: 0; width: 100vw; height: calc(1200/640*100vw); z-index: -1;}
main .in {position: relative; padding: calc(67/640*100vw) calc(30/640*100vw) calc(60/640*100vw); width: 100vw;}
main .in::after {content: ''; background: url(../images/special/sp/bg_box-mid.png) repeat-y center top / 100% auto; width: 100vw; height: calc( 100% - 203.125vw ); position: absolute; left: 0; top: calc(1200/640*100vw); z-index: -1;}
main .inupdate {position: relative; padding: calc(67/640*100vw) calc(30/640*100vw) calc(60/640*100vw); width: 100vw;}
main .inupdate::after {content: ''; background: url(../images/special/sp/bg_box-mid.png) repeat-y center top / 100% auto; width: 100vw; height: calc( 100% - 203.125vw ); position: absolute; left: 0; top: calc(1200/640*100vw); z-index: -1;}
main .pad {width: 100%; margin: 0 auto;}

main .borderbox{border: calc(4/640*100vw) solid #977aaf; border-radius: calc(15/640*100vw); padding: calc(30/640*100vw) calc(30/640*100vw) calc(30/640*100vw); margin-top: calc(80/640*100vw); background: #fff;}
main .borderbox::after{content: ''; clear: both; display: block;}
main .borderbox img{margin: 0 auto calc(31/640*100vw) !important; display: block;}
main .borderbox h3{font-size: calc(26/640*100vw); color: #7a4da0; font-weight: bold; text-align: center; line-height: 1; margin-bottom: 10px;}
main .borderbox p {font-size: calc(20/640*100vw);}
main .borderbox h3 + p {margin-bottom:calc(30/640*100vw); font-size: calc(20/640*100vw);}

main h1{font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 600; font-size: calc(45/640*100vw); color: #8e6aac; line-height:calc(57/640*100vw);
text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
margin-bottom: calc(55/640*100vw); width: 100vw;}
main h1 i {font-style: normal; display: block; font-size: calc(30/640*100vw); margin-bottom:calc(14/640*100vw);}
main h1 span {display: inline-block; position: relative;}

main h1 span::before,
main h1 span::after {content: ''; width: calc(131/640*100vw); height: calc(80/640*100vw); background: url(../images/special/bg_dexo_left.png) no-repeat left top; position: absolute; left: calc(-133/640*100vw); bottom: calc(-9/640*100vw); background-size: 100% 100%;}
main h1 span::after {background-image: url(../images/special/bg_dexo_right.png); left: inherit; right:calc(-133/640*100vw); background-size: 100% 100%;}

main h2 {clear: both; font-size: calc(31/640*100vw); color: #fff; min-height: calc(36/640*100vw); text-align: center; background:url(../images/special/bg_h2.jpg) no-repeat center top / 100vw auto; background-color: #8a6ca3; margin: calc(80/640*100vw) calc(-22/640*100vw) calc(40/640*100vw); letter-spacing: 0.05em; line-height: 1.3; padding: 5px 0;}

main li,
main p {font-size: calc(20/640*100vw); line-height: calc(40/640*100vw);}
main p.note {font-size: calc(17/640*100vw); line-height: calc(28/640*100vw);}
main .lead {margin: 0; text-align: center;}
main .lead p {font-size: calc(20/640*100vw); line-height: calc(35/640*100vw);
text-shadow: 1px 1px 0 #fff,
             -1px 1px 0 #fff,
             1px -1px 0 #fff,
             -1px -1px 0 #fff,
             1px 1px 1px #fff,
             -1px 1px 1px #fff,
             1px -1px 1px #fff,
             -1px -1px 1px #fff;}
main .lead .btn {position: relative; margin: 0 0 0; left:0; display: block; font-size: 0; line-height: 1;}
main .btn a{display: block;}
main .btn img {height: calc(111/640*100vw); width: auto;}
main .lead img.w522 {margin:calc(40/640*100vw) auto calc(27/640*100vw);}
main .lead .btn picture {position: absolute; right:calc(10/640*100vw); top:calc(-131/640*100vw); }
main .lead .btn picture img {width: calc(284/640*100vw); height: auto;}

main strong {color: #e131b1; font-weight: normal;}
main dt {font-size:calc(20/640*100vw); color: #7f55a3; font-weight: bold;}
main dt {margin-bottom: 9px;}
main dd li {padding-left: 1em; position: relative; font-size: calc(17/640*100vw); line-height: calc(32/640*100vw)}
main dd li::before {content: '・'; position: absolute; left: 0; top: 0;}
main dl{border-bottom: 1px solid #977aaf; padding-bottom: 30px;}
main dl + dl { margin-top:30px;}
main dl dd img {margin: calc(15/640*100vw) 0;}

main table {width: 100%;}
main th {background: #887c5e; color: #fff; font-size: calc(20/640*100vw); padding:0 1em; text-align: center; border: 1px solid #887c5e; border-bottom: 1px solid #fff; white-space: nowrap; font-weight: bold; letter-spacing: 0.05em; line-height:  calc(26/640*100vw);}
main tr:last-child th {border-bottom: 1px solid #887c5e;}
main td {font-size:  calc(20/640*100vw); line-height:  calc(30/640*100vw); padding: 10px  calc(15/640*100vw); border: 1px solid #887c5e;}
main td small {font-size: calc(17/640*100vw); line-height: calc(27/640*100vw); display: inline-block;}
main td i {font-size: calc(17/640*100vw); line-height: calc(27/640*100vw); display: inline-block; font-style: normal;}

/* imgsize */
main img.w360{width: calc(360/640*100vw); height: auto;}
main img.w400{width: calc(400/640*100vw); height: auto;}
main img.w460{width: calc(460/640*100vw); height: auto;}
main img.w522{width: calc(522/640*100vw); height: auto;}
main img.w570{width: calc(570/640*100vw); height: auto;}

main img.sp-left{display: inline-block;}
main img.sp-center{display: block; margin-left: auto !important; margin-right: auto !important;}

/** 後続マージン **/
main p + p {margin-top: calc(18/640*100vw);}
main .lead p + p {margin-top:  calc(23/640*100vw);}
main .lead p.note {margin-top: 0;}
main .lead + h2 {margin-top:calc(60/640*100vw);}
main .borderbox p + p {margin-top: calc(10/640*100vw) !important;}
main table + p {margin-top:calc(16/640*100vw);}
main img.w360 + p {margin-top:calc(30/640*100vw);}
	
	

/** DLC **/	
main.dlc h1.products{width:51.875vw; height:14.219vw; margin:0 auto 8.75vw; background:url(../images/products/title.png) no-repeat left top / 100% auto; font-size: 0; z-index: 1; position: relative;}
main.dlc .in { padding-bottom:calc(40/640*100vw);}	
main.dlc section{padding-top: calc(100/640*100vw);}
main.dlc section#dlc01{padding-top: calc(80/640*100vw);}
main.dlc ul.dlc-nav li{display: inline-block; width: 31vw; margin-bottom: -1.5vw;}	
main.dlc ul.dlc-nav li img{ width: 100%;}	
main.dlc .box h1 {background: url(../images/products/dlc/h1_bg-sp.png) no-repeat center; text-align: center; width:calc(606/640*100vw); height: calc(65/640*100vw); line-height: calc(65/640*100vw); font-size: calc(32/640*100vw); margin:calc(-100/640*100vw) 0 calc(-30/640*100vw) calc(-15/640*100vw); background-size: calc(606/640*100vw) calc(65/640*100vw);}	

main.dlc .box .borderbox2{border: 2px solid #ccc7bc; border-radius:calc(18/640*100vw); padding:3vw; margin-bottom:calc(30/640*100vw); background: #eee9da;}
main.dlc .box .borderbox2::after{content: ''; clear: both; display: block;}
main.dlc .box h1 + .borderbox2 {margin-top:calc(60/640*100vw) ;}
main.dlc .box h1 + p {margin-top: calc(60/640*100vw);margin-bottom: calc(-60/640*100vw);}
main.dlc .box .borderbox2 img.img-left {margin-right: 30px;}
main.dlc .box .borderbox2 p{font-size:calc(26/640*100vw); line-height: calc(40/640*100vw); color: #5ab6c5; font-weight: bold; text-align: center;}
main.dlc .box .borderbox2 p strong{font-size:calc(30/640*100vw); }	
main.dlc .box .borderbox2 + p {margin-bottom: 30px; }	
main.dlc .box .borderbox2 p.note{ font-size: calc(18/640*100vw); color:#8a6ca3;}	
main.dlc .box h3 + p {margin-bottom: 30px; }	
main.dlc .box h3{font-size:calc(24/640*100vw); line-height: calc(38/640*100vw); text-align: center; color: #8e6aac; font-weight: bold; margin-bottom: calc(20/640*100vw);}	
main.dlc .box p span.pass01{ font-size:calc(18/640*100vw); margin: 3vw; color: #fff; border-radius: calc(24/640*100vw); padding: 0.5vw 3vw;  background: #d24f9b;}
main.dlc .box p span.pass02{ font-size:calc(18/640*100vw); margin: 3vw; color: #fff; border-radius: calc(24/640*100vw); padding: 0.5vw 3vw;  background: #5467b6;}
main.dlc .box p span.pass03{ font-size:calc(18/640*100vw); margin: 3vw; color: #fff; border-radius: calc(24/640*100vw); padding: 0.5vw 3vw;  background: #cc7145;}
main.dlc ul.ss{ border: none; width: 90vw; padding-bottom: 0;}	
main.dlc ul.ss li img{width: 100%;}	
main.dlc ul.ss li{font-size:calc(20/640*100vw); text-align: center; margin-bottom: calc(30/640*100vw);}	
main.dlc .box p.note{ font-size:calc(18/640*100vw); line-height:calc(26/640*100vw); margin-bottom: calc(30/640*100vw);}	
main.dlc .box .borderbox2 p.note{ margin-bottom: 0;}	
main.dlc .box.box-small::before{content: ''; background:url(../images/products/dlc/bg_box-sp.png) no-repeat left top / 100% auto;}
main.dlc .box.box-small{min-height:calc(400/640*100vw);}
main.dlc .box.box-small .in::after {content: ''; background: url(../images/special/sp/bg_box-mid.png) repeat-y center top / 100% auto; width: 100vw; height: calc( 100% - 75vw ); position: absolute; left: 0; top: calc(380/640*100vw); z-index: -1;}
	
	
	

/** ツイッターアイコン **/
main .download {display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto 10vw; width: 90vw;}
main .download li {padding: 0 2.031vw 4.063vw;}
main .download li img {width: 44.688vw; height: auto;}

main .download {display: flex; flex-wrap: wrap; justify-content: center; margin:5vw auto 0;}
main .download li {padding: 0 1.25vw 2.5vw;}
main .download li img {width: 27.063vw; height: auto;}

main .download a{transition: 0.1s; display: block;}
main .download a img {backface-visibility: hidden;}
main .download a:hover{transform: scale(1.06); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}

  #cboxPrevious, #cboxNext, #cboxSlideshow { border: 0; padding: 0; margin: 0; overflow: visible; text-indent: -9999px; width: 40px; height: 40px; position: absolute; top: -20px; background: url(../images/common/controls.png) no-repeat 0 0; }
  #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active { outline: 0; }
  #cboxNext { left: 14vw; top: -7vw; width: 10vw; height:10vw; background: url(../images/characters/btn-slide-next.png) no-repeat left center/100% auto; transition: 0.5s; }
  #cboxPrevious { left: 0; top: -7vw; width: 10vw; height:10vw; background: url(../images/characters/btn-slide-prev.png) no-repeat left center/100% auto; transition: 0.5s; }
  #cboxPrevious:hover, #cboxNext:hover { opacity: 0.7; }	
	
}

main h2.pink {background:url(../images/products/dlc/bg_h201.jpg) no-repeat center top #d24f9b;}
main h2.blue {background:url(../images/products/dlc/bg_h202.jpg) no-repeat center top #5467b6;}
main h2.orange {background:url(../images/products/dlc/bg_h203.jpg) no-repeat center top #cc7145;}