@charset "utf-8";
/* **************************************************************** *
 * @desc@ CHARACTER
 * @edit@ 2018/12/06
 * **************************************************************** */

/* ================================================================ *
 * @desc@ リスト
 * ================================================================ */
.listBox{
	display:table;
	table-layout:fixed;
	margin:0 auto;
}
.listBox>article{
	display:table-cell;
	padding:0 10px 100px;
	vertical-align:top;
	white-space:nowrap;
}
.listBox>article>h1{
	overflow:hidden;
	margin:0 50px 30px;
	height:32px;
	background-color:transparent;
	background-position:center;
	background-repeat:repeat-x;
	font-size:1px;
	line-height:1em;
	text-indent:-9999px;
}
.listBox ul{
}
.listBox li{
	display:inline-block;
	margin:0 -10px;
	background-color:transparent;
	background-position:center top;
	background-repeat:no-repeat;
}
.listBox li a{
	outline:none;
	overflow:hidden;
	display:block;
	margin:0 15px;
	width:135px;
	height:360px;
	transition:all 0.4s;
	transform:skewX(-5deg);
}
.listBox li a:hover{
	background:rgba(255,255,255,0.4);
}

/* 詳細ページナビ調整 */
nav.local .listBox>article{
	padding:0 0 20px;
}
nav.local .listBox li{
	margin:0 -13px;
	background-size:132px auto;
}
nav.local .listBox li a{
	margin:0 15px;
	width:120px;
	height:145px;
}

/* 学年タイトル */
.listBox>article.list2nen>h1{
	background-image:url(../img/list_h1_2nen.png);
}
.listBox>article.list1nen>h1{
	background-image:url(../img/list_h1_1nen.png);
}
.listBox>article.list3nen>h1{
	background-image:url(../img/list_h1_3nen.png);
}
.listBox>article.listTeacher>h1{
	background-image:url(../img/list_h1_teacher.png);
}
.listBox>article.listVarious>h1{
	background-image:url(../img/list_h1_various.png);
}
/* キャラ：2年生 */
.listBox>article.list2nen li:nth-of-type(1){
	background-image:url(../img/list_bt_01.png);
}
.listBox>article.list2nen li:nth-of-type(2){
	background-image:url(../img/list_bt_02.png);
}
.listBox>article.list2nen li:nth-of-type(3){
	background-image:url(../img/list_bt_03.png);
}
.listBox>article.list2nen li:nth-of-type(4){
	background-image:url(../img/list_bt_04.png);
}
.listBox>article.list2nen li:nth-of-type(5){
	background-image:url(../img/list_bt_05.png);
}
/* キャラ：1年生 */
.listBox>article.list1nen li:nth-of-type(1){
	background-image:url(../img/list_bt_06.png);
}
.listBox>article.list1nen li:nth-of-type(2){
	background-image:url(../img/list_bt_07.png);
}
.listBox>article.list1nen li:nth-of-type(3){
	background-image:url(../img/list_bt_08.png);
}
/* キャラ：3年生 */
.listBox>article.list3nen li:nth-of-type(1){
	background-image:url(../img/list_bt_09.png);
}
.listBox>article.list3nen li:nth-of-type(2){
	background-image:url(../img/list_bt_10.png);
}
.listBox>article.list3nen li:nth-of-type(3){
	background-image:url(../img/list_bt_11.png);
}
/* キャラ：先生 */
.listBox>article.listTeacher li:nth-of-type(1){
	background-image:url(../img/list_bt_12.png);
}
.listBox>article.listTeacher li:nth-of-type(2){
	background-image:url(../img/list_bt_13.png);
}
/* キャラ：VARIOUS */
.listBox>article.listVarious li:nth-of-type(1){
	background-image:url(../img/list_bt_71.png);
}
.listBox>article.listVarious li:nth-of-type(2){
	background-image:url(../img/list_bt_72.png);
}
.listBox>article.listVarious li:nth-of-type(3){
	background-image:url(../img/list_bt_73.png);
}
.listBox>article.listVarious li:nth-of-type(4){
	background-image:url(../img/list_bt_74.png);
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ表示
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	.listBox{
		display:block;
	}
	.listBox>article{
		display:block;
		padding:0 0 50px;
		white-space:normal;
	}
	.listBox>article>h1{
		overflow:hidden;
		margin:0 10px 30px;
	}
	.listBox li{
		background-size:auto 288px;
	}
	.listBox li a{
		width:108px;
		height:288px;
	}
	/* 詳細ページナビ調整 */
	nav.local .listBox>article{
		padding:0;
	}
	nav.local .listBox li{
		margin:0 -15px;
	}
}
/* ================================================================ *
 * @desc@ 詳細
 * ================================================================ */
