@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%;
	background: url(/17/src/pc/image/common/bg.jpg) center 0 ;
	font-size: 62.5%;  /* 基準10px=1em */
}

body {
	height: 100%;
	background: url(/17/src/pc/image/common/bgTop.png) center 0 no-repeat;
	color: #333;
	font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: 14px;  /* CSS3未対応ブラウザ対策 */
	font-size: 1.4rem;  /* CSS3単位 実質14px */
	line-height: 1.6;
	word-break: break-all;
	overflow-x: hidden;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		html,body {
			height: auto;
		}
		html {
			background-size: 150%;
		}
		body {
			background-size:150% auto;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		html,body {
			height: auto;
		}
		html {
			background-size: 200%;
		}
		body {
			background-size:150% auto;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		html,body {
			height: auto;
		}
	}


#body-inner {
	position: relative;
	background:url(/17/src/pc/image/common/bgBottom.png) center bottom no-repeat;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#body-inner {
			overflow: hidden;
			background-size:130% auto;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#body-inner {
			overflow: hidden;
			background-size:120% auto;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#body-inner {
		}
	}


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

article {
	clear: both;
	margin: 0 0 20px 0;
}

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

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

		section {
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		article {
		}

		section {
		}
	}

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

		section {
		}
	}


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

strong,.strong,.fwBold {
	font-weight: bold;
}

.red{color:#bb0000;}
.blue{color:#145096;}
.green{color:#026346;}
.gray{color:#8c8c8c;}
.brown{color: #573a27;}
.orange{color:#e47100;}
.white{color:#fff;}
.cream{color:#ffed87;}

.fs8{ font-size:8px; font-size: 0.8rem;}
.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;}
.fs14{ font-size:14px; font-size: 1.4rem;}
.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;}

.fwBold { font-weight: bold;}


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

img{
	vertical-align: bottom;
}


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

a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	outline: none;
}
a {
	color: #0a678e;
}
a:visited {
	color: #800080;
}
a:hover {
	color: #FF0000;
}
a:active {
	color: #FF0000;
}
a.white{
	color: #fff;
}

a.underLine{
	text-decoration: underline;
}

a.opacity,a.animation {
	-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=70);
    -moz-opacity:0.70;
    opacity:0.70;
}

a.dummy {
	cursor: default;
}



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

ul li {
	list-style-type: none;
}
ul.disc{
	padding-left: 17px;
}
ul.disc li{
	list-style: disc;
}
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;
	margin: 0 0 20px;
	width:100%;
	background:#fff;
}

th, td {
	border: 1px solid #CCCCCC;
    border-collapse: collapse;
    padding: 7px;
    vertical-align: middle;
}

th {
	background: #a89554;
    color: #FFFFFF;
    text-align: center;
    width: 10em;
}


	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		th {
			width: 5em;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		th {
		}
		br.sp{
			display: none;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		th {
		}
		br.sp{
			display: none;
		}
	}



/** =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;}
	.p-t90{padding-top:90px;}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		.p-t30{padding-top:20px;}
	}

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

	.btn {
		cursor: pointer;
	}

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



	/** =10-1
	 * display
	 * ----------------------------------
	 */

	.displayInlineBlock {
		display: inline-block;
	}
	.displayInline {
		display: inline;
	}
	.displayBlock {
		display: block;
	}
	.displayNone {
		display: none;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			.displayPc {
				display: none !important;
			}
			.displaySp {
				display: inherit;
			}
		}

		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			.displayPc {
				display: inherit;
			}
			.displaySp {
				display: none !important;
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			.displayPc {
				display: inherit;
			}
			.displaySp {
				display: none !important;
			}
		}



	/** =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;
	}