@charset "utf-8";

/*-----------------------------------------------
 content
-----------------------------------------------*/

/* character */

h1{
	position: absolute;
	top: 32px;
	left: 109px;
	z-index: 10;
}

div#content{
	background-image: url(../img/character/bg.jpg);
	background-color: #fff;
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* tmb */

ul.character-change{
	position: absolute;
	z-index: 11;
	top: 122px;
	width: 1200px;
	padding: 0 15px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

ul.character-change.fixed {
  position: fixed;
  top: 20px;
}

ul.character-change li{
	float: left;
	height: 40px;
	margin: 0 10px 28px 0;
}

ul.character-change li.new{
	background-image: url(../img/icon-new.png);
	background-repeat: no-repeat;
	background-position: center 46px;
	margin-bottom: 0;
	padding-bottom: 32px;
}

ul.character-change li img{
	height: 100%;
	border: 2px solid #fff;
    border-radius: 100px;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	box-shadow:rgba(134, 123, 144, 0.239216) 0px 0px 3px 1px;
	-webkit-box-shadow:rgba(134, 123, 144, 0.239216) 0px 0px 3px 1px;
	-moz-box-shadow:rgba(134, 123, 144, 0.239216) 0px 0px 3px 1px;
	-ms-box-shadow:rgba(134, 123, 144, 0.239216) 0px 0px 3px 1px;
}

ul.character-change li a.current img,
ul.character-change li a:hover img{
	border: 2px solid #fc2258;
	animation: ccmotion 1s;
	-webkit-animation: ccmotion 1s;
	-moz-animation: ccmotion 1s;
	-ms-animation: ccmotion 1s;
}

@keyframes ccmotion {
	0% {
		opacity: 1;
	}
	10% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes ccmotion {
	0% {
		opacity: 1;
	}
	10% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes ccmotion {
	0% {
		opacity: 1;
	}
	10% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}
@-ms-keyframes ccmotion {
	0% {
		opacity: 1;
	}
	10% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

/* character-col*/

div.character-col{
	margin-bottom: 200px;
}

div.character-col div.inner{
	padding: 160px 0 0;

}

div.character-col div.col{
	position: relative;
	width: 898px;
	height: 675px;
	margin: 0 auto;
	border: 1px solid #ddd;
	box-shadow:rgba(134, 123, 144, 0.0980392) 0px 0px 7px 3px;
	-webkit-box-shadow:rgba(134, 123, 144, 0.0980392) 0px 0px 7px 3px;
	-moz-box-shadow:rgba(134, 123, 144, 0.0980392) 0px 0px 7px 3px;
	-ms-box-shadow:rgba(134, 123, 144, 0.0980392) 0px 0px 7px 3px;
	background-color: rgba(255, 255, 255, 0.7);
	background-position: 34px 33px;
	background-repeat: no-repeat;
}

div.col h2{
	position: absolute;
	z-index: 10;
	top: 192px;
	left: 62px;
}

div.col p.ruby{
	position: absolute;
	z-index: 10;
	top: 256px;
	left: 62px;
	text-align: center;
}

div.col p.catch{
	position: absolute;
	z-index: 10;
	top: 310px;
	left: 62px;
	text-align: center;
}

div.col p.txt{
	position: absolute;
	z-index: 10;
	top: 473px;
	left: 62px;
	text-align: center;
}

div.col div.sample-voice{
	position: absolute;
	z-index: 10;
    top: 601px;
    left: 34px;
	width: 835px;
	height: 41px;
	background-image: url(../img/character/bg-voice.png);
	background-position: right center;
}

div.col div.sample-voice ul{
	padding: 5px 0 0 180px;
}

div.col div.sample-voice ul li{
	display: inline-block;
	line-height: 0;
}

div.col div.sample-voice ul li img{
	cursor: pointer;
}

div.col div.sample-voice ul li .jp-pause{
	opacity: 0.2;
}

/* 綾小路 */

div#ayanokouji{
	padding-top: 280px;
}

div#ayanokouji > div.col{
	background-image: url(../img/character/bg-ayanokouji.png);
}

div#ayanokouji > div.col p.ruby{
	width: 269px;
}

div#ayanokouji > div.col div.chara{
	position: absolute;
	top: -57px;
	left: 547px;
}

/* 堀北 */

div#horikita > div.col{
	background-image: url(../img/character/bg-horikita.png);
}

div#horikita > div.col p.ruby{
	width: 216px;
}

div#horikita > div.col div.chara{
	position: absolute;
	top: -30px;
	left: 394px;
}

div#horikita > div.col p.txt{
	top: 410px;
}

/* 櫛田 */

div#kushida > div.col{
	background-image: url(../img/character/bg-kushida.png);
}

div#kushida > div.col p.ruby{
	width: 218px;
}

div#kushida > div.col div.chara{
	position: absolute;
	top: -5px;
	left: 487px;
}

/* 須藤 */

div#sudou > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#sudou > div.col p.ruby{
	width: 165px;
}

div#sudou > div.col div.chara{
	position: absolute;
	top: -20px;
	left: 360px;
}

div#sudou > div.col p.txt{
	top: 410px;
}

/* 山内 */

div#yamauchi > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#yamauchi > div.col p.ruby{
	width: 214px;
}