.detailBox{
	position:relative;
	margin:0 auto;
	border:10px solid #ddd;
	padding:20px;
	background:#fff url(../img/detail/detail_bg_a.png) center top no-repeat;
	line-height:0;
	text-align:left;
}
.detailBox img{
	line-height:0;
	vertical-align:bottom !important;
}
.detailBox>div{
	overflow:hidden;
	position:relative;
	height:700px;
	background-color:transparent;
	background-position:right bottom;
	background-repeat:no-repeat;
}
/* キャラ名 / CV / 学年 */
.detailBox .main{
	position:absolute;
	left:50px;
	top:20px;
	z-index:10000;
	padding:0 0 48px 50px;
	min-width:530px;
	background-color:transparent;
	background-position:0 80px;
	background-repeat:no-repeat;
}
.detailBox h1{
	padding-left:36px;
	line-height:0;
}
.detailBox h1 img{
	vertical-align:top;
}
.detailBox .cv{
	margin:0 0 30px 20px;
}
.detailBox .ic{
	position:absolute;
	left:420px;
	top:83px;
	width:110px;
	line-height:0;
}
/* 紹介文 */
.detailBox .desc{
	position:absolute;
	left:124px;
	top:149px;
	z-index:10000;
	line-height:0;
}
/* プロフィール */
.detailBox .profile{
	position:absolute;
	left:116px;
	top:310px;
	z-index:10000;
	background:rgba(255,255,255,0.3);
}
.detailBox .profile>li{
	display:block;
	padding:2px 10px 6px;
	width:446px;
	background-color:transparent;
	background-image:
		url(../img/detail/prof_bg_point.png),
		url(../img/detail/prof_bg_point.png),
		url(../img/detail/prof_bg_line.png);
	background-position:left bottom,right bottom,left bottom;
	background-repeat:no-repeat,no-repeat,repeat-x;
	text-align:left;
}
.detailBox .profile>li>span{
	display:inline-block;
	padding:2px 0 0;
	line-height:0;
	vertical-align:bottom;
}
.detailBox .profile>li>span.sbj{
	margin-right:5px;
	padding-right:25px;
	min-width:60px;
	background-color:transparent;
	background-position:right center;
	background-repeat:no-repeat;
	text-align:right;
}
.detailBox .profile>li>span.data{
}
/* サンプルボイス */
.detailBox .voice{
	position:absolute;
	left:120px;
	top:540px;
	z-index:10000;
}
.detailBox .voice>li{
	display:inline-block;
	padding:0 20px 0 0;
	vertical-align:bottom;
}
/* セリフ */
.detailBox .word{
	position:absolute;
	right:55px;
	top:35px;
	z-index:10000;
	line-height:0;
}
/* イラスト */
.detailBox .illust{
	position:absolute;
	left:0;
	bottom:20px;
	z-index:10010;
	line-height:0;
}
.detailBox.noCatch .illust{
	bottom:0;
}
/* 立ち絵 */
.detailBox .picBox{
	text-align:center;
}
.detailBox .picBox>div{
	position:absolute;
	bottom:0;
	z-index:9100;
}
.detailBox .picBox>div.up{
	left:470px;
	width:750px;
}
.detailBox .picBox>div.full{
	left:695px;
	width:340px;
}
.detailBox .picBox>.hide{
	opacity:0;
	z-index:9000;
}
.detailBox .picBox .bt{
	position:absolute;
	bottom:30px;
	z-index:9110;
	line-height:0;
	cursor:pointer;
	transition:all 0.3s;
}
.detailBox .picBox>div.up .bt{
	left:645px;
}
.detailBox .picBox>div.full .bt{
	left:420px;
}
.detailBox .picBox .bt:hover{
	opacity:0.6;
}
.detailBox .picBox .bt.dis{
	opacity:0.6;
	cursor:default;
}

/* 英語キャッチ */
.detailBox .catch{
	position:absolute;
	left:0;
	bottom:-10px;
	z-index:10020;
	padding:5px 0 5px 20px;
	line-height:0;
}
.detailBox .catch:after{
	content:'';
	position:absolute;
	top:0;
	right:-48px;
	border:24px solid transparent;
	width:0;
	height:0;
}
/* キャラ切り替え */
.detailBox .nv{
}
.detailBox .nv>li{
	position:absolute;
	top:335px;
	z-index:10030;
	line-height:0;
}
.detailBox .nv>li.prev{
	left:0;
}
.detailBox .nv>li.next{
	right:0;
}

