@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: base.css
 * Summary:   ベーススタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    html & body
 *     =2    box model styles
 *     =3    text styles
 *     =4    img styles
 *     =5    link styles
 *     =6    list styles
 *     =7    heading styles
 *     =8    table styles
 *     =9    other selectors
 *     =10    general styles
 *       =10-1    float/align
 *       =10-2    margin-bottom
 *       =10-3    padding-top
 *       =10-4    form
 *       =10-5    clearfix
 *
 * ===============================================================
*/



/** =1
 * ========================================
 * html & body
 * ========================================
 */

html {
	height: 100%;
	font-size: 62.5%;  /* 基準10px=1em */
}

body {
	height: 100%;
	color: #555555;
	font-size: 16px;  /* CSS3未対応ブラウザ対策 */
	font-size: 1.6rem;  /* CSS3単位 実質14px */
	font-family:"メイリオ", Meiryo,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.6;
	word-break: break-all;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 735px) {
		html {
		}

		body {
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 736px) {
		html {
		}

		body {
		}
	}



/** =2
 * ========================================
 * box model styles
 * ========================================
 */

article {
	clear: both;
}

section {
	clear: both;
	margin: 0 10px 10px;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 735px) {
		article {
		}

		section {
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 736px) {
		article {
		}

		section {
		}
	}



/** =3
 * ========================================
 * text styles
 * ========================================
 */

strong {
	font-weight: bold;
}

.red{color:#d95555;}
.blue{color:#145096;}
.green{color:#59a529;}
.gray{color:#8c8c8c;}
.brown{color: #573a27;}
.orange{color:#e47100;}

.fs10{ font-size:10px; font-size: 1.0rem;}
.fs11{ font-size:11px; font-size: 1.1rem;}
.fs12{ font-size:12px; font-size: 1.2rem;}
.fs13{ font-size:13px; font-size: 1.3rem;}
.fs16{ font-size:16px; font-size: 1.6rem;}
.fs18{ font-size:18px; font-size: 1.8rem;}
.fs20{ font-size:20px; font-size: 2.0rem;}
.fs22{ font-size:22px; font-size: 2.2rem;}
.fs30{ font-size:30px; font-size: 3.0rem;}



/** =4
 * ========================================
 * img styles
 * ========================================
 */

img{
	vertical-align: bottom;
}


/** =5
 * ========================================
 * link styles
 * ========================================
 */

a, a:link, a:visited, a:hover, a:active {
	text-decoration: underline;
	outline: none;
}
a {
	color: #0000FF;
}
a:visited {
	color: #800080;
}
a:hover {
	color: #FF0000;
}
a:active {
	color: #FF0000;
}

a.opacity {
	-moz-transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
a.opacity:hover {
	filter: alpha(opacity=40);
    -moz-opacity:0.40;
    opacity:0.40;
}



/** =6
 * ========================================
 * list styles
 * ========================================
 */

ul li {
	list-style-type: none;
}
ol li {
	list-style-type: decimal;
}



/** =7
 * ========================================
 * heading styles
 * ========================================
 */

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}



/** =8
 * ========================================
 * table styles
 * ========================================
 */

table {
	border-collapse: collapse;
}

th {
	font-weight: bold;
}



/** =9
 * ========================================
 * other selectors
 * ========================================
 */

hr {
	clear: both;
}



/** =10
 * ========================================
 * general styles
 * ========================================
 */

	/** =10-1
	 * float/align
	 * ----------------------------------
	 */
	.flo_left {
		float: left;
	}
	.flo_right {
		float: right;
	}

	.txt_left {
		text-align: left;
	}
	.txt_center {
		text-align: center;
	}
	.txt_right {
		text-align: right;
	}


	/** =10-2
	 * margin-bottom
	 * ----------------------------------
	 */
	.mb5{margin-bottom:5px;}
	.mb10{margin-bottom:10px;}
	.mb15{margin-bottom:15px;}
	.mb20{margin-bottom:20px;}
	.mb30{margin-bottom:30px;}
	.mb40{margin-bottom:40px;}
	.mb50{margin-bottom:50px;}
	.mb60{margin-bottom:60px;}
	.mb70{margin-bottom:70px;}
	.mb80{margin-bottom:80px;}
	.mb150{margin-bottom:150px;}


	/** =10-3
	 * padding-top
	 * ----------------------------------
	 */
	.p-t10{padding-top:10px;}
	.p-t20{padding-top:20px;}
	.p-t30{padding-top:30px;}
	.p-t40{padding-top:40px;}
	.p-t50{padding-top:50px;}
	.p-t60{padding-top:60px;}
	.p-t70{padding-top:70px;}
	.p-t80{padding-top:80px;}


	/** =10-4
	 * form
	 * ----------------------------------
	 */

	.btn {
		cursor: pointer;
	}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 735px) {
		input.txt,
		textarea {
			max-width: 100%;
		}
	}


	/** =10-5
	 * clearfix
	 * ----------------------------------
	 */

	/* For modern browsers */
	.clearfix:before,
	.clearfix:after,
	.cf:before,
	.cf:after {
		display: table;
		content: "";
	}

	.clearfix:after,
	.cf:after {
		clear: both;
	}

	/* For IE 6/7 (trigger hasLayout) */
	.clearfix,
	.cf {
		zoom: 1;
	}