body {
	font-family:'Roboto Condensed', 'Open Sans' , 'Helvetica Neue' , Helvetica , Arial , Verdana , Roboto , "Noto Sans JP Regular", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Yu Gothic", 游ゴシック体, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif;
	font-size:90%; /* デフォルトサイズの16pxに対する比率 */
	font-weight:normal;
	color:#333;
	line-height:1.8em;
	font-feature-settings: "palt"; /* 日本語フォントを自動カーニングする（文字間の字詰め） */
	letter-spacing:0.1em; /* 文字間隔 */
}

/*** フォント ***/
.text-gothic {
	font-family:'Roboto Condensed', 'Open Sans' , 'Helvetica Neue' , Helvetica , Arial , Verdana , Roboto , '游ゴシック' , 'Yu Gothic' , '游ゴシック体' , 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' ,  'Meiryo UI' , 'メイリオ' , Meiryo , 'ＭＳ Ｐゴシック' , 'MS PGothic' , sans-serif;
}
.text-mincho {
	font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

/*** 見出し ***/
h1 {
	position: relative;
	text-align:center;
	font-size:1.8em;
	font-weight:bold;
	line-height:1.6em;
	letter-spacing: 0.15em;
	margin:0 0 1em 0;
}
h1 span.ruby {
	font-size:0.6em;
}
div.visual-big h1 {
	font-size:1.5em;
	color:#000;
	background:#fff;
	padding:0 1em;
}
h2 {
	font-size:2.2em;
	font-weight:bold;
	line-height:1.75em;
	margin:0 0 0.5em 0;
}
h2.name-member {
	color:#a98600;
	line-height:1em;
	border-bottom:solid thin #ccc;
	padding-left:0.3em;
}
h2 span.small {
	display:inline-block;
	font-size:0.4em;
}
h2.name-member span {
	color:#666;
	font-size:50%;
	margin-left:1em;
}
h2.gold {
	color:#a98600;
}
h2.bar {
	background:#eee;
	padding:0 0.7em;	
	margin-bottom:1em;
}
h2.bar.blue {
	background:#ecf6ff;
}
section.container.index h2 {
	padding-bottom:0.1em;
	margin-bottom:0.6em;
}
.banner-big h2 {
	font-family: 'Nanum Myeongjo', serif;
	letter-spacing:0.1em;
	color:#fff;
	line-height:1em;
	padding:0;
	margin:0 0 0.5em 0;
}
.banner-big h2 span {
	font-size:50%;
	margin-left:1em;
}
h2.backline {
	background-image: linear-gradient(rgba(0,0,0,0) 60%, rgb(252,81,133,0.5) 100%);
	margin-bottom:1.5em;
}
h3 {
	font-size:1.2em;
	font-weight:bold;
	background:#dad5e1;
	padding:0.2em 1.2em;
	margin:0 0 1.6em 0;
	border-radius:0.1em;
}
h3 {
	font-size:1.2em;
	font-weight:bold;
	background:#eee;
	padding:0.4em 1.2em;
	margin:0 0 1.6em 0;
	border-top:thin solid #ccc;
	border-bottom:thin solid #ccc;
    position: relative;
}

h3.border-l {
	padding:0.2em 1.5em;
	margin:0 0 1.6em 0;
	border-left:solid 0.4em #6b426e; 
}
h3.c-winered {
	font-size:1.4em;
    color: #fff;
    background-color: #6b1539;
    padding:0.5em 1.2em;
	border-radius:0.1em;
}
h3.border-lb {
	font-size:1.4em;
    display: flex;
    align-items: center;
    color: #fff;
    background-color: #6b1539;
    padding:0.6em 1.2em;
}
h3.border-lb::before {
    display: inline-block;
    content: '';
    width: 0.2em;
    height: 1.5em;
    margin-right: 0.8em;
    background-color: #fff;
}
h3.line-top-bottom {
	font-size:1.8em;
    color: #fff;
    padding:0.5em 1.2em;
    background:none;
	border-top:solid 1px #fff;	
	border-bottom:solid 1px #fff;	
}
h3.orange-black {
	font-size:1.2em;
    color: #000;
    padding:0.1em 1.2em;
    background-color: #FF9B00;
	margin-left:auto;
	margin-right:auto;
}
h3.quotes {
	position: relative;
	background:none;
	font-size:1.5em;
	line-height:1.5em;
	text-align:left;
	margin-bottom:1em;
}
h3.quotes::before {
	content: '“';
	position: absolute;
	display: inline-block;
	left:0.3em;
	top:0;
}
h3.quotes::after {
	content: '“';
	position: absolute;
	display: inline-block;
	right:0.3em;
	bottom:0;
}
h4 {
	font-size:1.1em;
	padding:0.5em 0 0.1em 0.3em;
	margin:0 0 1.2em 0;
	border-bottom:dotted 0.1em #ccc;
}
h5 {
	font-size:1.0em;
	font-weight:bold;
}

/*** テーブル ***/
/* table.01 */
table.table-01{
}
table.table-01 th,table.table-01 td{
	border-bottom:dotted thin #666;
}
/* table.normal */
table.normal {
	width: initial;
	color:#000;
}
table.normal th,table.normal td {
	border:solid #ccc 1px;
	padding:0.3em 1.0em;
}
table.normal th {
	background:#eee;
}
table.normal td {
	background:#fff;
}
/* table.line-white */
table.line-white {
	color:#fff;
}
table.line-white th,table.line-white td {
	border:solid #fff thin;
	background:none;
}
table.line-white a {
	color:#fff !important;
	text-decoration:none !important;
}
/* table.event */
table.event th,table.event td {
	vertical-align:top;
	line-height:1.5em;
}
table.event th {
	width:4em;
	padding:0.5em 1.5em 0.5em 0;
}
table.event td {
	padding:0.5em 1.5em 0.5em 0;
}
/* .loop-03 table.event */
.loop-03 table.event {
	font-size:0.8em;
}
.loop-03 table.event th {
	font-weight:normal;
	padding-bottom:0.2em;
}
.loop-03 table.event td {
	font-weight:normal;
	padding-bottom:0.2em;
}

/****** Frame ******/
body.front main  {
	margin-bottom:0;
}
.container {
	margin:0;
	background: #ffffff;
	width:100%;
}
.inner { /* 各ページテンプレートの実質の横幅 */
	width:calc(100% - 4em);
	max-width:55em;
	clear:both;
	margin:0 auto;
}
section.container.front .inner { /* front */
	max-width:75em;
}
section.container.index .inner { /* index 一般投稿ページ等 */
	max-width:45em;
}
section.container.archive .inner { /* acrhive,category等 */
	max-width:65em;
}
section.container.artwork .inner { /* 作品情報ページ */
	max-width:55em;
}
main {
	margin:0 auto;
}
main.left {
	float:left;
	width:67%;
	clear:both;
}
aside.right {
	float:right;
	width:30%;
	margin:2em auto;
}
.front {
	margin:0;
}
/*** header ***/
header {
	clear:both;
	width:100%;
	margin:0 0 0 0;
	border-bottom:dotted thin #ccc;
}
header .inner {
	max-width:calc(100% - 4em);
	margin:1em 2em 0;
}
header a.logo {
	display:block;
	float:left;
	margin:0 0 1em 0;
	padding:0;
	width:8em;
}
/* sns */
header .sns {
	float:right;
	display:flex;
	justify-content: center;
	margin-bottom:1.0em;
}
header .sns a img {
	display:block;
	width:2em;
	margin:0 0.2em;
}
/*** nav ***/
nav.desktop {
	float:left;
	margin:1.5em 0;
}
nav.desktop ul li {
	display: inline-block;
	width:4em; /* 日本語表記を表示するため */
	color:#fff;
	font-size:1.2em;
	line-height:1.2em;
	text-align:center;
	padding:0 0 1em;
	margin:0 1em 0;
}
nav.desktop ul li a {
	position:relative;
	display:block;
	color:#000 !important;
}
nav.desktop ul li a::before {
	display:block;
	content: attr(data-desc);
	position:absolute;
	font-size:0.5em;
	bottom:-2.3em;
	right: 0;
	left: 0;
	margin: 0 auto;
}

/*** pickup ***/
section#pickup {
	margin:0 0 0 0;
}
section#pickup .inner {
	width:100%;
	max-width:100%;
	margin:0;
}
section#pickup .loop {
	display: flex;
	justify-content: space-between;
	margin:0;
}
.box-3 {
	width:calc(100% / 3);
	position:relative; /* ”一覧を見る”ボタンの基準位置にする */
	/* 枠線を入れる場合 border:solid 0.3em; */
}
.loop article.box-3 {
	border-bottom:none;
}
.box-3 h2 {
	font-size:1.6em;
	border:none;
	padding:0;
	margin:0 0 0.1em 0;
}
.box-3 h3 {
	font-size:0.9em;
	font-weight:normal;
	line-height: 1.8em;
	border:none;
	padding:0;
	margin:0 0 0.1.2em 0 !important;
}
.box-3 p {
	margin:0 0 1em 0;
}
a.list {
	display:inline-block;
	float:right;
	color:#fff;
	border-radius:0.2em;
	font-weight:bold;
	font-size:0.8em;
	line-height:1;
	padding:0.5em 1em;
	text-decoration: none;
}
/* top */
h2.top {
	font-size:140%;
	line-height:1.4em;
	padding:0 0 0.2em 1.8em;
	margin:0 0 0.7em 0;
	border-bottom:0.3em solid #eee;
}
h2.top span {
	font-weight:normal;
	font-size:0.8em;
	margin:0 0 0 0.5em;
}
/* Breadcrumbs */
.breadcrumbs {
	padding:1.0em 0;
	margin:0;
}
.breadcrumbs span {
	font-size:0.8em;
}
.breadcrumbs span a {
	color:#4b659a;	
	text-decoration: underline dotted #4b659a;
}