/* カラー設定 */
#Char01{
	border-color:#d80c24;
}
#Char01>div{
	background-image:url(../img/detail/01/detail_bg_b.png);
}
#Char01 .main{
	background-image:url(../img/detail/01/main_bg.png);
}
#Char01 .profile>li>span.sbj{
	background-image:url(../img/detail/01/ic_item.png);
}
#Char01 .catch{
	background:#d80c24;
}
#Char01 .catch:after{
	border-left-color:#d80c24;
	border-bottom-color:#d80c24;
}

#Char02{
	border-color:#005eb8;
}
#Char02>div{
	background-image:url(../img/detail/02/detail_bg_b.png);
}
#Char02 .main{
	background-image:url(../img/detail/02/main_bg.png);
}
#Char02 .profile>li>span.sbj{
	background-image:url(../img/detail/02/ic_item.png);
}
#Char02 .catch{
	background:#005eb8;
}
#Char02 .catch:after{
	border-left-color:#005eb8;
	border-bottom-color:#005eb8;
}

#Char03{
	border-color:#ff6a13;
}
#Char03>div{
	background-image:url(../img/detail/03/detail_bg_b.png);
}
#Char03 .main{
	background-image:url(../img/detail/03/main_bg.png);
}
#Char03 .profile>li>span.sbj{
	background-image:url(../img/detail/03/ic_item.png);
}
#Char03 .catch{
	background:#ff6a13;
}
#Char03 .catch:after{
	border-left-color:#ff6a13;
	border-bottom-color:#ff6a13;
}

#Char04{
	border-color:#00b140;
}
#Char04>div{
	background-image:url(../img/detail/04/detail_bg_b.png);
}
#Char04 .main{
	background-image:url(../img/detail/04/main_bg.png);
}
#Char04 .profile>li>span.sbj{
	background-image:url(../img/detail/04/ic_item.png);
}
#Char04 .catch{
	background:#00b140;
}
#Char04 .catch:after{
	border-left-color:#00b140;
	border-bottom-color:#00b140;
}

#Char05{
	border-color:#b9acd7;
}
#Char05>div{
	background-image:url(../img/detail/05/detail_bg_b.png);
}
#Char05 .main{
	background-image:url(../img/detail/05/main_bg.png);
}
#Char05 .profile>li>span.sbj{
	background-image:url(../img/detail/05/ic_item.png);
}
#Char05 .catch{
	background:#b9acd7;
}
#Char05 .catch:after{
	border-left-color:#b9acd7;
	border-bottom-color:#b9acd7;
}

#Char06{
	border-color:#9adada;
}
#Char06>div{
	background-image:url(../img/detail/06/detail_bg_b.png);
}
#Char06 .main{
	background-image:url(../img/detail/06/main_bg.png);
}
#Char06 .profile>li>span.sbj{
	background-image:url(../img/detail/06/ic_item.png);
}
#Char06 .catch{
	background:#9adada;
}
#Char06 .catch:after{
	border-left-color:#9adada;
	border-bottom-color:#9adada;
}

#Char07{
	border-color:#f5b6cd;
}
#Char07>div{
	background-image:url(../img/detail/07/detail_bg_b.png);
}
#Char07 .main{
	background-image:url(../img/detail/07/main_bg.png);
}
#Char07 .profile>li>span.sbj{
	background-image:url(../img/detail/07/ic_item.png);
}
#Char07 .catch{
	background:#f5b6cd;
}
#Char07 .catch:after{
	border-left-color:#f5b6cd;
	border-bottom-color:#f5b6cd;
}

#Char08{
	border-color:#fdda24;
}
#Char08>div{
	background-image:url(../img/detail/08/detail_bg_b.png);
}
#Char08 .main{
	background-image:url(../img/detail/08/main_bg.png);
}
#Char08 .profile>li>span.sbj{
	background-image:url(../img/detail/08/ic_item.png);
}
#Char08 .catch{
	background:#fdda24;
}
#Char08 .catch:after{
	border-left-color:#fdda24;
	border-bottom-color:#fdda24;
}

#Char09{
	border-color:#006d46;
}
#Char09>div{
	background-image:url(../img/detail/09/detail_bg_b.png);
}
#Char09 .main{
	background-image:url(../img/detail/09/main_bg.png);
}
#Char09 .profile>li>span.sbj{
	background-image:url(../img/detail/09/ic_item.png);
}
#Char09 .catch{
	background:#006d46;
}
#Char09 .catch:after{
	border-left-color:#006d46;
	border-bottom-color:#006d46;
}

