@charset "utf-8";

/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/


/*	Resets
	------	*/

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

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

/*	Typography presets
	------------------	*/
body {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: 62.5%;
	line-height: 1.6;
	letter-spacing: 0;
}
.gigantic { font-size: 2.0em; line-height: 1.2; letter-spacing: -2px; }
.huge, h1 { font-size: 1.6em; line-height: 1.2; letter-spacing: -1px; }
.large, h2 { font-size: 1.2em; line-height: 1.4; }
.bigger, h3 { font-size: 1.2em; line-height: 1.4; }
.big, h4 { font-size: 1.2em; line-height: 1.4; }
.small, small { font-size: 1.0em; line-height: 1.4; }
p, dt, dd, li { font-size: 1.2em; line-height: 1.4; }

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}



/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	background: #FFF;
	color: #444;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

/* ----- clearfix ----- */
.clearfix { overflow: hidden; }
* html .clearfix { zoom: 1; }


/* ----- parts ----- */
a.roA:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

/* ----- header ----- */
#header {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 90px;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f3f3));
	background: -webkit-linear-gradient(top, #fff, #f5f3f3);
	background: -moz-linear-gradient(top, #fff, #f5f3f3);
	background: -o-linear-gradient(top, #fff, #f5f3f3);
	background: linear-gradient(to bottom, #fff, #f5f3f3);
	z-index: 10;
}
#header:after {
	clear: both;
	display: block;
	content: "";
}

#header h1 {
	float: left;
	padding: 21px 0 0 73px;
}

#header ul.lang {
	float: right;
	display: flex;
	padding: 21px 63px 0 0;
}
#header ul.lang li {
	list-style: none;
	float: left;
	border-right: 1px solid #444;
	padding: 0 5px;
	font-size: 140%;
	line-height: 100%;
	letter-spacing: 0.05em;
}
#header ul.lang li:last-child {
	border-right: none;
}
#header ul.lang li span,
#header ul.lang li a {
	display: block;
	padding: 1px 5px;
	color: inherit;
}
#header ul.lang li span {
	opacity: 0.6;
}
#header ul.lang li a:hover {
	opacity: 0.6;
}

/* ----- article ----- */
aside,
article { overflow:  hidden;}

