body {
	font-family: 'Avenir', Arial, Tahoma, Verdana, Roboto, Helvetica, 'Droid Sans', "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "メイリオ", Meiryo, sans-serif;
}

pre {
	/* Mozilla */
	white-space: -moz-pre-wrap;
	
	/* Opera 4-6 */
	white-space: -pre-wrap;
	
	/* Opera 7 */
	white-space: -o-pre-wrap;
	
	/* CSS3 */
	white-space: pre-wrap;
	
	/* IE 5.5+ */
	word-wrap: break-word;
}

.mypage_image {
    width: 100%;
    margin: auto;
    color: #ffffff;
    background-color: #333399;
}

.mypage_image1 {
    width: 100%;
    margin: auto;
    color: #ffffff;
    background-color: #000000; /* ブラック */
}

.mypage_image2 {
    width: 100%;
    margin: auto;
    color: #ffffff;
    background-color: #24140e; /* ブラウン */
}

.mypage_image3 {
    width: 100%;
    margin: auto;
    color: #ffffff;
    background-color: #0066ff; /* ブルー */
}

.mypage_image4 {
    width: 100%;
    margin: auto;
    color: #ffffff;
    background-color: #104e1f; /* グリーン */
}

.mypage_image5 {
    width: 100%;
    margin: auto;
    color: #121212;
    background-color: #f3981d; /* オレンジ */
}

.mypage_image6 {
    width: 100%;
    margin: auto;
    color: #ffffff;
    background-color: #301339; /* パープル */
}

.mypage_image7 {
    width: 100%;
    margin: auto;
    color: #ffffff;
    background-color: #ff7db7; /* ピンク */
}

.mypage_image8 {
    width: 100%;
    margin: auto;
    color: #ffffff;
    background-color: #d10000; /* レッド */
}

.mypage_image9 {
    width: 100%;
    margin: auto;
    color: #121212;
    background-color: #fcc800; /* イエロー */
}

.mypage_image10 {
    width: 100%;
    margin: auto;
    color: #6a6a6a;
    background-color: #ffffff; /* ホワイト */
}

.title_bar1 {
    text-align: left;
    font-size: 2rem;
    color: #000000;
    background-color: #e1e1e1; /* ブラック */
}

.title_bar2 {
    text-align: left;
    font-size: 2rem;
    color: #44230F;
    background-color: #AD9077; /* ブラウン */
}

.title_bar3 {
    padding: 0 1rem;
    text-align: left;
    font-size: 2rem;
    color: #0066ff;
    background-color: #ffffff; /* ブルー */
}

.title_bar4 {
    text-align: left;
    font-size: 2rem;
    color: #104E1F;
    background-color: #E8E8E8; /* グリーン */
}

.title_bar5 {
    text-align: left;
    font-size: 2rem;
    color: #FF9000;
    background-color: #ffffff; /* オレンジ */
}

.title_bar6 {
    text-align: left;
    font-size: 2rem;
    color: #C65FE6;
    background-color: #E8E8E8; /* パープル */
}

.title_bar7 {
    text-align: left;
    font-size: 2rem;
    color: #E34189;
    background-color: #ffffff; /* ピンク */
}

.title_bar8 {
    text-align: left;
    font-size: 2rem;
    color: #D10000;
    background-color: #ffffff; /* レッド */
}

.title_bar9 {
    text-align: left;
    font-size: 2rem;
    color: #763911;
    background-color: #FFFDCC; /* イエロー */
}

.title_bar10 {
    text-align: left;
    font-size: 2rem;
    color: #767676;
    background-color: #EEEEEE; /* ホワイト */
}

.chkbox {
	margin:			0 0 10px 20px;
}
/* ラベルのスタイル　*/
.chkbox label {
	padding-left:		4rem;			/* ラベルの位置 */
	font-size:		3rem;
	line-height:		3rem;
	display:		inline-block;
	cursor:			pointer;
	position:		relative;
}

/* ボックスのスタイル */
.chkbox label:before {
	content:		'';
	width:			3rem;			/* ボックスの横幅 */
	height:			3rem;			/* ボックスの縦幅 */
	display:		inline-block;
	position:		absolute;
	left:			0;
	background-color:	#fff;
	box-shadow:		inset 1px 2px 3px 0px #000;
	border-radius:		16px 16px 16px 16px;
}
/* 元のチェックボックスを表示しない */
.chkbox input[type=checkbox] {
	display:		none;
}
/* チェックした時のスタイル */
.chkbox input[type=checkbox]:checked + label:before {
	content:		'\2713';		/* チェックの文字 */ 
	font-size:		3rem;			/* チェックのサイズ */
	color:			#fff;			/* チェックの色 */
	background-color:	#06f;			/* チェックした時の色 */
}