#Char10{
	border-color:#e03e52;
}
#Char10>div{
	background-image:url(../img/detail/10/detail_bg_b.png);
}
#Char10 .main{
	background-image:url(../img/detail/10/main_bg.png);
}
#Char10 .profile>li>span.sbj{
	background-image:url(../img/detail/10/ic_item.png);
}
#Char10 .catch{
	background:#e03e52;
}
#Char10 .catch:after{
	border-left-color:#e03e52;
	border-bottom-color:#e03e52;
}

#Char11{
	border-color:#c5cfda;
}
#Char11>div{
	background-image:url(../img/detail/11/detail_bg_b.png);
}
#Char11 .main{
	background-image:url(../img/detail/11/main_bg.png);
}
#Char11 .profile>li>span.sbj{
	background-image:url(../img/detail/11/ic_item.png);
}
#Char11 .catch{
	background:#c5cfda;
}
#Char11 .catch:after{
	border-left-color:#c5cfda;
	border-bottom-color:#c5cfda;
}

#Char12{
	border-color:#001871;
}
#Char12>div{
	background-image:url(../img/detail/12/detail_bg_b.png);
}
#Char12 .main{
	background-image:url(../img/detail/12/main_bg.png);
}
#Char12 .profile>li>span.sbj{
	background-image:url(../img/detail/12/ic_item.png);
}
#Char12 .catch{
	background:#001871;
}
#Char12 .catch:after{
	border-left-color:#001871;
	border-bottom-color:#001871;
}

#Char13{
	border-color:#870064;
}
#Char13>div{
	background-image:url(../img/detail/13/detail_bg_b.png);
}
#Char13 .main{
	background-image:url(../img/detail/13/main_bg.png);
}
#Char13 .profile>li>span.sbj{
	background-image:url(../img/detail/13/ic_item.png);
}
#Char13 .catch{
	background:#870064;
}
#Char13 .catch:after{
	border-left-color:#870064;
	border-bottom-color:#870064;
}

#Char71{
	border-color:#b81c22;
}
#Char71>div{
	background-image:url(../img/detail/71/detail_bg_b.png);
}
#Char71 .main{
	background-image:url(../img/detail/71/main_bg.png);
}
#Char71 .profile>li>span.sbj{
	background-image:url(../img/detail/71/ic_item.png);
}
#Char71 .catch{
	background:#b81c22;
}
#Char71 .catch:after{
	border-left-color:#b81c22;
	border-bottom-color:#b81c22;
}

#Char72{
	border-color:#e1368d;
}
#Char72>div{
	background-image:url(../img/detail/72/detail_bg_b.png);
}
#Char72 .main{
	background-image:url(../img/detail/72/main_bg.png);
}
#Char72 .profile>li>span.sbj{
	background-image:url(../img/detail/72/ic_item.png);
}
#Char72 .catch{
	background:#e1368d;
}
#Char72 .catch:after{
	border-left-color:#e1368d;
	border-bottom-color:#e1368d;
}

#Char73{
	border-color:#00858e;
}
#Char73>div{
	background-image:url(../img/detail/73/detail_bg_b.png);
}
#Char73 .main{
	background-image:url(../img/detail/73/main_bg.png);
}
#Char73 .profile>li>span.sbj{
	background-image:url(../img/detail/73/ic_item.png);
}
#Char73 .catch{
	background:#00858e;
}
#Char73 .catch:after{
	border-left-color:#00858e;
	border-bottom-color:#00858e;
}

