@charset "utf-8";

/*
================================================================================================================
/*メインビジュアル　キャラ画像指定*/
/*================================================================================================================
*/
.content_head #title_chara{
	background-image:url('../img/common/img_main_chara.png');
}
@media screen and (max-width:799px){
.content_head #title_chara{
	background-image:url('../img/common/img_main_chara.png');
}
}

/*
================================================================================================================
 顔アイコンとテキスト
================================================================================================================
*/

.icon_box{
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.icon_box .faceicon {
  float: left;
  margin-right: -90px;
  width: 100px;
  height: 100px;
  border: solid 3px #d7ebfe;
background-repeat: no-repeat;
background-size: cover;	
}

.icon_box .fukidashi {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 0 12px;
  border-radius: 12px;
 max-width:calc(100% - 155px);}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
}

.says p {
  margin:-5px 0 -10px 0;
  padding:0px 0 0 0;
white-space: pre-wrap;/*自動改行*/
	color: #010101;
}


/*アリス*/

.icon_box.alice .faceicon {
background-color: #fded9a;
border: solid 3px #fded9a;
}
.icon_box.alice .faceicon.no0 {background-image: url('../../charaface_icon/alice/icon00.png');}
.icon_box.alice .faceicon.no1 {background-image: url('../../charaface_icon/alice/icon01.png');}
.icon_box.alice .faceicon.no2 {background-image: url('../../charaface_icon/alice/icon02.png');}
.icon_box.alice .faceicon.no3 {background-image: url('../../charaface_icon/alice/icon03.png');}
.icon_box.alice .faceicon.no4 {background-image: url('../../charaface_icon/alice/icon04.png');}
.icon_box.alice .faceicon.no5 {background-image: url('../../charaface_icon/alice/icon05.png');}
.icon_box.alice .faceicon.no6 {background-image: url('../../charaface_icon/alice/icon06.png');}
.icon_box.alice .faceicon.no7 {background-image: url('../../charaface_icon/alice/icon07.png');}
.icon_box.alice .faceicon.no8 {background-image: url('../../charaface_icon/alice/icon08.png');}
.icon_box.alice .faceicon.no9 {background-image: url('../../charaface_icon/alice/icon09.png');}
.icon_box.alice .faceicon.no10 {background-image: url('../../charaface_icon/alice/icon10.png');}
.icon_box.alice .faceicon.no11 {background-image: url('../../charaface_icon/alice/icon11.png');}
.icon_box.alice .faceicon.no12 {background-image: url('../../charaface_icon/alice/icon12.png');}
.icon_box.alice .faceicon.no13 {background-image: url('../../charaface_icon/alice/icon13.png');}
.icon_box.alice .faceicon.no14 {background-image: url('../../charaface_icon/alice/icon14.png');}
.icon_box.alice .faceicon.no15 {background-image: url('../../charaface_icon/alice/icon15.png');}
.icon_box.alice .faceicon.no16 {background-image: url('../../charaface_icon/alice/icon16.png');}
.icon_box.alice .faceicon.no17 {background-image: url('../../charaface_icon/alice/icon17.png');}
.icon_box.alice .faceicon.no18 {background-image: url('../../charaface_icon/alice/icon18.png');}

.icon_box.alice .says {
  background: #fded9a;
 }

.icon_box.alice .says:after {
  border-right: 12px solid #fded9a;
}

.icon_box.alice .says#last{
 position:relative;
}
.icon_box.alice .says#last #last_noir{
position:absolute;
top:-2px;
	right:-120px;
background-color: #edc8fa;
  border: solid 3px #edc8fa;
background-image: url('https://www.konami.com/amusement/psm/portal/magihallo/magiotsu_alice/img/photo/noir_icon/icon03.png');
  width: 100px;
  height: 100px;
　background-position: center;
background-repeat: no-repeat;
background-size: cover;		
}

@media screen and (max-width:639px){
.icon_box.alice .says#last #last_noir{
  right: -100px;
  width: 80px;
  height: 80px;}
}