article a:link {	color: #444; text-decoration: underline; }
article a:visited {	color: #444; text-decoration: underline; }
article a:hover {	color: #888; text-decoration: underline; }
article a:active {	color: #06F; text-decoration: underline; }

aside a:link {	color: #444; text-decoration: none; }
aside a:visited {	color: #444; text-decoration: none; }
aside a:hover {	color: #888; text-decoration: none; }
aside a:active {	color: #06F; text-decoration: underline; }

/* ----- pagetop ----- */
/*#pagetop { background-color: #E8E4D8; color: #333; }
#pagetop p { width: 896px; margin: 0 auto; }
#pagetop p a { margin-left: 867px; width: 29px; height: 25px; background: url(../img/sp_navi.png) no-repeat; background-position: -766px 0px; display: block; text-indent: -9999px; overflow: hidden; }
#pagetop p a:hover  { background-position: -766px -30px; }*/

/* ----- sns ----- */
/*#sns { width: 620px; margin: 0 auto 15px auto; overflow: hidden; }
#sns-fb { float: left; height: 20px; margin: 0 10px 0 0; overflow: hidden; width: 70px; }
#sns-gp { float: left; height: 20px; margin: 0 10px 0 0; overflow: hidden; width: 32px; }
#sns-tw { float: left; height: 20px; margin: 0 10px 0 0; overflow: hidden; width: 65px; }*/

/* ----- footer ----- */
footer { width: 100%; margin: 0; padding-bottom: 30px; background-color: #f3f3f3; text-align: center;}

footer a:link    { color: #444; text-decoration: none; }
footer a:visited { color: #444; text-decoration: none; }
footer a:hover   { color: #888; text-decoration: underline; }
footer a:active  { color: #06F; text-decoration: none; }

footer p.copyright span.nw {
	display: inline-block;
	white-space: nowrap;
}

/*footer address {
	position: relative;
	width: 620px;
	height: 57px;
	
	margin: 0 auto 25px auto;
	
	border: #FFF 1px solid;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	border-radius: 7px;
	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #000000), color-stop(0.00, #333333));
	background: -webkit-linear-gradient(top, #333333 0%, #000000 100%);
	background: -moz-linear-gradient(top, #333333 0%, #000000 100%);
	background: -o-linear-gradient(top, #333333 0%, #000000 100%);
	background: -ms-linear-gradient(top, #333333 0%, #000000 100%);
	background: linear-gradient(to bottom, #333333 0%, #000000 100%);
}

footer address p:nth-child(1),
footer address p:nth-child(2),
footer address p:nth-child(3) a,
footer address p:nth-child(4) a			{ background: url(../img/sp_navi.png) no-repeat; display: block; text-indent: -9999px; overflow: hidden; }

footer address p:nth-child(1)			{ background-position: -106px -53px; width: 174px; height: 13px; position: absolute; left:  16px; top: 23px; }
footer address p:nth-child(2)			{ background-position: -285px -53px; width: 174px; height: 13px; position: absolute; left: 209px; top: 23px; }
footer address p:nth-child(3) a			{ background-position: -530px   0px; width:  96px; height: 23px; position: absolute; left: 402px; top: 17px; }
footer address p:nth-child(4) a			{ background-position: -631px   0px; width:  96px; height: 23px; position: absolute; left: 508px; top: 17px; }

footer address p:nth-child(3) a:hover	{ background-position: -530px -25px; }
footer address p:nth-child(4) a:hover	{ background-position: -631px -25px; }

footer ul { width: 620px; list-style: none; margin: 0 auto 15px auto; overflow: hidden; }
footer ul li { float:left; margin: 0 10px 5px 0; padding: 0 10px 0 0; border-right: #FFF 1px solid; font-size: 1.1em; }
footer ul li:last-child { border-right: none; }
footer ul li a { display: block; }*/
footer p:last-child { letter-spacing: 1px; }



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	/* ----- header ----- */
	#header {  }
	/*#header nav ul { left: 193px; }*/
	
	/* ----- article ----- */
	
	/* ----- pagetop ----- */
	/*#pagetop p { width: 712px; }
	#pagetop p a { margin-left: 683px; }*/
	
	/* ----- like ----- */
	
	/* ----- footer ----- */
	
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
	
	.huge, h1 { font-size: 1.8em; line-height: 1.2; letter-spacing: -1px; }
	.large, h2 { font-size: 1.4em; line-height: 1.4; }
	.bigger, h3 { font-size: 1.4em; line-height: 1.4; }
	.big, h4 { font-size: 1.4em; line-height: 1.4; }
	p, dt, dd, li { font-size: 1.4em; line-height: 1.4; }
	
	/* ----- parts ----- */
	a.roA:hover {
		opacity: 1;
	}
	
	/* ----- header ----- */
	#header {
		height: 60px;
	}
	#header h1 {
		padding: 14px 0 0 48px; 
	}
	#header h1 img {
		width: 82px;
		height: auto;
	}
	#header ul.lang {
		padding: 13px 39px 0 0;
	}
	#header ul.lang li {
		padding: 0 2px;
		font-size: 110%;
	}
	#header ul.lang li span,
	#header ul.lang li a {
		padding: 1px 7px;
	}
	#header ul.lang li a:hover {
		opacity: 1;
	}
	/*#header h1 { left: 89px; top: 5px; }
	#header h1 a { background-position: 0px -71px; width: 74px; height: 48px; }
	#header p:nth-child(2) a		{ display: block; left: 223px; }
	
	#header nav { display: none; z-index: 100; position: absolute; left: 0px; top: 60px; background-color: #000; width: 252px; height: auto;
		-moz-border-radius: 0 0 7px 7px;
		-webkit-border-radius: 0 0 7px 7px;
		-khtml-border-radius: 0 0 7px 7px;
		border-radius: 0 0 7px 7px;
	}

	#header nav ul { position: relative; left: auto; top: auto; list-style: none; width: 232px; margin: 10px 0 10px 10px; border-top: #666 1px dotted; }
	#header nav ul li { float: none; margin: 0; padding: 0; overflow: auto; border-bottom: #666 1px dotted; text-align: center; }
	#header nav ul li:last-child { margin: 0; }
	
	#header nav ul li a { background: none; display: block; text-indent: inherit; overflow: auto; }
	#header nav ul li a,
	#header nav ul li:nth-child(1) a,
	#header nav ul li:nth-child(2) a,
	#header nav ul li:nth-child(3) a,
	#header nav ul li:nth-child(4) a,
	#header nav ul li:nth-child(5) a,
	#header nav ul li:nth-child(6) a { width: auto; height: auto; padding: 5px; }
	
	#header nav a:link {	color: #FFF; text-decoration: none; background-color: #000; }
	#header nav a:visited {	color: #FFF; text-decoration: none; background-color: #000; }
	#header nav a:hover {	color: #FFF; text-decoration: none; background-color: #333; }
	#header nav a:active {	color: #FFF; text-decoration: none; background-color: #000; }*/
	
	/* ----- article ----- */
	
	/* ----- pagetop ----- */
	/*#pagetop p { width: 252px; }
	#pagetop p a { margin-left: 223px; }*/
	
	/* ----- sns ----- */
	/*#sns { width: 252px; }*/
	
	/* ----- footer ----- */
	/*footer address { width:  252px; height: 102px; }
	
	footer address p:nth-child(1)		{ left:  39px; top: 16px; }
	footer address p:nth-child(2)		{ left:  39px; top: 39px; }
	footer address p:nth-child(3) a		{ left:  25px; top: 63px; }
	footer address p:nth-child(4) a		{ left: 131px; top: 63px; }
	
	footer ul { width: 252px; }*/
	footer p:last-child { letter-spacing: 0; }
	footer p.copyright {
		padding: 0 25px;
		font-size: 130%;
	}
	
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	/* ----- header ----- */
	
	/*#header h1 { left: 181px; top: 5px; }
	#header h1 a { background-position: 0px -71px; width: 74px; height: 48px; }
	#header p:nth-child(2) a		{ display: block; left: 407px; }
	
	#header nav { width: 436px;	}

	#header nav ul { width: 416px; overflow: hidden; }
	#header nav ul li { float: left; width: 203px; margin: 0 10px 0 0; padding: 0; }
	#header nav ul li:nth-child(even) { margin: 0; }*/
	
	/* ----- article ----- */
	
	/* ----- pagetop ----- */
	/*#pagetop p { width: 436px; }
	#pagetop p a { margin-left: 406px; }*/
	
	/* ----- sns ----- */
	/*#sns { width: 436px; }*/
	
	/* ----- footer ----- */
	/*footer address { width:  436px; height: 80px; }
	
	footer address p:nth-child(1)		{ left:  34px; top: 16px; }
	footer address p:nth-child(2)		{ left: 228px; top: 16px; }
	footer address p:nth-child(3) a		{ left: 117px; top: 42px; }
	footer address p:nth-child(4) a		{ left: 223px; top: 42px; }
	
	footer ul { width: 436px; }
	footer p:last-child { width: 436px; letter-spacing: 0; }*/
	
}


/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
	body {
	
	}
	
}