/*** footer ***/
footer {
	padding:5em 0;
	background:#a5a5a5;
}
footer .inner {
	text-align:center;
}
footer img.logo_garret_black {
	width:6em;
}
.copyright {
	margin:1em auto;
	text-align: center;
	color:#000;
}
/* footer nav */
footer nav {
	display: none;
}


/*** front-page ***/
#slider-top {
	margin-bottom:4em;
}
/*** index ***/
section.container.index a,section.container.page a {
	color:#4b659a;	
	text-decoration: underline dotted #4b659a;
}
/*** page ***/
.box-h1 {
	aspect-ratio: 5 / 1;
	width:100%;
}
.index h1,.page h1,.archive h1 {
	color:#fff;
	margin:0;
}

/* modified */
section.modified {
	background:#fff;
}
section.modified p {
	font-size:0.8em;
	text-align:right;
	margin:1em auto;
}

/*** member ***/
main.member .thumbnail {
	max-width:calc(100% - 0.4em);
	margin:0.2em 0.2em 1.2em 0.2em;
	border:solid 0.2em #fff;
	box-shadow: 0 0 0.2em 0.1em rgba(0, 0, 0, .1);
}
main.member .content p {
	font-size:0.8em;
	line-height:1.6em;
	padding:0 0.5em;
}
/*** tag ***/
div.tag {
	clear:both;
	float:left;
	line-height:1.3em;
	border-radius:1em;
	background:#772f56;
	padding:0 0.5em;
	margin:0 0 1.0em 0.2em;
}
/* tag */
a.tag
{
	display:inline-block;
	color:#fff !important;
	text-decoration:none !important;
	font-size:0.8em;
	font-weight:bold;
	margin:0 0.5em;
}

