/*
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {font-family: ‘Noto Sans Japanese’, ‘ヒラギノ角ゴシック’, ‘メイリオ’ ,sans-serif;}
*/
@charset "UTF-8";

span.f200{font-size:200%;}
span.f175{font-size:175%;}
span.f150{font-size:150%;}
span.f125{font-size:125%;}
span.f120{font-size:120%;}
span.f115{font-size:115%;}
span.f110{font-size:110%;}
span.f105{font-size:105%;}
span.f100{font-size:100%;}
span.f95{font-size:95%;}
span.f90{font-size:90%;}
span.f85{font-size:85%;}
span.f80{font-size:80%;}
span.f75{font-size:75%;}
span.f70{font-size:70%;}
span.f65{font-size:65%;}
span.f60{font-size:60%;}
span.f55{font-size:55%;}
span.f50{font-size:50%;}

div.h50{height:  50px;}
div.h100{height: 100px;}
div.h150{height: 150px;}
div.h200{height: 200px;}
div.h250{height: 250px;}
div.h300{height: 300px;}
div.h350{height: 350px;}
div.h400{height: 400px;}
div.h450{height: 450px;}
div.h500{height: 500px;}
div.h550{height: 550px;}
div.h600{height: 600px;}
div.h650{height: 650px;}
div.h700{height: 700px;}
div.h750{height: 750px;}
div.h800{height: 800px;}
div.h850{height: 850px;}
div.h900{height: 900px;}
div.h950{height: 950px;}
div.h1000{height: 1000px;}

.w-5{width: 5%;}
.w-7{width: 7%;}
.w-8{width: 8%;}
.w-9{width: 9%;}
.w-10{width: 10%;}
.w-12{width: 12%;}
.w-13{width: 13%;}
.w-15{width: 15%;}
.w-16{width: 16%;}
.w-17{width: 17%;}
.w-20{width: 20%;}
.w-22{width: 22%;}
.w-25{width: 25%;}
.w-30{width: 30%;}
.w-35{width: 35%;}
.w-37{width: 37%;}
.w-40{width: 40%;}
.w-45{width: 45%;}
.w-50{width: 50%;}
.w-55{width: 55%;}
.w-60{width: 60%;}
.w-70{width: 70%;}

.lh-17{line-height: 1.7em;}

.mb-minus05{margin-bottom: -0.5em;}
.mb-minus1{margin-bottom: -1em;}
.mb-minus2{margin-bottom: -2em;}

/* width:980px以下では非表示 */
@media screen and (max-width: 980px){
	div.over980px, span.over980px{
		display:none;
	}
}
/* width:980以上では非表示 */
@media screen and (min-width: 980px){
	div.under980px, span.under980px{
		display:none;
	}
}

#内部リンクのずれ調整
a.anchor{
    padding-top: 140px !important;
    margin-top: -140px !important;
}


span.txt-def-color{
	color: #454545;
}

p.inline{
	display:inline;
}
/* TOPページ以外のnav-bar */
/*
div.navbar-kyoshin-common{
}
*/

.nav-link{
	padding-left:0 !important;
	padding-right:0 !important;
}
li.nav-style{
	margin-bottom: -9px;
	display: inline-block;
	/*border-bottom: 2px solid #DE9610;*/
	padding-bottom: 4px;
	padding-left:0;
	padding-right:0;
	list-style: none;
	text-align: center;
}
li.nav-style a {
	position:relative;
	text-decoration: none;
	padding-bottom: 7px; /* 文字と下線に隙間を作る */
	color: #000;
	display: block;
}

li.nav-style a:after {
	position:absolute;
	top:65px;
	margin-bottom:-3px;
	content: '';
	width: 0;
	transition: all 0.1s ease;
	/*border-bottom: 4px solid #DE9610;*/
	display: block;
}
li.nav-style a:hover:after {
	width: 100%;
	/*border-bottom: 5px solid #DE9610;*/
}

