@charset "utf-8";

@media screen and (min-width:641px){
#siteheader nav ul li:nth-child(4) a:after {background-position: -462px -185px; opacity: 1;}

main {background: url(../images/character/bg.jpg) center top no-repeat fixed; color: #502555; min-height: 962px; padding-bottom: 273px;}
main .wrap {z-index: 100; position: relative;}

main article {text-align: left; width: 600px; position: relative; left: -300px; padding-top: 33px;}
main article:nth-child(even){left: 331px;}
main article + article {margin-top: 130px;}

p.wall-change {position: absolute; left: 0; top: 558px; transition:opacity 0.8s, top 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
p.right {position: absolute; left: 500px; top: 558px; transition:opacity 0.8s, top 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
main article:nth-child(even) p.wall-change {position: absolute; left: -662px;}
p.wall-change a{display: inline-block; position: relative; float: right; transition: 0.3s;}
p.wall-change a:after{content: ''; background: url(../images/character/btn-illust.png) left top no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: 0.5s; opacity: 0;}
p.wall-change a:before{content: ''; background: url(../images/character/btn-model3d.png) left top no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: 0.5s; z-index: 10;}
p.wall-change a.model:after{opacity: 1;}
p.wall-change a.model:before{opacity: 0;}
p.wall-change a:hover {opacity: 0.7;}

main .wrap dl dd { display: inline-block; padding: 0 13px;}
main .wrap dl + dl {margin-top: 10px;}
main .wrap p {font-size: 17px; line-height: 35px; padding-left: 20px; margin-top: 30px; letter-spacing: 0.05em;}

main .wrap header {margin:0;}
main .wrap .new header:after {content: ''; background: url(../images/common/new.png) left top no-repeat; width: 127px; height: 127px; position: absolute; left: -120px; top: 32px;}
main article:nth-child(even).new header:after{top:71px; left: -113px;}
main .wrap 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: 10px; letter-spacing: 0.2em; padding-left: 30px;}
main .wrap 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;}
main .wrap header h1{font-size: 51px; 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: 58px; white-space: nowrap; padding-left: 10px;}
main article:nth-child(even) header p {padding-left: 25px;}
main article:nth-child(even) header h1 {padding-left: 15px;}
main .wrap header h1:after{content: ''; background: url(../images/character/name.png) left top no-repeat; height: 129px; width: 689px; position: absolute; left:50%; top: -10px; margin-left: -423px;}

main .wrap {z-index: 1010;}
main .wrap dl {font-size: 15px; line-height: 25px; padding-left: 20px;}
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 10px; min-width: 57px; text-align: center;}

.swiper-container {width:360px; position: relative; opacity: 0; transition:opacity 0.5s; margin: 30px 0 0; overflow: hidden;}
.windowloaded .swiper-container {opacity: 1;}
.swiper-wrapper {text-align: center; }
.swiper-slide {
font-size: 0; line-height: 1;
width: 100%; height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide .item {display: block; position: relative; z-index: 10;}
.swiper-slide .item img {height: 205px; width: auto; transition: opacity 0.2s; opacity: 1; backface-visibility: hidden;}
.swiper-slide .item a{display: block; z-index: 10; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0;}
.swiper-slide .item a:hover + img {opacity: 0.7;}
.swiper-slide .item a:after{content: ''; width: 30px; height: 30px; background: url(../images/common/btn-zoom.png) center center no-repeat; background-size: 100% auto; z-index: 10; position: absolute ; left: 314px; top: 165px;}
.swiper-slide.swiper-slide-active .item img,
.swiper-slide.swiper-slide-active .item a{opacity: 1;}
.swiper-container nav { width: 100%; text-align: center; height: 37px; vertical-align: middle; display: block; padding: 0 0 ; display: none; margin-top: 20px;}
.swiper-pagination {position: relative; margin: 0; transition: none; z-index: 100; display: inline-block; width: auto !important; vertical-align: top;}
.swiper-pagination-bullet {background: #e3bd47; width: 9px; height: 9px; margin: 0 3px; opacity: 1; cursor: pointer; vertical-align: top; transition: 0.3s; border-radius: 100%; padding: 0;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{background: #a21558;}
.swiper-button-prev{background: url(../images/common/arr-left.png); width: 25px; height: 37px; position: static; display: inline-block; background-size: 100% auto; vertical-align: middle; margin-right: 17px; transition: 0.3s;}
.swiper-button-next{background: url(../images/common/arr-right.png); width: 25px; height: 37px; position: static; display: inline-block; background-size: 100% auto; vertical-align: middle; margin-left: 17px; transition: 0.3s;}
.swiper-pagination-bullet:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover{opacity: 0.7;}

.pagearr {position:fixed; left: -107px; top: 50%; margin-top: -42px; z-index: 100000; width: 60px; margin-left: 0; padding: 0; transition: 0.8s ease; opacity: 0; font-size: 0; line-height: 1;}
.pagearr a {display: block; width: 60px; height: 84px; background:url(../images/common/arr-left.png) left top no-repeat; transition:  0.3s; background-size: 100% auto; position: relative;}
.pagearr a:hover{opacity: 0.5;}
.pagearr.next {left: inherit; right: -107px; margin-left: inherit; margin-right: 0; text-align: right; padding: 0 0 0 0;}
.pagearr.next a{background: url(../images/common/arr-right.png) left top no-repeat; float: right; background-size: 100% auto;}
/*.windowloaded .pagearr {opacity: 1;}*/
.pagearr.show {opacity: 1; left: 7px;}
.pagearr.next.show {opacity: 1; left: inherit; right: 7px;}
.pagearr.end {opacity: 0;}


}
@media screen and (min-width:1401px){
.pagearr {left: -120px; width: 84px;}
.pagearr a {width: 84px; height: 127px;}
.pagearr.next {right: -120px;}
.pagearr.show {opacity: 1; left: 20px;}
.pagearr.next.show {opacity: 1; left: inherit; right: 20px;}
}

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

.pagearr,
.pagearr a{width: 42px;}
}

@media screen and (max-width:1400px){
main article {left: -250px;}
main .wrap .new header:after {width: 90px; height: 90px; -webkit-backface-visibility: hidden; background-size: 100% auto; left: -74px; top: 60px;}
}

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

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

#spnav ul li:nth-child(4) a:before {opacity: 1;}
#spnav ul li:nth-child(4) a:after {opacity: 0;}

main { color: #502555; padding-bottom: 5.8rem;}
main:before {content: ''; width: 100%; height: 100%; background: url(../images/character/sp/bg.jpg) center top no-repeat ; background-size: 100% auto; position: fixed; left: 0; top: 0; z-index: -1;}
main .pageheader {z-index: 1000;}

.pageheader p img{height: 1.15rem; display: block;}

article {padding-top:16.7rem; margin-top: 1rem;}
main article {left: 0;}
main article:nth-child(even){left: 0;}
main article + article {margin-top: 3.0rem;}

p.wall-change {position: absolute; z-index: 1000; top: 	-8.2rem; left: 9rem; width: 100%;}
p.wall-change a{display: inline-block; position: relative; transition: 0.3s;}
p.wall-change a img {width: 11.15rem; height: auto;}
p.wall-change a:before{content: ''; background: url(../images/character/btn-model3d.png) left top no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: 0.5s; z-index: 10; background-size: 100% auto;}

main .bg {position: relative;}
main .bg:after{content: ''; width: 100%; height: 120%; position: absolute; left: 0; top: -15%; z-index: -1;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+20,ffffff+80,ffffff+100&0+0,0.9+20,0.9+75,0+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 20%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0.72) 80%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 20%,rgba(255,255,255,0.9) 75%,rgba(255,255,255,0.72) 80%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 20%,rgba(255,255,255,0.9) 75%,rgba(255,255,255,0.72) 80%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

main .wrap { margin:0; z-index: 100; text-align: left;}
main .wrap:before{content: ''; background: none; width: 100%; height: 300%; position: absolute; left: 0; top: -10rem; z-index: -1;}

main .wrap dl dd { display: inline-block; padding: 0 0.7rem;}
main .wrap dl + dl {margin-top: 0.65rem;}
main .wrap p {font-size: 1.1rem; line-height: 2.1rem; padding:0 1.5rem; margin-top: 1.75rem; letter-spacing: 0.05em;}

main .wrap header {text-align: center;}
main .wrap .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;}
main .wrap 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;}
main .wrap .new header:after{display: none;}
main .wrap 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;}
main .wrap header h1{font-size:3rem; 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: 3.75rem; letter-spacing: -0.15em;}
main .wrap header h1:after{content: ''; background: url(../images/character/sub/h1-line.png) left top no-repeat; height: 7.8rem; width: 100%; position: absolute; left:0; top: -0.6rem; background-size: 100% auto;}

