@charset "utf-8";

/* page.css */


h1 {
	display:none;
}

#mainInr #charmNavi {
	margin:0 0 40px 0;
	padding:20px 0 0;
	background:url(../images/title.png) left top no-repeat;
	background-size:25% auto;
}

#mainInr #charmNavi ul {
	float:left;
	width:50%;
}

#mainInr #charmNavi li {
	float:left;
	width:50%;
	padding:4% 2% 0;
	box-sizing:border-box;
}

#mainInr .item {
	margin:25px 1% 40px;
	padding:0 0 20px 20px;
	border-left:1px solid #333333;
	border-bottom:1px solid #333333;
}

#mainInr .item .itemHead {
	position:relative;
}

#mainInr .item .itemHead p {
	position:absolute;
	left:0;
	top:-25px;
	width:15%;
	min-width:130px;
}

#mainInr .item .itemHead h2 {
	display:inline-block;
	margin:0 0 30px 145px;
	padding:10px 20px;
	border-radius:8px;
	background-color:#4f86c5;
	color:#ffffff;
}

#mainInr .item .itemHead h2.cs {
	background-color:#a3ccaa;
	color:#333333;
}
#mainInr .item .itemHead h2.ms {
	background-color:#e78c8e;
	color:#333333;
}
#mainInr .item .itemHead h2.ns {
	background-color:#87c5dc;
	color:#333333;
}

#mainInr .item .itemHead h2 strong{
	display:block;
	font-size: 1.25rem;
	font-weight:bold;
}

#mainInr .item .itemHead h2 span:first-child {
	margin-right:2em;
}

#mainInr .item .leftClm {
	float:left;
	width:58%;
	line-height:1.6;
}

#mainInr .item .leftClm h3 {
	font-size: 1.25rem;
	font-weight:bold;
	color:#1d76bc;
}

#mainInr .item .leftClm p {
	margin:1em 0 0;
}

#mainInr .item .leftClm dl {
	margin:1em 0 0 0;
	color:#000000;
}

#mainInr .item .leftClm dt {
	float:left;
	clear:both;
	width:5em;
}

#mainInr .item .rightClm {
	float:right;
	width:40%;
}

#mainInr .item .rightClm ul li {
	padding:0 0 1em;
}

#mainInr .item .rightClm ul li:last-of-type {
	padding:0;
}

#mainInr .item .rightClm ul li em{
	display:block;
	margin:3px 0 0;
	font-size:0.75rem;
	color:#000000;
}

/* charm 02 */

#mainInr #charm02.item i{
	margin-left:0.5em;
	color:#666666;
}

#mainInr #charm02.item dl {
	clear:both;
	margin:0;
	padding:1em 0 0;
	color:#000000;
}

#mainInr #charm02.item dt {
	float:left;
	clear:both;
	width:5em;
}

/* charm 04 */

#mainInr #charm04.item .itemHead h2 a {
	font-weight:bold;
	color:#333333;
}

#mainInr #charm04.item .itemHead h2 a:hover {
	text-decoration:none;
	color:#ffffff;
}


#mainInr #charm04.item .itemHead h2 a:after {
	content: "\f04b";
	margin-left:0.3em;
	font-family: FontAwesome;
	font-size: 1.063rem;
	color:#ffffff;
}

/* charm 06 */

#mainInr #charm06.item h3 {
	margin:0 0 1em;
	font-size: 1.25rem;
	font-weight:bold;
	color:#1d76bc;
}

#mainInr #charm06.item ul li:nth-of-type(1) {
	float:left;
	width:49%;
}

#mainInr #charm06.item ul li:nth-of-type(2) {
	float:right;
	width:49%;
}

#mainInr #charm06.item ul li img {
	width:400px;
}

#mainInr #charm06.item ul li em{
	display:block;
	margin:3px 0 0;
	font-size:0.875rem;
	color:#000000;
}

#mainInr #charm06.item ul li em a {
	color:#000000;
}

#mainInr #charm06.item ul li em a:hover {
	text-decoration:none;
	color:#00b0ec;
}


#mainInr #charm06.item ul li em a:after {
	content: "\f04b";
	margin-left:0.3em;
	font-family: FontAwesome;
	font-size:0.875rem;
	color:#00b0ec;
}


/* charm 08 */

#mainInr #charm08.item .leftClm {
	width:80%;
}

#mainInr #charm08.item .leftClm ul {
}

#mainInr #charm08.item .leftClm ul li{
	margin:16px 0 0;
	padding:6px;
	border:1px solid #0e6eb8;
	border-radius:10px;
	text-align:center;
	font-size: 1.25rem;
}

#mainInr #charm08.item .leftClm ul li strong {
	color:#000000;
}

#mainInr #charm08.item .leftClm ul li:nth-of-type(1){
	border:1px solid #fcc800;
	background-color:#fcc800;
	color:#000000;
}

#mainInr #charm08.item .leftClm ul li:nth-of-type(2){
	margin-top:24px;
}