/* nav各メニューの下線の色 */
li.nav-calendar{
	border-bottom: 3px solid #DE9610;
}
li.nav-calendar a:after {
	border-bottom: 6px solid #DE9610;
}
li.nav-calendar a:hover:after {
	border-bottom: 6px solid #DE9610;
}
li.nav-online{
	border-bottom: 3px solid #65ACE4;
}
li.nav-online a:after {
	border-bottom: 6px solid #65ACE4;
}
li.nav-online a:hover:after {
	border-bottom: 6px solid #65ACE4;
}
li.nav-product{
	border-bottom: 3px solid #A0C238;
}
li.nav-product a:after {
	border-bottom: 6px solid #A0C238;
}
li.nav-product a:hover:after {
	border-bottom: 6px solid #A0C238;
}
li.nav-contents{
	border-bottom: 3px solid #E6E600;
}
li.nav-contents a:after {
	border-bottom: 6px solid #E6E600;
}
li.nav-contents a:hover:after {
	border-bottom: 6px solid #E6E600;
}
li.nav-companyinfo{
	border-bottom: 3px solid #EA5506;
}
li.nav-companyinfo a:after {
	border-bottom: 6px solid #EA5506;
}
li.nav-companyinfo a:hover:after {
	border-bottom: 6px solid #EA5506;
}

/* ヘッダ nav のサブメニュー */

@media screen and (min-width: 980px){

.dropdown-menu{
	margin-left:-17em !important;
	margin-top:4.0em !important;
}
}
.dropdown:hover .dropdown-menu {
    display: block;
}

li.nav-style a.dropdown-item {
	position:relative;
	text-decoration: none;
	padding-bottom: 5px; /* 文字と下線に隙間を作る */
	color: #000;
	display: block;
}
li.nav-style a.dropdown-item:after {
	position:absolute;
	top:25px;
	margin-bottom:2px;
	margin-left:-23.5px;
	content: '';
	width: 0;
	transition: all 0.1s ease;
	/*border-bottom: 4px solid #DE9610;*/
	display: block;
}
li.nav-style a.dropdown-item:hover:after {
	width: 100%;
	/*border-bottom: 5px solid #DE9610;*/
}