div#yamauchi > div.col div.chara{
	position: absolute;
	top: -44px;
	left: 526px;
}

div#yamauchi > div.col p.txt{
	top: 506px;
}

/* 池 */

div#ike > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#ike > div.col p.ruby{
	width: 164px;
}

div#ike > div.col div.chara{
	position: absolute;
	top: -18px;
	left: 371px;
}

div#ike > div.col p.txt{
	top: 446px;
}

/* 高円寺 */

div#kouenji > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#kouenji > div.col p.ruby{
	width: 268px;
}

div#kouenji > div.col div.chara{
	position: absolute;
	top: -69px;
	left: 379px;
}

/* 平田 */

div#hirata > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#hirata > div.col p.ruby{
	width: 217px;
}

div#hirata > div.col div.chara{
	position: absolute;
    top: -33px;
    left: 69px;
}

/* 軽井沢 */

div#karuizawa > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#karuizawa > div.col p.ruby{
	width: 217px;
}

div#karuizawa > div.col div.chara{
	position: absolute;
    top: -24px;
    left: 322px;
}

div#karuizawa > div.col p.txt{
	top: 410px;
}

/* 佐倉 */

div#sakura > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#sakura > div.col p.ruby{
	width: 217px;
}

div#sakura > div.col div.chara{
	position: absolute;
    top: -37px;
    left: 374px;
}

div#sakura > div.col p.txt{
	top: 363px;
}


/* 長谷部 */

div#hasebe > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#hasebe > div.col p.ruby{
	width: 310px;
}

div#hasebe > div.col div.chara{
	position: absolute;
    top: -21px;
    left: 0;
}

div#hasebe > div.col p.txt{
	top: 433px;
}


/* 幸村 */

div#yukimura > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#yukimura > div.col p.ruby{
	width: 217px;
}

div#yukimura > div.col div.chara{
	position: absolute;
    top: -22px;
    left: 315px;
}

div#yukimura > div.col p.txt{
	top: 473px;
}


/* 三宅 */

div#miyake > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#miyake > div.col p.ruby{
	width: 216px;
}

div#miyake > div.col div.chara{
	position: absolute;
    top: -22px;
    left: 20px;
}

div#miyake > div.col p.txt{
	top: 403px;
}

/* 茶柱 */

div#chabashira > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#chabashira > div.col p.ruby{
	width: 217px;
}

div#chabashira > div.col div.chara{
	position: absolute;
	top: -52px;
	left: 517px;
}

div#chabashira > div.col p.txt{
	top: 410px;
}

/* 伊吹 */

div#ibuki > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#ibuki > div.col p.ruby{
	width: 166px;
}

div#ibuki > div.col div.chara{
	position: absolute;
    top: -35px;
    left: 407px;
}

div#ibuki > div.col p.txt{
	top: 410px;
}

/* 龍園 */

div#ryuen > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#ryuen > div.col p.ruby{
	width: 166px;
}

div#ryuen > div.col div.chara{
	position: absolute;
    top: -44px;
    left: 441px;
}

div#ryuen > div.col p.txt{
	top: 410px;
}

/* 一之瀬 */

div#ichinose > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#ichinose > div.col p.ruby{
	width: 269px;
}

div#ichinose > div.col div.chara{
	position: absolute;
	top: -34px;
	left: 444px;
}

/* 神崎 */


div#kanzaki > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#kanzaki > div.col p.ruby{
	width: 217px;
}

div#kanzaki > div.col div.chara{
	position: absolute;
    top: -43px;
    left: 528px;
}

div#kanzaki > div.col p.txt{
	top: 410px;
}

/* 星之宮 */


div#hoshinomiya > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#hoshinomiya > div.col p.ruby{
	width: 268px;
}

div#hoshinomiya > div.col div.chara{
	position: absolute;
    top: -22px;
    left: 471px;
}

div#hoshinomiya > div.col p.txt{
	top: 473px;
}

/* 坂柳 */


div#sakayanagi > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#sakayanagi > div.col p.ruby{
	width: 217px;
}

div#sakayanagi > div.col div.chara{
	position: absolute;
    top: -81px;
    left: 350px;
}

div#sakayanagi > div.col p.txt{
	top: 473px;
}

/* 葛城 */


div#katsuragi > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#katsuragi > div.col p.ruby{
	width: 217px;
}

div#katsuragi > div.col div.chara{
	position: absolute;
    top: -19px;
    left: 368px;
}

div#katsuragi > div.col p.txt{
	top: 473px;
}


/* 堀北学 */


div#horikita2 > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#horikita2 > div.col p.ruby{
	width: 165px;
}

div#horikita2 > div.col div.chara{
	position: absolute;
    top: -24px;
    left: 360px;
}

div#horikita2 > div.col p.txt{
	top: 444px;
}

/* 橘 */


div#tachibana > div.col{
	background-image: url(../img/character/bg-other.png);
}

div#tachibana > div.col h2.name{
	left: 86px;
}

div#tachibana > div.col p.ruby{
	width: 165px;
}

div#tachibana > div.col div.chara{
	position: absolute;
    top: -22px;
    left: 360px;
}

div#tachibana > div.col p.txt{
	top: 410px;
}