/*==============================
        header
==============================*/
@charset "utf-8";

#header{
	.header {
		background-color:#FFFFFF;
		box-shadow:0 1px 6px rgba(0,0,0,.1);
		.header_inner {
			width: calc(100% - 60px);
			height:50px;
			max-width:1200px;
			margin:0 auto;
			display: grid;
			grid-template-columns: 1fr repeat(2,auto);
			grid-column-gap: 30px;
			align-items:center;
			h1 {
				font-size:1.8rem;
				font-weight:500;
				letter-spacing:.1em;
			}
			.user {
				font-size:1.3rem;
				display:grid;
				justify-items:end;
				grid-row-gap:.33em;
				a {
					background-color:var(--color_main);
					color:#FFFFFF;
					line-height:1.8;
					font-size:1.2rem;
					padding:0 .5em 0 1em;
					border-radius:4px;
					display:grid;
					grid-template-columns:auto .5em;
					grid-column-gap:.5em;
					align-items:center;
					&::after {
						content:'';
						height:.66em;
						background-color:#FFFFFF;
						clip-path:polygon(0 0,100% 50%, 0 100%);
					}
				}
			}
			& > a {
				font-weight:500;
				line-height:1;
				display: grid;
				grid-template-columns:repeat(2,auto);
				align-items: center;
				justify-content: center;
				grid-column-gap:.5em;
				&::before {
					content:'';
					width:1em;
					height:1em;
					background:url(../img/icon_logout.svg) no-repeat center center/contain;
				}
			}
		}
		.menu-gmenu-container {
			box-shadow:0 -2px 6px rgba(0,0,0,.1);
			background: #000000;
			background: linear-gradient(0deg,rgba(0, 0, 0, .05) 0%, rgba(0,0,0,0) 25%);
			.menu {
				width: calc(100% - 60px);
				max-width:1200px;
				margin:0 auto;
				display:flex;
				justify-content:center;
				align-items:center;
				li {
					flex-grow:1;
					text-align:center;
					a {
						display:inline-grid;
						font-size:1.6rem;
						height:2.4em;
						grid-template-columns:repeat(2,auto);
						align-items: center;
						justify-content: center;
						grid-column-gap:.5em;
						&::before {
							content:'';
							width:.8em;
							height:.8em;
							background:url(../img/icon_arrow.svg) no-repeat center center/contain;
						}
					}
				}
			}
		}
	}
}



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

body {
    min-width:0;
    #header{
        .header {
            .header_inner {
                width: calc(100% - 20px);
				grid-column-gap:10px;
				h1 {
					font-size:1.4rem;
				}
				a {
					font-size:1.3rem;
				}
            }
            .menu-gmenu-container {
                .menu {
                    width: calc(100% - 40px);
                    flex-wrap:wrap;
                    padding-bottom:10px;
                    li {
                        flex-grow:1;
                        text-align:center;
                        a {
                            font-size:1.4rem;
                            height:2.0em;
                        }
						&:not(:nth-child(2)):not(:nth-child(3)) {
							display:none;
						}
                    }
                }
            }
        }
    }
}

}