/*ローズ*/

.icon_box.rose .faceicon {
background-color: #d7ebfe;
  border: solid 3px #d7ebfe;
}

.icon_box.rose .faceicon.no0 {background-image: url('../../charaface_icon/rose/icon00.png');}
.icon_box.rose .faceicon.no1 {background-image: url('../../charaface_icon/rose/icon01.png');}
.icon_box.rose .faceicon.no2 {background-image: url('../../charaface_icon/rose/icon02.png');}
.icon_box.rose .faceicon.no3 {background-image: url('../../charaface_icon/rose/icon03.png');}
.icon_box.rose .faceicon.no4 {background-image: url('../../charaface_icon/rose/icon04.png');}
.icon_box.rose .faceicon.no5 {background-image: url('../../charaface_icon/rose/icon05.png');}
.icon_box.rose .faceicon.no6 {background-image: url('../../charaface_icon/rose/icon06.png');}
.icon_box.rose .faceicon.no7 {background-image: url('../../charaface_icon/rose/icon07.png');}
.icon_box.rose .faceicon.no8 {background-image: url('../../charaface_icon/rose/icon08.png');}
.icon_box.rose .faceicon.no9 {background-image: url('../../charaface_icon/rose/icon09.png');}
.icon_box.rose .faceicon.no10 {background-image: url('../../charaface_icon/rose/icon10.png');}
.icon_box.rose .faceicon.no11 {background-image: url('../../charaface_icon/rose/icon11.png');}
.icon_box.rose .faceicon.no12 {background-image: url('../../charaface_icon/rose/icon12.png');}
.icon_box.rose .faceicon.no13 {background-image: url('../../charaface_icon/rose/icon13.png');}
.icon_box.rose .faceicon.no14{background-image: url('../../charaface_icon/rose/icon14.png');}
.icon_box.rose .faceicon.no15 {background-image: url('../../charaface_icon/rose/icon15.png');}
.icon_box.rose .faceicon.no16 {background-image: url('../../charaface_icon/rose/icon16.png');}

.icon_box.rose .says {
  background: #d7ebfe;
 }

.icon_box.rose .says:after {
  border-right: 12px solid #d7ebfe;
}

/*ノワール*/

.icon_box.noir .faceicon {
background-color: #edc8fa;
  border: solid 3px #edc8fa;
}

.icon_box.noir .faceicon.no0 {background-image: url('../../charaface_icon/noir/icon00.png');}
.icon_box.noir .faceicon.no1 {background-image: url('../../charaface_icon/noir/icon01.png');}
.icon_box.noir .faceicon.no2 {background-image: url('../../charaface_icon/noir/icon02.png');}
.icon_box.noir .faceicon.no3 {background-image: url('../../charaface_icon/noir/icon03.png');}
.icon_box.noir .faceicon.no4 {background-image: url('../../charaface_icon/noir/icon04.png');}
.icon_box.noir .faceicon.no5 {background-image: url('../../charaface_icon/noir/icon05.png');}
.icon_box.noir .faceicon.no6 {background-image: url('../../charaface_icon/noir/icon06.png');}
.icon_box.noir .faceicon.no7 {background-image: url('../../charaface_icon/noir/icon07.png');}
.icon_box.noir .faceicon.no8 {background-image: url('../../charaface_icon/noir/icon08.png');}
.icon_box.noir .faceicon.no9 {background-image: url('../../charaface_icon/noir/icon09.png');}
.icon_box.noir .faceicon.no10 {background-image: url('../../charaface_icon/noir/icon10.png');}
.icon_box.noir .faceicon.no11 {background-image: url('../../charaface_icon/noir/icon11.png');}
.icon_box.noir .faceicon.no12 {background-image: url('../../charaface_icon/noir/icon12.png');}
.icon_box.noir .faceicon.no13{background-image: url('../../charaface_icon/noir/icon13.png');}
.icon_box.noir .faceicon.no14 {background-image: url('../../charaface_icon/noir/icon14.png');}
.icon_box.noir .faceicon.no15 {background-image: url('../../charaface_icon/noir/icon15.png');}
.icon_box.noir .faceicon.no16 {background-image: url('../../charaface_icon/noir/icon16.png');}

