@charset "utf-8";

/* layout.css
ページを構成するヘッダーや、メインコンテンツのエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義

(00)共通コンテンツ
(01)header
(02)footer
 */
 
/*------------------------------------------------------------------------------------------------------------------------*/
/* デスクトップレイアウト : 701 px ～ 最大　                                                                                   */
/* モバイルレイアウト　　 : 700px以下。           デスクトップレイアウトからスタイルを継承。     　　　　　　　　　　　　                 */
@media only screen and (max-width: 700px) {
}
/*------------------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------------------------------*/
/* (00)共通コンテンツ                                                                                                       */
/*------------------------------------------------------------------------------------------------------------------------*/
 

/* デスクトップレイアウト : 〜980 px */
.wrapper{
	width:980px;
	margin:0 auto;
	position: relative;
}
.wrapper2{
	width:820px;
	margin:0 auto;
	position: relative;
}
#contents{
	margin: 0 0 0 0;
	padding:120px 0 0 0;
}
#contents #main{
	width:100%;
	max-width: 980px;
}
/* タブレットレイアウト : 600 px ～ 999 px */
@media only screen and (max-width: 1000px) {
	.wrapper{
		width:calc(100% - 40px);
		margin:0 20px;
	}
	.wrapper2{
		width:calc(100% - 40px);
		margin:0 20px;
	}
	#contents{
		margin: 0 0 0 0;
		padding:100px 0 0 0;
	}
}
/* モバイルレイアウト : 700 px およびそれ以下.  */
@media only screen and (max-width: 700px) {
	.wrapper{
		width:calc(100% - 20px);
		margin:0 10px;
	}
	.wrapper2{
		width:calc(100% - 20px);
		margin:0 10px;
	}
	#contents{
		padding:60px 0 0 0;
	}
	#contents #main{
		width:100%;
	}
}


