@charset "UTF-8";

.user_sp_menu {
	display: none;
}

.nav_sp {
	display: none;
}

/*================================================
 *	スマホ
 ================================================*/
@media screen and (max-width: 639px) {
	html body {
		height: initial;
	}

	body {
		min-width: auto;
		max-width: 639px;
	}

	.header {
		position: sticky;
		position: -webkit-sticky;
		height: 50px;
		top: 0;
		left: 0;
		z-index: 10000;
	}

	.parent_wrapper {
		display: flex;
		max-width: 639px;
		width: 97%;
		justify-content: space-between;
	}

	.logo {
		display: flex;
		width: 40%;
		height: 50px;
		align-items: center;
	}

	.logo img {
		width: 100%;
		padding: 0;
	}

	.user_sys {
		display: flex;
		width: 55%;
		height: 50px;
		align-items: center;
		justify-content: space-around;
	}

	.sys_info {
		display: none;
	}

	.user_fl_name {
		width: 60%;
		height: auto;
		font-size: 3.1vw;
		text-align: right;
		line-height: unset;
		white-space: nowrap;
		overflow: hidden;
	}

	/** サイドメニュー **/
	.left_menu {
		display: none;
	}

	/** プルダウンメニュー **/
	.user_sp_menu {
		display: block;
		width: 15%;
	}

	.hamburger_menu {
		display: flex;
		width: 100%;
		height: auto;
		margin: 0 auto;
		align-items: center;
		cursor: pointer;
		z-index: 10;
	}

	.hamburger_menu__line {
		position: relative;
		display: block;
		width: 100%;
		height: 4px;
		background-color: #FFF;
		border-radius: 4px;
		transition: all 0.5s;
	}

	.hamburger_menu__line::before, .hamburger_menu__line::after {
		content: '';
		position: absolute;
		display: block;
		width: 100%;
		height: 4px;
		background-color: #FFF;
		border-radius: 4px;
		transition: all 0.5s;
	}

	.hamburger_menu__line::before {
		transform: translateY(-12px);
	}

	.hamburger_menu__line::after {
		transform: translateY(12px);
	}

	.hamburger_menu.active .hamburger_menu__line {
		background-color: transparent;
	}

	.hamburger_menu.active .hamburger_menu__line::before {
		transform: rotate(45deg);
	}

	.hamburger_menu.active .hamburger_menu__line::after {
		transform: rotate(-45deg);
	}

	.nav_sp {
		position: fixed;
		width: 40%;
		top: 50px;
		right: 0;
		font-size: 3.5vw;
		font-weight: bold;
		text-align: center;
		background-color: #e6e6e6;
		color: #898989;
		z-index: 9999;
	}

	.nav_sp a {
		display: inline-block;
		padding: 5px 0;
	}

	.nav_sp div {
		padding: 15px 0;
		border-bottom: 1px solid #fff;
	}

	.menu_list {
		width: 100%;
		font-size: 5vw;
		font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
		text-align: center;
	}

	.nav_sp .logout{
		width: 80%;
		font-size: 4vw;
		font-weight: bold;
		font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
		margin: 0 auto;
		padding: 10px 0;
		border: 2px solid #898989;
		border-radius: 50px;
		background-color: white;
	}

	.nav_point {
		cursor: pointer;
	}

	/** メイン用 **/
	.wrapper {
		width: auto;
		max-width: 639px;
	}

}

@media screen and (max-width: 540px) {
	.user_sys {
		width:57%;
	}

	.user_fl_name {
		font-size: 3.5vw;
	}

}

@media screen and (max-width: 456px) {
	.logo {
		width: 43%;
	}

	.user_fl_name {
		font-size: 3.7vw;
	}

	/** プルダウンメニュー **/
	.nav_sp {
		width: 45%;
		font-size: 4vw;
	}

}

@media screen and (max-width: 320px) {
	.logo {
		width: 45%;
	}

	.user_fl_name {
		font-size: 4.5vw;
	}

	/** プルダウンメニュー **/
	.nav_sp {
		width: 50%;
		font-size: 5vw;
	}

	.menu_list {
		font-size: 7vw;
	}

	.nav_sp .logout {
		font-size: 5.5vw;
	}

}

@media screen and (max-width: 231px) {
	.user_sp_menu {
		width: 20%;
	}

	/** プルダウンメニュー **/
	.nav_sp {
		width: 70%;
		font-size: 6vw;
	}

	.menu_list {
		font-size: 9vw;
	}

	.nav_sp .logout {
		font-size: 7.5vw;
	}

}