@charset 'UTF-8';

@import url("base.css");
@import url("common.css");
@import url("navi.css");
@import url("drawer.css");


/* -----------------------------------------------------------------------------
>> トップページ
----------------------------------------------------------------------------- */
#wrapper{
    min-height: 800px;
}
body {
	background-image: url(../img/parts/bg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
/*
	-webkit-animation: bgscroll 40s linear infinite;
	animation: bgscroll 40s linear infinite;
*/
}
@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: -1200px 0;}
}

@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: -1200px 0;}
}

#header {
	position:relative;
}
#header .glbNavi.pc_only {
position:absolute;
	top:28px;
	right:0;
	z-index:10;
}
#news{
	width:418px;
	background-color: #FFF;
	padding: 20px;
	border: 3px solid #58351b;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	behavior: url(css/PIE.htc);
	position:absolute;
	left: 449px;
	top: 472px;
	z-index:100;
}
#news .list{
	float:right;
	font-size: 14px;
	font-weight: bold;
	display: block;
	padding-right: 10px;
	padding-left: 10px;
	background-color: #FFD5B5;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	behavior: url(css/PIE.htc);
	position:relative;
}
#news .list:hover{
	text-decoration: none;
	background-color: #FE8;
}
#news h3{
	color: #58351b;
	font-size: 20px;
	font-weight: bold;
	margin-bottom:10px;
}
#news li a{
	font-size:13px;
	color:#333;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	behavior: url(css/PIE.htc);
	display: block;
	padding: 5px;
	line-height:1.2em;
}
#news li a:hover{
	background-color: #FE8;
	text-decoration:none;
}
#news li .date{
	margin-right:10px;
	color:#F60;
	font-weight:bold;
}


/* -----------------------------------------------------------------------------
>> リンクボタン
----------------------------------------------------------------------------- */
.link_btn{
	width:400px;
	position:absolute;
	top:175px;
	left:0;
	z-index: 10;
}
.link_btn a{
	display:block;
	font-size:18px;
	font-weight: bold;
	color: #58351b;
	background-color: #FFF;
	padding: 0.5em 1em 0.5em 4em;
	border: 3px solid #58351b;
	border-radius:2em;
	-moz-border-radius:2em;
	-webkit-border-radius:2em;
	margin-bottom:10px;
	box-shadow:3px 3px 0  #58351b;
	position:relative;
}
.link_btn a:hover{
	text-decoration:none;
	background-color: #FFA;
}
.link_btn a:before{
	content:"";
	display:block;
	position:absolute;
	top:-0.5em;
	left:0.5em;
	width:3em;
	height:3em;
	background-size:contain;
	background-repeat:no-repeat;
}
.link_btn .lb00:before{	background-image: url(../img/navi/nav_icon00.png);}
.link_btn .lb02:before{	background-image: url(../img/navi/nav_icon02.png);}
.link_btn .lb03:before{	background-image: url(../img/navi/nav_icon03.png);top:0.2em;}
.link_btn .lb04:before{	background-image: url(../img/navi/nav_icon04.png);top:-0.3em;left:0.7em;}
.link_btn .lb05:before{	background-image: url(../img/navi/nav_icon05.png);top:0.2em;}
.link_btn .lb06:before{	background-image: url(../img/navi/nav_icon06.png);top:0;}
.link_btn .lb07:before{	background-image: url(../img/navi/nav_icon07.png);left:0.8em;top:-0.2em;}
.link_btn .lb08:before{	background-image: url(../img/navi/nav_icon08.png);top:-0.2em;}
.link_btn .lb09:before{	background-image: url(../img/navi/nav_icon09.png);}

.background {
	z-index: 0;
	overflow:hidden;
    position: absolute;
    width: 100%;
    height: 300px;
    top: 545px;
	left:0;
	display:inline;
}
.background a{
	display: block;
	overflow: hidden;
	position: absolute;
	cursor:pointer;
}
/* トウモロコシ */
.background .korn{
	background-image: url(../img/parts/Korn.png);
	height: 69px;
	width: 102px;
    left: calc(50% - 356px);
    top: 173px;
	z-index:80 !important;
	text-indent:-100vw;
}
/* たけのこ */
.background .takenoko{
	background-image: url(../img/parts/takenoko.png);
	height: 89px;
	width: 44px;
    left: calc(50% + 406px);
    top: 124px;
    z-index:80 !important;
	text-indent:-100vw;
	pointer-events:none;
}


