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

/*	loop
============================== */
article.loop{
	border-bottom: 2px dashed #dbdbdb;
}
article.last{
	border-bottom: 3px solid #dbdbdb;
}
@media all and (min-width: 768px) {
article.loop{
	margin-bottom: 2em;
	padding-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;
}
#chara01 h2{ background-image:url(../chara/img/name01.jpg);}
#chara02 h2{ background-image:url(../chara/img/name02.jpg);}
#chara03 h2{ background-image:url(../chara/img/name03.jpg);}
#chara04 h2{ background-image:url(../chara/img/name04.jpg);}
#chara05 h2{ background-image:url(../chara/img/name05.jpg);}
#chara06 h2{ background-image:url(../chara/img/name06.jpg);}
#chara07 h2{ background-image:url(../chara/img/name07.jpg);}
#chara08 h2{ background-image:url(../chara/img/name08.jpg);}
#chara09 h2{ background-image:url(../chara/img/name09.jpg);}
#chara10 h2{ background-image:url(../chara/img/name10.jpg?20190704);}
#chara11 h2{ background-image:url(../chara/img/name11.jpg);}
#chara12 h2{ background-image:url(../chara/img/name12.jpg);}
#chara13 h2{ background-image:url(../chara/img/name13.jpg?20190722);}
#chara14 h2{ background-image:url(../chara/img/name14.jpg?20190722);}
#chara15 h2{ background-image:url(../chara/img/name15.jpg?20190714);}
#chara16 h2{ background-image:url(../chara/img/name16.jpg);}
#chara17 h2{ background-image:url(../chara/img/name17.jpg);}
#chara18 h2{ background-image:url(../chara/img/name18.jpg);}
#chara19 h2{ background-image:url(../chara/img/name19.jpg);}
#chara20 h2{ background-image:url(../chara/img/name20.jpg);}
#chara21 h2{ background-image:url(../chara/img/name21.jpg);}
#chara22 h2{ background-image:url(../chara/img/name22.jpg);}
#chara23 h2{ background-image:url(../chara/img/name23.jpg);}
#chara24 h2{ background-image:url(../chara/img/name24.jpg);}
#chara25 h2{ background-image:url(../chara/img/name25.jpg);}
#chara26 h2{ background-image:url(../chara/img/name26.jpg);}
#chara27 h2{ background-image:url(../chara/img/name27.jpg);}
#chara28 h2{ background-image:url(../chara/img/name28.jpg);}
#chara29 h2{ background-image:url(../chara/img/name29.jpg);}
#chara30 h2{ background-image:url(../chara/img/name30.jpg);}
#chara31 h2{ background-image:url(../chara/img/name31.jpg);}
#chara33 h2{ background-image:url(../chara/img/name33.jpg);}

@media all and (min-width: 768px) {
article.loop h2{
	width:580px;
	height:70px;
}
}
@media all and (max-width: 767px) {
article.loop h2{
	padding-top: 12.0689%;
	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: 580px;
}
div.text_area p{
	text-align: justify;
	text-justify: distribute;
	margin-top: 20px;
	padding:0 15px 0 10px;
	line-height:30px;
}
}
@media all and (max-width: 767px) {
div.text_area p{
	line-height:27px;
	padding: 0 5px;
}
}

/*	pics
============================== */
div.pic_area_l span{
	display: block;
    background-repeat: no-repeat;
    background-color: #fafb37;
    box-shadow: 4px 4px #fafb37;
}
@media all and (min-width: 768px) {
div.pic_area_l span{
	margin: 0px 30px 0px 0;
	float: left;
}
div.pics span{ width: 260px; height: 345px; background-size: 260px 345px;}
}
@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: 332px; background-size: 250px 332px;}
}

/* button */
.button,.button2{display:block;text-align:center;}
.button a{display:block;margin:0 auto;}
.button2 a{display:block;margin:0 auto;}
.button a {display: block;cursor: pointer;margin: 0 auto;padding: 30px; color: #000;font-size:160%;text-align: center;text-decoration: none;font-weight: 800;border-radius: 50px;
                       background-color: #fafb37;box-shadow: 0 6px 0 #d4d4d4, 0 12px 0 rgba(0,0,0,0.1);-webkit-transition: color 0.3s,
                       background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;}
.button a:hover {background-color: #fafb37; box-shadow: 0 3px 0 #d4d4d4, 0 6px 0px rgba(0,0,0,0.1); -webkit-transform: translateY(3px);transform: translateY(3px);}
.button a:active {color: #1e1e1e;background-color: #fafb37;box-shadow: 0 0 0 #d4d4d4, 0 0 0px rgba(0,0,0,0.1);-webkit-transform: translateY(6px);transform: translateY(6px);transition-duration: 0.1s;}

.button2 a {display: block;cursor: pointer;margin: 0 auto;padding: 30px; color: #000;font-size:160%;text-align: center;text-decoration: none;font-weight: 800;border-radius: 50px;
                       background-color: #fafb37;box-shadow: 0 6px 0 #d4d4d4, 0 12px 0 rgba(0,0,0,0.1);-webkit-transition: color 0.3s,
                       background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;}
.button2 a:hover {background-color: #fafb37; box-shadow: 0 3px 0 #d4d4d4, 0 6px 0px rgba(0,0,0,0.1); -webkit-transform: translateY(3px);transform: translateY(3px);}
.button2 a:active {color: #1e1e1e;background-color: #fafb37;box-shadow: 0 0 0 #d4d4d4, 0 0 0px rgba(0,0,0,0.1);-webkit-transform: translateY(6px);transform: translateY(6px);transition-duration: 0.1s;}


@media all and (min-width: 768px) {
.button a{display:block;width:380px; padding:20px 0;font-size:140%; line-height:100%;margin:20px auto 40px;}
.button2 a{display:block;width:600px; padding:20px 0;font-size:140%; line-height:100%;margin:30px auto 0;}
}
@media all and (max-width: 767px) {
.button a{display:block;width:70%; padding:1em 0;font-size:100%; line-height:100%;margin:1.5em auto 2em;font-weight:bold;}
.button2 a{display:block;width:90%; padding:1em;font-size:100%; line-height:100%;margin:1.5em auto 0;font-weight:bold;}
}