@charset "UTF-8";

/*----------------------------------------------------
 charameshi01
------------------------------------------------------*/
/* chara_head */
#kosodate_wrap .chara_wrap h3 img{
	width: 490px;
	margin: 22px 0 0;
}
#kosodate_wrap .chara_wrap .chara_head > p{
	margin-top: 40px;
}
#kosodate_wrap .chara_wrap .chara_head .anc{
	margin: 40px 0 0 143px;
}
#kosodate_wrap .chara_wrap .chara_head .anc2{
	margin: 24px 0 0 132px;
}
#kosodate_wrap .chara_wrap .chara_head .anc li,
#kosodate_wrap .chara_wrap .chara_head .anc2 li{
	float: left;
	margin-right: 40px;
}
#kosodate_wrap .chara_wrap .chara_head .anc li:nth-child(1){
	width: 162px;
}
#kosodate_wrap .chara_wrap .chara_head .anc li:nth-child(2){
	width: 165px;
}
#kosodate_wrap .chara_wrap .chara_head .anc li:nth-child(3){
	width: 254px;
}
#kosodate_wrap .chara_wrap .chara_head .anc2 li:nth-child(1){
	width: 236px;
}
#kosodate_wrap .chara_wrap .chara_head .anc2 li:nth-child(2){
	width: 190px;
}
#kosodate_wrap .chara_wrap .chara_head .anc2 li:nth-child(3){
	width: 180px;
}
#kosodate_wrap .chara_wrap .chara_head .anc li img,
#kosodate_wrap .chara_wrap .chara_head .anc2 li img{
	width: 100%;
}
#kosodate_wrap .chara_wrap .chara_head .sub{
	margin: 25px 0 0 50%;
}

#kosodate_wrap .chara_wrap .chara_head .sub li:nth-child(1){
	width: 172px;
	margin-left: -86px;
}
#kosodate_wrap .chara_wrap .chara_head .sub li img{
	width: 100%;
}

#kosodate_wrap .chara_wrap .box_head{
	margin-top: 35px;
	padding: 18px 30px 18px 60px;
	border-radius: 10px 10px 0 0;
}
#kosodate_wrap .chara_wrap .point dt img,
#kosodate_wrap .chara_wrap h4 img{
	width: 100%;
}
#kosodate_wrap .chara_wrap .box_head h5{
	width: 800px;
	margin: 0 0 20px 0;
}
#kosodate_wrap .chara_wrap .box_head h5 img{
	padding-top: 7px;
}
#kosodate_wrap .chara_wrap .box_head dl{
	width: 800px;
}

#kosodate_wrap .chara_wrap .box_head dt{
	clear: left;
	float: left;
	background-color: #fff;
	width: 3em;
	margin: 0 10px 0 0;
	text-align: center;
	color: #e81b2d;
}
#kosodate_wrap .chara_wrap .box_head dt:first-child{
	margin-bottom: 6px;
}
#kosodate_wrap .chara_wrap .box_head dd{
	float: left;
}


/* p1 */
#kosodate_wrap .chara_wrap #p1 .box_head h5 img{
	width: 216px;
}

#kosodate_wrap .chara_wrap .template_dl{
	width: 280px;
	margin: 30px auto 0;
	border-radius: 10px;
	height: 56px;
	background: url(../../../img/ico-download_w.gif) no-repeat 96% 50% #e81b2d;
}

#kosodate_wrap .chara_wrap .template_dl:hover{
	opacity: 0.5;
}
#kosodate_wrap .chara_wrap .template_dl a{
	display: block;
	width: 280px;
	line-height: 1.2;
	text-align: center;
	font-size: 114%;
	color: #fff;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#kosodate_wrap .chara_wrap .link li a:hover{
	opacity: 1;
}


/* p2 */
#kosodate_wrap .chara_wrap #p2 .box_head h5 img{
	width:221px;
}

/* p3 */
#kosodate_wrap .chara_wrap #p3 .box_head h5 img{
	width:334px;
}

/* p4 */
#kosodate_wrap .chara_wrap #p4 .box_head h5 img{
	width:305px;
}

/* p5 */
#kosodate_wrap .chara_wrap #p5 .box_head h5 img{
	width:287px;
}

