@charset "utf-8";


/**********************************
	メニュー
**********************************/
.menu {
	overflow-y:auto; /* 縦方向のみスクロール */
	position: absolute;
	top:0;
	left:0;
	width: 30%;
	max-width:320px; /* 横に広がり過ぎないように */
	color: #111;
	font-size:80%;
	background: #ffba4e;
	text-align:left;
	z-index:9999;
	/* アニメーション */
	-webkit-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}
.menu ul li a {
	display:block;
	padding:20px 20px;
	color:#fff;
	font-weight:800;
	text-shadow:none;
	text-decoration:none;
	border-bottom: 1px solid #fff;
	font-size: 10px;
}
.menu ul li a:hover {
	color:#fff;
	background:#FF9B00;
}

/* メニューON/OFF */
.menuOff {
	-webkit-transform:translate3d(-100%, 0, 0);
	-moz-transform:translate3d(-100%, 0, 0);
	transform:translate3d(-100%, 0, 0);
	z-index:9999; /* 最前面に来るように */
}
.menuOn {
	box-shadow: 8px 8px 20px 0 rgba(0, 0, 0, 0.2);
	-webkit-transform:translate3d(0, 0, 0);
	-moz-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
}
.ie .menuOff {
	left:-100%; /* IE向け */
} 
.ie .menuOn {
	left: 0; /* IE向け */
} 

/* ナビゲーション以外固定 */
.fixed {
	position:fixed;
	top:0;
	left:0;
	width:100%;
}

/* オーバーレイ */
.overlay {
	position:fixed;
	top:0;
	left:0;
	display:none;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
	z-index:999;
}

/**********************************
	ナビゲーションアイコン
**********************************/
.navBtn {
	position:absolute;
	top:0.2em;
	left:1em;
	display: none;
}
/* IE8以下はアイコン位置調整 */
#ie8 .navBtn,
#ie7 .navBtn,
#ie6 .navBtn {
	top:30px;
}
.navBtn button {
	display: block;
	border: none;
	background: none;
	outline: 0;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	−moz−tap-highlight-color:rgba(0,0,0,0);
	tap-highlight-color:rgba(0,0,0,0);
	position: relative;
	z-index: 9999;
}
.navIcon {
	padding: 2rem 1rem;
	cursor: pointer;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
}

/* アイコンレイヤー */
.iconLayer {
	position: relative;
	display: block;
	width: 50px;
	height: 7px;
	background:#ffffff;
	-webkit-animation-duration: 300ms;
	-moz-animation-duration: 300ms;
	animation-duration: 300ms;
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}
.iconLayer:before, .iconLayer:after {
	content: '';
	position: absolute;
	left: 0;
	display: block;
	width: inherit;
	height: 7px;
	background: inherit;
	-webkit-animation-duration: 300ms;
	-moz-animation-duration: 300ms;
	animation-duration: 300ms;
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}
.iconLayer:before {
	bottom: 200%;
}
.iconLayer:after {
	top: 200%;
}

