@charset "utf-8";

// Yohsuke Iijima 141204

// compass メモ
// @include border-radius(0px);
// @include clearfix;
// @include opacity(0.8);
// @include box-shadow(1px 1px 3px rgba(0,0,0,1));
// @include text-shadow(0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #000);
// @include text-shadow(1px 1px 3px rgba(0,0,0,1));
// font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ  Ｐゴシック',sans-serif;

// @media screen and (max-width:$media_large) {
// }
// @media screen and (max-width:$media_large - 1) and (min-width:$media_middle) {
// }
// @media screen and (max-width:$media_middle - 1) {
// }

// 基本設定
@import "compass";

$color: #331f19;
$linkcolor: #0a5bbe;
$hovercolor: #538cd1;
$btnlinkcolor: #777;
$btnhovercolor: #fff;
$nonactcolor: #ccc;
$colwidth: 960px;
$maincolwidth: 630px;
$sidecolwidth: 300px;


@mixin notxt {
	white-space: nowrap;
	overflow: hidden;
	text-indent: 100%;
}

/* reset */
@import "compass/reset";

img{
	vertical-align: bottom;
}
.ov {
	&:hover {
		@include opacity(0.7);
		//opacity: 0.7;
		cursor: pointer;
	}
}

a {
	color: $linkcolor;
	text-decoration: none;
}
a:hover {
	color: $hovercolor;
}

body {
	font-size: 12px;
	color: $color;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	-webkit-text-size-adjust: none;
	color: #333;
	text-align: center;
	line-height: 110%;
	background: #fbedd7 url(../img/bg.gif);
}

p {
	line-height: 140%;
}

.dsn {
	display: none;
}

#cuntent{
	padding:0 1%;
	@media screen and (min-width: 640px) {
		margin:0 auto;
		padding:0;
		width:640px;
	}
	#title_img{
		margin:0 auto 5%;
		@media screen and (min-width: 640px) {
			margin-bottom:30px;
		}
	}
	#title_img_sec{
		margin:5% auto;
		img{
			width:60%;
		}
		@media screen and (min-width: 640px) {
			margin:20px auto;
			margin-bottom:30px;
			img{
				width:360px;
			}
		}
	}
	ul{
		overflow: hidden;
	}
	li{
		display: inline;
		float: left;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
		margin:0 2% 4% 0;
		width: 32%;
		height: auto;
		&.lineWrap{
			margin-right:0;
		}
		img{
			width: 100%;
		}
	}
	.sec,
	.to_fb{
		margin:0 0 5%;
		@media screen and (min-width: 640px) {
			margin:0 auto 30px;
		}
	}
	#fb_box{
		margin:0 auto 5%;
		padding:6% 0;
		background:#fff;
		border:2px solid #000;
		#fb_btn{
			margin: 0 auto;
			        transform:scale(1.5);
			   -moz-transform:scale(1.5);
			-webkit-transform:scale(1.5);
			display: inline-block;
		}
		p.link_url{
			margin:4% 0 1%;
		}
		@media screen and (min-width: 640px) {
			margin:0 auto 20px;
			padding:40px 0;
			#fb_btn{
				transform:scale(2.5);
			    -webkit-transform:scale(2.5);
			    -moz-transform:scale(2.5);
			}
			p.link_url{
				margin:30px 0 10px;
				a{
					font-size: 18px;
					font-weight: bold;
				}
			}
		}
	}
	p.link_url_skip{
		margin:0 auto 20px;
		a{
			color: #339933;
		}
		@media screen and (min-width: 640px) {
			p.link_url_skip{
				a{
					font-size: 18px;
					font-weight: bold;
				}
			}
		}
	}

	.bk_r{
		margin: 5% auto;
		@media screen and (min-width: 640px) {
			margin: 30px auto;
		}
	}
}//cuntent end




header{
	min-width: 320px;
	background-color:#BF0000;
	.inr{
		max-width: 640px;
		margin:0 auto;
		text-align: left;
		img.hlogo{
			vertical-align: middle;
			@media screen and (max-width: 640px) {
					width: 100%;
					height: auto;
					padding: 2px 4px;
					box-sizing: border-box;
			}
			@media screen and (min-width: 640px) {
					width: 490px;
					height: auto;
					padding: 2px 20px;
			}
		}
	}
}
footer{
	min-width: 320px;
	background-color: #333;
	padding:5px 0;
	color:#fff;
	@include clearfix;
	text-align: right;
	.finr{
		@media screen and (max-width: 640px) {
		width: 100%;
		padding-right: 5px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
		}
		@media screen and (min-width: 640px) {
		width: 640px;
		margin:0 auto;
		}
		a{
			text-align:right;
			text-decoration: none;
			font-size: 10px;
			color:#fff;
		}
	}
}