/*** common ***/
body.common main {
	max-width:50em;
}
body.common main hr {
	height:0.4em;
	background: linear-gradient(to right,#FF9300,#B176D5,#FD61BF,#63BF5C,#2D7BCC,#F66D6C,#FFE319,#72D1DD);
	margin:0 0 1.5em 0;
	border:none;
}
body.common main p {
	margin:0 0 1.5em 1em;
}
body.common h1 {
	position: relative;
	font-size:1.6em;
	line-height:1.3em;
	margin:0 0 0.2em 0;
	padding:0 1em 0 0.2em;

}
body.common h2 {
	font-size:1.3em;
	line-height:1.5em;
	margin:0 0 0.5em 0;
}
body.common h3 {
	font-size:1.2em;
}

/* common table */
body.common table th{
	width:14em;
	text-align:left;
	border:0.2em solid #fff;
	background:#EFEFEF
}
body.common table td {
	width:calc(100% - 14em);
	background:#fafafa;
	border:0.2em solid #fff;
}
table.profile {
	max-width:45em;
	font-size:0.8em;
	line-height:1.7em;
	margin-left:0.5em;
	border-collapse:separate;
	border-spacing:0.4em; /* セル同士の隙間の幅 */
}
table.profile th {
	width:7em;
	vertical-align:top;
}
table.profile img.sns {
	width:2em;
}
/*** movie ***/
section#movie {
	margin:0 0 2em 0;
}
section#movie h2.top {
	background:no-repeat 0 0 url("./img/logo_movie.svg");
	background-size:1.4em;
}
/*** diary ***/
section#diary {
	margin:0 0 2em 0;
}
section#diary h2.top {
	background:no-repeat 0 0 url("./img/news-yellow.svg");
	background-size:1.4em;
}
/*** support ***/
section#support {
	margin:0 0 2em 0;
}
section#support h2.top {
	background:no-repeat 0 0 url("./img/info.svg");
	background-size:1.4em;
}
/*** news ***/
section#news {
	margin:0 0 2em 0;
}
section#news h2.top {
	background:no-repeat 0 0 url("./img/information.svg");
	background-size:1.4em;
}
/*** cast-and-staff ***/
section#cast-and-staff {
	margin:0 0 2em 0;
}
section#cast-and-staff h2.top {
	background:no-repeat 0 0 url("./img/profile.svg");
	background-size:1.4em;
}

