@charset "utf-8";

main p strong {color: #cb5a72;}

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

#siteheader nav ul li:nth-child(7) a:after {background-position: -1048px -185px; opacity: 1;}

main {background: url(../images/special/bg.jpg) center top no-repeat fixed; color: #502555; padding-bottom: 160px;}
main h2 small {font-size: 25px;}

section h2 {margin: 80px 0 63px;}
section img { float:left; margin-left:-10px;}
section img.mingol { float:none; margin-left: 50px;}

h3 {font-size: 21px; font-weight: bold; color: rgba(182,17,89,1) ; margin: 20px 0 5px 0; line-height: 1.4;}
h3 span {font-size: 80%; font-weight: normal;}
h3 span.kakaku {font-size: 70%; color: #a15982; display: inline-block;
background: #d4d3e2; /* Old browsers */
background: -moz-linear-gradient(left, #d4d3e2 0%, #efeeee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #d4d3e2 0%,#efeeee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #d4d3e2 0%,#efeeee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d3e2', endColorstr='#efeeee',GradientType=1 );
letter-spacing: 0.1em; padding: 2px 10px; min-width: 50px; text-align: center; font-weight:bold; margin-right: 10px;}
h3.update {color: #502555;}
h3.schedule a {color: rgba(182,17,89,1);}

section  {padding-bottom: 10px;}
section  h2 {z-index: 10;}
.ie11 section  h2 {height: 50px;}
section .inner {margin: 30px 0 0;border: 1px solid #c5c5c5; background: rgba(255,255,255,0.9); text-align: left; position: relative; padding: 30px 20px 40px 90px; z-index: 0;}
section .inner:after{content: ''; background: url(../images/index/ornament-left.png); width: 176px; height: 120px; position: absolute; left: -18px; top: -26px;}
section .inner:before{content: ''; background: url(../images/index/ornament-right.png); width: 206px; height: 140px; position: absolute; right: -23px; bottom: -40px;}

section .detail {margin: 10px 50px 10px 0;border: 1px solid #c5c5c5; background: rgba(255,254,239,0.9); text-align: left; position: relative; padding: 15px 25px 15px 25px; z-index: 0; font-size: 85%; color: #333; text-align: justify;}

section.new .wrap:after{content: ''; width: 127px; height: 127px; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: 45px; top: -20px; z-index: 100;}

h2.gradation .margin-top{ margin-top:-17px;}

section p.txt{ text-align:center; padding-bottom:10px; letter-spacing:0.05em;}
section  dl dd { display: inline-block; padding:0 20px 0 10px; font-weight:bold; color: rgba(182,17,89,1);}
section  dl + dl {margin-top: -20px;}
section  dl {font-size: 22px; line-height: 25px; padding-bottom:30px; text-align:left;}
section  dl dt {color: #a15982; display: inline-block; font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif;
background: #d4d3e2; /* Old browsers */
background: -moz-linear-gradient(left, #d4d3e2 0%, #efeeee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #d4d3e2 0%,#efeeee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #d4d3e2 0%,#efeeee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d3e2', endColorstr='#efeeee',GradientType=1 );
letter-spacing: 0.1em; padding: 3px 20px; min-width: 57px; text-align: center; font-weight:bold;}

p.animation-up {text-align: center; padding-bottom: 15px; width: 90%; margin: 0 auto;}

section ul.detail {margin: 10px 0 10px 0 ; font-size: 120% ;font-weight: bold; text-align: center ;color: rgba(182,17,89,1);}
section ul.detail span {font-size: 80%; font-weight: normal; }
section ul li {margin: 1em 0;}


section .imgs {display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; padding: 47px 0 0; position: relative; left: -2px;}
/*section .lydie {left: -260px;}*/
section .suelle {left: 500px;}
section .img {position: relative; font-size: 0; line-height: 1; width: 512px; text-align: center; margin-bottom: 20px;}
section .img:before {content: ''; background: url(../images/dlc/waku.png); position: absolute; right:  -6px; top:-20px; z-index: -20;  background-size: 549px 325px; width: 549px; height: 325px; }
section .img:nth-child(even) {margin: 0 0 0 56px;}
/*section .img:nth-child(n+3){ margin-top: 62px;}*/
section .img:nth-child(n+3){ margin-top: 20px;}
section .img a{display: block; width: 512px; height: 288px; position: absolute; left: -10px; top: 0;}
section .img a:after{content: ''; background: rgba(255,255,255,0.3); position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; transition: 0.4s; opacity: 0;}
section .img a:before{content: ''; background: url(../images/common/btn-zoom.png); -webkit-backface-visibility: hidden; position: absolute; right: 0; bottom: 0; z-index: 20; width: 30px; height: 30px; background-size: 30px 30px;}
section .img a:hover:after {opacity: 1;}
section .img img {width: 512px; height: 288px; position: relative; z-index: 0;-webkit-backface-visibility: hidden; margin-bottom: 20px;}
section .img h3 {font-size: 20px; line-height: 29px; color: #a15982;}
section .imgs p,section .img-single p {font-size: 14px; line-height: 20px; letter-spacing: 0.05em; color: #502555; text-align: center; margin-left: 0px; width: 95%;}


section article.character {text-align: left; width: 550px; position: relative; left: -275px; padding-top: 33px;}
section article.character header {margin:0;}
section article.character .new header:after {content: ''; background: url(../images/common/new.png) left top no-repeat; width: 127px; height: 127px; position: absolute; left: -120px; top: 32px;}
section article.character header p {font-size: 22px; line-height: 32px; color: #fff; text-shadow: 0px 1px 1px #8f5189, 1px 0px 1px #8f5189, 0px -1px 1px #8f5189, -1px 0px 1px #8f5189, 0px 0px 8px #8f5189, 0px 0px 8px #8f5189; margin-bottom: 0; letter-spacing: 0.2em;}
section article.character header { color: #991658; font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; letter-spacing: -0.3em; font-style: italic;}
section article.character header h1{font-size: 43px; background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; line-height: 1; font-weight: bold; position: relative; margin-bottom: 38px; white-space: nowrap;  letter-spacing: 0.01em;}
section .inner .chara-img{ position:absolute; top:30px; right:40px;}
section .inner .chara-img-lydie{ position:absolute; top:260px; right:150px;}
section .inner .chara-img-suelle{ position:absolute; top:1250px; left:140px;}
section article.character  dl {text-align:left; font-size: 15px; line-height: 25px;}
section article.character  dl dd{ font-weight:normal; padding: 0 13px; color:#502555;}
section article.character  dl dt{ padding: 0 10px;}
section article.character p{padding-bottom:5px;} 
section article.character .img + .img {margin: 0;}

section#link0201,#link0222,#link0308,#link0322,#seasonpass {padding-top: 50px; margin-top: -50px;}

p.attention {font-size: 90%; margin-top: 30px; line-height: 1.4em;}

.finish{ border: solid 3px #de1059; display: block; text-align: center; margin: 10px auto 10px; padding: 2%; font-size: 115%; font-weight: bold; color: #de1059; width: 90%; max-width: 850px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.72); line-height:1.5em;}

/*div.package {width: 1000px;}*/
div.package img {float: right; width: 280px ;margin-left: 20px; margin-right: 20px;}
.clearfix:after {content: " "; display: block; clear: both;}

/*movie用*/
section .movie a::before{content: ''; width: 104px; height: 104px; background: url(../images/movie/icon-play.png) center center no-repeat; position: absolute; left: 50%; top: 50%; margin: -52px 0 0 -52px; opacity: initial;}
section .movie a:hover{ opacity: 0.7;}

}

@media screen and (min-width:1401px){}
@media screen and (min-width:1920px){main {background-size: 100% auto;}}




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

.hidesp{ display:none;}

main { color: #502555; padding-bottom: 5.5rem;}
main:before {content: ''; width: 100%; height: 100%; background: url(../images/special/sp/bg.jpg) center -1.2rem no-repeat ; background-size: 100% auto; position: fixed; left: 0; top: 0; z-index: -1;}
main h2 small {font-size: 1.1rem;}

section {padding: 2.7rem 0!important;}

section img {margin: 0.8rem auto 0.5rem; display: block; width: 22rem;}
section p.txt {font-size: 1.15rem; line-height:2rem; letter-spacing: 0.0em; color: #502555; }

section .inner { margin: 0 auto; padding: 0.5rem 1.5rem 1.5rem; border: solid 1px #ccc; width: 92%; background-color:rgba(255, 255, 255, 0.72); text-align: left;}

section .detail { margin: 1rem 0 ;border: 1px solid #c5c5c5; background: rgba(255,254,239,0.9); text-align: left; position: relative; padding: 0.5rem 1rem 1rem 1rem; z-index: 0; font-size: 85%; color: #333; text-align: justify;}

main .wrap dl dd { display: inline-block; padding-left: 0.7rem; width:15rem; margin-bottom:1rem;  font-weight:bold; color: rgba(182,17,89,1);}
main .wrap dl + dl {margin-top: 0.65rem;}
main .wrap p {padding:0 1.5rem; margin-top: 0.5rem;}
main .wrap p.animation-up {margin-bottom: 1.5rem;}
main .wrap .inner p {/*line-height: 1.8rem;*/ padding:0; /*margin-top: 0.5rem;*//*letter-spacing: 0.05em;*/}
main .wrap dl {/*font-size: 1.2rem;*/ padding-top: 1rem;/* padding-left: 1.6rem;*/}
main .wrap dl dt {color: #a15982; display: inline-block; font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif;
background: #d4d3e2; /* Old browsers */
background: -moz-linear-gradient(left, #d4d3e2 0%, #efeeee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #d4d3e2 0%,#efeeee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #d4d3e2 0%,#efeeee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d3e2', endColorstr='#efeeee',GradientType=1 );
letter-spacing: 0.1em; padding: 0.2rem 0.7rem; min-width: 7.5rem; text-align: center; margin-bottom:0.5rem; font-weight:bold;}

section.new .wrap:after{content: ''; width: 6.35rem; height: 6.35rem; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: .4rem; top: -1rem; z-index: 0; background-size: 100% auto;}


h2.gradation .margin-top{ margin-top:-1rem;}

h3 {font-size: 110%; font-weight: bold; color: rgba(182,17,89,1) ; margin: 20px 0 0 0; line-height: 1.4;}
h3 span {font-size: 80%; font-weight: normal; margin-right: 0.5rem;}
h3.update {color: #502555;}
h3.schedule a {color: rgba(182,17,89,1);}

/*section .img:before {content: ''; background: url(../images/dlc/waku.png); position: absolute; left: 1.7vw; top:-0.5vw; z-index: 0;  background-size: 95.78125vw  57.09375vw; width: 95.78125vw; height: 57.09375vw; }*/
section .imgs {margin-top: 0.5rem; margin-bottom: 2rem;}
section .img {position: relative; font-size: 0; line-height: 1; width: 100%; text-align: center; padding-top:1vw;}
section .img.new:after{content: ''; width: 6.35rem; height: 6.35rem; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: -1.3rem; top: -2rem; z-index: 10; background-size: 100% auto;}
section .img + .img {margin-top: 1rem;}
section .img a{display: none;}
/*section .img img {width: 88.28125vw; height: 49.6875vw; position: relative; z-index: 10; backface-visibility: hidden;}*/
section .img img {width: 100%;}
section .img p {font-size: 1rem; line-height: 1.75rem; letter-spacing: 0.05em; color: #502555; margin: -0.5rem 0 0;}
section .img h3 {font-size: 1.35rem; line-height: 1; color: #a15982 ;margin: .5rem 0 0; font-weight: bold;}

section .imgs p,section .img-single p {font-size: 0.9rem; line-height:1.3rem; margin-top: 1rem;}

section article.character .bg{margin-top:-30rem; padding-top:13rem; background: url(../images/dlc/chara-bg.png) left top no-repeat;}
section article.character header {text-align: center;}
section article.character .new:after {content: ''; background: url(../images/common/new.png) left top no-repeat; width: 6.35rem; height: 6.35rem; position: absolute; left: 0.6rem; top: 0.6rem; background-size: 100% auto;}
section article.character header p {font-size: 1.32rem; line-height: 2; color: #fff; text-shadow: 0px 1px 1px #8f5189, 1px 0px 1px #8f5189, 0px -1px 1px #8f5189, -1px 0px 1px #8f5189, 0px 0px 8px #8f5189, 0px 0px 8px #8f5189; margin-bottom: 0.8rem; letter-spacing: 0.1em;}
section article.character .new header:after{display: none;}
section article.character header { color: #991658; font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; letter-spacing: 0; font-style: italic;}
section article.character header h1{font-size:2.8rem; background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; line-height: 1; font-weight: bold; position: relative; margin-bottom: 3rem; letter-spacing: -0.15em;}
section article.character dl {font-size: 1.1rem;}
section article.character dl dd {width:auto; padding-right:1.5rem;  font-weight: normal; color:#502555;}
section article.character dl dt { min-width: 3.2rem; padding: 0 0.7rem;}

main .wrap .inner p.attention {font-size: 80%; margin-top: 2rem; line-height: 1.4em;}

.finish{ border: solid 3px #de1059; display: block; text-align: center; margin: 10px auto 10px; padding: 2%; font-size: 100%; font-weight: bold; color: #de1059; width: 90%; max-width: 700px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.72); line-height:1.5em;}

/*movie用*/
section .movie a{display: block; width: 512px; height: 288px; position: absolute; left: -10px; top: 0;}
section .movie::before{content: ''; width: 5.2rem; height: 5.2rem; background: url(../images/movie/icon-play.png) center center no-repeat; position: absolute; left: 50%; top: 50%; margin: -2.6rem 0 0 -2.6rem; background-size: 100% auto;}


}

/* bugfix */
.ie main .wrap dl dt {font-family: 'Noto Serif Japanese', serif;}
.android main .wrap dl dt {font-family: 'Noto Serif Japanese', serif;}
.ie section article.character header {font-family: 'Noto Serif Japanese', serif;}
.android section article.character header {font-family: 'Noto Serif Japanese', serif;}