/**********************************
	ナビアイコン：矢印
**********************************/
.arrow {
	-webkit-animation-name: navIconSlide;
	-moz-animation-name: navIconSlide;
	animation-name: navIconSlide;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes navIconSlide {
	0% {
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@-moz-keyframes navIconSlide {
	0% {
	}
	100% {
		-moz-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@keyframes navIconSlide {
	0% {
	}
	100% {
		transform: rotate(180deg);
	}
}

/* ナビアイコン：矢印:before */
.arrow:before {
	-webkit-animation-name: navIconSlideBefore;
	-moz-animation-name: navIconSlideBefore;
	animation-name: navIconSlideBefore;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes navIconSlideBefore {
	0% {
	}
	100% {
		margin: 0% 31%;
		width: 75%;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}
@-moz-keyframes navIconSlideBefore {
	0% {
	}
	100% {
		margin: 0% 31%;
		width: 75%;
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}
@keyframes navIconSlideBefore {
	0% {
	}
	100% {
		margin: 0% 31%;
		width: 75%;
		transform: rotate(45deg);
	}
}

/* ナビアイコン：矢印:after */
.arrow:after {
	-webkit-animation-name: navIconSlideAfter;
	-moz-animation-name: navIconSlideAfter;
	animation-name: navIconSlideAfter;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes navIconSlideAfter {
	0% {
	}
	100% {
		margin: 0% 31%;
		width: 75%;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}
@-moz-keyframes navIconSlideAfter {
	0% {
	}
	100% {
		margin: 0% 31%;
		width: 75%;
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}
@keyframes navIconSlideAfter {
	0% {
	}
	100% {
		margin: 0% 31%;
		width: 75%;
		transform: rotate(-45deg);
	}
}

/**********************************
	ナビアイコン：ハンバーガー
**********************************/
.hamburger {
	-webkit-animation-name: navIconSlideFrom;
	-moz-animation-name: navIconSlideFrom;
	animation-name: navIconSlideFrom;
}
@-webkit-keyframes navIconSlideFrom {
	0% {
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
	100% {
	}
}
@-moz-keyframes navIconSlideFrom {
	0% {
		-moz-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
	100% {
	}
}
@keyframes navIconSlideFrom {
	0% {
		transform: rotate(-180deg);
	}
	100% {
	}
}

/* ナビアイコン：ハンバーガー:before */
.hamburger:before {
	-webkit-animation-name: navIconSlideBeforeFrom;
	-moz-animation-name: navIconSlideBeforeFrom;
	animation-name: navIconSlideBeforeFrom;
}
@-webkit-keyframes navIconSlideBeforeFrom {
	0% {
		margin: 3% 37%;
		width: 50%;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	100% {
	}
}
@-moz-keyframes navIconSlideBeforeFrom {
	0% {
		margin: 3% 37%;
		width: 50%;
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	100% {
	}
}
@keyframes navIconSlideBeforeFrom {
	0% {
		margin: 3% 37%;
		width: 75%;
		transform: rotate(45deg);
	}
	100% {
	}
}

/* ナビアイコン：ハンバーガー:after */
.hamburger:after {
	-webkit-animation-name: navIconSlideAfterFrom;
	-moz-animation-name: navIconSlideAfterFrom;
	animation-name: navIconSlideAfterFrom;
}
@-webkit-keyframes navIconSlideAfterFrom {
	0% {
		margin: 3% 37%;
		width: 75%;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	100% {
	}
}
@-moz-keyframes navIconSlideAfterFrom {
	0% {
		margin: 3% 37%;
		width: 75%;
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	100% {
	}
}
@keyframes navIconSlideAfterFrom {
	0% {
		margin: 3% 37%;
		width: 75%;
		transform: rotate(-45deg);
	}
	100% {
	}
}

/**********************************
	コンテンツ
**********************************/
#contents {
	width:92%;
	max-width:960px;
	position:relative;
	margin:30px auto; 
}

#contents h2 {
	margin:1em 0;
	color:#634a32;
	font-size:2em;
}
#contents p {
	margin:1em 0;
	color:#634a32;
	line-height:1.7;
}

/**********************************
	フッター
**********************************/
footer {
	padding:1em 0;
	color:#fff;
	background:#555;
}
footer p {
	width:92%;
	max-width:960px;
	margin:0 auto;
}

/**********************************
	レスポンシブ
**********************************/
@media screen and (min-width: 801px) {
	header .menu {
		display: none;
	}
}
@media screen and (max-width: 800px) {
	header .menu {
		width:50%;
	}
	header .navBtn {
		top:-10px;
		left:0;
		position: fixed;
		margin-top: 0px;
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		transform: scale(0.8);
		display: block;
	}
	header .menu {
		width:50%;
		position: fixed;
		margin-top: -45px;
	}
}
@media screen and (max-width: 480px) {
	header .navBtn {
		top:-10px;
		left:0;
		position: fixed;
		margin-top: 0px;
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		transform: scale(0.8);
		display: block;
	}
	header .menu {
		width:50%;
		position: fixed;
		margin-top: 25px;
	}
}