$unit: 1rem;
/* ========================================================
メディアクエリ
=========================================================*/
/*
iPhone5: 320 × 568
iPhone7: 375 × 667
iPhone7 Plus: 414 × 736
iPad/iPad Mini: 768 × 1024
iPad Pro: 1024 × 1366
*/
$screen-md: 768px;
$screen-md-min: $screen-md;
$screen-sm-max: ($screen-md-min - 1);

// メディアクエリ用Minxin
$breakpoints: (
	'sm': 'screen and (max-width: ' + $screen-sm-max + ')',
	'md': 'screen and (min-width: ' + $screen-md-min + ')',
) !default;
@mixin mq( $breakpoint: md ) {
	@media #{map-get($breakpoints, $breakpoint)} {
		@content;
	}
}

/* SPサイズでない時は非表示 */
.sp-only{
	display: none;
}
@include mq(sm) {
	.sp-only{
		display: inherit;
	}
}

/*#########################################################

ヘッダ

#########################################################*/
//-------------------------------------------------------------------
// PC版ヘッダ
//-------------------------------------------------------------------
.pg-header {
	// グローバルナビゲーション
	.nav-global {
		display: flex;
		justify-content: space-between;
		margin: 20px auto 0;
		width: 560px;
		list-style: none;

		a {
			display: block;
			font: bold $unit*0.8 "YuMincho","Hiragino Mincho ProN",serif;
			color: #000;
			text-decoration: none;
			&.current,
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

//-------------------------------------------------------------------
// SP版ヘッダ
//-------------------------------------------------------------------
@include mq(sm) {
	.sp-pg-header {
		display: flex;
		align-items: center;
		padding-top: 1rem;
		height: 77px;

		/* ハンバーガーメニュー */
		#panel-btn {
			display: block;
			margin: 0 1rem;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background: #F4F4F4;
		}

		/* 3本線アイコン用プレースホルダ */
		%btn-icon {
			display: block;
			top: 49%;
			left: 50%;
			width: 24px;
			height: 3px;
			background: #252f39;
		}
		/* 3本線アイコン */
		#panel-btn-icon {
			@extend %btn-icon;
			position: relative;
			margin-left: -12px;
			transition: 0.2s;
			/* 上下のライン */
			&:after,
			&:before {
				@extend %btn-icon;
				position: absolute;
				content: "";
				left: 0;
				transition: 0.3s;
			}
			&:before {
				margin-top: -10px;
			}
			&:after {
				margin-top: 7px;
			}
		}

		// ナビゲーションメニュー
		#g-navi {
			position: absolute;
			top: 0;
			right: 100%;
			text-align: left;
			width: 100%;
			height: 100%;
			background-color: #283149;
			transition: all, 0.3s;

			// ナビゲーションヘッダ
			.nav-header {
				padding: $unit*3.2 $unit*2 0 $unit*3;

				// 閉じるボタン
				#btn-nav-close {
					display: block;
					width: 25px;
					height: 25px;
					color: #fff;
					text-decoration: none;
					span{
						position: absolute;
						text-indent: -99999px;
					}
					// 閉じるアイコン
					.close.icon {
						position: absolute;
						margin-left: 0;
						width: 20px;
						height: 20px;
					}
					.close.icon:before,
					.close.icon:after {
						content: '';
						position: absolute;
						top: 10px;
						width: 25px;
						height: 2px;
						background-color: currentColor;
						transform: rotate(-45deg);
					}
					.close.icon:after {
						transform: rotate(45deg);
					}
				}
			}
			// メニュー
			.nav-global {
				flex-direction: column;
				li {
					a{
						color: #d9bf9c;
						line-height: 2;
						text-decoration: none;
						font-size: $unit*1.5;
						letter-spacing: $unit*0.2;
					}
				}
			}
		}
	}
}


p{
	margin-top: $unit*5;
	font-size: $unit*0.8;
}