@charset "utf-8";

/******************************************************************
ヘッダーのスペースを確保
*******************************************************************/
body {
	margin-top: 100px;
}
@media only screen and (max-width: 800px) {
body {
	margin-top: 50px;
}
}

/******************************************************************
オフセットアンカー
*******************************************************************/
a.anchor {
	position: absolute;
	top: -50px;
}





/****************************************************************************************
ヘッダー PC
*****************************************************************************************/
.header-1 {
	width: 100%;
	background-color: rgba(64,16,0,0.9);
	position: fixed;
	top: 0;
	z-index: 9999;
}
.header-1 > div {
	width: 100%;
	max-width: 1030px;
	margin: 0 auto;
	height: 100px;
	position: relative;
}

/* ロゴ */
.header-1 .logo {
	position: absolute;
	top: 15px;
	left: 15px;
}
.header-1 .logo img {
	height: 70px;
}

/* リスト 第一階層 ********************************/
.header-1 ul.menu {
	list-style: none;
	position: absolute;
	top: 25px;
	right: 0;
}
.header-1 ul.menu > li {
	float: left;
	position: relative;
}

/* リスト 第二階層 *********************************/
.header-1 ul.menu > li > ul {
	list-style: none;
	background-color: rgba(64,16,0,0.9);
	position: absolute;
	top: 50px;
	left: 0;
	display: none;
}
.header-1 ul.menu > li:hover > ul {
	display: block;
}

.header-1 ul.menu > li > ul > li {
	border-bottom: solid 1px rgba(255,255,255,0.25);
	margin: 0 15px;
}
.header-1 ul.menu > li > ul > li:last-child {
	border-bottom: none;
}

/* リンク 第一階層 ********************************/
.header-1 ul.menu > li > a {
	font-size: 14px;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	
	display: block;
	height: 50px;
	line-height: 50px;
	
	padding: 0 15px;
}
.header-1 ul.menu > li.menu-access > a,
.header-1 ul.menu > li.menu-contact > a {
	font-weight: normal;
}
.header-1 ul.menu > li > a br,
.header-1 ul.menu > li > a .ja {
	display: none;
}

/* リンク 第二階層 *********************************/
.header-1 ul.menu > li > ul > li > a {
	font-size: 12px;
	color: #FFF;
	text-decoration: none;
	
	display: block;
	white-space: nowrap;
	
	padding: 10px 0;
}
.header-1 ul.menu > li > ul > li:first-child > a { padding-top:    15px; }
.header-1 ul.menu > li > ul > li:last-child  > a { padding-bottom: 15px; }

/* ホバー ****************************************/
.header-1 ul.menu > li:hover > a,
.header-1 ul.menu > li > ul > li > a:hover {
	color: rgba(255,255,255,0.5);
}

/* スクロールした時 ***************************/
.header-1.scrolled > div {
	height: 50px;
	transition: height 0.5s;
}
.header-1.scrolled .logo {
	top: 5px;
	transition: top 0.5s;
}
.header-1.scrolled .logo img {
	height: 40px;
	transition: height 0.5s;
}
.header-1.scrolled ul.menu {
	top: 0;
	transition: top 0.5s;
}
/* スクロールから戻った時 ***************/
.header-1 .logo {
	transition: top 0.5s;
}
.header-1 .logo img {
	transition: height 0.5s;
}
.header-1 ul.menu {
	transition: top 0.5s;
}




/*******************************************************************************
ヘッダー モバイル
*******************************************************************************/
.header-2 {
	display: none;
	
	width: 100%;
	height: 50px;
	background-color: rgba(64,16,0,0.9);
	
	box-sizing: border-box;
	padding-top: 50px;
	overflow: hidden;
	
	position: fixed;
	top: 0;
	z-index: 9999;
}
.header-2.open {
	height: 100%;
	transition: height 0.5s;
}
.header-2 {
	transition: height 0.5s;
}

/* ロゴ */
.header-2 .logo {
	position: absolute;
	top: 5px;
	left: 15px;
}
.header-2 .logo img {
	height: 40px;
}

/* メニューボタン */
.header-2 .icon-menu,
.header-2 .icon-close {
	position: absolute;
	top: 15px;
	right: 15px;
}
.header-2 .icon-close {
	display: none;
}

