@charset "UTF-8";

/* ポートフォリオ　－　ヘッダー SP */

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

	#header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		margin-bottom: 20px;
	}

	/* logoの位置 */
	#header .flex {
		align-items: flex-start;
		margin-top: 10px;
	}
	.globalNav ul {
		position: absolute;
		display: none;
		flex-direction: column;
		/* width: 300px; */
		height: auto;
		border: 2px solid #d54884;
		background-color: #fff;
		border-radius: 10px;
		top: 60px;
		right: 10px;
		z-index: 999;
		padding: 0;
		overflow-x: hidden; /* 横方向のハミ出しを禁止 */
	    overflow-y: auto;   /* 縦方向だけスクロールを許可 */
	    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
	}
	.globalNav ul li {
		/* width: 296px; */
		border-bottom: 1px dotted #d54884;
		padding-left: 0;
		margin-left: 0;
	}
	.globalNav ul li a {
		display: flex;
		width: 100%;
		height: 100%;
		padding: 15px 20px;
		text-decoration: none;
	}
	.globalNav ul li:last-child {
        border-bottom: none;
    }

	/* contactの線なし */
	.globalNav .flex_items.contact {
		border: none;
	}

	/* グローバルナビのアイコンなし */
	.globalNav .flex_items.web::before,
	.globalNav .flex_items.illust::before,
	.globalNav .flex_items.contact::before {
		background-image: none;
	}

	.globalNav .flex_items.indent a {
		position: relative;
		margin-left: 40px;
	}
	.globalNav .flex_items.indent a::before {
		position: absolute;
		content: '－';
		top: 50%;
		transform: translateY(-50%); /* 中央揃えのために上へ50%戻す */
		left: -10px;
	}

	/*****************************
	ハンバーガーメニュー
	*****************************/
	/* ハンバーガーマーク */
	.hamburger_menu {
		position: absolute;
		background:#d54884;
		width: 50px;
		height:50px;
		top: 10px;
		right: 20px;
		border-radius: 5px;
		cursor: pointer;
		z-index: 99;
	}

	/*ボタン内側*/
	.hamburger_menu span {
		position: absolute;
		display: inline-block;
		transition: all .4s;
		width: 45%;
		height: 2px;
		left: 14px;
		border-radius: 5px;
		background: #fff;
	}

	/* 線 */
	.hamburger_menu span:nth-of-type(1) {
		top: 13px;	
	}
	.hamburger_menu span:nth-of-type(2) {
		top: 19px;
	}
	.hamburger_menu span:nth-of-type(3) {
		top: 25px;
	}

	/* MENUの文字 */
	.hamburger_menu span:nth-of-type(3)::after {
		position: absolute;
		content:"MENU";
		top: 0;
		left: -3px;
		color: #fff;
		font-size: 0.6rem;
	}


	/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
	.hamburger_menu.active span:nth-of-type(1) {
		top: 14px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}
	.hamburger_menu.active span:nth-of-type(2) {
		opacity: 0;
	}
	.hamburger_menu.active span:nth-of-type(3){
		top: 26px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
	.hamburger_menu.active span:nth-of-type(3)::after {
		content: "CLOSE"; /*3つ目の要素のafterにClose表示を指定*/
		transform: translateY(0) rotate(-45deg);
		top: 0;
		left: 4px;
	}

	/* activeがついた時、その「後ろにあるnavの中のul」を表示する */
	.hamburger_menu.active ~ .wrapper .globalNav ul {
		display: flex;
		animation: slideDown 0.4s ease;
		/* overflow: auto; */
        height: 75vh;
	}
	@keyframes slideDown {
		0% { transform: translateX(100%) }
		100% { transform: translateX(0%) }
	}

	/* 背景を暗くするレイヤーの基本スタイル */
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 90;
		opacity: 0;
		visibility: hidden;
		transition: all 0.4s;
	}

	/* ハンバーガーメニューがactiveの時だけ表示 */
	body:has(.hamburger_menu.active) .overlay {
		opacity: 1;
		visibility: visible;
	}



}