.icon_box.noir .says {
  background: #edc8fa;
 }

.icon_box.noir .says:after {
  border-right: 12px solid #edc8fa;
}
/*ノワール検定テキスト*/
span.noir_test{
	font-weight:bold;color: #ff005c;
}

/*フロスト*/

.icon_box.fr .faceicon {
background-color: #c2bdfc;
  border: solid 3px #c2bdfc;
}

.icon_box.fr .faceicon.no0 {background-image: url('../../charaface_icon/frost/icon00.png');}
.icon_box.fr .faceicon.no1 {background-image: url('../../charaface_icon/frost/icon01.png');}
.icon_box.fr .faceicon.no2 {background-image: url('../../charaface_icon/frost/icon02.png');}
.icon_box.fr .faceicon.no3 {background-image: url('../../charaface_icon/frost/icon03.png');}
.icon_box.fr .faceicon.no4 {background-image: url('../../charaface_icon/frost/icon04.png');}
.icon_box.fr .faceicon.no5 {background-image: url('../../charaface_icon/frost/icon05.png');}
.icon_box.fr .faceicon.no6 {background-image: url('../../charaface_icon/frost/icon06.png');}
.icon_box.fr .faceicon.no7 {background-image: url('../../charaface_icon/frost/icon07.png');}
.icon_box.fr .faceicon.no8 {background-image: url('../../charaface_icon/frost/icon08.png');}
.icon_box.fr .faceicon.no9 {background-image: url('../../charaface_icon/frost/icon09.png');}
.icon_box.fr .faceicon.no10 {background-image: url('../../charaface_icon/frost/icon10.png');}
.icon_box.fr .faceicon.no11 {background-image: url('../../charaface_icon/frost/icon11.png');}
.icon_box.fr .faceicon.no12 {background-image: url('../../charaface_icon/frost/icon12.png');}
.icon_box.fr .faceicon.no13 {background-image: url('../../charaface_icon/frost/icon13.png');}
.icon_box.fr .faceicon.no14 {background-image: url('../../charaface_icon/frost/icon14.png');}
.icon_box.fr .faceicon.no15 {background-image: url('../../charaface_icon/frost/icon15.png');}
.icon_box.fr .faceicon.no16 {background-image: url('../../charaface_icon/frost/icon16.png');}
.icon_box.fr .faceicon.no17 {background-image: url('../../charaface_icon/frost/icon17.png');}
.icon_box.fr .faceicon.no18 {background-image: url('../../charaface_icon/frost/icon18.png');}


.icon_box.fr .says {
  background: #c2bdfc;
 }

.icon_box.fr .says:after {
  border-right: 12px solid #c2bdfc;
}

/*ルビー*/

.icon_box.ruby .faceicon {
background-color: #f7c3d3;
  border: solid 3px #f7c3d3;
}

.icon_box.ruby .faceicon.no0 {background-image: url('../../charaface_icon/ruby/icon00.png');}
.icon_box.ruby .faceicon.no1 {background-image: url('../../charaface_icon/ruby/icon01.png');}
.icon_box.ruby .faceicon.no2 {background-image: url('../../charaface_icon/ruby/icon02.png');}
.icon_box.ruby .faceicon.no3 {background-image: url('../../charaface_icon/ruby/icon03.png');}

.icon_box.ruby .says {
  background: #f7c3d3;
 }

.icon_box.ruby .says:after {
  border-right: 12px solid #f7c3d3;
}

/*ルラ・ルル*/
.icon_box.ra .faceicon,
.icon_box.ru .faceicon{
background-color: #a2f6e7;
  border: solid 3px #a2f6e7;
}
.icon_box.ra .says,
.icon_box.ru .says{
  background: #a2f6e7;
 }