/* box */
#kosodate_wrap .chara_wrap .box h4{
	width: 216px;
}
#kosodate_wrap .charameshi .box h3 img{
	width: 100%;
}


@media screen and (max-width: 768px) {
	/* chara_head */
	#kosodate_wrap .chara_wrap h3 img{
		margin: 4% 0;
		width: 75%;
	}
	#kosodate_wrap .chara_wrap .chara_head > p{
		width: 28%;
		margin: 6% auto 0;
	}
	#kosodate_wrap .chara_wrap .chara_head .anc{
		margin: 4% 0 0 0;
	}
	#kosodate_wrap .chara_wrap .chara_head .anc2{
		margin: 0;
	}
	#kosodate_wrap .chara_wrap .chara_head .anc li,
	#kosodate_wrap .chara_wrap .chara_head .anc2 li{
		float: none;
		margin-right: 0;
		margin-bottom: .5em;
	}
	#kosodate_wrap .chara_wrap .chara_head .anc li:nth-child(1){
		width: 60%;
		margin-right: 0;
	}
	#kosodate_wrap .chara_wrap .chara_head .anc li:nth-child(2){
		width: 61%;
	}
	#kosodate_wrap .chara_wrap .chara_head .anc li:nth-child(3){
		width: 91%;
	}
	#kosodate_wrap .chara_wrap .chara_head .anc2 li:nth-child(1){
		width: 82%;
	}
	#kosodate_wrap .chara_wrap .chara_head .anc2 li:nth-child(2){
		width: 68%;
	}
	#kosodate_wrap .chara_wrap .chara_head .anc2 li:nth-child(3){
		width: 63%;
		margin-left: 13%;
	}
	#kosodate_wrap .chara_wrap .chara_head .anc li img{
		width: 100%;
	}
	#kosodate_wrap .chara_wrap .chara_head .sub{
		margin: 4% 0 0 0;
	}
	#kosodate_wrap .chara_wrap .chara_head .sub li{
		float: none;
		margin: 0 0 .5em 12%;
	}
	#kosodate_wrap .chara_wrap .chara_head .sub li:nth-child(1){
		width: 63%;
	}
	#kosodate_wrap .chara_wrap .chara_head .sub li:nth-child(2){
		width: 54%;
	}
	#kosodate_wrap .chara_wrap .chara_head .sub li:nth-child(3){
		width: 51%;
	}
	#kosodate_wrap .chara_wrap .chara_head .sub li img{
		width: 100%;
	}
	#kosodate_wrap .chara_wrap .box_head{
		margin-top: 5%;
		padding: 4%;
	}
	#kosodate_wrap .chara_wrap .box_head h5,
	#kosodate_wrap .chara_wrap .box_head dl{
		float: none;
		width: 100%;
	}
	#kosodate_wrap .chara_wrap .box_head dl{
		margin-top: 6%;
	}
	#kosodate_wrap .chara_wrap .box_head dt{
		margin: 0 2% 0 0;
		font-size: 78%;
	}
	#kosodate_wrap .chara_wrap .box_head dt:first-child{
		margin-bottom: 1%;
	}
	#kosodate_wrap .chara_wrap .box_head dd{
		/*float: left;*/
		width: 82%;
		margin-bottom: 1%;
		font-size: 80%;
	}
	/* p1 */
	#kosodate_wrap .chara_wrap #p1 .box_head h5 img{
		width: 60%;
	}
	#kosodate_wrap .chara_wrap .template_dl{
		width: 98%;
		margin: 4% auto 0;
		height: 4em;
	}
	#kosodate_wrap .chara_wrap #p1 .step{
		padding: 6% 4% 4%;
	}
	
	/* p2 */
	#kosodate_wrap .chara_wrap #p2 .box_head h5 img{
		width: 61%;
	}

	/* p3 */
	#kosodate_wrap .chara_wrap #p3 .box_head h5 img{
		width: 92%;
	}

	/* p4 */
	#kosodate_wrap .chara_wrap #p4 .box_head h5 img{
		width: 82%;
	}

	/* p5 */
	#kosodate_wrap .chara_wrap #p5 .box_head h5 img{
		width: 68%;
	}

	/* box */
	#kosodate_wrap .chara_wrap .box h4{
		width: 54%;
	}
	#kosodate_wrap .charameshi .box h3 img{
		width: 100%;
	}

}