/*------------------------------------------------------------------------------------------------------------------------*/
/* (01)header                                                                                                             */
/*------------------------------------------------------------------------------------------------------------------------*/
header{
	background: #F5F5F5;
	padding: 40px 0;
	height: 40px;
	z-index: 100;
	position: absolute;
	top: 0;
	width: 100%;
}
header .sp-header{
	display: none;
}
/* PC用ヘッダー */
header .pc-header .logo1{
	display:inline-block;
	vertical-align: top;
	width:290px;
	margin: 0 0 0 40px;
}
header .pc-header .logo2{
	display: none;
}
header .pc-header .head-right,
header .pc-header .menu,
header .pc-header .menu nav ul,
header .pc-header .menu nav ul li{
	display: inline-block;
	vertical-align: middle;
}
header .pc-header .head-right{
	width: 600px;
	text-align: right;
	float: right;
}
header .pc-header .menu{
	width: 100%;
}
header .pc-header .head-right nav{
	margin:	0;
}
header .pc-header .head-right nav li{
	margin: 5px 30px 0 0;
	font-size: 16px;
	font-weight: bold;
}
header .pc-header .head-right nav li a:link   { color: #555555; text-decoration: none;}
header .pc-header .head-right nav li a:visited{ color: #555555; text-decoration: none;}
header .pc-header .head-right nav li a:hover  { color: #2846A1; text-decoration: none;}
header .pc-header .head-right nav li.active a { color: #2846A1; text-decoration: none;}


#global-nav{
	display:none;
}
@media screen and (max-width: 1000px) {
	header{
		padding: 25px 0;
		height: 50px;
	}
	header .pc-header .logo1{
		width:calc(100% - 400px);
		max-width: 240px;
		margin: 10px 0 0 30px;
	}
	header .pc-header .head-right{
		width: 400px;
		text-align: right;
		float: right;
	}
	header .pc-header .head-right nav{
		margin:	10px 0 0 0;
	}
	header .pc-header .head-right nav li{
		margin: 0 30px 0 0;
		font-size: 14px;
	}
}

/* スクロール後のヘッダー */
.clone-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	transition: .3s;
	transform: translateY(-100%);
	display: inherit;
	background: rgba(255,255,255,0.8);
	padding: 20px 0 20px 0;
	height: 30px;
	border-bottom: solid 1px #DFDFD0;
}
.is-show {
	transform: translateY(0);
}
.head-scroll.clone-nav .logo1{
	display: none;
}
.head-scroll.clone-nav .logo2{
	display:inline-block;
	vertical-align: top;
	width:calc(100% - 550px);
	max-width: 37px;
	margin: 0 0 0 30px;
}
.head-scroll.clone-nav .head-right,
.head-scroll.clone-nav .menu,
.head-scroll.clone-nav .menu nav ul,
.head-scroll.clone-nav .menu nav ul li{
	display: inline-block;
	vertical-align: middle;
}
.head-scroll.clone-nav .head-right{
	width: 800px;
	text-align: right;
	float: right;
}
.head-scroll.clone-nav .menu{
	width: 100%;
}
.head-scroll.clone-nav .head-right nav{
	margin:	0;
}
.head-scroll.clone-nav .head-right nav li{
	margin: 3px 30px 0 0;
	font-size: 14px;
	font-weight: bold;
}
.head-scroll.clone-nav .head-right nav li a:link   { color: #555555; text-decoration: none;}
.head-scroll.clone-nav .head-right nav li a:visited{ color: #555555; text-decoration: none;}
.head-scroll.clone-nav .head-right nav li a:hover  { color: #2846A1; text-decoration: none;}
.head-scroll.clone-nav .head-right nav li.active a { color: #2846A1; text-decoration: none;}


@media screen and (max-width: 1000px) {
	.head-scroll.clone-nav .logo{
		width:calc(100% - 550px);
		max-width: 250px;
	}
	.head-scroll.clone-nav .head-right{
		width: 550px;
		text-align: right;
		float: right;
	}
	.head-scroll.clone-nav .head-right nav{
		margin:	0 0 0 0;
	}
	.head-scroll.clone-nav .head-right nav li{
		margin: 0 20px 0 0;
		font-size: 13px;
	}
}

/* SP用ヘッダー */
@media screen and (max-width: 700px) {
	header{
		height: 60px;
	}
	header .head-scroll{
        position: fixed;
		top: 0;
	}
	header .sp-header{
		display:inherit;
		background: #F5F5F5;
		z-index:99999;
		width: 100%;
        height: 60px;
		position: relative;
	}
	header .pc-header,
	.clone-nav{
		display:none;
	}
	header h1{
		text-align: center;
		margin: 0;
		padding: 10px 0;
		font-size: 9px;
	}
	#top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
		line-height: 1;
		z-index: 999;
    }
	header .logo{
		padding:15px 20px;
		width: 35px;

	}
	header .logo img{
		width: 100%;
	}
	/* Toggle Button */
	#nav-toggle {
		position: absolute;
		right: 20px;
		height: 36px;
		top:10px;
		cursor: pointer;
		z-index: 101;
	}
	#nav-toggle div {
		position: relative;
		font-size: 9px;
		font-weight: bold;
		color: #3B8926;
		display: inline-block;
		width: 40px;
		height: 40px;
		vertical-align: middle;
	}
	#nav-toggle div.text{
		height: 25px;
		line-height: 130%;
	}
	#nav-toggle span {
		display: block;
		position: absolute;
		height: 4px;
		width: 34px;
		background: #999999;
		left: 0;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	#nav-toggle span:nth-child(1) {
		top: 6px;
	}
	#nav-toggle span:nth-child(2) {
		top: 17px;
	}
	#nav-toggle span:nth-child(3) {
		top: 28px;
	}
    /* Fixed reset */
    #mobile-head {
		text-align: right;
    }
    #global-nav {
		display: inherit;
        position: fixed;
		top:-500px;
        background: #E1E0DC;
        width: 100%;
        text-align: center;
        padding: 10px 0 0 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
		width: 100%;
    }
	#global-nav section{
		border-bottom: solid 2px #FFFFFF;
		text-align: left;
		font-weight: bold;
		padding: 20px 30px 10px;
		font-size: 13px;
	}
	#global-nav section ul{
		margin: 0;
		padding: 0;
	}
	#global-nav section ul li{
		padding: 0 0 30px 0;
		font-size: 18px;
	}
	#global-nav section a:link   { color: #666666; text-decoration: none;}
	#global-nav section a:visited{ color: #666666; text-decoration: none;}
	#global-nav section a:hover  { color: #999999; text-decoration: none;}

    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 16px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 16px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
		top:60px;
    }
}




/*------------------------------------------------------------------------------------------------------------------------*/
/* (02)footer                                                                                                             */
/*------------------------------------------------------------------------------------------------------------------------*/
footer{
	background: #FFFFFF;
	font-size: 16px;
	font-weight: normal;
	position: relative;
}
footer a:link   { color:#555555; text-decoration: none;}
footer a:visited{ color:#555555; text-decoration: none;}
footer a:hover  { color:#999999; text-decoration: none;}
footer .wrapper{
	padding:70px 0 40px 0; 
}
footer h2{
	text-align: center;
	margin: 0 0 30px 0;
}
footer h2 img{
	width:290px;
}
footer .menu{
	margin: 0;
	padding: 0;
	text-align: center;
}
footer .menu li{
	margin: 0 20px;
	padding: 0;
	display: inline-block;
	vertical-align: top;
	font-weight: bold;
}
footer .copy{
	text-align: center;
	padding: 30px 0 0 0;
	font-size: 11px;
	color: #555555;
}
footer .pagetop{
	position: absolute;
	bottom:100px;
	right: 40px;
	text-indent: -999999px;
	background: url(../images/common/pagetop.png) no-repeat center top;
	background-size: 60px;
	width: 60px;
	height:37px;
}
footer .pagetop a{
	display: block;
	height: 100%;
}
@media screen and (max-width: 700px) {
	footer{
		font-size: 14px;
	}
	footer .wrapper{
		padding:50px 0 40px 0; 
	}
	footer .pagetop{
		position: inherit;
		width: 100%;
		bottom: inherit;
		right: inherit;
		padding: 50px 0 0 0;
		background: url(../images/common/pagetop.png) no-repeat center bottom;
		background-size: 60px;
	}
}