.background .makkun1{
	background-image: url(../img/parts/bg_makkun1.png);
	height: 83px;
	width: 71px;
    left: calc(50% - 751px);
    top: 32px;
	z-index:-1;
}
.background .makkun2{
	background-image: url(../img/parts/bg_makkun2.png);
	height: 40px;
	width: 32px;
    left: calc(50% + 456px);
    top: 39px;
    z-index:-1;
}

/* まっくんアニメーション */
.background .makkun_ani{
	top: 75px;
	z-index:100;
	-webkit-animation: makkun_ani 30s linear infinite;
	animation: makkun_ani 30s linear infinite;
}

@keyframes makkun_ani {
	0% {left:-40%;}
	100% {left:140%;}
}
@-webkit-keyframes makkun_ani {
	0% {left:-40%;}
	100% {left:140%;}
}




/* -----------------------------------------------------------------------------
>> 写真
----------------------------------------------------------------------------- */
.canvas {
	font-size: 1px;
	height: 570px;
	width: 464px;
	position: absolute;
	left: 450px;
	top: -30px;
	display: block;
	background-image: url(../img/parts/top_canvas.png);
	background-repeat: no-repeat;
}
/*IE6対応*/
* html .canvas{
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/parts/top_canvas.png",sizingmethod=crop);
}

.canvas a{
	margin-top: 235px;
/*	margin-left: 70px;*/
	display: block;
	text-align:center;
}
.canvas a:hover{
	opacity:0.7;
}
.canvas img{
	height: 210px;
	box-shadow: 3px 3px 5px #643;
	-moz-box-shadow: 3px 3px 5px #643;
	-webkit-box-shadow: 3px 3px 5px #643;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	z-index: 10;
	behavior: url(css/PIE.htc);
	position:relative;

	}
.canvas .pin{
	background-image: url(../img/parts/top_pin.png);
	background-repeat: no-repeat;
	display: block;
	height: 44px;
	width: 169px;
	overflow: hidden;
	position: absolute;
	left: 140px;
	top: 210px;
	z-index: 20;
}
/*IE6対応*/
* html .canvas .pin{
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/parts/top_pin.png",sizingmethod=crop);
}

/* -----------------------------------------------------------------------------
>> フッター
----------------------------------------------------------------------------- */

#footer{
	margin-top:0px !important;
}


/* モニター幅1025px以上 ---------------------------------------------------------- */
@media only screen and (min-width:1025px){

}

/* モニター幅1024px以下 ---------------------------------------------------------- */
@media only screen and (max-width:1024px){


}

/* モニター幅768px以下 ---------------------------------------------------------- */
@media only screen and (max-width:768px){
.link_btn{
	width:100%;
	position:static;
	clear:both;
	top:0;
}
.link_btn a {
    padding: 0.8em 1em 0.8em 4em;
}

.canvas {
	width: 100%;
    height: 58vw;
	position:static;
	display: block;
	clear:both;
	z-index:0;
	background-size:100%;
	background-position: bottom;
	top:0;
}
.canvas a {
    margin-top: 50px;
    margin-left: 0;
}
.canvas img {
    height: 48vw;
    margin-top:4vw;
}
.canvas .pin {
	display:none;
}
#news{
	width:100%;
	position:static;
	clear:both;
	top:0;
}
#news li a {
    font-size: 1em;
    padding: 0.8em;
}
#news .list {
    float: none;
    width:100%;
    border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    padding:0.5em;
    text-align:center;
}

.background {
	display:none;
}
.background .makkun_ani{
	top:0;
	-webkit-animation: makkun_ani 15s linear infinite;
	animation: makkun_ani 15s linear infinite;
}
.background .korn,
.background .takenoko,
.background .makkun1,
.background .makkun2{
	display:none;
}
}