a.selected_schedule{
	background:#EDC881;
	box-shadow: 1px 1px 2px gray;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
a.selected_online{
	background:#BBDBF3;
	box-shadow: 1px 1px 2px gray;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
a.selected_product{
	background:#cde68a;
	box-shadow: 1px 1px 2px gray;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

a.selected_contents{
	background:#e6e6a1;
	box-shadow: 1px 1px 2px gray;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
a.selected_company{
	background:#ebbda4;
	box-shadow: 1px 1px 2px gray;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;

}
/* ヘッダの検索窓はwidth:1140px(col-xl)以下では非表示 */
@media screen and (max-width: 1140px){
	div.header_searchbox_None{
		display:none;
	}
}

span.t_shadow_whitebase{
	text-shadow		: 3px 7px 7px #808080;
	background		: rgba(0,0,0,0.1);
	padding			:0.1em 0.3em 0.1em 0.3em;
	border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-o-border-radius: 0.2em;
	-ms-border-radius: 0.2em;
}
p.lead{
	color:#ffffff;
}


div.sitemap{
	border-collapse: collapse;
	border-top:4px solid #EA5506 !important;
}

/* フッタ */

footer.footer{
	left:10%;
	margin:2px auto;
    padding-top:20px;
}
footer.footer:before{
    content:"";
    position:absolute;
    left:0;
    display:block;
    margin-top:-20px;
    width:100%;
    border-top:1px solid #AEAEAE;
}
/* スマホ用 */
footer.footer_980{
    margin:20px auto;
    padding-top:20px;
}
footer.footer_980:before{
    content:"";
    position:absolute;
    left:0;
    display:block;
    margin-top:-20px;
    width:100%;
    border-top:1px solid #AEAEAE;
}

/* 見出し */
/* リスト angle-right */

ul.catlist{
	list-style: none;
	background-image: none;
	padding-left:0;
	display:block;
}
ul.catlist > li:before {
    content: "\f105";
    position: relative;
    font-family: 'Font Awesome\ 5 Free';
    margin-right: .6em;
    font-weight: 900;
}
/* チェック check*/
ul.chklist{
	list-style: none;
	background-image: none;
	padding-left:0;
	display:block;
}
ul.chklist > li:before {
    content: "\f00c";
    position: relative;
    font-family: 'Font Awesome\ 5 Free';
    color:#428bca;
    margin-right: .6em;
    font-weight: 900;
}
/* 指（指示） hand-point-right */
ul.pointlist{
	list-style: none;
	background-image: none;
	padding-left:0;
	display:block;
}
ul.pointlist > li:before {
    content: "\f0a4";
    position: relative;
    color:#f0ad4e;
    font-family: 'Font Awesome\ 5 Free';
    margin-right: .6em;
    font-weight: 900;
}
/* 注意 exclametion */
ul.attentionlist{
	list-style: none;
	background-image: none;
	padding-left:0;
	display:block;
}
ul.attentionlist > li:before {
    content: "\f071";
    position: relative;
    color:#d9534f;
    font-family: 'Font Awesome\ 5 Free';
    margin-right: .6em;
    font-weight: 900;
}


/* 見出し */
/* h2(共通) */
h2{
	background: #dfefff;
	box-shadow: 0px 0px 0px 5px #dfefff;
	border: dashed 1px #96c2fe;
	padding: 0.2em 0.5em;
	color: #454545;
	font-size: 140%;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.6));
	margin-bottom:1em;
}
h3{
	position: relative;
	padding: 10px;
	padding-left:2em;
	padding-top:1em;
	color: #454545;
	font-size: 1.1em;
	border-bottom: dashed 2px #6594e0;
}
h3::before{
	content: "□";
	font-size:1.5em;
	position: absolute;
	left: 0.1em;
	top: 0.15em;
	color: #FF9100;
}
h3::after{
	content: "□";
	font-size:1.4em;
	position: absolute;
	left: 0.4em;
	top: 0.5em;
	color: #325A8C;
}
h4 {
border-bottom: solid 3px #cce4ff;
position: relative;
padding: 1.2em 0 0.2em 0;
}

h4:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}
/* 入稿カレンダー */
h2.calendar_h2{
	background: #f9eed9;
	box-shadow: 0px 0px 0px 5px #f9eed9;
	border: dashed 1px #DE9610;
	font-weight: bold;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.6));
	margin-bottom:1em;
}

h3.calendar_h3{
	position: relative;
	padding: 10px;
	padding-left:2em;
	padding-top:1em;
	color: #454545;
	font-size: 1.75rem;
	/* font-size: 1.1em; */
	border-bottom: dashed 2px #DE9610;
}
h3.calendar_h3::before{
	content: "□";
	font-size:1.5em;
	position: absolute;
	left: 0.1em;
	top: 0.15em;
	color: #FF9100;
}
h3.calendar_h3::after{
	content: "□";
	font-size:1.4em;
	position: absolute;
	left: 0.4em;
	top: 0.5em;
	color: #325A8C;
}
h4.calendar_h4 {
border-bottom: solid 3px #F9EED9;
position: relative;
padding: 1.2em 0 0.2em 0;
}

h4.calendar_h4:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #DE9610;
bottom: -3px;
width: 20%;
}

