@charset "shift_jis";

	a img {
		background:none;
	}

	a:hover img {
		opacity:0.7;
		filter:alpha(opacity=80);
		-ms-filter: "alpha( opacity=80 )";
		background:none;
	}

	/* #Reset & Basics (Inspired by E. Meyers)
	================================================ */
	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, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
	}
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
					display: block; }
	body {
		margin: 0px;
		padding: 0px;
		text-align: center;
		font-size: 12px;
		font-family: 'Arial', Meiryo, "ＭＳ Ｐゴシック", Osaka, "MS UI GOTHIC", "メイリオ";
		line-height: 1.6em;
	}
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;}
	table {
		border-collapse: collapse;
		border-spacing: 0; }
	/* シャドウ背景 */
	p,h1,h2,h3,h4,h5 { margin:10px 0; }
	ul,ol,dl { margin:10px 30px; }

	/* 背景 */

	/*------------------------------------*\
		Base CSS template set
	\*------------------------------------*/
	.aligncenter{display:block;margin:0 auto;}.font8px{font-size:8px;}.font9px{font-size:9px;}.font10px{font-size:10px;}.font9px{font-size:9px;}.font11px{font-size:11px;}.font12px{font-size:12px;}.font13px{font-size:13px;}.font14px{font-size:14px;}.font15px{font-size:15px;}.font16px{font-size:16px;}.font17px{font-size:17px;}.font18px{font-size:18px;}.font19px{font-size:19px;}.font20px{font-size:20px;}.font25px{font-size:25px;}.plain{margin:0;padding:0;}.bluetext{color:#00b6fb;}.redtext{color:#f11;}.bgred{background-color:red;}.bgblue{background-color:blue;}.bggreen{background-color:green;}.bold{font-weight:bold;}.flL{float:left;}.flR{float:right;}.mg2{margin:2px;}.mg3{margin:3px;}.mg4{margin:4px;}.mg5{margin:5px;}.mg10{margin:10px;}.mg15{margin:15px;}.mg20{margin:20px;}.mg25{margin:25px;}.mg30{margin:30px;}.mg35{margin:35px;}.mg40{margin:40px;}.mg45{margin:45px;}.mg50{margin:50px;}.mg55{margin:55px;}.mg60{margin:60px;}.mg70{margin:70px;}.mg75{margin:75px;}.mg80{margin:80px;}.mg90{margin:90px;}.mg100{margin:100px;}.pd2{padding:2px;}.pd3{padding:3px;}.pd4{padding:4px;}.pd5{padding:5px;}.pd10{padding:10px;}.pd15{padding:15px;}.pd20{padding:20px;}.pd25{padding:25px;}.pd30{padding:30px;}.pd35{padding:35px;}.pd40{padding:40px;}.pd45{padding:45px;}.pd50{padding:50px;}.pd55{padding:55px;}.pd60{padding:60px;}.pd70{padding:70px;}.pd75{padding:75px;}.pd80{padding:80px;}.pd90{padding:90px;}.pd100{padding:100px;}.mgTB5{margin-top:5px;margin-bottom:5px;}.mgTB10{margin-top:10px;margin-bottom:10px;}.mgTB20{margin-top:20px;margin-bottom:20px;}.mgT2{margin-top:2px;}.mgT3{margin-top:3px;}.mgT4{margin-top:4px;}.mgT5{margin-top:5px;}.mgT10{margin-top:10px;}.mgT15{margin-top:15px;}.mgT20{margin-top:20px;}.mgT25{margin-top:25px;}.mgT30{margin-top:30px;}.mgT40{margin-top:40px;}.mgT50{margin-top:50px;}.mgT60{margin-top:60px;}.mgT70{margin-top:70px;}.mgT80{margin-top:80px;}.mgT90{margin-top:90px;}.mgT100{margin-top:100px;}.mgB2{margin-bottom:2px;}.mgB3{margin-bottom:3px;}.mgB4{margin-bottom:4px;}.mgB5{margin-bottom:5px;}.mgB10{margin-bottom:10px;}.mgB15{margin-bottom:15px;}.mgB20{margin-bottom:20px;}.mgB25{margin-bottom:25px;}.mgB30{margin-bottom:30px;}.mgB35{margin-bottom:35px;}.mgB40{margin-bottom:40px;}.mgB45{margin-bottom:45px;}.mgB50{margin-bottom:50px;}.mgB55{margin-bottom:55px;}.mgB60{margin-bottom:60px;}.mgB70{margin-bottom:70px;}.mgB75{margin-bottom:75px;}.mgB80{margin-bottom:80px;}.mgB90{margin-bottom:90px;}.mgB100{margin-bottom:100px;}.mgR3{margin-right:3px;}.mgR5{margin-right:5px;}.mgR10{margin-right:10px;}.mgR15{margin-right:15px;}.mgR20{margin-right:20px;}.mgR25{margin-right:25px;}.mgR30{margin-right:30px;}.mgR35{margin-right:35px;}.mgR40{margin-right:40px;}.mgR50{margin-right:50px;}.mgR60{margin-right:60px;}.mgR70{margin-right:70px;}.mgR80{margin-right:80px;}.mgR90{margin-right:90px;}.mgL3{margin-left:3px;}.mgL5{margin-left:5px;}.mgL10{margin-left:10px;}.mgL15{margin-left:15px;}.mgL20{margin-left:20px;}.mgL25{margin-left:25px;}.mgL30{margin-left:30px;}.mgL35{margin-left:35px;}.mgL40{margin-left:40px;}.mgL50{margin-left:50px;}.mgL60{margin-left:60px;}.mgL70{margin-left:70px;}.mgL80{margin-left:80px;}.mg0a{margin:0 auto;}.pd0{padding:0}.mg0{margin: 0}.show{display: block;}.tac{text-align: center;}.tal{text-align: left;}.tar{text-align: right;}

	/* #Basic Styles
	================================================== */
	html {
		background: #fff;
	}
	body {
		color: #444;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
		text-align: left;
	}
	h1 {margin:0;}
	#wrapper {
		margin: 0 auto; 
		max-width: 780px;
	}
	.container {
		display: block;
		padding: 0;
		position: relative;
		float: none;
		margin: 0 auto; 
		background: #fff;
	}

	/* #Images
	================================================== */

	img.scale-with-grid {
		max-width: 100%;
		height: auto;
	}
	img.mainvisual {
		margin: 0 auto;
		display: block;
		float: none;
	}
	
	img.pict { width: auto; height: auto; }
	h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{ max-width: 100%; width: auto; height: auto; }


	/* #Page Styles
	================================================== */
	/*clearfix*/
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		font-size: 0;
	}
	.clearfix { display: inline-table;}
	/* Hides from IE-mac \*/
	* html .clearfix { height: 1%;}
	.clearfix { display: block;}
	/* End hide from IE-mac */

	.sixteen.columns { width: 100%; }

	.two-thirds.column { width: 100%; }
	.two-thirds.column .halfbox { width: 25%; }
	.two-thirds.column .name { margin: 10px 0; max-height: 40px; display: block; } 

	.two-fives.column { width: 100%; }
	.two-fives.column .halfbox { width: 19.6%; }
	.two-fives.column .name { margin: 10px 0; font-size: .7rem; max-height: 40px; display: block; } 
	.two-fives.column .halfbox .item { max-width: 128px; height: auto; }

	.osusume_tokushu { margin: 20px 0; }
	.osusume_tokushu h2 { color: #ff005a; border-bottom: 1px dashed; font-size: 160%; }
	.osusume_tokushu .comment { margin-bottom: 30px; }
	.osusume_tokushu .halfbox { height: 120px; }
	.osusume_tokushu .halfbox img { max-width: 100%; height: auto; }

	.contextHaiso {
		line-height: 1.6em;
		padding: 15px;
	}

	/* #Clearing
	================================================== */
	/* Self Clearing Goodness */
	.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
	/* Use clearfix class on parent to clear nested columns,
	or wrap each row of columns in a <div class="row"> */
	.clearfix:before,
	.clearfix:after,
	.row:before,
	.row:after {
		content: '\0020';
		display: block;
		overflow: hidden;
		visibility: hidden;
		width: 0;
		height: 0; }
	.row:after,
	.clearfix:after {
		clear: both; }
	.row,
	.clearfix {
		zoom: 1; }
	/* You can also use a <br class="clear" /> to clear columns */
	.clear {
		clear: both;
		display: block;
		overflow: hidden;
		visibility: hidden;
		width: 0;
		height: 0;}
	.halfbox {
		text-align: center;
		width: 50%;
		display: block;
		float: left;
		font-size: 1em;}
	.halfbox a img {}
	.container .column,
	.container .columns {
		float: left;
		display: inline;
		margin-left: 5px;
		margin-right: 5px;
	}
	/* #Media Queries
	================================================== */
	/*スマートフォン以外のメディアクエリ*/
	@media only screen and (max-width: 779px) {

		html, body { background: none; }
		#Header, #wrapper { width: 100%; }

		.container { width: 100%; }
		.container .column, .container .columns { margin-left: 0; margin-right:0; float: none; }

		.two-thirds.column { width: 97%; }
		.two-fives.column { width: 97%; }
		.two-fives.column .halfbox { width: 25%; }
		.halfbox a img {
			display: block;
		}

		img.item {margin:0 auto; max-width: 100%;}

		.osusume_tokushu { margin-left: 10px; margin-right: 10px; }

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (max-width: 710px) {

		.two-thirds.column .halfbox { width: 33%; }
		.osusume_tokushu .halfbox { width: 48%; margin-left: 5px; }

		#Header a.topcharm {
			-webkit-background-size: 370px;
			background-size: 370px;
		}

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (max-width: 610px) {

		.two-fives.column .halfbox { width: 33%; }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 480px) {

		.mgT20 { margin-top: 10px; }
		.mgT40 { margin-top: 20px; }

		.osusume_tokushu .halfbox { height:70px; }
		.osusume_tokushu .halfbox img { margin-left: auto; margin-right: auto; width: 96%; }
		

		.two-thirds.column .halfbox { width: 44%; margin: 0 10px; }
		.two-thirds.column .name { font-size: .9em; }
		.two-fives.column .halfbox { width: 44%; margin: 0 10px; }
		.two-fives.column .name { font-size: .9em; }

		.halfbox a img {
			height:auto;
		}
		img.item {margin:0 auto;}
		
		#Header a.topcharm {
			-webkit-background-size: 280px;
			background-size: 280px;
		}

	}

	@media only screen and (max-width: 325px) {

		.osusume_tokushu .halfbox { height:50px; }
		.halfbox a img { width: 85%; }
		.totop { display: none; }

		.two-thirds.column .halfbox { width: 49%; margin: 0 ; }
		.two-thirds.column .name { font-size:.8em; }
	}