/*** aside ***/
aside {
	width:29%;
	float:right;
}
/* 共通 */
aside #shop,aside #twitter,aside #instagram,aside .youtube {
	margin-bottom:1em;
}
/* Online Shop */
section#shop h2.top {
	background:no-repeat 0 0 url("./img/logo_shop.svg");
	background-size:1.4em;
}
div.shop {
	border:thin solid #ccc;
	border-radius:0.5em;
}
/* Twitter */
section#twitter h2.top {
	background:no-repeat 0 0 url("./img/logo_tw.svg");
	background-size:1.4em;
}
/* Instagram */
section#instagram h2.top {
	background:no-repeat 0 0 url("./img/logo_in.svg");
	background-size:1.4em;
}

/* youtube */
section.youtube h2.top {
	background:no-repeat 0 0 url("./img/logo_yt.svg");
	background-size:1.4em;
}

/*** banner-big ***/
section.banner-big {
	/* aspect-ratio: 1920 / 480; */
}
section.banner-big  > .inner {
	margin:3em auto;
}
section.banner-big  p{
	color:#FFF;
	width:40em;
}
section#recruit {
	background:url(https://garret-e.com/wp-content/themes/original-garret/img/offshot/img-12.jpg) center center / cover no-repeat;
	background-color: rgba(0,0,0,0.8);/* 黒へ透過 rgba(0,0,0,0.8); */
	background-blend-mode: darken;
}
section#about-01 {
	background:url(https://garret-e.com/wp-content/themes/original-garret/img/offshot/img-24.jpg) center center / cover no-repeat;
	background-color: rgba(0,0,0,0.8);/* 黒へ透過 rgba(0,0,0,0.8); */
	background-blend-mode: darken;
}
section#about-02 {
	background:url(https://garret-e.com/wp-content/themes/original-garret/img/chaos-conspiracy/11-L.jpg) center center / cover no-repeat;
	background-color: rgba(0,0,0,0.8);/* 黒へ透過 rgba(0,0,0,0.8); */
	background-blend-mode: darken;
}

/* schedule */
.schedule h5,.cast h5 {
	float:left;
	display:inline-box;
	text-align:center;
	color:#fff;
	background:#a98600;
	font-weight:bold;
}
.schedule h5 {
	font-size:1em;
	width:8em;
	background:#a98600;
	border-radius:0.2em;
	margin:0 2em 1em 0;
}
.cast h5 {
	width:7em;
	color:#6b426e;
	background:none;
	border-left:solid 0.3em #6b426e;
	margin:0 2em 0.5em 0;
}
.schedule div.detail {
	width:100%;
	margin:0 0 1.5em 0;	
	border-bottom:dotted #ccc 1px;
}
.cast div.detail {
	margin:0 0 0.8em 0;	
	border-bottom:dotted #999 1px;
}