#mainInr #charm08.item .leftClm ul li:nth-of-type(5){
	margin-top:24px;
	border:1px solid #ea617c;
	background-color:#ea617c;
	font-weight:bold;
	color:#ffffff;
}

/* charm 09 */

#mainInr #charm09.item .leftClm {
	width:80%;
}

#mainInr #charm09.item .leftClm > div {
	margin:1em 0 0;
	padding:14px;
}

#mainInr #charm09.item .leftClm > div h4 {
	margin:0;
	font-size:1.25rem;
	color:#bf1e2d;
}

#mainInr #charm09.item .leftClm > div:nth-of-type(1){
	background-color:#fffabc;
}

#mainInr #charm09.item .leftClm > div:nth-of-type(1) dt {
	width:14em;
}

#mainInr #charm09.item .leftClm > div:nth-of-type(1) dd {
	margin-left:14em;
}

#mainInr #charm09.item .leftClm > div:nth-of-type(2){
	background-color:#d3edfb;
}

#mainInr #charm09.item .leftClm > div:nth-of-type(2) dt {
	width:12em;
	padding-left:1em;
}

#mainInr #charm09.item .leftClm p {
	font-size:1.125rem;
	color:#000000;
}

#mainInr #charm09.item .leftClm p strong{
	color:#ef4137;
}

#mainInr #charm09.item .leftClm p i{
	margin-left:0.5em;
	color:#666666;
}

@media only screen and (max-width: 640px) {

#mainInr #charmNavi {
	padding:20px 0 0;
	background-size:50% auto;
}

#mainInr #charmNavi ul {
	float:none;
	width:100%;
}

#mainInr #charmNavi li {
	float:left;
	width:50%;
	padding:2% 1% 0;
	box-sizing:border-box;
}

#mainInr .item {
	margin:15px 1% 45px;
	padding:0 0 20px 0;
	border-left:0 solid #333333;
	border-bottom:1px solid #333333;
}

#mainInr .item .itemHead p {
	position:absolute;
	left:0;
	top:-15px;
	width:15%;
	min-width:100px;
}

#mainInr .item .itemHead h2 {
	margin:0 0 30px 110px;
	padding:10px 20px;
}

#mainInr .item .itemHead h2 strong{
	display:block;
	font-size: 1.125rem;
}

#mainInr .item .itemHead h2 span {
	font-size:0.875rem;
}

#mainInr .item .itemHead h2 span:first-child {
	margin-right:1em;
}

#mainInr .item .leftClm {
	float:none;
	width:100%;
	margin:0 0 20px;
}

#mainInr .item .leftClm dt {
	float:none;
	width:100%;
}

#mainInr .item .rightClm {
	float:none;
	width:100%;
}

/* charm 02 */

#mainInr #charm02.item dl {
	clear:both;
	margin:0;
	padding:1em 0 0;
	color:#000000;
}

#mainInr #charm02.item dt {
	float:none;
	width:100%;
}

/* charm 06 */

#mainInr #charm06.item ul li:nth-of-type(1) {
	margin:0 0 1em;
	float:none;
	width:100%;
}

#mainInr #charm06.item ul li:nth-of-type(2) {
	float:none;
	width:100%;
}

/* charm 08 */

#mainInr #charm08.item .leftClm {
	width:100%;
	margin:0;
}

#mainInr #charm08.item .leftClm ul {
}

#mainInr #charm08.item .leftClm ul li{
	margin:14px 0 0;
	padding:6px;
	border:1px solid #0e6eb8;
	border-radius:10px;
	text-align:left;
	font-size: 1rem;
}

#mainInr #charm08.item .leftClm ul li span,
#mainInr #charm08.item .leftClm ul li strong {
	display:block;
}

#mainInr #charm08.item .leftClm ul li:nth-of-type(1){
	border:1px solid #fcc800;
	background-color:#fcc800;
	color:#000000;
}

#mainInr #charm08.item .leftClm ul li:nth-of-type(2){
	margin-top:20px;
}

#mainInr #charm08.item .leftClm ul li:nth-of-type(5){
	margin-top:20px;
	border:1px solid #ea617c;
	background-color:#ea617c;
	font-weight:bold;
	color:#ffffff;
}

/* charm 09 */

#mainInr #charm09.item .leftClm {
	width:100%;
	margin:0;
}

#mainInr #charm09.item .leftClm > div {
	margin:1em 0 0;
	padding:12px;
}

#mainInr #charm09.item .leftClm > div h4 {
	font-size:1.125rem;
}

#mainInr #charm09.item .leftClm > div:nth-of-type(1){
	background-color:#fffabc;
}

#mainInr #charm09.item .leftClm > div:nth-of-type(1) dd {
	margin-left:0;
}

#mainInr #charm09.item .leftClm > div:nth-of-type(2) dt {
	float: left;
	padding-left:0;
}

#mainInr #charm09.item .leftClm p {
	font-size:1.0rem;
}

}