#Char74{
	border-color:#668e5e;
}
#Char74>div{
	background-image:url(../img/detail/74/detail_bg_b.png);
}
#Char74 .main{
	background-image:url(../img/detail/74/main_bg.png);
}
#Char74 .profile>li>span.sbj{
	background-image:url(../img/detail/74/ic_item.png);
}
#Char74 .catch{
	background:#668e5e;
}
#Char74 .catch:after{
	border-left-color:#668e5e;
	border-bottom-color:#668e5e;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ表示
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	.detailBox{
		border-width:5px;
		padding:0;
	}
	.detailBox>div{
		border:10px solid #fff;
		height:920px;
		background-position:-34px 335px;
	}
	/* キャラ名 / CV / 学年 */
	.detailBox .main{
		position:relative;
		left:0;
		top:5px;
		padding:0 0 30px 10px;
		min-width:360px;
		background-position:0 40px;
		background-size:360px auto;
	}
	.detailBox h1{
		padding-left:44px;
	}
	.detailBox h1 .name{
		width:auto;
		height:60px;
	}
	.detailBox .cv{
		margin:0 0 28px 20px;
		height:21px;
	}
	.detailBox .ic{
		position:absolute;
		left:270px;
		top:40px;
		width:80px;
	}
	/* 紹介文 */
	.detailBox .desc{
		left:0;
		top:auto;
		bottom:30px;
		padding:12px 0 0;
		width:100%;
		background:#fff;
	}
	/* プロフィール */
	.detailBox .profile{
		left:0;
		top:auto;
		bottom:162px;
		padding:2px 0 5px;
		background:rgba(255,255,255,0.5);
	}
	.detailBox .profile>li{
		padding:0 10px 4px;
		width:330px;
		text-align:left;
	}
	.detailBox .profile>li>span{
		padding:0 0 2px;
		height:16px;
		vertical-align:bottom;
	}
	.detailBox .profile>li>span.sbj{
		display:inline-block;
		padding-right:20px;
		background-size:16px auto;
		text-align:left;
	}
	.detailBox .profile>li>span.data{
		display:inline-block;
	}
	/* サンプルボイス */
	.detailBox .voice{
		left:auto;
		right:35px;
		top:75px;
	}
	.detailBox .voice>li{
		padding:0 5px 0 0;
		width:60px;
	}
	/* セリフ */
	.detailBox .word{
		right:5px;
		top:150px;
		width:70px;
	}
	/* イラスト */
	.detailBox .illust{
		box-sizing:border-box;
		bottom:10px;
		padding:0 0 1px;
		width:100%;
		background:#fff;
		text-align:right;
	}
	.detailBox .illust img{
		width:auto;
		height:20px;
	}
	/* 立ち絵 */
	.detailBox .picBox>div{
		bottom:160px;
	}
	.detailBox .picBox>div.up{
		left:-200px;
		width:700px;
	}
	.detailBox .picBox>div.full{
		left:0;
		width:317px;
	}
	.detailBox .picBox .bt{
		bottom:auto;
		top:390px;
	}
	.detailBox .picBox>div.up .bt{
		left:205px;
	}
	.detailBox .picBox>div.full .bt{
		left:5px;
	}
	/* 立ち絵＞個別調整 */
	#Char01 .picBox>div.up .st  {margin-left:0;}
	#Char01 .picBox>div.full .st{margin-left:0;}
	#Char02 .picBox>div.up .st  {margin-left:0;}
	#Char02 .picBox>div.full .st{margin-left:0;}
	#Char03 .picBox>div.up .st  {margin-left:0;}
	#Char03 .picBox>div.full .st{margin-left:0;}
	#Char04 .picBox>div.up .st  {margin-left:0;}
	#Char04 .picBox>div.full .st{margin-left:0;}
	#Char05 .picBox>div.up .st  {margin-left:0;}
	#Char05 .picBox>div.full .st{margin-left:0;}
	#Char06 .picBox>div.up .st  {margin-left:-50px;}
	#Char06 .picBox>div.full .st{margin-left:20px;}
	#Char07 .picBox>div.up .st  {margin-left:-50px;}
	#Char07 .picBox>div.full .st{margin-left:30px;}
	#Char08 .picBox>div.up .st  {margin-left:0;}
	#Char08 .picBox>div.full .st{margin-left:0;}
	#Char09 .picBox>div.up .st  {margin-left:30px;}
	#Char09 .picBox>div.full .st{margin-left:10px;}
	#Char10 .picBox>div.up .st  {margin-left:20px;}
	#Char10 .picBox>div.full .st{margin-left:20px;}
	#Char11 .picBox>div.up .st  {margin-left:0;}
	#Char11 .picBox>div.full .st{margin-left:0;}
	#Char12 .picBox>div.up .st  {margin-left:20px;}
	#Char12 .picBox>div.full .st{margin-left:20px;}
	#Char13 .picBox>div.up .st  {margin-left:0;}
	#Char13 .picBox>div.full .st{margin-left:20px;}

	#Char71 .picBox>div.up .st  {margin-left:0;}
	#Char71 .picBox>div.full .st{margin-left:0;}
	#Char72 .picBox>div.up .st  {margin-left:10px;}
	#Char72 .picBox>div.full .st{margin-left:20px;}
	#Char73 .picBox>div.up .st  {margin-left:0;}
	#Char73 .picBox>div.full .st{margin-left:20px;}
	#Char74 .picBox>div.up .st  {margin-left:10px;}
	#Char74 .picBox>div.full .st{margin-left:20px;}

	/* 英語キャッチ */
	.detailBox .catch{
		bottom:-5px;
		padding:2px 0 3px 10px;
		width:360px;
	}
	.detailBox .catch:after{
		display:none;
	}
	.detailBox .catch img{
		width:auto;
		height:20px;
	}
	/* キャラ切り替え */
	.detailBox .nv>li{
		top:80px;
	}
}