.icon_box.ra .says:after,
.icon_box.ru .says:after{
  border-right: 12px solid #a2f6e7;
}

.icon_box.ra .faceicon.no0 {background-image: url('../../charaface_icon/rura/icon00.png');}
.icon_box.ra .faceicon.no1 {background-image: url('../../charaface_icon/rura/icon01.png');}
.icon_box.ra .faceicon.no2 {background-image: url('../../charaface_icon/rura/icon02.png');}
.icon_box.ra .faceicon.no3 {background-image: url('../../charaface_icon/rura/icon03.png');}
.icon_box.ra .faceicon.no4 {background-image: url('../../charaface_icon/rura/icon04.png');}
.icon_box.ra .faceicon.no5 {background-image: url('../../charaface_icon/rura/icon05.png');}
.icon_box.ra .faceicon.no6 {background-image: url('../../charaface_icon/rura/icon06.png');}
.icon_box.ra .faceicon.no7 {background-image: url('../../charaface_icon/rura/icon07.png');}
.icon_box.ra .faceicon.no8 {background-image: url('../../charaface_icon/rura/icon08.png');}
.icon_box.ra .faceicon.no9 {background-image: url('../../charaface_icon/rura/icon09.png');}
.icon_box.ra .faceicon.no10 {background-image: url('../../charaface_icon/rura/icon10.png');}
.icon_box.ra .faceicon.no11 {background-image: url('../../charaface_icon/rura/icon11.png');}
.icon_box.ra .faceicon.no12 {background-image: url('../../charaface_icon/rura/icon12.png');}
.icon_box.ra .faceicon.no13 {background-image: url('../../charaface_icon/rura/icon13.png');}
.icon_box.ra .faceicon.no14 {background-image: url('../../charaface_icon/rura/icon14.png');}
.icon_box.ra .faceicon.no15 {background-image: url('../../charaface_icon/rura/icon15.png');}
.icon_box.ra .faceicon.no16 {background-image: url('../../charaface_icon/rura/icon16.png');}

.icon_box.ru .faceicon.no0 {background-image: url('../../charaface_icon/ruru/icon00.png');}
.icon_box.ru .faceicon.no1 {background-image: url('../../charaface_icon/ruru/icon01.png');}
.icon_box.ru .faceicon.no2 {background-image: url('../../charaface_icon/ruru/icon02.png');}
.icon_box.ru .faceicon.no3 {background-image: url('../../charaface_icon/ruru/icon03.png');}
.icon_box.ru .faceicon.no4 {background-image: url('../../charaface_icon/ruru/icon04.png');}
.icon_box.ru .faceicon.no5 {background-image: url('../../charaface_icon/ruru/icon05.png');}
.icon_box.ru .faceicon.no6 {background-image: url('../../charaface_icon/ruru/icon06.png');}
.icon_box.ru .faceicon.no7 {background-image: url('../../charaface_icon/ruru/icon07.png');}
.icon_box.ru .faceicon.no8 {background-image: url('../../charaface_icon/ruru/icon08.png');}
.icon_box.ru .faceicon.no9 {background-image: url('../../charaface_icon/ruru/icon09.png');}
.icon_box.ru .faceicon.no10 {background-image: url('../../charaface_icon/ruru/icon10.png');}
.icon_box.ru .faceicon.no11 {background-image: url('../../charaface_icon/ruru/icon11.png');}
.icon_box.ru .faceicon.no12 {background-image: url('../../charaface_icon/ruru/icon12.png');}
.icon_box.ru .faceicon.no13 {background-image: url('../../charaface_icon/ruru/icon13.png');}
.icon_box.ru .faceicon.no14 {background-image: url('../../charaface_icon/ruru/icon14.png');}
.icon_box.ru .faceicon.no15 {background-image: url('../../charaface_icon/ruru/icon15.png');}
.icon_box.ru .faceicon.no16 {background-image: url('../../charaface_icon/ruru/icon16.png');}