/* オンライン入稿 */
h2.online_h2{
	background: #BBDBF3;
	box-shadow: 0px 0px 0px 5px #BBDBF3;
	border: dashed 1px #49a9f2;
	font-weight: bold;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.6));
	margin-bottom:1em;
}
h3.online_h3{
	position: relative;
	padding: 10px;
	padding-left:2em;
	padding-top:1em;
	color: #454545;
	font-size: 1.75rem;
	/* font-size: 1.1em; */
	border-bottom: dashed 2px #49a9f2;
}
h3.online_h3::before{
	content: "□";
	font-size:1.5em;
	position: absolute;
	left: 0.1em;
	top: 0.15em;
	color: #FF9100;
}
h3.online_h3::after{
	content: "□";
	font-size:1.4em;
	position: absolute;
	left: 0.4em;
	top: 0.5em;
	color: #325A8C;
}


/* 印刷メニュー */
h2.product_h2{
	background: #CDE68A;
	box-shadow: 0px 0px 0px 5px #CDE68A;
	border: dashed 1px #A0C238;
	font-weight: bold;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.6));
	margin-bottom:1em;
}
h3.product_h3{
	position: relative;
	padding: 10px;
	padding-left:2em;
	padding-top:1em;
	color: #454545;
	font-size: 1.75rem;
	/* font-size: 1.1em; */
	border-bottom: dashed 2px #A0C238;
}
h3.product_h3::before{
	content: "□";
	font-size:1.5em;
	position: absolute;
	left: 0.1em;
	top: 0.15em;
	color: #FF9100;
}
h3.product_h3::after{
	content: "□";
	font-size:1.4em;
	position: absolute;
	left: 0.4em;
	top: 0.5em;
	color: #325A8C;
}
h3.product_no_h3{
	position: relative;
	padding: 10px;
	padding-left:2em;
	padding-top:0.6em;
	color: #454545;
	font-size: 1.75rem;
	border-bottom: dashed 2px #A0C238;
	counter-increment: numeber;
}
h3.product_no_h3:before {
	content: counter(numeber)"|";
	color: #454545;
}
h3.product_no_h3:after{
	content: "";
}
h4.product_h4 {
	border-bottom: solid 3px #CDE68A;
	position: relative;
	padding: 1.2em 0 0.2em 0;
}

h4.product_h4:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #A0C238;
	bottom: -3px;
	width: 20%;
}
h4.product_no_h4 {
	border-bottom: solid 3px #CDE68A;
	position: relative;
	padding: 1.2em 0 0.2em 0;
	counter-increment: number_2;
}
h4.product_no_h4:before {
	content: counter(number_2)"|";
	color: #454545;
}
h4.product_no_h4:after{
	position: absolute;
	display: block;
	border-bottom: solid 3px #A0C238;
	bottom: -3px;
	width: 20%;
	content: "";
}
h5.product_h5{
	border-bottom: dotted 1px #CDE68A;
	position: relative;
	padding: 1.2em 0 0.2em 0;
}

/* コンテンツ */
h2.contents_h2{
	background: #e6cc07;
	box-shadow: 0px 0px 0px 5px #e6cc07;
	border: dashed 1px #b39e05;
	font-weight: bold;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.6));
	margin-bottom:1em;
}
h3.contents_h3{
	position: relative;
	padding: 10px;
	padding-left:2em;
	padding-top:1em;
	color: #454545;
	font-size: 1.75rem;
	/* font-size: 1.1em; */
	border-bottom: dashed 2px #b39e05;
}
h3.contents_h3::before{
	content: "□";
	font-size:1.5em;
	position: absolute;
	left: 0.1em;
	top: 0.15em;
	color: #FF9100;
}
h3.contents_h3::after{
	content: "□";
	font-size:1.4em;
	position: absolute;
	left: 0.4em;
	top: 0.5em;
	color: #325A8C;
}

/* 店舗・会社概要 */
h2.company_h2{
	background: #EBBDA4;
	box-shadow: 0px 0px 0px 5px #EBBDA4;
	border: dashed 1px #cc4b06;
	font-weight: bold;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.6));
	margin-bottom:1em;
}

