/* =================================
	character CSS
================================= */
@media all and (min-width: 768px) {
.character div.contents{
	padding: 30px 50px 45px;
}
}

/*	group_menu
============================== */
div.group_menu li{
	float: left;
}
div.group_menu li a{
	display: block;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
@media all and (min-width: 768px) {
div.group_menu{
	width: 894px;
	height: 82px;
	margin: 20px auto 0;
	background-image:url(../img/character/group_menu.png);
	position: relative;
}
div.group_menu li a{
	width: 205px; 
	height: 82px;
}
li.m_group1 a{ position:absolute; left:18px; top:0px;}
li.m_group2 a{ position:absolute; left:236px; top:0px;}
li.m_group3 a{ position:absolute; left:454px; top:0px;}
li.m_group4 a{ position:absolute; left:672px; top:0px;}
.group1 li.m_group1 a,li.m_group1 a:hover{ background-image:url(../img/character/group_menu.png); background-position:-18px -82px;}
.group2 li.m_group2 a,li.m_group2 a:hover{ background-image:url(../img/character/group_menu.png); background-position:-236px -82px;}
.group3 li.m_group3 a,li.m_group3 a:hover{ background-image:url(../img/character/group_menu.png); background-position:-454px -82px;}
.group4 li.m_group4 a,li.m_group4 a:hover{ background-image:url(../img/character/group_menu.png); background-position:-672px -82px;}
}
@media all and (max-width: 767px) {
div.group_menu{
	margin: 0 15px 0px;
	padding-bottom: 15px;
	border-bottom: 2px solid #07446d;
}
div.group_menu li{
	margin:5px 0 0;
	width: 49%;
	float: left;
    margin-right: 2%;
}
div.group_menu ul li:nth-child(2n){
    margin-right: 0%;
}
li.m_group1 a{ background-image:url(../img/character/group_smp_menu1.png);}
li.m_group2 a{ background-image:url(../img/character/group_smp_menu2.png);}
li.m_group3 a{ background-image:url(../img/character/group_smp_menu3.png);}
li.m_group4 a{ background-image:url(../img/character/group_smp_menu4.png);}
.group1 li.m_group1 a{ background-image:url(../img/character/group_smp_menu1_m.png);}
.group2 li.m_group2 a{ background-image:url(../img/character/group_smp_menu2_m.png);}
.group3 li.m_group3 a{ background-image:url(../img/character/group_smp_menu3_m.png);}
.group4 li.m_group4 a{ background-image:url(../img/character/group_smp_menu4_m.png);}
div.group_menu li a {
    height: 0;
    display: block;
    background-size:100% 100%;
    padding-top: 29.2682%;
    position: relative;
    overflow: hidden;
    transition: color 0.3s;
}
div.group_menu li a span{
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
}

/*	group
============================== */
.group1{
	padding: 0 0 30px;
}

/*	loop
============================== */
article.loop{
	border-bottom: 2px dashed #07446d;
}
article.last{
	border-bottom: 3px solid #07446d;
}
@media all and (min-width: 768px) {
article.loop{
	margin-bottom: 2em;
	padding-top: 20px;
	margin-top: -20px;
}
}
@media all and (max-width: 767px) {
article.loop{
	padding-bottom: 25px;
	padding-top: 5px;
	margin-top: -5px;
}
}

/*	name
============================== */
article.loop h2{
	text-indent:110%;white-space:nowrap;overflow:hidden;
	background-repeat:no-repeat;
}
.chara1_1 h2{ background-image:url(../img/character/name1_1.png);}
.chara1_2 h2{ background-image:url(../img/character/name1_2.png);}
.chara1_3 h2{ background-image:url(../img/character/name1_3.png);}
.chara1_4 h2{ background-image:url(../img/character/name1_4.png);}
.chara1_5 h2{ background-image:url(../img/character/name1_5.png);}
.chara1_6 h2{ background-image:url(../img/character/name1_6.png);}
.chara1_7 h2{ background-image:url(../img/character/name1_7.png);}
.chara1_8 h2{ background-image:url(../img/character/name1_8.png);}
.chara1_9 h2{ background-image:url(../img/character/name1_9.png);}
.chara1_10 h2{ background-image:url(../img/character/name1_10.png);}
.chara1_11 h2{ background-image:url(../img/character/name1_11.png);}
.chara1_12 h2{ background-image:url(../img/character/name1_12.png);}
.chara1_13 h2{ background-image:url(../img/character/name1_13.png);}
.chara1_14 h2{ background-image:url(../img/character/name1_14.png);}
.chara1_15 h2{ background-image:url(../img/character/name1_15.png);}

.chara2_1 h2{ background-image:url(../img/character/name2_1.png);}
.chara2_2 h2{ background-image:url(../img/character/name2_2.png);}
.chara2_3 h2{ background-image:url(../img/character/name2_3.png);}
.chara2_4 h2{ background-image:url(../img/character/name2_4.png);}
.chara2_5 h2{ background-image:url(../img/character/name2_5.png);}
.chara2_6 h2{ background-image:url(../img/character/name2_6.png);}
.chara2_7 h2{ background-image:url(../img/character/name2_7.png);}
.chara2_8 h2{ background-image:url(../img/character/name2_8.png);}
.chara2_9 h2{ background-image:url(../img/character/name2_9.png);}
.chara2_10 h2{ background-image:url(../img/character/name2_10_n.png?20171031);}
.chara2_11 h2{ background-image:url(../img/character/name2_11_n.png?20171031);}

.chara3_1 h2{ background-image:url(../img/character/name3_1.png);}
.chara3_2 h2{ background-image:url(../img/character/name3_2.png);}
.chara3_3 h2{ background-image:url(../img/character/name3_3.png);}

.chara4_1 h2{ background-image:url(../img/character/name4_1.png);}
.chara4_2 h2{ background-image:url(../img/character/name4_2.png);}
.chara4_3 h2{ background-image:url(../img/character/name4_3.png);}
@media all and (min-width: 768px) {
article.loop h2{
	width:520px;
	height:125px;
}
}
@media all and (max-width: 767px) {
article.loop h2{
	padding-top: 24.0384%;
	overflow: hidden;
	height: 0;
	/* 520×2250 0.5 */
	background-size: contain;
	margin:0 auto 15px;
}
}

/*	text
============================== */
@media all and (min-width: 768px) {
div.text_area{
	float: right;
	width: 520px;
}
div.text_area p{
	text-align: justify;
	text-justify: distribute;
	margin-top: 20px; 
	background-image:url(../img/character/line30.png);
	padding:0 15px 0 10px;
	line-height:30px;
}
}
@media all and (max-width: 767px) {
div.text_area p{
	background-image:url(../img/character/line27.png);
	line-height:27px;
	padding: 0 5px;
}
}

/*	No Print
============================== */
@media print {
div.pics{
	display: none;
}
}

/*	pics
============================== */
div.pic_area_l span{
	display: block;
    background-repeat: no-repeat;
    border: 2px solid #003b63;
    background-color: #003b63;
    box-shadow: 4px 4px #003b63;
}
@media all and (min-width: 768px) {
div.pic_area_l span{
	margin: 5px 30px 30px 0;
	float: left;
}
div.pics span{ width: 300px; height: 350px; background-size: 300px 350px;}
}
@media all and (max-width: 767px) {
div.pic_area_l span{
	margin: 25px auto 20px;
	display: block;
    background-repeat: no-repeat;
    background-position: center center;
}
div.pics span{ width: 250px; height: 292px; background-size: 250px 292px;}
}

/*	mini_tit2
============================== */
.mini_tit2{
	text-indent:110%;white-space:nowrap;overflow:hidden;
	background-repeat:no-repeat;
}
.miyazawa_family{ background-image:url(../img/character/mini_tit1.png);}
.kyouryoku{ background-image:url(../img/character/mini_tit2.png);}
.raibaru{ background-image:url(../img/character/mini_tit3.png?20171006);}
@media all and (min-width: 768px) {
.mini_tit2{
	width: 320px;
	height: 45px;
	margin: 0 auto 30px;
}
}
@media all and (max-width: 767px) {
.mini_tit2{
	width: 250px; height: 35px; 
	background-size: 250px 35px;
	margin: 30px auto 20px;
}
}