@charset "UTF-8";










/*
This CSS based on inuit.css @inuitcss
*/










/* !RESET ------------------------------------ */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
	display: block;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{ 
	border:0;
}
address,caption,cite,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
caption{
	font-weight:bold;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}










/* !MAIN ------------------------------------ */
html{
	font-size:75%;/* 12px */
	font-family:"Lucida Grande",Arial,sans-serif;
	line-height:1.667;/* 20px */
}

/* ページ全体を包む要素。ここでページサイズを設定します。 */
#page{
	width:940px;
}






/* !OOCSS Grid ------------------------------ */
.line:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.lastUnit:after{content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";visibility:hidden; clear:both;height:0 !important;display:block;line-height:0;}
.line{*zoom:1;}
.unit{float:left;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit {display: table-cell; *display:block;*zoom:1;float:none;_position:relative; _left:-3px; _margin-right: -3px;width:auto;}








/* !GRIDS ------------------------------------ */
.grids{
	margin-left:-20px;/* 内部要素のマージン分をネガティブマージンでキャンセル */
	overflow:visible;
	clear:both;
}
ul.grids{
	/* リストでも同様の挙動になるように */
	margin:0 0 0 -20px;
	list-style:none;
}
.grid{
	float:left;
	margin:0 20px 0 0;
}
.grids .grid{
	display:inline;
	margin:0 0 0 20px;
	zoom:1;
}











/* !CLEARFIX -------------------------- */
.cf,
.grids{
	zoom:1;
}
.cf:before,
.grids:before,
.cf:after,
.grids:after{
	content:"";
	display:block;
}
.cf:after,
.grids:after{
	clear:both;
}

/*
20グリッド設定（通常サイズ）
*/
.grid-1		{ width:28px; }
.grid-2		{ width:76px; }
.grid-3		{ width:124px; }
.grid-4		{ width:172px; }

.grid-5		{ width:220px; }
.grid-6		{ width:268px; }
.grid-7		{ width:316px; }
.grid-8		{ width:364px; }

.grid-9		{ width:412px; }
.grid-10	{ width:460px; }
.grid-11	{ width:508px; }
.grid-12	{ width:556px; }

.grid-13	{ width:604px; }
.grid-14	{ width:652px; }
.grid-15	{ width:700px; }
.grid-16	{ width:748px; }
.grid-17	{ width:796px; }
.grid-18	{ width:844px; }
.grid-19	{ width:892px; }
.grid-20	{ width:940px; margin:0; }

.grid-15per2{width:340px;}








/* !TYPE ------------------------------------ */
/*--- HEADING ---*/

h1{
	font-size:2em;			/* 24px */
	margin-bottom:.417em;	/* 10px */
}
h2{
	font-size:1.667em;		/* 20px */
	margin-bottom:.5em;		/* 10px */
}
h3{
	font-size:1.333em;		/* 16px */
	margin-bottom:.625em;	/* 10px */
}
h4{
	font-size:1.167em;		/* 14px */
	margin-bottom:.714em;	/* 10px */
}
h5{
	font-weight:bold;
}
h5,
h6{
	font-size:1em;			/* 12px */
	margin-bottom:.833em;	/* 10px */
}

/*--- PARAGRAPHS ---*/
p{
	margin-bottom:.833em;/* 10px */
}

/*--- LINKS ---*/

a{
	text-decoration:none;
}
/*
a:visited{
	opacity:0.8;
}
*/
a:hover{
	text-decoration:underline;
}
a:active{
	/* Give clicked links a depressed effect. */
	position:relative;
	top:1px;
}

/*--- LISTS ---*/
ul,
ol{
	margin:0 0 .833em 1.667em;
}
ul ul,
ol ol,
ul ol,
ol ul{
	/* リストの入れ子の場合はmargin-bottomを0 */
	margin:0 0 0 1.667em;
}
dl{
	margin-bottom:.833em;
}
dt{
	font-weight:bold;
}
dd{
	margin-left:1.667em;
}

/*--- GENERAL ---*/
q,
i,
em,
cite{
	font-style:italic;
	font-weight:inherit;
}
b,
strong{
	font-weight:bold;
	font-style:inherit;
}
mark{
	background:#ffc;
}
s,
del{
	text-decoration:line-through;
}
small{
	font-size:0.9em;
	line-height:1;
}

/*--- CODE ---*/
pre,
code{
	font-family:monospace;
	font-size:1em;
}
pre{
	overflow:auto;
	margin-bottom:.833em;
	line-height:24px; /* Having to define explicit pixel values :( */
}
code{
	line-height:1;
}
.caps{
	text-transform:uppercase;
}









/* !IMAGES ------------------------------------ */
img{
	/* altテキストの表示を調整 */
	font-style:italic;
	color:#c00;
	vertical-align: top;
}
/* float設定した画像のマージン */
img.left,
img.alignleft,
img.fl{ margin:0 20px 20px 0; }
img.right,
img.alignright,
img.fr{ margin:0 0 20px 20px; }

/*--- FLASH/VIDEO ---*/
object,
embed,
video{
	max-width:100%;
/* 	height:auto; */
}
p img{
	vertical-align:middle;
}










/* !FORMS ------------------------------------ */
fieldset{
	padding:10px;
	border:1px solid #ccc;
	margin-bottom:.833em;
}
label{
	/* ラベルをクリッカブルに魅せる */
	cursor:pointer;
}
/*
label:after,
label::after{
	content:":";
}
*/
input,
textarea{
	font-family:inherit;
	font-size:1em;
	line-height:1.5;
}
.check-list{
	width:100%;
	overflow:hidden;
	list-style:none;
	margin:0 0 1.667em 0;
}
.check-list li{
	width:25%;
	float:left;
}
.check-label{
	display:inline;
}
.check-label:after,
.check-label::after{
	/* チェックリストの場合は「:」表示をキャンセル */
	content:normal;
}
button,
.button{
	cursor:pointer;
}
fieldset > :last-child{
	/* Remove the margin from the last element in the fieldset--this makes our padding more consistent. */
	margin:0;
}










/* !TABLES ------------------------------------ */
/*
Unfortunately, and somewhat obviously, tables don’t fit the baseline all too well. Perhaps in a later version...
*/
table{
	border-collapse:collapse;
	border-spacing:0;
	margin-bottom:.833em;
	width:100%;
	max-width:100%;
}
th:empty{
	/* Hide the borders on any empty table-headers */
/* 	border:none; */
}
th,td{
	vertical-align:middle;
	padding:0.5em;
	border:1px solid #ccc;
}
th{
	font-weight:bold;
	text-align:center
}
table [colspan]{
	text-align:center;
}
table [rowspan]{
	vertical-align:middle;
}
[colspan="1"]{
	text-align:left;
}
[rowspan="1"]{
	vertical-align:top;
}
/*
tbody tr:nth-of-type(odd){
	background:rgba(0,0,0,0.05);
}
*/
tfoot{
	text-align:center;
}
tfoot td{
	border-top-width:2px;
}
table ul,
table ol{
	margin-bottom:0;
}








/* !MISC ------------------------------------ */
.accessibility{
	/* Hide content off-screen without hiding from screen-readers. N.B. This is not suited to RTL languages */
	position:absolute;
	left:-99999px;
}
.more-link:after{
	/* Too many people use » in their markup to signify progression/movement, that ain’t cool. Let’s insert that using content:""; */
	content:" »";
}










/* CLASSES ------------------------------------ */
/*
Some not-too-pretty and insementic classes to do odd jobs.
*/
.left,
img.alignleft	{ float:left; }
.right,
img.alignright	{ float:right; }
.clear	{ clear:both; float:none; }

.align-left,
.alignleft		{ text-align:left; }
.align-right,
.alignright		{ text-align:right; }
.align-center,
.aligncenter,
.align-centre	{ text-align:center; }

img.aligncenter {
	margin-left:auto;
	margin-right:auto;
}

.block{ margin-bottom:10px; }









/* !NARROW -------------------------------------------- */
@media (min-width: 741px) and (max-width: 980px){

#page{
	width:700px;
}

/*
.grids{
	width:720px;
}
*/

.grid-1		{ width:16px; }
.grid-2		{ width:52px; }
.grid-3		{ width:88px; }
.grid-4		{ width:124px; }

.grid-5		{ width:160px; }
.grid-6		{ width:196px; }
.grid-7		{ width:232px; }
.grid-8		{ width:268px; }

.grid-9		{ width:304px; }
.grid-10	{ width:340px; }
.grid-11	{ width:376px; }
.grid-12	{ width:412px; }

.grid-13	{ width:448px; }
.grid-14	{ width:484px; }
.grid-15	{ width:520px; }
.grid-16	{ width:556px; }

.grid-17	{ width:592px; }
.grid-18	{ width:628px; }
.grid-19	{ width:664px; }
.grid-20	{ width:700px; }

.grid-15per2{width:250px;}

img{
	max-width:100%;
	height:auto;
}

}
/* !End of NARROW -------------------------------------------- */











/* !MOBILE ------------------------------------ */
/*
CSS for mobile devices.
Linearise it!
*/

@media (max-width: 740px){
/* !MAIN ------------------------------------ */
html{
	font-size:0.875em;/* Mobileではデフォルトのテキストサイズを14pxに */
}
#page{
	padding: 0 10px;
	width:auto;
	-webkit-text-size-adjust:none;
}

.grids{
	margin:0 !important;
	width:auto;
}


.grid,
[class^="grid-"],
.grids [class^="grid-"]{
	width:auto;
	float:none;
}











/* !TYPE ------------------------------------ */
/*--- LISTS ---*/
ul,
ol{
	margin:0 0 1.5em 25px;
}
ul ul,
ol ol,
ul ol,
ol ul{
	/* Let’s take care of lists in lists */
	margin:0 0 0 25px;
}
dd{
	margin-left:25px;
}












/* !IMAGES ------------------------------------ */
img{
	max-width:100%;
	height:auto;
}
img.left,
img.alignleft,
img.right,
img.alginright	{ max-width:50%; height:auto; }










}
/*--- END MOBILE ---*/