/*unknow*/
.icon_box.unknown .faceicon {
background-color: #CFFDA4;
  border: solid 3px #CFFDA4;
}

.icon_box.unknown .faceicon.no0 {background-image: url('../../charaface_icon/unknown.png');}

.icon_box.unknown .says {
  background: #CFFDA4;
 }

.icon_box.unknown .says:after {
  border-right: 12px solid #CFFDA4;
}


/*吹き出しモノローグ*/
.icon_box .fukidashi_mono {
  width: 100%;
}

.icon_box .fukidashi_mono .says {
 background: #FFF;
  border: solid 3px #DDDDDD;}

.icon_box .fukidashi_mono .says:after {
 display: none;}

@media screen and (max-width:639px){
.icon_box .faceicon {
  margin-right: -80px;
  width: 80px;
  height: 80px;}
.says{max-width:calc(100% - 145px);} 	
}



ul.double {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
ul.double_l {
    width: 100%;
	max-width: 106px;
	padding-right: 18px;
    display: flex;
	justify-content: flex-start;
    flex-wrap: wrap;
}
ul.double_r {
    width: 100%;
	max-width: 106px;
	padding-left: 18px;
    display: flex;
	justify-content: flex-end;
    flex-wrap: wrap;
}
ul.double li.icon_box {
    margin: 5px 0;
    width: 106px;
    height: 106px;
}
@media screen and (max-width: 639px) {
ul.double_l {
    width: 100%;
	max-width: 86px;
    display: flex;
	justify-content: flex-start;
    flex-wrap: wrap;
}
ul.double_r {
    width: 100%;
	max-width: 86px;
    display: flex;
	justify-content: flex-end;
    flex-wrap: wrap;
}
ul.double li.icon_box {
    margin: 5px 0;
    width: 86px;
    height: 86px;
}
}
ul.double li.center .says {
    width: 100%;
    max-width: calc(100% + 4px);
	height: calc(110px * 3);
    margin: 0;
    text-align: center;
    background: rgba(215,235,254,1.00);
    display: flex;
	justify-content: center;
    align-items: center;
}
@media screen and (max-width: 639px) {
ul.double li.center .says {
    width: calc(100% + 4px);
	height: calc(88px * 3);
}
}
ul.double_l li.icon_box:after {
  content: "";
  position: absolute;
  margin-top: 30px;
  left: 118px;
  border: 15px solid transparent;
  border-right: 15px solid rgba(215,235,254,1.00);
}
ul.double_r li.icon_box:after {
  content: "";
  position: absolute;
  margin-top: 30px;
  right: 118px;
  border: 15px solid transparent;
  border-left: 15px solid rgba(215,235,254,1.00);
}
@media screen and (min-width: 640px) and (max-width: 799px){
ul.double_l li.icon_box:after {
  content: "";
  position: absolute;
  margin-top: 30px;
  left:110px;
  border: 15px solid transparent;
  border-right: 15px solid rgba(215,235,254,1.00);
}
ul.double_r li.icon_box:after {
  content: "";
  position: absolute;
  margin-top: 30px;
  right: 110px;
  border: 15px solid transparent;
  border-left: 15px solid rgba(215,235,254,1.00);
}
}
@media screen and (max-width: 639px) {
ul.double_l li.icon_box:after {
  content: "";
  position: absolute;
  margin-top: 30px;
  left: 86px;
  border: 15px solid transparent;
  border-right: 15px solid rgba(215,235,254,1.00);
}
ul.double_r li.icon_box:after {
  content: "";
  position: absolute;
  margin-top: 30px;
  right: 86px;
  border: 15px solid transparent;
  border-left: 15px solid rgba(215,235,254,1.00);
}
}

ul.double li.center {
	position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 639px) {
ul.double li.center {
    width: 100%;
}
}