/* リスト */
.header-2 ul.menu {
	list-style: none;
	width: 100%;
	height: 100%;
	overflow: auto;
}
.header-2 ul.menu > li {
	border-bottom: solid 1px rgba(255,255,255,0.5);
	margin: 0 15px;
	padding: 15px 0;
	position: relative;
}

.header-2 ul.menu > li > ul {
	list-style: none;
	display: none;
}
.header-2 ul.menu > li > ul > li {
	border-top: solid 1px rgba(255,255,255,0.25);
	margin: 10px 0 0 15px;
	padding: 10px 0 0 0;
}

/* リンク */
.header-2 ul.menu > li > a {
	font-size: 14px;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}
.header-2 ul.menu > li > a .ja {
	font-size: 10px;
	color: rgba(255,255,255,0.75);
	font-weight: normal;
}

.header-2 ul.menu > li > ul > li > a {
	font-size: 12px;
	color: #FFF;
	text-decoration: none;
}

/* 開閉ボタン */
.header-2 .btn {
	width: 15px;
	height: 15px;
	position: absolute;
	top: 15px;
	right: 0;
	background-repeat: no-repeat;
	background-position: center center;
}
.header-2 .btn.open {
	background-image: url(../img/common/icon-fff-open.png);
}
.header-2 .btn.close {
	background-image: url(../img/common/icon-fff-close.png);
	display: none;
}

/************************************************************************************************
ヘッダー PC モバイル 切り替え
************************************************************************************************/
@media only screen and (max-width: 800px) {
.header-1 {
	display: none;
}
.header-2 {
	display: block;
}
}

/******************************************************************
現在位置
*******************************************************************/
.page-about-us  .header-1 .menu-about-us  > a,
.page-about-us  .header-2 .menu-about-us  > a,
.page-thought   .header-1 .menu-thought   > a,
.page-thought   .header-2 .menu-thought   > a,
.page-challenge .header-1 .menu-challenge > a,
.page-challenge .header-2 .menu-challenge > a,
.page-access    .header-1 .menu-access    > a,
.page-access    .header-2 .menu-access    > a,
.page-contact   .header-1 .menu-contact   > a,
.page-contact   .header-2 .menu-contact   > a {
	color: #8ABB2C !important;
}













/******************************************************************************************
ページトップへ戻る
*******************************************************************************************/
a#top {
	position: absolute;
	top: 0;
}

a.back-to-top {
	display: block;
	background-color: rgba(64,16,0,0.9);
	
	width: 35px;
	height: 35px;
	font-size: 35px;
	line-height: 35px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	
	position: fixed;
	right: 0;
	bottom: -35px;
	z-index: 999;
}

/* スクロールした時 ***************************/
a.back-to-top.scrolled {
	bottom: 0;
	transition: bottom 0.5s;
}
/* スクロールから戻った時 ***************/
a.back-to-top {
	transition: bottom 0.5s;
}






/******************************************************************************************
フッター
*******************************************************************************************/
.footer {
	width: 100%;
	border-top: solid 1px rgba(0,0,0,0.2);
	padding: 45px 0;
}
.footer > div {
	width: 100%;
	max-width: 1030px;
	margin: 0 auto;
}

/* ロゴ */
.footer .logo {
	box-sizing: border-box;
	padding: 15px;
	float: left;
	width: 25%;
}
.footer .logo img {
	height: 60px;
}

/* リスト */
.footer ul.menu {
	list-style: none;
}
.footer ul.menu > li {
	box-sizing: border-box;
	padding: 15px;
	float: left;
	width: 25%;
}
.footer ul.menu > li > ul {
	display: none;
}

/* リンク */
.footer ul.menu > li > a {
	font-size: 14px;
	font-weight: bold;
}
.footer ul.menu > li > a .ja {
	font-size: 10px;
	font-weight: normal;
}

/* ラインから下 */
.footer > div > div {
	box-sizing: border-box;
	padding: 15px;
	width: 100%;
}
.footer .line {
	width: 100%;
	height: 1px;
	background-color: rgba(0,0,0,0.15);
}
.footer .footer-link {
	font-size: 12px;
	margin-top: 30px;
}
.footer .copyright {
	font-size: 12px;
	margin-top: 1em;
}



@media only screen and (max-width: 800px) {

.footer .logo,
.footer ul.menu > li {
	width: 33.33%;
}

}

@media only screen and (max-width: 700px) {

.footer .logo,
.footer ul.menu > li {
	width: 100%;
}

.footer {
	text-align: center;
}

}