@charset "utf-8";

/* smartphone */
@media screen and (max-width: 768px){

	#cartoon1 { margin: 10px 0 0; }
	#cartoon1 li:not(:last-child){
		margin: 0 0 12px;
	}
	#cartoon1 li a.roundbt {
		display: block;
		text-align: center;
		line-height: 1.4;
	}
	
	figure.cartoon img {
		width: 100%;
		height: auto;
	}

	.cartoon2 { margin: 16px 0 0; }
	.cartoon2 h3 {
		color: #03265e;
		font-size:1.4rem;
		margin: 0 0 5px;
	}
	.cartoon2 h3:before {
		font-family: "FontAwesome";
		content: "\f111";
		margin: 0 2px 0 0;
	}
	.cartoon2 dl {
		width: 100%;
		border-top: 1px #ccc solid;
		border-right: 1px #ccc solid;
		border-left: 1px #ccc solid;
	}
	.cartoon2 dl:last-child {
		border-bottom: 1px #ccc solid;
	}
	.cartoon2 dl dt {
		line-height: 1.6;
		vertical-align: middle;
		padding: 12px;
	}
	.cartoon2 dl dt:first-child {
		float: left;
		width: 100px;
	}
	.cartoon2 dl dt:last-child {
		float: right;
		
	}
	.cartoon2 dl dt img { vertical-align: middle; }
	.cartoon2 dl dd {
		background: #efefef;
		border-top: 1px #ccc solid;
		text-align: center;
		padding: 6px;
		clear: both;
	}

}

/* PC */
@media screen and (min-width: 769px){

	#cartoon1 { margin: 10px 0 0; }
	#cartoon1 li:not(:last-child){
		margin: 0 0 12px;
	}
	#cartoon1 li a.roundbt {
		display: block;
	}

	.cartoon2 { margin: 20px 0 0; }
	.cartoon2 h3 {
		color: #03265e;
		font-size:1.6rem;
		margin: 0 0 5px;
	}
	.cartoon2 h3:before {
		font-family: "FontAwesome";
		content: "\f111";
		margin: 0 2px 0 0;
	}
	.cartoon2 dl {
		display: table;
		width: 100%;
		border-top: 1px #ccc solid;
		border-right: 1px #ccc solid;
		border-left: 1px #ccc solid;
	}
	.cartoon2 dl:last-child {
		border-bottom: 1px #ccc solid;
	}
	.cartoon2 dl dt,
	.cartoon2 dl dd {
		display: table-cell;
		vertical-align: middle;
		padding: 12px;
		-webkit-box-sizing : border-box;
		-moz-box-sizing : border-box;
		box-sizing : border-box;
	}
	.cartoon2 dl dt { line-height: 1.6; }
	.cartoon2 dl dt:first-child { 
		width: 112px;
		padding: 12px 0 12px 12px;
	}
	.cartoon2 dl dt img { vertical-align: middle; }
	.cartoon2 dl dd {
		width: 164px;
		background: #efefef;
		border-left: 1px #ccc solid;
		text-align: center;
		padding: 12px;
	}

}