main .wrap dl {font-size: 0.9rem; line-height: 1.75rem; padding-left: 1.9rem;}
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 0.7rem; min-width: 3.2rem; text-align: center;}

.swiper-container {width:100%; position: relative; opacity: 0; transition: 0.5s; margin: 2.2rem 0 0;}
.windowloaded .swiper-container {opacity: 1;}
.swiper-wrapper {text-align: center;}
.swiper-slide {
font-size: 0; line-height: 1;
width: 100%; height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide .item {display: block; position: relative; z-index: 10;}
.swiper-slide .item img {height: auto; width:100%;}
.swiper-slide .item a{position: relative; display: block; z-index: 10;}
.swiper-container nav { width: 100%; text-align: center; height: 3.7rem; vertical-align: middle; display: block; padding: 0; display: none; margin: 1.8rem 0 2rem;}
.swiper-pagination {position: relative; margin: 0; transition: none; z-index: 100; display: inline-block; width: auto !important; vertical-align: top;}
.swiper-pagination-bullet {background: #e3bd47; width: 0.8rem; height: 0.8rem; margin: 0 0.35rem; opacity: 1; cursor: pointer; vertical-align: top;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{background: #a21558;}
.swiper-button-prev{background: url(../images/common/arr-left.png); width: 2.4rem; height: 3.7rem; position: static; display: inline-block; background-size: 100% auto; vertical-align: middle; margin-right: 1.4rem;}
.swiper-button-next{background: url(../images/common/arr-right.png); width: 2.4rem; height: 3.7rem; position: static; display: inline-block; background-size: 100% auto; vertical-align: middle; margin-left: 1.4rem;}
/*
main .item {display: block; position: relative; z-index: 10; font-size: 0; line-height: 1; margin-top: 2.2rem;}
main .item img {height: auto; width: 100%;}
main .item a{display: none;}
*/
.pagearr {position:fixed; left: -4rem; top: 50%; z-index: 1200; width: 3.4rem; transition: 0.8s ease; opacity: 0; font-size: 0; line-height: 1; margin-top: -2.7rem;}
.pagearr a {display: block; width: 3.4rem; height: 5.4rem; background:url(../images/common/arr-left.png) left top no-repeat; transition:  0.3s; background-size: 100% auto;}
.pagearr.next {left: inherit; right: -4rem; margin-left: inherit; margin-right: 0; text-align: right;}
.pagearr.next a{background: url(../images/common/arr-right.png) left top no-repeat; float: right; background-size: 100% auto;}
/*.windowloaded .pagearr {opacity: 1;}*/
.pagearr.show {opacity: 1; left: 1rem;}
.pagearr.next.show {opacity: 1; left: inherit; right: 1rem;}

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




article:before {content:''; background-position: left top; background-repeat: no-repeat; width: 593px; height: 869px; position: absolute; left: 100%; top: 0; margin-left: -67px; z-index: -1;}
article:nth-child(even):before {left: -100%;}
@media screen and (max-width:640px){
article:before {width: 92.65625vw; height: 135.78125vw; left: 0; margin-left:0; background-size: 100% auto; z-index: -1;}
article:nth-child(even):before {left: 0;}
}


/* 個別 */
/**/

article:nth-child(1):before {background-image: url(../images/character/sub/01/chara.png); width: 593px; height: 869px; margin-left: -67px;}
@media screen and (max-width:640px){
article:nth-child(1):before {width: 92.65625vw; height: 135.78125vw; margin-left: 2.8125vw;}
}
/* 
	イルメリア・フォン・ラインウェバー
*/
@media screen and (min-width:641px){
article:nth-child(2) header h1 {font-size: 37px; padding-top: 10px; letter-spacing: -0.15em;}
}
article:nth-child(2):before {background-image: url(../images/character/sub/02/chara.png); width: 524px; height: 805px; margin-left: -67px; top: -17px;}
@media screen and (max-width:640px){
article:nth-child(2).new:after {top: 11.8rem;}
article:nth-child(2) header p{font-size:1.2rem;}
article:nth-child(2) header h1{font-size:2.0rem; padding-top: 1.0rem;}
article:nth-child(2):before {width: 81.875vw; height: 125.78125vw; margin-left: 7.8125vw;}
main article:nth-child(2) {padding-top: 24rem;}
}
/* 
	イルメリア・フォン・ラインウェバー
*/
@media screen and (min-width:641px){
article:nth-child(3) header h1 {padding-left: 10px;}
}
article:nth-child(3):before {background-image: url(../images/character/sub/03/chara.png); width: 459px; height: 889px; margin-left: -42px; top: -15px;}
@media screen and (max-width:640px){
article:nth-child(3).new:after {top: 11.8rem;}
article:nth-child(3):before {width: 71.71875vw; height: 139.0625vw; margin-left: 10.8125vw;}

}

/* 
	ルーシャ・ヴォルテール
*/
@media screen and (min-width:641px){
article:nth-child(4) header h1 {}
}
article:nth-child(4):before {background-image: url(../images/character/sub/04/chara.png); width: 490px; height: 779px; margin-left: -21px; top: 23px;}
@media screen and (max-width:640px){
main article:nth-child(4) {padding-top: 24rem;}
article:nth-child(4).new:after {top: 21.8rem;}
article:nth-child(4):before {width: 76.5625vw; height: 121.875vw; margin-left: 12.8125vw;}
}
/* 
	プラフタ
*/
@media screen and (min-width:641px){
article:nth-child(5) header h1 {padding-left: 10px;}
}
article:nth-child(5):before {background-image: url(../images/character/sub/05/chara.png); width: 516px; height: 846px; margin-left: 10px; top: 10px;}
@media screen and (max-width:640px){
article:nth-child(5).new:after {top: 11.8rem;}
article:nth-child(5):before {width: 80.625vw; height: 132.1875vw; margin-left: 15.8125vw; top: -2rem;}
}

/* 
	フリッツ・ワイスベルク
*/
@media screen and (min-width:641px){
article:nth-child(6) header h1 {}
}
article:nth-child(6):before {background-image: url(../images/character/sub/06/chara.png); width: 641px; height: 840px; margin-left: -129px; top: 14px;}
@media screen and (max-width:640px){
article:nth-child(6).new:after {top: 11.8rem;}
article:nth-child(6):before {width: 101vw; height: 131.25vw; margin-left: -2.8125vw;}
}
/* 
	ドロッセル・ワイスベルク
*/
@media screen and (min-width:641px){
article:nth-child(7) header h1 {padding-left: 10px;}
}
article:nth-child(7):before {background-image: url(../images/character/sub/07/chara.png); width: 390px; height: 792px; margin-left: 62px; top: 43px;}
@media screen and (max-width:640px){
article:nth-child(7).new:after {top: 11.8rem;}
article:nth-child(7) header h1{font-size:2.6rem;}
article:nth-child(7):before {width: 60.9375vw; height: 123.75vw; margin-left: 23.8125vw;}
}

/* 
	ミレイユ・フェリエ・アダレット
*/
@media screen and (min-width:641px){
article:nth-child(8) header h1 {font-size: 40px; padding-top: 10px; letter-spacing: -0.15em;}
}
article:nth-child(8):before {background-image: url(../images/character/sub/08/chara.png); width: 415px; height: 949px; margin-left: 0; top: -50px;}
@media screen and (max-width:640px){
article:nth-child(8).new:after {top: 16rem; left:-0.5rem;}
article:nth-child(8) header h1{font-size:2.1rem; padding-top: 1.0rem;}
article:nth-child(8):before {width: 64.84375vw; height:148.28125vw; margin-left: 14vw; margin-top:7vw;}
}
/* 
	オネット・マーレン
*/
@media screen and (min-width:641px){
article:nth-child(9) header h1 {padding-left: 10px;}
}
article:nth-child(9):before {background-image: url(../images/character/sub/09/chara.png); width: 505px; height: 904px; margin-left: 0; top: 0;}
@media screen and (max-width:640px){
main article:nth-child(9) {padding-top: 27rem;}
article:nth-child(9).new:after {top: 20rem; left:-0.5rem;}
article:nth-child(9) header h1{font-size:2.6rem;}
article:nth-child(9):before {width: 81vw; height:133.4375vw; margin-left: 10vw;}
}


/* 
	グレース
*/
@media screen and (min-width:641px){
article:nth-child(10) header h1 {}
}
article:nth-child(10):before {background-image: url(../images/character/sub/10/chara.png); width: 374px; height: 843px; margin-left: 80px; top: 0;}
@media screen and (max-width:640px){
article:nth-child(10).new:after {top: 20rem;}
article:nth-child(10):before {width: 58.4375vw; height: 131.71875vw; margin-left: 27vw;}
}




/* 
	フーコ
*/
@media screen and (min-width:641px){
.sub02 article:nth-child(1) header h1 {padding-left: 20px;}
}
.sub02 article:nth-child(1):before {background-image: url(../images/character/sub/11/chara.png); width: 457px; height: 632px; margin-left: 40px; top: 30px;}
@media screen and (max-width:640px){
.sub02 article:nth-child(1).new:after {top: 20rem; left:-0.5rem;}
.sub02 article:nth-child(1) header h1{font-size:3rem;}
.sub02 article:nth-child(1):before {width: 71.40625vw; height:98.75vw; margin-left: 17vw;}
}

/* 
	ネージュ・シャントルイユ
*/
@media screen and (min-width:641px){
.sub02 article:nth-child(2) header h1 {font-size: 45px; padding-top: 10px; letter-spacing: -0.5px;}
}
.sub02 article:nth-child(2):before {background-image: url(../images/character/sub/12/chara.png); width: 397px; height: 781px; margin-left: 20px; top: 0;}
@media screen and (max-width:640px){
.sub02 article:nth-child(2) header h1{font-size:2.6rem; padding-top: 0;}
.sub02 article:nth-child(2).new:after {top: 20rem;}
.sub02 article:nth-child(2):before {width: 64.03125vw; height: 122.03125vw; margin-left: 20vw;}
}


/* 
	キャプテン・バッケン
*/
@media screen and (min-width:641px){
.sub02 article:nth-child(3) header h1 {padding-left: 10px;}
}
.sub02 article:nth-child(3):before {background-image: url(../images/character/sub/13/chara.png); width: 607px; height: 1006px; margin-left: 0; top: -40px;}
@media screen and (max-width:640px){
.sub02 article:nth-child(3){margin-top:5rem;}
.sub02 article:nth-child(3).new:after {top: 20rem; left:-0.5rem;}
.sub02 article:nth-child(3) header h1{font-size:3rem;}
.sub02 article:nth-child(3):before {width: 94.84375vw; height:157.1875vw; margin-left: 5vw;}
}



/* 
	コルネリア
*/
@media screen and (min-width:641px){
.sub02 article:nth-child(4) {margin-top:220px;}
.sub02 article:nth-child(4) header h1 {padding-left: 20px; letter-spacing: 0.5px;}
}
.sub02 article:nth-child(4):before {background-image: url(../images/character/sub/14/chara.png); width: 518px; height: 743px; margin-left: 40px; top: 30px;}
@media screen and (max-width:640px){
.sub02 article:nth-child(4).new:after {top: 28rem; left:-0.5rem;}
.sub02 article:nth-child(4) header h1{font-size:3rem;}
.sub02 article:nth-child(4):before {width: 80.9375vw; height:116.09375vw; margin-left: 12vw;}
}

/* 
	パメラ
*/
@media screen and (min-width:641px){
.sub02 article:nth-child(5) header h1 {font-size: 51px; padding-top: 10px; letter-spacing: 0;padding-left: 20px;}
}
.sub02 article:nth-child(5):before {background-image: url(../images/character/sub/15/chara.png); width: 882px; height: 934px; margin-left: -250px; top: 0;}
@media screen and (max-width:640px){
.sub02 article:nth-child(5) header h1{font-size:3rem;}
.sub02 article:nth-child(5).new:after {top: 20rem; left:-0.5rem;}
.sub02 article:nth-child(5):before {width: 137.8125vw; height:145.9375vw; margin-left:-36vw;}
}


/* 
	ハゲル
*/
@media screen and (min-width:641px){
.sub02 article:nth-child(6) {margin-top:170px;}
.sub02 article:nth-child(6) header h1 {font-size: 51px; padding-left: 20px; letter-spacing: 0.5px;}
}
.sub02 article:nth-child(6):before {background-image: url(../images/character/sub/16/chara.png); width:454px; height:892px; margin-left:30px; top: 0;}
@media screen and (max-width:640px){
.sub02 article:nth-child(6).new:after {top: 20rem; left:-0.5rem;}
.sub02 article:nth-child(6) header h1{font-size:3rem; letter-spacing:0.1rem;}
.sub02 article:nth-child(6):before {width: 70.9375vw; height:139.375vw; margin-left: 16vw;}
}