@charset "UTF-8";



.flow {
	text-align:left;
	margin:1% auto 3%;
}

.flow .spblock {
	margin-bottom:5em;
}

.flow p {
	font-size:25px;
	margin:2% 0;
}

.flow p:before {
	content: '';
	margin: 0 0.5em 0 0;
	background: #ff579c;
	border: solid 2px #fff;
	width: 10px;
	height: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 0 0 0 1px #ff579c;
	-webkit-box-shadow: 0 0 0 1px #ff579c;
	-moz-box-shadow: 0 0 0 1px #ff579c;
	display: inline-block;
}

@media screen and (max-width:767px){
	.flow p {
		font-size:17px;
	}
}

.flow ul {
	display:flex;
	margin:2% 0;
}

.flow ul li {
	width:17%;
	padding:2%;
	margin-left:6%;
	border:dotted #ffd900;
	border-radius:10px;
	position:relative;
}

.flow ul li:first-child {
	margin-left:0;
}

.flow ul li:before {
	position: absolute;
	top: 45%;
	left: -22%;
	content: '';
	border-bottom: solid 10px transparent;
	border-top: solid 10px transparent;
	border-left: solid 20px #ff579c;
	border-right: solid 20px transparent;
	z-index: -1;
}

.flow li:first-child:before {
	display:none;
}

.flow ul li img {
	width:100%;
}

.flow ul li span {
	display:block;
	text-align:center;
}

@media screen and (max-width:767px){
	.flow ul {
		flex-wrap:wrap;
	}

	.flow ul li {
		width:35%;
		margin-left:9%;
		margin-bottom:1%;
	}

	.flow ul li:before {
		left:-18%;
	}

	.flow .pcflow ul li:first-child {
		margin-left:9%;
	}

}

.flowtxt {
	font-weight:500;
	font-size:120%;
}

.flowtxt .hding {
	font-size:130%;
}


.flowtxt span {
	display:block;
	margin-top:1em;
	color:#ff579c;
}

@media screen and (max-width:767px){
	.flowtxt {
		font-size:13px;
	}

	.flowtxt .hding {
		font-size:120%;
	}
}


.idbtn {
	text-align:center;
}

.idbtn a {
	background:#ff00ac;
	color:#fff;
	padding:1% 2%;
	margin:5% auto;
	display:inline-block;
	font-size:25px;
	border-radius:20px;
	text-align:center;
}

.sptxt {
	font-size:15px;
}

.sptxt span {
	color:#c22;
	display:block;
	margin:1em 0 0;
	font-size:80%;
}

@media screen and (max-width:767px){
	.sptxt {
		font-size:13px;
	}
}

h3 {
	position:static;
	display:inline-block;
	text-align:left;
	margin:0;
}

.discript {
	font-size:150%;
	text-align:left;
}

.discript h2 {
	font-size:150%;
	font-weight:800;
	margin-bottom:2%;
}

.discript p {
	line-height:1.5em;
}

.discript p em {
	font-weight:500;
}

.flowimg {
	position:relative;
}

.flowimg a {
	position:absolute;
	bottom:15%;
	right:0;
	display:block;
	width:40%;
}

.flowimg a img {
	width:100%;
}

@media screen and (max-width:767px){
	.flowimg ul {
		width:95%;
		margin:3% auto;
	}
	.flowimg ul li:first-child {
		margin-left:5%;
	}

	.flowimg a {
		position:static;
		width:90%;
		margin:2% auto;
	}
}


.area_list {
	text-align:left;
	background:url(../img/map_jp.png) no-repeat;
	background-size:contain;
}

.area_list ul {
	display:flex;
	flex-wrap:wrap;
	margin:1% 0 3%;
}

.area_list ul li {
	width:12.28%;
	margin:0.5%;
	padding:0.5%;
	text-align:center;
	background:rgba(208,201,182,0.6);
	border-radius:10px;
	font-size:130%;
}

.area_list ul li a {
	color:#000;
}

.area_list ul li span {
	display:block;
}

@media screen and (max-width:767px){
	.area_list ul li {
		width:23%;
	}
}

.disp{
	font-size:150%;
	margin:0 auto 3%;
}

.disp p {
	margin-bottom:1em;
}



.disp span {
	font-size:80%;
}

.disp p.stamp:before {
	content:'';
	background:url(../../img/stamp.png) no-repeat;
	background-size:contain;
	height:30px;
	width:30px;
	display:inline-block;
	vertical-align:middle;
}

.serchbox {
	position:static;
	transform:translate(0,0);
	margin: 2% auto;
}




.flex {
	display:flex;
	font-size:200%;
}

.ranking {
	line-height:1.5em;
	width:50%;
}

.charakind {
	width:50%;
	font-size:60%;
	font-weight:normal;
}

span.rank {
	font-size:150%;
	margin-right:0.5em;
}

span.rank strong {
	font-size:200%;
	font-family: 'Coiny', cursive;
}

@media screen and (max-width:767px){
	span.rank{
		font-size:120%;
	}
}

@media screen and (max-width:340px){
	span.rank{
		font-size:100%;
	}
}


.charaname {
	background:url(../../img/menu_bg.jpg);
	background-size:30px;
	padding:0.5% 0;
	position:relative;
}

.charaname h4 {
	font-size:300%;
	margin:0;
}

.charaname h4 span {
	display:block;
	font-size:70%;
}

.charaname h4 span.en {
	font-family: 'Coiny', cursive;
}

span.kind {
	background:#f76924;
	padding:1% 2%;
	border-radius:20px;
	color:#fff;
	margin-right:1em;
}

.charasns {
	position:absolute;
	top:100%;
}

.charaimage {
	margin-top:5%;
}


.charaimage img {
	width:60%;
	margin:0 auto;
}

.txt {
	text-align:left;
	margin-top:2em;
	font-size:130%;
}

.txt p {
	margin-bottom:1em;
}

.txt a {
	display:block;
	background:#ff00ac;
	color:#fff;
	padding:0.5%;
	font-size:200%;
	border-radius:10px;
	font-weight:800;
	text-align:center;
	margin:2em auto;
}

.block{
	margin:5% 0;
}

h5 {
	font-size:23px;
	padding:0.5% 0;
	background:url(../../img/block_bg.jpg);
	background-size:30px;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight:600;
	margin:0;
	text-align:left;
	color:#000;
}

h5 span {
	display:block;
	width:800px;
	margin:0 auto;
}

@media screen and (max-width:800px){
	h5 span {
		width:95%;
	}
}

@media screen and (max-width:767px){
	h5 {
		font-size:17px;
		background:url(../../img/menu_bg.jpg);
		background-size:30px;
		width:95%;
		margin:2% auto;
		border-radius:20px;
	}

	.charaname h4 {
		font-size:150%;
	}

	.charasns {
		left:80%;
	}

	.charasns ul {
		width:110px;
	}

	.flex {
		font-size:140%;
	}

	.txt {
		font-size:100%;
	}

	span.kind {
		margin-right:2%;
	}
	.charaimage {
		margin-top:5%;
	}

}