@charset "utf-8";

/**********************************
	サイト全体
**********************************/
html, body, #wrap, #keyVisual, .inner {
	height:100%;
}
body {
	color:#323232;
	background:#faf5e3;
	font-weight:300;
	font-family: 'Roboto', Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
}

input, textarea {
	font-family: 'Roboto', Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

#ie6 body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

h1, h2 {
	font-family: 'Noto Sans Japanese', sans-serif;
}

.res-sp-block {
	display:none !important;
}

/**********************************
	キービジュアル
**********************************/
#keyVisual {
	display:table;
	width:100%;
}
#keyVisual .inner {
	padding:2em 0;
	position:relative;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

.logo  {
	max-width:840px;
	margin:0 auto;
}
.logo li {
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:50%;
	text-align:center;
}
.logo li img {
	width:70%;
}
.logo li.horseImg {
	-webkit-animation: horse 1s ease-in-out both;
	-moz-animation: horse 1s ease-in-out both;
	animation: horse 1s ease-in-out both;
	-webkit-animation-delay:1.5s;
	-moz-animation-delay:1.5s;
	animation-delay:1.5s;
}
@-webkit-keyframes horse {
	0% {
		color:#c53727;
		-webkit-transform: translate(0.4em, 0) rotate(0deg);
	}
	100% {
		-webkit-transform: translateX(-9999px) rotate(-180deg);
	}
}
@-moz-keyframes horse {
	0% {
		color:#c53727;
		-moz-transform: translate(0.4em, 0) rotate(0deg);
	}
	100% {
		-moz-transform: rotate(360deg) translate(-9999px, 0);
	}
}
@keyframes horse {
	0% {
		color:#c53727;
		transform: translate(0.4em, 0) rotate(0deg);
	}
	100% {
		transform: rotate(360deg) translate(-9999px, 0);
	}
}
.logo li.deerImg {
	-webkit-animation: deer 0.5s ease-in-out both;
	-moz-animation: deer 0.5s ease-in-out both;
	animation: deer 0.5s ease-in-out both;
	-webkit-animation-delay:1s;
	-moz-animation-delay:1s;
	animation-delay:1s;
}
@-webkit-keyframes deer {
	0% {
		-webkit-transform: translate(0, 0);
	}
	50% {
		-webkit-transform: translate(100px, 0);
	}
	100% {
		-webkit-transform: translate(-200px, 0);
	}
}
@-moz-keyframes deer {
	0% {
		-moz-transform: translate(9999px, 0);
	}
	100% {
		-moz-transform: translate(-200px, 0);
	}
}
@keyframes deer {
	0% {
		transform: translate(9999px, 0);
	}
	100% {
		transform: translate(-200px, 0);
	}
}

#keyVisual h1 {
	display:none;
	font-weight:900;
	font-size:32px;
	line-height:1.3;
}
#keyVisual h1 .deerDay {
	font-size:1.5em;
}
#keyVisual h1 .kerning {
	margin-right:0.025em;
	letter-spacing:-0.05em;
}
#keyVisual h1 .small {
	font-size:0.8em;
	margin-right:0.05em;
}
#keyVisual h1 .kakko {
	position:relative;
}
#keyVisual h1 .kakko.up {
	top:-0.25em;
}
#keyVisual h1 .kakko.down {
	bottom:-0.25em;
	margin-right:-0.45em;
}
.big {
	font-size:1.5em;
}
.pink {
	color:#ff52c5;
}
.green {
	color:#4db2bd;
}
.brown {
	color:#442705;
}
.brown .big {
	position:relative;
	top:0.15em;
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:bottom;
}
#keyVisual .eng {
	margin-top:1em;
	font-size:20px;
	font-family: 'Anton', sans-serif;
}
#keyVisual .eng i {
	position:relative;
	font-size:0.5em;
}
#keyVisual .eng i.fa-quote-left {
	top:-0.25em;
	margin:0 0.5em 0 1em;
	vertical-align:top;
}
#keyVisual .eng i.fa-quote-right {
	bottom:-0.25em;
	margin:0 1em 0 0.5em;
	vertical-align:bottom;
}
#keyVisual h1 .period {
	margin-right:-0.5em;
}

#share  {
	margin-top:60px;
}
#share li  {
	display:inline-block;
	*display:inline;
	*zoom:1;
	margin:0 10px;
	vertical-align:top;
}

.arrow {
	position:absolute;
	bottom:10%;
	left:50%;
	margin:-10px 0 0 -10px;
}
.arrow a {
	color:#442705;
	font-size:3em;
}

/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}
/*the animation definition*/
@-webkit-keyframes bounce {
  0%, 100%, 20%, 53%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0)
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0)
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0)
  }
}
@keyframes bounce {
  0%, 100%, 20%, 53%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    -webkit-transform: translate3d(0, -30px, 0);
    -ms-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0)
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    -webkit-transform: translate3d(0, -15px, 0);
    -ms-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0)
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    -ms-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0)
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom
}


/**********************************
	鹿の日とは
**********************************/
section {
	max-width:640px;
	margin:0 auto;
	line-height:1.5;
}
h2 {
	margin-bottom:10px;
	font-size:30px;
	text-align:center;
}
section .eng {
	letter-spacing:2px;
	margin-bottom:30px;
	text-align:center;
	text-transform: uppercase;
	font-family: 'Anton', sans-serif;
}
section p {
	margin-bottom:1em;
}
section .img {
	text-align:center;
}

#about {
	padding:40px 2em;
	background:#fff;
}

.deer {
	position:relative;
	height:480px;
}
.deer.hover img {
	opacity:0;
}
.deer img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	display:block;
}
.deer img.img1 {
	z-index:2;
}

.center {
	text-align:center;
}

@media screen and (max-height:800px) {
	
	#keyVisual, #keyVisual .inner {
		height:auto;
	}
	#keyVisual .inner {
		padding-bottom:150px;
	}
}