@charset "UTF-8";

/* ****************************************************************** 

	--common.css--
	
	0. BoxModel change

	1. Common setting
		1-1. Reset styles
		1-2. Font styles
		1-3. General styles
		1-4. Text styles
		1-5. List styles
		1-6. CSS3 common styles

	2. Responsive setting
		2-1. Fluid grid styles
		2-2. Tablet grid styles
		2-3. Mobile grid styles

****************************************************************** */

/*==================================================================
	0. BoxModel change
===================================================================*/
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}


/*==================================================================
	1. Common setting
===================================================================*/

/* ------------------------------------------------------------------
	1-1. Reset styles
-------------------------------------------------------------------*/
html {
	overflow-x:hidden;
	background:#FFF;
}
body {
	overflow-x:hidden;
	-webkit-text-size-adjust:none;
	-ms-text-size-adjust:none;
	word-wrap:break-word;
	font-family:"ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, object, iframe, pre, code, p, blockquote, form, fieldset, legend, table, th, td, caption, tbody, tfoot, thead, article, aside, figure, footer, header, hgroup, menu, nav, section, audio, video, canvas {
	margin:0;
	padding:0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, menu { display:block; }
audio:not([controls]) {
	display:none;
	height:0;
}
[hidden] { display:none; }
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img { border:none; }
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal;
}
ul, ol, menu { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after { content:''; }
abbr, acronym {
	border:none;
	font-variant:normal;
}
sup { vertical-align:text-top; }
sub { vertical-align:text-bottom; }
input, textarea, select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
legend { color:#000; }
a img, map a { border:none; }
a:hover, a:active, a:focus { outline:0; }
embed { width:100%; }
audio, canvas, video { display:inline-block; }
audio:not([controls]) {
	display:none;
	height:0;
}
img, object, embed {
	max-width:100%;
	height:auto;
}
object, embed { height:100%; }
img {
	-ms-interpolation-mode:bicubic;
}

/* Font styles
-------------------------------------------------------------------*/
body { font:13px/1.231 Verdana, Arial, sans-serif; }
select, input, button, textarea, button { font:99% arial, sans-serif; }
table {
	font-size:inherit;
	font:100%;
}
pre, code, kbd, samp, tt {
	font-family:monospace;
	line-height:1;
}

/* General styles
-------------------------------------------------------------------*/
table { empty-cells:show; }
input { line-height:1; }
form img, input, select { vertical-align:middle; }
textarea { resize:none; }
select { padding:1px; }
label { margin-right:5px; }
legend { display:none; }
input[type="text"], input[type="password"], textarea {
	padding:3px 4px 0 3px;
	border:1px solid #999;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
	font-size:13px;
}


/* ------------------------------------------------------------------
	1-2. VisualFormattingModel styles
-------------------------------------------------------------------*/
.noDisplay { display:none; }
.block { display:block !important; }
.inline { display:inline !important; }
.inlineBlock { display:inline-block !important; }
.static { position:static !important; }
.relative { position:relative !important; }
.absolute { position:absolute !important; }
.fixed { position:fixed !important; }
.leftBox { float:left; }
.rightBox { float:right; }
.nofloat { float:none !important; }
.clearfix { zoom:1; }
.clearfix:after {
	display:block;
	clear:both;
	content:"";
}
.clear { clear:both !important; }
a.hover:hover,
input.hover:hover {
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
}


/* ------------------------------------------------------------------
	1-3. BoxModel styles
-------------------------------------------------------------------*/
.auto {
	margin-right:auto !important;
	margin-left:auto !important;
}
.mt0, .mv0, .ma0 { margin-top:    0 !important; }
.mr0, .mh0, .ma0 { margin-right:  0 !important; }
.mb0, .mv0, .ma0 { margin-bottom: 0 !important; }
.ml0, .mh0, .ma0 { margin-left:   0 !important; }
.pt0, .pv0, .pa0 { padding-top:   0 !important; }
.pr0, .ph0, .pa0 { padding-right: 0 !important; }
.pb0, .pv0, .pa0 { padding-bottom:0 !important; }
.pl0, .ph0, .pa0 { padding-left:  0 !important; }
.mt5, .mv5, .ma5 { margin-top:    5px !important; }
.mr5, .mh5, .ma5 { margin-right:  5px !important; }
.mb5, .mv5, .ma5 { margin-bottom: 5px !important; }
.ml5, .mh5, .ma5 { margin-left:   5px !important; }
.pt5, .pv5, .pa5 { padding-top:   5px !important; }
.pr5, .ph5, .pa5 { padding-right: 5px !important; }
.pb5, .pv5, .pa5 { padding-bottom:5px !important; }
.pl5, .ph5, .pa5 { padding-left:  5px !important; }
.mt10, .mv10, .ma10 { margin-top:    10px !important; }
.mr10, .mh10, .ma10 { margin-right:  10px !important; }
.mb10, .mv10, .ma10 { margin-bottom: 10px !important; }
.ml10, .mh10, .ma10 { margin-left:   10px !important; }
.pt10, .pv10, .pa10 { padding-top:   10px !important; }
.pr10, .ph10, .pa10 { padding-right: 10px !important; }
.pb10, .pv10, .pa10 { padding-bottom:10px !important; }
.pl10, .ph10, .pa10 { padding-left:  10px !important; }
.mt20, .mv20, .ma20 { margin-top:    20px !important; }
.mr20, .mh20, .ma20 { margin-right:  20px !important; }
.mb20, .mv20, .ma20 { margin-bottom: 20px !important; }
.ml20, .mh20, .ma20 { margin-left:   20px !important; }
.pt20, .pv20, .pa20 { padding-top:   20px !important; }
.pr20, .ph20, .pa20 { padding-right: 20px !important; }
.pb20, .pv20, .pa20 { padding-bottom:20px !important; }
.pl20, .ph20, .pa20 { padding-left:  20px !important; }
.mt30, .mv30, .ma30 { margin-top:    30px !important; }
.mr30, .mh30, .ma30 { margin-right:  30px !important; }
.mb30, .mv30, .ma30 { margin-bottom: 30px !important; }
.ml30, .mh30, .ma30 { margin-left:   30px !important; }
.pt30, .pv30, .pa30 { padding-top:   30px !important; }
.pr30, .ph30, .pa30 { padding-right: 30px !important; }
.pb30, .pv30, .pa30 { padding-bottom:30px !important; }
.pl30, .ph30, .pa30 { padding-left:  30px !important; }
.mt40, .mv40, .ma40 { margin-top:    40px !important; }
.mr40, .mh40, .ma40 { margin-right:  40px !important; }
.mb40, .mv40, .ma40 { margin-bottom: 40px !important; }
.ml40, .mh40, .ma40 { margin-left:   40px !important; }
.pt40, .pv40, .pa40 { padding-top:   40px !important; }
.pr40, .ph40, .pa40 { padding-right: 40px !important; }
.pb40, .pv40, .pa40 { padding-bottom:40px !important; }
.pl40, .ph40, .pa40 { padding-left:  40px !important; }
.bt0, .ba0 { border-top:none !important; }
.br0, .ba0 { border-right:none !important; }
.bb0, .ba0 { border-bottom:none !important; }
.bl0, .ba0 { border-left:none !important; }


/* ------------------------------------------------------------------
	1-4. Text styles
-------------------------------------------------------------------*/
strong, .bold { font-weight:bold; }
.italic { font-style:italic; }
.note {
	margin-left:1.0em;
	text-indent:-1.0em;
}
.f10 { font-size:77%; }
.f11 { font-size:85%; }
.f12 { font-size:93%; }
.f14 { font-size:108%; }
.f15 { font-size:116%; }
.f16 { font-size:123.1%; }
.f17 { font-size:131%; }
.f18 { font-size:138.5%; }
.f19 { font-size:146.5%; }
.f20 { font-size:153.9%; }
.f21 { font-size:161.6%; }
.f22 { font-size:167%; }
.f23 { font-size:174%; }
.f24 { font-size:182%; }
.f25 { font-size:189%; }
.f26 { font-size:197%; }
.red { color:#C00; }
.white { color:#FFF; }
.grayC { color:#CCC; }
.gray9 { color:#999; }
.gray6 { color:#666; }
.gray3 { color:#333; }
.black { color:#000; }
.middle { vertical-align:middle !important; }
.center { text-align:center !important; }
.left { text-align:left !important; }
.right { text-align:right !important; }
.underline { text-decoration:underline !important; }


/* ------------------------------------------------------------------
	1-5. List styles
-------------------------------------------------------------------*/
.disc {
	padding-left:2em;
	list-style:disc;
}
.circle {
	padding-left:2em;
	list-style:circle;
}
.decimal {
	padding-left:2.4em;
	list-style:decimal;
}

/* InlineList styles
-------------------------------------------------------------------*/
.inlineList dt,
.inlineList dd,
.inlineList li {
	display:inline;
	padding-right:5px;
}
.inlineBlockList dt,
.inlineBlockList dd,
.inlineBlockList li {
	display:inline-block;
	padding-right:5px;
}

/* DlLine styles
-------------------------------------------------------------------*/
.dlLine { zoom:1; }
.dlLine dt {
	float:left;
	margin-right:10px;
	padding:4px 0;
}
.dlLine dd {
	padding:4px 0;
	border-bottom:1px #CCC solid;
}
.dlLine dd:after {
	display:block;
	clear:both;
	content:"";
}


/* ------------------------------------------------------------------
	1-6. CSS3 common styles
-------------------------------------------------------------------*/
.boxShadow {
	-webkit-box-shadow:0 0 5px #DDD;
	box-shadow:0 0 5px #DDD;
	behavior:url(/js/PIE.php);
}
.textShadowW {
	text-shadow:0 1px 0 #E7E7E7;
	-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#E7E7E7,offx=0,offy=1)";
}
.textShadowB {
	text-shadow:0 1px 0 #111;
	-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#111111,offx=0,offy=1)";
}
.radius5 {
	border-radius:5px;
	behavior:url(/js/PIE.php);
}
.radius10 {
	border-radius:10px;
	behavior:url(/js/PIE.php);
}


/*==================================================================
	2 Responsive setting
===================================================================*/

/* ------------------------------------------------------------------
	2-1. Fluid grid styles
-------------------------------------------------------------------*/
.row {
	max-width:960px;
	margin:0 auto;
	*zoom:1;
}
.row { width:960px\9; }
.row:not(:target) { width:auto\9; }
.row .collapse { padding:0 !important; }
.row .row {
	width:auto;
	max-width:none;
	min-width:0;
	margin:0 -10px;
}
.row:before, .row:after {
	display:table;
	content:"";
}
.row:after { clear:both; }
.columns {
	position:relative; 
	float:left;
	min-height:1px;
	padding:0 10px;
	height:100%;
	float:expression((this.parentNode.lastChild == this)?'right':'left');
}
.columns:last-child { float:right; }
.columns:first-child { float:left; }
.columns.centered {
	float:none;
	margin:0 auto;
}
.grid1, .row .grid1 { width:8.33333%; }
.grid2, .row .grid2 { width:16.66667%; }
.grid3, .row .grid3 { width:25%; }
.grid4, .row .grid4 { width:33.33333%; }
.grid5, .row .grid5 { width:41.66667%; }
.grid6, .row .grid6 { width:50%; }
.grid7, .row .grid7 { width:58.33333%; }
.grid8, .row .grid8 { width:66.66667%; }
.grid9, .row .grid9 { width:75%; }
.grid10, .row .grid10 { width:83.33333%; }
.grid11, .row .grid11 { width:91.66667%; }
.grid12, .row .grid12 { width:100%; }
.grid1Left { margin-left:8.33333%; }
.grid2Left { margin-left:16.66667%; }
.grid3Left { margin-left:25%; }
.grid4Left { margin-left:33.33333%; }
.grid5Left { margin-left:41.66667%; }
.grid6Left { margin-left:50%; }
.grid7Left { margin-left:58.33333%; }
.grid8Left { margin-left:66.66667%; }
.grid9Left { margin-left:75%; }
.grid10Left { margin-left:83.33333%; }
.grid11Left { margin-left:91.66667%; }
.grid1Push { left:8.33333%; }
.grid1Pull { left:8.33333%; }
.grid2Push { left:16.66667%; }
.grid2Pull { right:16.66667%; }
.grid3Push { left:25%; }
.grid3Pull { right:25%; }
.grid4Push { left:33.33333%; }
.grid4Pull { right:33.33333%; }
.grid5Push { left:41.66667%; }
.grid5Pull { right:41.66667%; }
.grid6Push { left:50%; }
.grid6Pull { right:50%; }
.grid7Push { left:58.33333%; }
.grid7Pull { right:58.33333%; }
.grid8Push { left:66.66667%; }
.grid8Pull { right:66.66667%; }
.grid9Push { left:75%; }
.grid9Pull { right:75%; }
.grid10Push { left:83.33333%; }
.grid10Pull { right:83.33333%; }
.grid11Push { left:91.66667%; }
.grid11Pull { right:91.66667%; }


/* ------------------------------------------------------------------
	2-2. Tablet grid styles
-------------------------------------------------------------------*/
@media only screen and (min-width:481px) and (max-width:768px) {
	body {
		width:100%;
		min-width:0;
		margin-left:0;
		margin-right:0;
		padding-left:0;
		padding-right:0;
	}
	.row {
		width:auto;
		min-width:0;
		margin-left:0;
		margin-right:0;
	}
	.columns {
		width:auto !important;
		float:none;
	}
	.columns:last-child { float:none; }
	.columns:first-child { float:none; }
	.columns:before, .columns:after {
		display:table;
		content:"";
	}
	.columns:after { clear:both; }
	.grid1Left, .grid2Left, .grid3Left, .grid4Left, .grid5Left, .grid6Left, .grid7Left, .grid8Left, .grid9Left, .grid10Left, .grid11Left { margin-left:0; }
	.grid1Push, .grid2Push, .grid3Push, .grid4Push, .grid5Push, .grid6Push, .grid7Push, .grid8Push, .grid9Push, .grid10Push, .grid11Push { left:auto; }
	.grid1Pull, .grid2Pull, .grid3Pull, .grid4Pull, .grid5Pull, .grid6Pull, .grid7Pull, .grid8Pull, .grid9Pull, .grid10Pull, .grid11Pull { right:auto; }
	.row .grid1Tablet {
		float:left;
		width:25% !important;
		padding:0 10px;
	}
	.row .grid1Tablet:last-child { float:right; }
	.row .grid2Tablet {
		float:left;
		width:50% !important;
		padding:0 10px;
	}
	.row .grid2Tablet:last-child { float:right; }
	.row .grid3Tablet {
		float:left;
		width:75% !important;
		padding:0 10px;
	}
	.row .grid3Tablet:last-child { float:right; }
	.row .grid4Tablet {
		float:left;
		width:100% !important;
		padding:0 10px;
	}
	.row .grid4Tablet:last-child { float:right; }
	.row .gridThirdsTablet {
		float:left;
		width:33.33333% !important;
		padding:0 10px;
	}
	.row .gridThirdsTablet:last-child { float:right; }
	.grid1TabletPush { left:25%; }
	.grid1TabletPull { right:25%; }
	.grid2TabletPush { left:50%; }
	.grid2TabletPull { right:50%; }
	.grid3TabletPush { left:75%; }
	.grid3TabletPull { right:75%; }
	.row .centered {
		float:none !important;
		margin:0 auto;
	}
}


/* ------------------------------------------------------------------
	2-3. Mobile grid styles
-------------------------------------------------------------------*/
@media only screen and (max-width:480px) {
	body {
		width:100%;
		min-width:0;
		margin-left:0;
		margin-right:0;
		padding-left:0;
		padding-right:0;
	}
	.row {
		width:auto;
		min-width:0;
		margin-left:0;
		margin-right:0;
	}
	.columns {
		width:auto !important;
		float:none;
	}
	.columns:last-child { float:none; }
	.columns:first-child { float:none; }
	.columns:before, .columns:after {
		display:table;
		content:"";
	}
	.columns:after { clear:both; }
	.grid1Left, .grid2Left, .grid3Left, .grid4Left, .grid5Left, .grid6Left, .grid7Left, .grid8Left, .grid9Left, .grid10Left, .grid11Left { margin-left:0; }
	.grid1Push, .grid2Push, .grid3Push, .grid4Push, .grid5Push, .grid6Push, .grid7Push, .grid8Push, .grid9Push, .grid10Push, .grid11Push { left:auto; }
	.grid1Pull, .grid2Pull, .grid3Pull, .grid4Pull, .grid5Pull, .grid6Pull, .grid7Pull, .grid8Pull, .grid9Pull, .grid10Pull, .grid11Pull { right:auto; }
	.row .grid1Mobile {
		float:left;
		width:25% !important;
		padding:0 10px;
	}
	.row .grid1Mobile:last-child { float:right; }
	.row .grid2Mobile {
		float:left;
		width:50% !important;
		padding:0 10px;
	}
	.row .grid2Mobile:last-child { float:right; }
	.row .grid3Mobile {
		float:left;
		width:75% !important;
		padding:0 10px;
	}
	.row .grid3Mobile:last-child { float:right; }
	.row .grid4Mobile {
		float:left;
		width:100% !important;
		padding:0 10px;
	}
	.row .grid4Mobile:last-child { float:right; }
	.row .gridThirdsMobile {
		float:left;
		width:33.33333% !important;
		padding:0 10px;
	}
	.row .gridThirdsMobile:last-child { float:right; }
	.grid1MobilePush { left:25%; }
	.grid1MobilePull { right:25%; }
	.grid2MobilePush { left:50%; }
	.grid2MobilePull { right:50%; }
	.grid3MobilePush { left:75%; }
	.grid3MobilePull { right:75%; }
	.row .centered {
		float:none !important;
		margin:0 auto;
	}
}

.loading .line {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background-color: #CCC;
}
.loading .line:nth-last-child(1) {
	animation: loading 0.6s 0.1s linear infinite;
}
.loading .line:nth-last-child(2) {
	animation: loading 0.6s 0.2s linear infinite;
}
.loading .line:nth-last-child(3) {
	animation: loading 0.6s 0.3s linear infinite;
}

@keyframes loading {
	0 {
	  transform: translate(0, 0);
	}
	50% {
	  transform: translate(0, 15px);
	}
	100% {
	  transform: translate(0, 0);
	}
}