@charset "utf-8";

/* =========================================================
 * ヘッダー追従・ハンバーガーメニュー（Issue #12）
 *
 * base.min.css / common.min.css は手コミット運用でソース編集が
 * 反映されないため、このファイルで上書きする。
 * ========================================================= */

/* ---------------------------------------------------------
 * 追従ヘッダー
 *
 * SP（992px以下）は #global_nav が元から position:fixed なので対象外。
 * PC（992px以上）のみ、元のナビが画面から消えたら表示する（判定はJS）。
 * --------------------------------------------------------- */

/* 追従中に #global_nav が流れから抜けた分の高さを埋める */
.global-nav-spacer {
	display: none;
}

@media (min-width: 992px) {
	/* 高さと margin-top は #global_nav の実測値をJSで写す */
	body.is-nav-follow .global-nav-spacer {
		display: block;
	}
	body.is-nav-follow #global_nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		margin-top: 0;
		border-top: 0;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		-webkit-transition: -webkit-transform .3s ease;
		transition: transform .3s ease;
	}
	body.is-nav-follow.is-nav-shown #global_nav {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	/* 追従に入る瞬間に全幅のナビが一瞬見えないよう、JSで1フレームだけ付与する */
	body.is-nav-instant #global_nav {
		-webkit-transition: none;
		transition: none;
	}
	/* 全幅になるので中身は元のナビ幅で中央寄せする */
	body.is-nav-follow #global_nav ul.slimmenu {
		width: 940px;
		margin-right: auto;
		margin-left: auto;
	}
}

@media (min-width: 1200px) {
	body.is-nav-follow #global_nav ul.slimmenu {
		width: 1040px;
	}
}

/* ---------------------------------------------------------
 * 言語切替（日本語 / English）
 *
 * base.min.css の position:fixed を上書きし、スクロールに追従させない。
 * body直下に置いているので、位置の基準はページ左上になる。
 * --------------------------------------------------------- */
.language--button {
	position: absolute;
}

/* ---------------------------------------------------------
 * TOPヘッダーのレイアウト切替を 1200px → 1370px に引き上げる
 *
 * 1200〜1369px では言語切替が「お問い合わせ、見学ご希望は…」に被るため、
 * この範囲も1200px未満と同じく、連絡先を説明文の下に回り込ませる。
 * --------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1369px) {
	.home #header .description {
		float: none;
	}
	.home #header .contact {
		margin: 10px 0;
	}
	.language--button {
		right: 15px;
	}
}

/* ---------------------------------------------------------
 * ハンバーガーメニュー（992px以下）
 * --------------------------------------------------------- */

/* 背面を暗くするオーバーレイ。JSで body 直下に挿入する */
.menu-overlay {
	display: none;
}

@media (max-width: 992px) {
	/* 黒背景をヘッダー（.menu-collapser）の高さいっぱいまで広げる */
	.collapse-button {
		top: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
		padding: 0;
		border-radius: 0;
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}
	.collapse-button .icon-bar {
		width: 22px;
		-webkit-transition: -webkit-transform .3s ease, opacity .2s ease;
		transition: transform .3s ease, opacity .2s ease;
	}

	/* 開いている間はアイコンを×印にする */
	body.is-menu-open .collapse-button .icon-bar:nth-child(1) {
		-webkit-transform: translateY(6px) rotate(45deg);
		transform: translateY(6px) rotate(45deg);
	}
	body.is-menu-open .collapse-button .icon-bar:nth-child(2) {
		opacity: 0;
	}
	body.is-menu-open .collapse-button .icon-bar:nth-child(3) {
		-webkit-transform: translateY(-6px) rotate(-45deg);
		transform: translateY(-6px) rotate(-45deg);
	}

	/* 開いている間は背面のオーバーレイ（z-index:100000）より前面に出す */
	body.is-menu-open #global_nav {
		z-index: 100001;
	}

	body.is-menu-open ul.slimmenu {
		box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
	}
	.menu-overlay {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100000;
		background: rgba(0, 0, 0, .4);
	}
	body.is-menu-open .menu-overlay {
		display: block;
	}
}