section.story,section.movies,section.schedule,section.cast,section.characters,section.offshots {
	margin:0;
}
section.story .inner,section.movies .inner,section.schedule .inner,section.cast .inner,section.characters .inner,section.offshots .inner {
	margin-top:3em;
	margin-bottom:3em;	
}
section.movies {
	background:#ab9eb1;
}
section.movies article .detail {
	font-size:0.9em;
	line-height:1.7em;
}
section.characters {
	background:#c5ced6;
}
section.characters article .content{
	font-size:0.9em;
	line-height:1.5em;
}
section.schedule {
	background:#f1e9cc;
}
section.story {
	background:#eee;
}
section.cast {
	background:none;
}
section.offshots {
	background:#eee;
}
section.credit {
	font-size:0.9em;
}
section.cast .grid,section.staff .grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap:0.8em;
	margin-bottom:4em;
}
section.cast .grid{
	grid-template-columns: repeat(5, 1fr);
}
section.staff .grid {
	grid-template-columns: repeat(5, 1fr);
}
.cast h3,.staff h3 {
	width:100%;
}
.cast article,.staff article {
	width:100%; /* gridに対するサイズ */
	float:left;
	margin-bottom:0.5em;
	padding:0.5em 0.5em 0 0.5em;
	background:#fff;
	border:thin solid #ccc;
	border-radius:0.3em;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}
.cast article .name,.staff article .name {
	display:inline-block;
	text-align:left;
	font-size:0.9em;
	line-height:1.1em;
	margin:0.5em 0 0 0;
}
.cast article .name a ,.staff article .name a {
	color:#000;
	font-size:0.8em;
	text-decoration:none !important;
}
.cast article .thumbnail,.staff article .thumbnail {
	margin:0 !important;
	border-radius:0.2em;
}
section.author article {
	font-size:0.9em;
	line-height:1.5em;
	margin:2em 0;
	padding:1.8em 2.2em;
	background:#eee;
}
section.author article h6 {
	display:inline-block;
	font-weight:normal;
	color:#fff;
	font-size:0.7em;
	line-height:1.6em;
	background:#b9a7b9;
	padding:0 1em;
	margin:0;
}
section.author article .face-icon {
	float:left;
	width:6em;
}
section.author article .profile {
	width:calc(100% - 8em);
	float:right;
}
section.author article .profile .description {
	font-size:0.9em;
}
section.author article .profile .sns img {
	width:2em;
}
/*** review ***/
section.notice.review {
	background:#fff5ee;
	margin-bottom:3em;
}
section.notice.review p {
	font-size:0.8em;
	line-height:1.5em;
	margin:1em 0;
	padding:1.8em 2.2em;
}


