@charset "utf-8";

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

/**********************************
	ヘッダー
**********************************/
header {

/*2025.09.21
	メニューが開いたときの上の位置（margin-top）
	headerの高さで位置調整をする
*/
	height:110px;
	
	
	/* メニューを開いた時に
	オーバーレイの上に来るように絶対指定 */
	/*position:absolute; 
	top:0;
	left:0;
	width:100%;
	color:#fff;
	text-align:center;
	text-shadow:1px 1px 0 rgba(0,0,0,0.2);
	background:#03A9F4;*/
	/*z-index:9999;  最前面に来るように */
	
}
/*header h1 {
	padding:0.5em;
	font-size:2.5em;
}
header h1 br {
	display:none;
}*/

/**********************************
	メニュー
**********************************/
.menu {
	overflow-y:auto; /* 縦方向のみスクロール */
	position: fixed;/*absolute*/
	
	/* ↓メニューが開いたときの上の位置（margin-top）は、17行目のheader内*/
	top:100px;/*100px 0*/
	left:0;
	
	width: 20%;/*30*/
	max-width:320px; /* 横に広がり過ぎないように */
	color: #CCCCCC;
	font-size:1em;/*110*/
	background: #3C4A95;/**/
	text-align:left;
	z-index:99;/*9999*/
	/* アニメーション */
	-webkit-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}

/*==スクロールバー==*/
.menu::-webkit-scrollbar {
  background: #000;
  width:10px;
}
.menu::-webkit-scrollbar-thumb {
  background-color: #CCC;
  border: 2px solid black;
}
.menu::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.menu ul li a {
	display:block;
	padding:0.8em;/*1.5*/
	color:#CCCCCC;
	/*font-weight:300;300*/
	text-shadow:none;
	text-decoration:none;
	
	text-indent:1em;
	letter-spacing:0.1em;
}
.menu ul li a:hover {
	color:#fff;
	background:#1A71CE;
}

.hum_ul{
	padding-top:1.5em;
}

/*====== メニューの表示追加 =======*/

.menu ul li a.current{
	
	padding:0.8em;/*1.5*/
	color:#000;
	/*font-weight:300;300*/
	text-shadow:none;
	text-decoration:none;
	
	text-indent:1em;
	letter-spacing:0.1em;
	cursor:default;
}

.menu ul li p{
	padding:0.8em;/*1.5*/
	color:#ccc;
	/*font-weight:300;300*/
	text-shadow:none;
	text-decoration:none;
	
	text-indent:1em;
	letter-spacing:0.1em;
}
/*======== 追加ここまで =============*/


/* メニューON/OFF */
.menuOff {
	-webkit-transform:translate3d(-100%, 0, 0);
	-moz-transform:translate3d(-100%, 0, 0);
	transform:translate3d(-100%, 0, 0);
	z-index:99; /* 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させて、クリックするとページトップへ戻る
そのためこの部分をコメントに、menuをfixedに変更。
オーバーレイが現れてもスクロールできてしまう。*/
.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.6;/*0.7*/
	filter:alpha(opacity=60);/*70*/
	-ms-filter:"alpha(opacity=60)";/*70*/
	z-index:8;
}

/**********************************
	ナビゲーションアイコン
**********************************/
.navBtn {
	position:fixed;/*absolute*/
	top:2em;/*0.2em*/
	left:2em;/*1em*/
	
	z-index:10;
}
/* 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);
	
	

}
.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: 60px;/*50px*//*watanabe*/
	height: 8px;/*7*/
	background:#3C4A95;/*#0277BD*/
	

	
	-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: 8px;/*7*/
	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 (max-width: 800px) {
	header h1 {
		line-height:1.3;
	}
	header h1 br {
		display:block;
	}
	header .menu {
		width:50%;
	}
}
@media screen and (max-width: 480px) {
	header h1 {
		font-size:1.2em;
	}
	header .navBtn {
		top:0;
		left:0;
		-webkit-transform: scale(0.5);
		-moz-transform: scale(0.5);
		transform: scale(0.5);
	}
	header .menu {
		width:70%;
	}/**/
}