/* !PRINT ------------------------------------ */
/*
Good ol’ fashioned paper...
*/










@media print{
/* !MAIN ------------------------------------ */
/*
Give everything some decent contrast.
*/
*{
	background:#fff;
	color:#000;
	text-shadow:none !important;
	box-shadow:none !important;
}
/*
Set a nice measure and take the font down to print-acceptable sizes.
*/
body{
	width:75%;
	margin:0 auto;
	font-size:0.75em; /* 12px (if base font-size was 16px) */
}
/*
A list of things you don’t want printing. Add to/subtract from as necessary. 
*/
#nav,
#footer,
nav,
footer{
	display:none;
}
#logo img{
	position:static;
}
/*
Linearise
*/
.grid{
	width:auto;
	float:none;
	clear:both;
}
/*
Don’t let images break anything.
*/
img{
	max-width:100%;
	height:auto;
}
/*
Messages look odd with just borders.
*/
.message{
	border:none;
	font-weight:bold;
}
/*
Try to avoid tables spanning multiple pages. Not failsafe, but a good start.
*/
table{
/* 	page-break-before:always; */
}
/*
Show the accessibility class.
*/
.accessibility{
	position:static;
}
/*
Display the href of any links.
*/
/*
a:link:after,a:visited:after,
a:link::after,a:visited::after{
	content:" (" attr(href) ")";
	font-size:smaller;
}
*/
/*
Any links that are root relative to your site need prepending with your URL.
*/
/*
a[href^="/"]:after,
a[href^="/"]::after{
	content:" (http://www.scaj.org" attr(href) ")";
	font-size:smaller;
}
*/
/*
Any Flash/video content can’t be printed so leave a message.
*/
object:after,
object::after{
	content:"Flash/video content. Head to http://yoururlhere.com/ to view this content.";
	display:block;
	font-weight:bold;
	margin-bottom:1.667em;
}
}
/*--- END PRINT ---*/