/* header_footer.css */
@charset "UTF-8";

/* --- HEADER ------------------------------------------------------ */

header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:100%;
	min-width:var(--section-min-width);
	height:var(--header-height);
	padding:0 15px;
	position:relative;
	box-sizing:border-box;
	position:fixed;
	top:0;
	left:0;
	background-color:var(--firstBlack);
	color:var(--pureWhite);
	z-index:500; /* ← 手前に表示 */
}
/* ロゴ */
#logoArea{
	display:flex;
}
#logoArea img.logoCTC {
	display: block;
	width: 158px;
	height: auto;
	margin: 5px 27px auto 22px;
	padding: 5px 31px 0 0;
	border-right: solid 1px var(--pureWhite);
}
#logoArea img.logoCTCSoken {
	display: block;
	height: 27px;
	margin-top: 13px;
}
#logoArea a:hover{
	background-color:transparent;
}

/* --- ハンバーガー ------------------------------------------------------ */
#hamburgerBtn{
	width:32px;
	height:28px;
	position:relative;
	cursor:pointer;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	z-index:350;
}
#hamburgerBtn span{
	display:block;
	height:4px;
	background:var(--pureWhite);
	border-radius:2px;
	transition:0.4s;
}
/* open時に ☰ → ✖ */
#hamburgerBtn.open span:nth-child(1){
	transform:translateY(12px) rotate(45deg);
}
#hamburgerBtn.open span:nth-child(2){
	opacity:0;
}
#hamburgerBtn.open span:nth-child(3){
	transform:translateY(-12px) rotate(-45deg);
}
/* --- ナビゲーション --- */
nav{
	position:fixed;
	top:0;
	right:0;
	width:260px;
	height:100vh;
	background:var(--firstBlack);
	transform:translateX(100%);
	transition:0.3s;
	padding-top:70px;
	z-index:340;
}
nav.open{
	transform:translateX(0);
}
nav ul{
	list-style:none;
	margin:0;
	padding:0;
}
nav ul li a{
	display:block;
	padding:15px 25px;
	color:var(--pureWhite);
	text-decoration:none;
	border-bottom:1px solid #444;
	font-size:1rem;
}
nav ul li a:hover{
	background:var(--pureWhite);
	opacity:1.0;
}
/* --- オーバーレイ背景 --- */
#overlay{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,0.45);
	opacity:0;
	pointer-events:none;
	transition:0.3s;
	z-index:200;
}
#overlay.show{
	opacity:1;
	pointer-events:auto;
	width:100%;
	height:100%;
}


/* --- FOOTER ------------------------------------------------------ */

footer{
	display:flex;
	flex-direction: row-reverse;
	flex-wrap:nowrap;
	align-content:flex-start;
	justify-content:space-between;
	min-width:var(--section-min-width);
	padding:1rem 1rem 3rem 1rem;
	background-color:var(--firstBlack);
}

footer > ul#footLink{
	display:flex;
	padding-right:60px;
}
footer > ul#footLink li{
	list-style:none;
	margin-left:20px;
}
footer > ul#footLink li a{
	display:block;
	/*padding:0.05rem 0.6rem;*/
	/*border:solid 1px var(--theGray);*/
	color:var(--secondWhite);
	background-color:var(--firstBlack);
	font-size:0.7rem;
	font-weight:300;
}

footer > ul#footCopy{
}
footer > ul#footCopy li{
	list-style:none;
	color:var(--theSilver);
	font-size:0.7rem;
	font-weight:300;
}


/* --- PAGE TOP ------------------------------------------------------ */
#pageTop{
	position:fixed;
	right:20px;
	bottom:20px;
	width:44px;
	height:44px;
	background:var(--firstBlack);
	color:var(--pureWhite);
	border:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.3s, visibility 0.3s;
	z-index:99;
}
#pageTop.is-show{
	opacity:1;
	visibility:visible;
}
#pageTop:hover{
	opacity:0.8;
}


/* --- Smartphone ------------------------------------------------------ */
@media (max-width:768px){
	header {
		height: var(--header-height-sp);
		width:100%;
		min-width:100%;
	}
	#logoArea img.logoCTC {
		width: 110px;
		margin: 5px 14px auto 0px;
		padding: 5px 13px 0 0;
	}
	#logoArea img.logoCTCSoken {
		height: 20px;
		margin-top: 11px;
	}
	#pageTop{
		right:12px;
		bottom:12px;
	}
	footer{
		display:block;
		padding:1rem 1rem 3rem 1rem;
		width:100%;
		min-width:100%;
	}
	footer > ul#footLink{
		display:block;
		padding-right:0;
		margin-bottom:1.0rem;
	}
	footer > ul#footLink li{
		margin-left:0;
	}
	footer > ul#footLink li a{
		display:block;
		padding:1.0rem 0;
		border-bottom:dotted 1px var(--theGray);
		color:var(--secondWhite);
		background-color:var(--firstBlack);
		font-size:0.7rem;
		font-weight:300;
	}
	footer > ul#footCopy li{
		line-height:1.25rem;
	}
}