/*	IMPORT RESET	*/
@import url("reset.css");
/*	IMPORT BASIC	*/
@import url("basic.css");
/*	<header><footer><nav>ｿｰｽのｲﾝﾎﾟｰﾄ	*/
@import url("nav.css");
/*	ﾌﾚｯｸｽﾎﾞｯｸｽのｲﾝﾎﾟｰﾄ	*/
@import url("co-flexbox.css");

body {
	position: relative;
}
/*--------------------------------------------------------
	ｺﾝﾃﾝﾂ部分の設定
----------------------------------------------------------*/
.chara_info {
	background-image: url("../img/pattern11.png");
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
.content {
	width: 98%;
	border: solid 3px #353FBC;
	border-radius: 10px;
}
p.chara {	/*地本3兄弟それぞれの紹介で使用*/
	font-size: 22px;
	line-height:1.5;
	text-indent: 1em;
}
p.dai {		/*地本3兄弟種類ごとの紹介(題)で使用*/
	font-size: 20px;
	line-height:1.5;
	text-align: center;
}
p.num {		/*番号付きpで使用*/
	padding-left:2em;
	text-indent:-1em;
	line-height:1.3;
}
p.setu {	/*地本3兄弟種類ごとの紹介(番号以外)で使用*/
	text-indent: 1em;
	margin: 0 3px;
	line-height:1.3;
}
@media screen and (max-width: 786px) {
p.chara {
	font-size: 18px;
	line-height:1.3;
}}
@media screen and (max-width: 520px) {
p.chara {
	font-size: 16px;
}}
@media screen and (max-width: 464px) {
p.chara {
	font-size: 13px;
}
p.dai {
	font-size: 16px;
	line-height:1.5;
}
p.num {	
	font-size: 13px;
	line-height:1.3;
}
p.setu {
	font-size: 13px;
	line-height:1.3;
}}
/*	chara.htmlで使用のFlexbox	 */
ul.chara {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}
ul.chara li {
	width: 33%;
	text-align: center;
	font-size: 36px;
	line-height: 1.0em;		/*　行間の調整　*/
	border: solid 1px #000;
}
ul.chara img {
	max-width: 100%;
}
ul.chara li.kawa {
	color: #336600;
	background-image: url("../img/pattern7.png");
	margin: 3px 0;
}
ul.chara li.tai {
	color: #030F2C;
	background-image: url("../img/pattern8.png");
	margin: 3px 0;
}
ul.chara li.koma {
	color: #353FBC;
	background-image: url("../img/pattern10.png");
	margin: 3px 0;
}
/*	地本3兄弟それぞれの紹介で使用のFlexbox	 */
ul.height {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	justify-content: space-around;
}
ul.height li {
	border: solid 1px #000;
	width: 32%;
	padding-bottom:6px;
	background-image: url("../img/pattern11.png");
	margin: 3px 0;
}
ul.height img {
	max-width: 100%;
}
@media screen and (orientation:portrait){
ul.chara {
	-webkit-flex-direction: column; 
	flex-direction: column;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
ul.chara li {
	width: 99%;
	margin: 0 auto;
}
ul.height {
	-webkit-flex-direction: column; 
	flex-direction: column;
}
ul.height li {
	width: 99%;
	margin: 2px auto;
}}
@media screen and (max-width: 414px) {
ul.chara li {
	font-size: 28px;
}}