/* QandA */
h3.q_title{
	position: relative;
	padding: 10px;
	padding-left:2em;
	padding-top:1em;
	color: #454545;
	font-size: 1.1em;
	border-bottom: dashed 2px #6594e0;
}
h3.q_title::before{
	content: "Ｑ";
	font-size:1.5em;
	position: absolute;
	left: 0.1em;
	top: 0.25em;
	color: #FF9100;
}
h3.q_title::after{
	content: "";
	font-size:1.4em;
	position: absolute;
	left: 0.4em;
	top: 0.5em;
	color: #325A8C;
}
h3.n_title{
	position: relative;
	padding: 10px;
	padding-left:1em;
	padding-top:1em;
	color: #454545;
	font-size: 1.1em;
	border-bottom: dashed 2px #6594e0;
}
h3.n_title::before{
	content: "";
	font-size:1.5em;
	position: absolute;
	left: 0em;
	top: 0.15em;
	color: #FF9100;
}
h3.n_title::after{
	content: "";
	font-size:1.4em;
	position: absolute;
	left: 0.4em;
	top: 0.5em;
	color: #325A8C;
}

span.a_title::before{
	content: "A";
	font-size:1.5em;
	position: absolute;
	left: 0.1em;
	top: 0.15em;
	color: #FF9100;
}
span.a_title::after{
	content: "";
	font-size:1.4em;
	position: absolute;
	left: 0.4em;
	top: 0.5em;
	color: #325A8C;
}

.a_contents{
	display:none;
	padding:10px;
}
.a_contents p{
	margin:10px 0;
	border-bottom:dashed 1px #d6dddf;
}







span.arrow{
	cursor: pointer;
}
span.arrow:before{
	position: absolute;
  	top: 50%;
  	left: 98%;
  	display: block;
  	margin-top: -5px;
  	width: 10px;
  	height: 10px;
  	content:'\f078';
    font-family: 'Font Awesome\ 5 Free';
	color:#222;
	font-weight: 900;
}

span.arrow02:before{
	position: absolute;
  	top: 50%;
  	left: 98%;
  	display: block;
  	margin-top: -5px;
  	width: 10px;
  	height: 10px;
  	content:'\f077';
    font-family: 'Font Awesome\ 5 Free';
	color:#222;
	font-weight: 900;
}

div#for_circle{
	margin-top:-100px;
  	padding-top:100px;
}

span.cmyk_c{
	font-size:0.9em;
	color:#0093D3;
}
span.cmyk_m{
	font-size:0.9em;
	color:#CC006B;
}
span.cmyk_y{
	font-size:0.9em;
	color:#FFF10C;
}
span.cmyk_k{
	font-size:0.9em;
	color:#000000;
}
span.cmyk_pink{
	font-size:0.9em;
	color:#ff1493;
}

span.cmyk_bg{
	background-color:#fff;
	border:2px solid #DC3545;
}
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
    opacity: .75;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}


/* 画像・文字の高さ中央ぞろえ */
p.text_img_valignmiddle img{
	vertical-align:middle;
}
/* vertical-align:top を優先したい場合（バッジと文字の高さをあわせたいときなど）　*/
.valigntop{
	vertical-align:top !important;
}
.valignmiddle{
	vertical-align:middle !important;
}

hr.hr_dropshadow{
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}