/*** レスポンシブ対応 ***/
/* 800px以下 */
@media screen and (max-width: 800px) {
body {
	font-size:80%; 
}	
	/* adjustment */
	.desktop { display:none; /* PC・スマホ表示切り替え */ }
	.mobile { display:block; /* PC・スマホ表示切り替え */ }
	
	/* front pickup */
	.inner , section#pickup .inner {
		width:calc(100% - 2em);
		margin:0 1em;
	}
	h1 {
		font-size:1.8em;
	}
	.box-h1 h1 {
		padding:0 1em;
	}
	h2 {
		font-size:1.6em;
	}
	h3 {
		font-size:1.3em;
	}
	h4 {
		font-size:1.0em;
	}
	h5 {
		font-size:1.0em;
	}
	.w-19,.w-29,.w-39,.w-45,.w-49,.w-59,.w-69,.w-79 {width:100%;}
	/* header */
	header .inner {
		display: flex;
		flex-flow:column;
		flex-wrap: wrap;55
		align-items: center;flex-flow:column;
		margin:1em 2em 0;
		width:calc(100% - 4em);
	}
	header a.logo {
		display:block;
		float:none;
		width:50%;
		margin:2em  auto;
	}
	/* sns */
	header .sns {
		float:none;
		margin:0 0 1em;
	}
	header .sns a img {
		width:2em;
		}
	main.left,aside.right {
		float:none;
		width:100%;
	}	
	/* pickup */
	section#pickup .loop {
		display: block;
	}
	/* box-3 */
	section#pickup .loop .box-3 {
		width:100%;
	}
	/* news */
	section#news .inner {
		width:100%;
		margin:0;
	}
	/* recruit */
	section.banner-big {
		/* aspect-ratio: 1 / 1; */
	}
	section.banner-big h2 {
		margin:0 0 0.5em 0;
	}
	section.banner-big p{
		width:100%;
	}	
	
	/* copyright */
	.copyright {
		margin:0 0 6em 0;
	}
	/* footer nav */
	footer nav {
		display: flex;
		justify-content: center;
		position: fixed;
		bottom:0;
		font-size:2.3vmin; /* 縦横幅の小さい方に対する比率 */
		padding:1.5em 0 0 0;
		margin:0;
		background:#fff;
		width:100%;
		border-top:dotted thin #ccc;
	}
	ul#menu-menu-footer li {
		margin:0 0.5em;
	}	
	ul#menu-menu-footer li img {
		width:2em;
	}
	/*** page ***/
	.box-h1 {
		padding:0 1em;
		aspect-ratio: 2 / 1;
	}
	div.visual-big h1 {
		font-size:1.2em;
	}	
	/* the_content p */
	.the_content > p { /* the_content 直下のpのみ 一般投稿用 */
		margin-left:1em;
		margin-right:1em;
	}
	/* grid */
	.grid-2,.grid-3 {
		grid-template-columns: repeat(1, 1fr);
	}		
	.grid-5 {
		grid-template-columns: repeat(2, 1fr);
	}		
	/* schedule */
	.schedule div.detail div {
		clear:both;
	}
	/* .loop.record */
	.loop.record article {
		grid-template-rows: 1fr 3fr;/* 高さの比率を変更 */
	}
	.loop.record article .date {
		grid-column:1/4;/* 幅 */
		grid-row:1;/* 高さ */
	}
	.loop.record article .detail {
		grid-column:1/3;/* 幅 */
		grid-row:2;/* 高さ */
		width:100%;
	}
	.loop.record article .box-thumbnail {
		grid-column:3/4;/* 幅 */
		grid-row:2;/* 高さ */
	}	
}


/*------------------------------------
ハンバーガーメニュー用
------------------------------------*/
/*** header ***/
body.special header#header-scroll { /* スクロールで表示・非表示用 */
	height:6em;
}
body.special header.fixed-hide{ /* スクロールで表示・非表示用 */
	top: -8em;
}
/* sidemenu */
.sidemenu {
  height: 100vh;
  padding-top: 7em;
  position: fixed;
  z-index: 2;
  transition: all 0.6s;
  top: 0;
  left: -20em; /*メニュー幅*/
  width: 20em; /*メニュー幅*/
  background-color: #c9bd7b;
}
/* menu */
.sidemenu nav {
	width:calc(100% - 4em);
	clear:both;
	margin:1.5em auto;
}
.sidemenu nav ul.menu {
	margin:0;	
}
.sidemenu nav ul.menu li {
	list-style-type:none;
	text-align:center;
	font-size:1.5em;
	margin-bottom:2em;
}
.sidemenu nav ul.menu a {
	position:relative;
	display:block;
	color:#000 !important;
}
.sidemenu nav ul.menu a::before {
	display:block;
	content: attr(data-desc);
	position:absolute;
	font-size:0.5em;
	bottom:-2em;
	right: 0;
	left: 0;
	margin: 0 auto;
}
/* ハンバーガー */
.hamburger {
    position: fixed;
  cursor: pointer;
  z-index: 3;
  top: 0;
  right: 0;
  height: 5em;
  width: 5em;
  background-color: #c9bd7b;
}
.hamburger span {
  background-color: #fff;
  left: 0.9em;
  position: absolute;
  transition: all 0.6s;
  height: 0.4em;
  width: 3.2em;
}
.hamburger_linetop {
  top: 1.1em;
}
.hamburger_linecenter {
  top: 2.2em;
}
.hamburger_linebottom {
  top: 3.3em;
}
/* -----------------------------------
メニュークリックした後 ↓
------------------------------------*/
.nav_open .sidemenu {
  left: 0;
}
.nav_open .overlay {
  opacity: 0.8;
  visibility: visible;
}
/*------------------------------------
メニュー外の背景（メニュークリック後）
------------------------------------*/
.overlay {
  background-color: #000;
  cursor: pointer;
  height: 100vh;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.6s;
  visibility: hidden;
  width: 100vw;
  z-index: 1;
}