/* TOPヘッダ */
div.catarom_topheader{
	background-image: url("../imgs/catarom_all_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.cataromc94_topheader{
	background-image: url("../imgs/catarom_c94_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.cataromc95_topheader{
	background-image: url("../imgs/catarom_c95_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.cataromc96_topheader{
	background-image: url("../imgs/catarom_c96_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.cataromc97_topheader{
	background-image: url("../imgs/catarom_c97_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.appli_topheader{
	background-image: url("../imgs/appli_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.other_topheader{
	background-image: url("../imgs/bg_otherheader.png");
	background-size: cover;
	background-position: center 60%;
}
div.schedule_topheader{
	background-image: url("../imgs/schedule_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.online_topheader{
	background-image: url("../imgs/online_header.jpg");
	background-size: cover;
	background-position: center 60%;
}

div.product_topheader{
	background-image: url("../imgs/product_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.goodies_topheader{
	background-image: url("../imgs/pinz_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.pvc_topheader{
	background-image: url("../imgs/pvc_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.payment_topheader{
	background-image: url("../imgs/payment_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.format_topheader{
	background-image: url("../imgs/format_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.genkou_topheader{
	background-image: url("../imgs/genkou_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.shop_topheader{
	background-image: url("../imgs/shop_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.company_topheader{
	background-image: url("../imgs/company_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.inquiry_topheader{
	background-image: url("../imgs/inquiry_header.jpg");
	background-size: cover;
	background-position: center 60%;
}
div.only_topheader{
	background-image: url("../imgs/onlyone_header.png");
	background-size: cover;
	background-position: center center;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 350px;
}


div.header_serchbox #cse-search-box input[type="text"] {
	height: 25px;
	padding: 0 !important;
	width: 130px !important;
	font-size:0.8em;
	border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	-webkit-border-radius: 2px 2px 2px 2px;
	box-shadow: 0 0 5px #DDDDDD;
	-moz-box-shadow: 0 0 5px #DDDDDD;
	-webkit-box-shadow: 0 0 5px #DDDDDD;
}

#srchBox_header
{
width:190px;
margin-bottom:-7px;
background-color:#F8F9FA;
text-align:left;
}

#srchBox_header #srchLogo
{
margin:6px 6px -20px 0;
text-align:right;
}
#srchBox_header #srchLogo a
{
color:#666666;
text-decoration:none;
font-size:68%;
}
#srchBox_header #srchInput{
	font-size:0.85em;
	width:125px;
	top:5px;
}
#srchBox_header #srchBtn{
	top:5px;
}
#srchBox_header #srchLogo a:hover
{
text-decoration:underline;
}


.hamburger_nav{
overflow: hidden;
margin:0;
padding:0;
outline: none !important;
border:none;
}

#nav-mhweb-hamburger {
width: 30px;
height: 25px;
position: relative;
margin: 5px 0px 0px 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}




/*  -----   */
#nav-mhweb-hamburger span {
display: block;
position: absolute;
height: 2px;
width: 50%;
background: #000;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

#nav-mhweb-hamburger.open span{
margin-left:3px;
margin-top:-4px;
}

#nav-mhweb-hamburger span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0;
}

#nav-mhweb-hamburger span:nth-child(odd) {
left:0px;
border-radius: 9px 0 0 9px;
}

#nav-mhweb-hamburger span:nth-child(1), #nav-mhweb-hamburger span:nth-child(2) {
top: 0px;
}

#nav-mhweb-hamburger span:nth-child(3), #nav-mhweb-hamburger span:nth-child(4) {
top: 10px;
}

#nav-mhweb-hamburger span:nth-child(5), #nav-mhweb-hamburger span:nth-child(6) {
top: 20px;
}

#nav-mhweb-hamburger.open span:nth-child(1), #nav-mhweb-hamburger.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

#nav-mhweb-hamburger.open span:nth-child(2),#nav-mhweb-hamburger.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#nav-mhweb-hamburger.open span:nth-child(1) {
left: 0px;
top: 9px;
}

#nav-mhweb-hamburger.open span:nth-child(2) {
left: calc(50% - 5px);
top: 9px;
}

#nav-mhweb-hamburger.open span:nth-child(3) {
left: -50%;
opacity: 0;
}

#nav-mhweb-hamburger.open span:nth-child(4) {
left: 100%;
opacity: 0;
}

#nav-mhweb-hamburger.open span:nth-child(5) {
left: 0px;
top: 19px;
}

#nav-mhweb-hamburger.open span:nth-child(6) {
left: calc(50% - 5px);
top: 19px;
}