@charset "utf-8";
html {}
body {
background-color: #FFFFFF;
min-width: 980px;
-webkit-text-size-adjust: 100%;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}
a:link {
color: #000000;
transition: .3s;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #0099CC;
text-decoration: underline;
}
a:active {
color: #999999;
text-decoration: none;
}
a.btn img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-ms-filter: 'alpha(opacity=100)';
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a:hover.btn img {
-ms-filter: 'alpha(opacity=60)';
filter: alpha(opacity=30);
-moz-opacity: 0.40;
opacity: 0.40;
}
a {
outline: none;
}
::selection {
background: #000000;
color: #FFFFFF;
}
::-moz-selection {
background:#000000;
color:#FFFFFF;
}
::-webkit-selection {
background:#000000;
color:#FFFFFF;
}
strong {
font-weight: bold;
}
.pc {
display: inherit!important;
}
.sp {
display: none!important;
}
#wrapper {
overflow: hidden
}
/*--HEADER-------------*/
header {
height: 90px;
}
header .inner {
width: 90%;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;
}
header a {
text-decoration: none;
}
header h1 {
float: left;
margin-top: 35px;
}
header .head_r{
float: right;
text-align: right;
color: #172870;
padding-top: 20px;
}
header .head_r .telnum{
font-size: 21px;
font-weight: 600;
letter-spacing: 0.07em;
}
/*--NAVIGATION-------------*/
header #gnav .mark{
display: none
}
header #gnav ul {
display: block;
float: right;
text-align: right;
font-size: 16px;
padding-top: 10px;
font-weight: 700;
}
header #gnav ul li {
display: inline;
font-size: 14px;
margin-left: 25px;
}
header #gnav ul li a {
  position: relative;
  display: inline-block;
  transition: .3s;
  color: #172870;
}
header #gnav ul li a:hover {
  text-decoration: none
}
header #gnav ul li a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 2px;
  background-color: #172870;
  transition: .3s;
}
header #gnav ul li a:hover::after {
  width: 100%;
}

/*--MAINVIS-------------*/
#mainVis {
height: 500px;
position: relative;
margin-bottom: 30px;
}

#mainVis .swiper-slide img{
width: 100%;
height: 500px;
object-fit: cover
}
#mainVis #mv_copy{
position: absolute;
left: 2%;
top: 60px;
z-index: 99
}

/*--CONTENTS-------------*/
#contents {
width: 980px;
margin-right: auto;
margin-left: auto;
}
#contents:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden
}

/*--INDEX_NAV-------------*/
#index_nav {
color: #172870;
margin-bottom: 50px;
}
#index_nav li {
width: 308px;
margin-right: 28px;
float: left
}
#index_nav li:last-child {
margin-right: 0px;
}
#index_nav li .thum img{
width: 100%;
height: auto
}
#index_nav li .ttl{
    font-size: 16px;
    font-weight: 500;
    border-bottom: 2px solid #172870;
    margin-top: 3px;
    margin-bottom: 5px;
}
#index_nav li .exp{
font-size: 13px;
}


/*--FT_CONTACT-------------*/
#ft_contact{
background-color: #1B285F;
color: #FFF;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
#ft_contact .ttl{
font-size: 20px;
font-weight: 500;
letter-spacing: 0.08em;
margin-bottom: 20px;
}
#ft_contact ul{
width: 980px;
margin-left: auto;
margin-right: auto;
}
#ft_contact ul li{
width: 460px;
float: left;
margin-right: 60px;
background-color: #FFF;
color: #1B285F;
line-height: 70px;
font-size: 29px;
font-weight: 600;
letter-spacing: 0.08em;
}
#ft_contact ul li:last-child{
margin-right: 0px;
font-size: 20px;
}
#ft_contact ul li a{
text-decoration: none;
color: #1B285F;
}
#ft_contact ul li a:hover{
text-decoration: underline
}

/*--FOOTER-------------*/
footer {
background-color: #EFF0F4;
clear: both;
padding-top: 20px;
}
footer .inner {
width: 980px;
margin-right: auto;
margin-left: auto;
padding-bottom: 30px;
}
footer .logo{
margin-bottom: 10px;
}
footer ul {
}
footer li {
width: 308px;
float: left;
margin-right: 28px;
font-size: 12px;
}
footer li:last-child {
margin-right: 0;
}
footer li .ttl{
color: #172870;
    font-weight: 500;
    border-bottom: 2px solid #172870;
    margin-top: 3px;
    margin-bottom: 5px;
}
footer .credit{
background-color: #FFF;
padding-top: 10px;
padding-bottom: 40px;
text-align: center;
font-size: 12px;
color: #929292
}


/*--SUB_PAGE-------------*/
#sub_ttl {
    width: 100%;
    background-color: #000;
    color: #FFF;
    margin-bottom: 20px;
    background-position: center center;
    background-size: cover;
}
#sub_ttl h2{
font-size: 28px;
font-family :YuMincho,'Yu Mincho',serif;
font-weight: 500;
width: 90%;
margin-left: auto;
margin-right: auto;
padding-top: 60px;
padding-bottom: 120px;
}

#sub_nav {
float: right;
text-align: center;
margin-bottom: 30px;
}
#sub_nav li{
display: inline;
}
#sub_nav li a{
background-color: #1B285F;
color: #FFF;
letter-spacing: 0.08em;
padding: 5px 20px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
border-radius: 100px;
font-size: 12px;
}
#sub_nav li a:hover{
opacity: .6;
}

h3{
font-size: 18px;
color: #172870;
    font-weight: 500;
    border-bottom: 2px solid #172870;
    margin-top: 3px;
    margin-bottom: 25px;
    clear: both
}

/*--COMPANY-------------*/
.history_ph_main{
position: relative;
margin-bottom: 20px;
}
.history_txt {
margin-bottom: 20px;
}
.history_txt th{
background-color: #000;
color: #FFF;
width: 30%;
position: relative
}
.history_txt th .label{
position: absolute;
right: 20px;
top: 20px;
font-size: 12px;
}
.history_txt th .heading{
position: absolute;
left: 20px;
bottom: 20px;
font-size: 26px;
font-family :YuMincho,'Yu Mincho',serif;
font-weight: 500;
line-height: 1.4;
}
.history_txt td{
padding: 30px 0px 30px 30px;
text-align: justify
}
.history_txt td p{
margin-bottom: 0.7em;
}

.history_sub_ph {
margin-bottom: 50px;
margin-bottom: 160px;
}
.history_sub_ph li {
width: 308px;
margin-right: 28px;
float: left
}
.history_sub_ph li:last-child {
margin-right: 0px;
}
.history_sub_ph li .ph img{
width: 100%;
height: auto
}
.history_sub_ph li .exp{
 margin-top: 3px;
font-size: 11px;
}


.history_ph_main.fase01 .cap{
position: absolute;
right: 10px;
top: 10px;
color: #FFF;
font-weight: 500;
font-size: 11px;
}
.history_ph_main.fase02 .cap{
position: absolute;
left: 10px;
top: 10px;
font-weight: 500;
font-size: 11px;
}
.history_ph_main.fase02 .cap2{
position: absolute;
right: 10px;
top: 10px;
font-weight: 500;
font-size: 11px;
}
.history_ph_main.fase03 .cap{
position: absolute;
right: 10px;
top: 10px;
color: #FFF;
font-weight: 500;
font-size: 11px;
}
.data_tbl{
width: 100%;
margin-bottom: 80px;
}
.data_tbl th,.data_tbl td{
    padding-top: 15px;
    padding-bottom: 15px;
    vertical-align: top;
    border-bottom: 1px solid #D3D3D3;
}
.data_tbl th{
width: 230px;
}
.data_tbl td p{
margin-bottom: 1em;
}
.company_policy{
text-align: center
}

/*--WORKS-------------*/
.works_list{
margin-bottom: 60px;
}
.works_list li{
width: 470px;
margin-right: 40px;
float: left;
margin-bottom: 30px;
}
.works_list li:nth-child(2n){
margin-right: 0px;
}
.works_list li .ph{
margin-bottom: 5px;
}
.works_list li .ph img{
width: 100%;
height: auto;
}
.works_list li .exp{
font-size: 12px;
}
.works_list li.txt{
font-size: 11px;
line-height: 2.2;
}

/*--RECRUIT-------------*/
#sub_ttl.recruit {
    background-position: center bottom;    
}
#sub_ttl.recruit h2{
font-size: 18px;
font-family :'Noto Sans Japanese', sans-serif;
font-weight: 500;
width: 90%;
margin-left: auto;
margin-right: auto;
padding-top: 60px;
padding-bottom: 30px;
}
#sub_ttl.recruit h2 span{
background-color: #FFF;
padding: 2px 20px;
line-height: 1;
border-radius: 30px;
color: #000
}
#sub_ttl.recruit .mv_copy{
    padding-left: 5%;
    padding-bottom: 260px;
}
#recruit_pr{}
#recruit_pr li{
width: 100%;
margin-bottom: 40px;
}
#recruit_pr li .ph{
width: 590px;
float: left
}
#recruit_pr li .ph img{
width: 100%;
height: auto
}
#recruit_pr li .txt{
width: 360px;
float: right
}
#recruit_pr li .txt .ttl{
    font-size: 18px;
    color: #172870;
    font-weight: 600;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 2px solid #172870;
}
#recruit_pr li .txt .sentence{
    font-size: 13px;
}
#recruit_pr li:nth-child(2) .ph{
float: right
}
#recruit_pr li:nth-child(2) .txt{
float: left
}
.data_tbl strong{
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
}

/*--CONTACT-------------*/
.contact_read{
margin-bottom: 30px;
}
#mailformpro table{
width: 70%;
margin-left: auto;
margin-right: auto;
}
#mailformpro table .form_field{
width: calc(100% - 4px)!important;
padding: 2px!important;
}
.req{
color: #FF0004
}
#mailformpro .submit_btn {
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	color: #FFF;
	background-color: #000;
	cursor: pointer;
	outline: none;
}
.mfp_element_reset {
	color: #333;
}
.form_btn{
text-align: center
}
#mailformpro .submit_btn:hover {
	background-color: #878787;
}
.mfp_thanks{
padding-top: 50px;
padding-bottom: 100px;
}




























@media screen and (max-width: 479px) {
html {}
body {
background-color: #FFFFFF;
min-width: 320px;
-webkit-text-size-adjust: 100%;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
a:link {
color: #000000;
transition: .3s;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #0099CC;
text-decoration: underline;
}
a:active {
color: #999999;
text-decoration: none;
}
a.btn img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-ms-filter: 'alpha(opacity=100)';
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a:hover.btn img {
-ms-filter: 'alpha(opacity=60)';
filter: alpha(opacity=30);
-moz-opacity: 0.40;
opacity: 0.40;
}
a {
outline: none;
}
::selection {
background: #000000;
color: #FFFFFF;
}
::-moz-selection {
background:#000000;
color:#FFFFFF;
}
::-webkit-selection {
background:#000000;
color:#FFFFFF;
}
strong {
font-weight: bold;
}
.pc {
display: none!important;
}
.sp {
display: inherit!important;
}
#wrapper {
overflow: hidden
}
/*--HEADER-------------*/
header {
height: 60px;
}
header .inner {
width: 90%;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;
}
header a {
text-decoration: none;
}
header h1 {
float: left;
margin-top: 15px;
}
header h1 img{
width: 180px;
height: auto;
}
header .head_r{
float: right;
text-align: right;
color: #172870;
padding-top: 20px;
}
header .head_r .telnum{
font-size: 21px;
font-weight: 600;
letter-spacing: 0.07em;
display: none
}
/*--NAVIGATION-------------*/
header #gnav .mark{
display: block;
padding-top: 100px;
padding-bottom: 30px;
text-align: center;
}
header #gnav .mark img{
width: 70%;
height: auto;
}
header #gnav {
display: none;
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(255,255,255,0.83);
left: 0;
top:0;
z-index: 999
}
header #gnav ul {
display: block;
float: none;
text-align: center;
font-size: 16px;
padding-top: 10px;
font-weight: 700;
}
header #gnav ul li {
display: block;
font-size: 16px;
margin-left: 0px;
margin-bottom: 25px
}
header #gnav ul li a {
  position: relative;
  display: inline-block;
  transition: .3s;
  color: #172870;
}
header #gnav ul li a:hover {
  text-decoration: none
}
header #gnav ul li a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 2px;
  background-color: #172870;
  transition: .3s;
}
header #gnav ul li a:hover::after {
  width: 100%;
}

/*--MAINVIS-------------*/
#mainVis {
height: 450px;
position: relative;
margin-bottom: 30px;
}

#mainVis .swiper-slide img{
width: 100%;
height: 450px;
object-fit: cover
}
#mainVis #mv_copy{
position: absolute;
left: 2%;
top: auto;
z-index: 99;
bottom: 10vh;
}
#mainVis #mv_copy img{
width: 100%;
height: auto;
}

/*--CONTENTS-------------*/
#contents {
width: 90%;
margin-right: auto;
margin-left: auto;
}
#contents:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden
}

/*--INDEX_NAV-------------*/
#index_nav {
color: #172870;
margin-bottom: 50px;
}
#index_nav li {
width: 100%;
margin-right: 8px;
float: none;
margin-bottom: 30px;
}
#index_nav li:last-child {
margin-right: 0px;
}
#index_nav li .thum img{
width: 100%;
height: auto
}
#index_nav li .ttl{
    font-size: 16px;
    font-weight: 500;
    border-bottom: 2px solid #172870;
    margin-top: 3px;
    margin-bottom: 5px;
}
#index_nav li .exp{
font-size: 13px;
}


/*--FT_CONTACT-------------*/
#ft_contact{
background-color: #1B285F;
color: #FFF;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
#ft_contact .ttl{
font-size: 16px;
font-weight: 500;
letter-spacing: 0.08em;
margin-bottom: 20px;
}
#ft_contact ul{
width: 90%;
margin-left: auto;
margin-right: auto;
}
#ft_contact ul li{
width: 100%;
float: none;
margin-right: 60px;
background-color: #FFF;
color: #1B285F;
line-height: 70px;
font-size: 24px;
font-weight: 600;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
#ft_contact ul li:last-child{
margin-right: 0px;
font-size: 18px;
}
#ft_contact ul li a{
text-decoration: none;
color: #1B285F;
}
#ft_contact ul li a:hover{
text-decoration: underline
}

/*--FOOTER-------------*/
footer {
background-color: #EFF0F4;
clear: both;
padding-top: 30px;
}
footer .inner {
width: 90%;
margin-right: auto;
margin-left: auto;
padding-bottom: 30px;
}
footer .logo{
margin-bottom: 10px;
text-align: center
}
footer .logo img{
width: 230px;
height: auto
}
footer ul {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
footer li {
width: 100%;
float: none;
margin-right: 0px;
font-size: 14px;
margin-bottom: 15px;
}
footer li:last-child {
margin-right: 0;
}
footer li .ttl{
color: #172870;
    font-weight: 500;
    border-bottom: 2px solid #172870;
    margin-top: 3px;
    margin-bottom: 5px;
}
footer .credit{
background-color: #FFF;
padding-top: 10px;
padding-bottom: 40px;
text-align: center;
font-size: 12px;
color: #929292
}


/*--SUB_PAGE-------------*/
#sub_ttl {
    width: 100%;
    background-color: #000;
    color: #FFF;
    margin-bottom: 20px;
    background-position: center center;
    background-size: cover;
}
#sub_ttl h2{
font-size: 24px;
font-family :YuMincho,'Yu Mincho',serif;
font-weight: 500;
width: 90%;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
padding-bottom: 10px;
}

#sub_nav {
float: none;
text-align: center;
margin-bottom: 30px;
}
#sub_nav li{
display: inline;
}
#sub_nav li a{
background-color: #1B285F;
color: #FFF;
letter-spacing: 0.08em;
padding: 5px 14px;
margin-left: 2px;
margin-right: 2px;
text-decoration: none;
border-radius: 100px;
font-size: 12px;
}
#sub_nav li a:hover{
opacity: .6;
}

h3{
font-size: 18px;
color: #172870;
    font-weight: 500;
    border-bottom: 2px solid #172870;
    margin-top: 3px;
    margin-bottom: 25px;
    clear: both
}

/*--COMPANY-------------*/
.history_ph_main{
position: relative;
margin-bottom: 20px;
}
.history_ph_main img{
width: 100%;
height: auto
}
.history_txt {
margin-bottom: 0px;
}
.history_txt th{
background-color: #000;
color: #FFF;
width: 100%;
position: relative;
display: block
}
.history_txt th .label{
position: relative;
right: auto;
top: auto;
font-size: 12px;
text-align: right;
padding: 20px
}
.history_txt th .heading{
position: relative;
left: auto;
bottom: auto;
font-size: 26px;
font-family :YuMincho,'Yu Mincho',serif;
font-weight: 500;
line-height: 1.4;
padding: 20px
}
.history_txt td{
padding: 20px 10px 30px 10px;
display: block;
text-align: justify
}
.history_txt td p{
margin-bottom: 0.7em;
}

.history_sub_ph {
margin-bottom: 20px;
margin-bottom: 80px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.history_sub_ph li {
width: 100%;
margin-right: 0px;
float: none;
margin-bottom: 20px;
}
.history_sub_ph li:last-child {
margin-right: 0px;
}
.history_sub_ph li .ph img{
width: 100%;
height: auto
}
.history_sub_ph li .exp{
 margin-top: 3px;
font-size: 11px;
}


.history_ph_main.fase01 .cap{
position: absolute;
right: 10px;
top: 10px;
color: #FFF;
font-weight: 500;
font-size: 10px;
}
.history_ph_main.fase02 .cap{
position: absolute;
left: 10px;
top: 10px;
font-weight: 500;
font-size: 10px;
}
.history_ph_main.fase02 .cap2{
position: absolute;
right: 10px;
top: 10px;
font-weight: 500;
font-size: 10px;
}
.history_ph_main.fase03 .cap{
position: absolute;
right: 10px;
top: 10px;
color: #FFF;
font-weight: 500;
font-size: 10px;
}
.data_tbl{
width: 100%;
margin-bottom: 40px;
}
.data_tbl th,.data_tbl td{
    padding-top: 15px;
    padding-bottom: 15px;
    vertical-align: top;
    border-bottom: 1px solid #D3D3D3;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
}
.data_tbl th{
width: calc(100% - 20px);
background-color: #E8E8E8;
}
.data_tbl td p{
margin-bottom: 1em;
}
.company_policy{
text-align: center
}
.company_policy img{
width: 100%;
height: auto
}


/*--WORKS-------------*/
.works_read{
margin-bottom: 30px;
}
.works_list{
margin-bottom: 60px;
}
.works_list li{
width: 100%;
margin-right: 0;
float: none;
margin-bottom: 30px;
}
.works_list li:nth-child(2n){
margin-right: 0px;
}
.works_list li .ph{
margin-bottom: 5px;
}
.works_list li .ph img{
width: 100%;
height: auto;
}
.works_list li .exp{
font-size: 12px;
}
.works_list li.txt{
font-size: 11px;
line-height: 2.2;
}

/*--RECRUIT-------------*/
#sub_ttl.recruit {
    background-position: center bottom;    
}
#sub_ttl.recruit h2{
font-size: 18px;
font-family :'Noto Sans Japanese', sans-serif;
font-weight: 500;
width: 90%;
margin-left: auto;
margin-right: auto;
padding-top: 60px;
padding-bottom: 30px;
}
#sub_ttl.recruit h2 span{
background-color: #FFF;
padding: 2px 20px;
line-height: 1;
border-radius: 30px;
color: #000
}
#sub_ttl.recruit .mv_copy{
    padding-left: 5%;
    padding-bottom: 160px;
}
#sub_ttl.recruit .mv_copy img{
width: 90%;
height: auto;
}
#recruit_pr{}
#recruit_pr li{
width: 100%;
margin-bottom: 40px;
}
#recruit_pr li .ph{
width: 100%;
float: none;
margin-bottom: 10px;
}
#recruit_pr li .ph img{
width: 100%;
height: auto
}
#recruit_pr li .txt{
width: 100%;
float: none
}
#recruit_pr li .txt .ttl{
    font-size: 18px;
    color: #172870;
    font-weight: 600;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 2px solid #172870;
}
#recruit_pr li .txt .sentence{
    font-size: 13px;
}
#recruit_pr li:nth-child(2) .ph{
float: none
}
#recruit_pr li:nth-child(2) .txt{
float: none
}
.data_tbl strong{
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
}

/*--CONTACT-------------*/
.contact_read{
margin-bottom: 30px;
}
#mailformpro table{
width: 100%;
margin-left: auto;
margin-right: auto;
}
#mailformpro table .form_field{
width: calc(100% - 4px)!important;
padding: 2px!important;
}
.req{
color: #FF0004
}
#mailformpro .submit_btn {
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	color: #FFF;
	background-color: #000;
	cursor: pointer;
	outline: none;
}
.mfp_element_reset {
	color: #333;
}
.form_btn{
text-align: center
}
#mailformpro .submit_btn:hover {
	background-color: #878787;
}
.mfp_thanks{
padding-top: 50px;
padding-bottom: 100px;
}
input{ font-size:16px!important; } /*フォームのフォーカスOFF*/
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  font-size:16px;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
/*SP NAV*/
#panel-btn{
  display: inline-block;
  position: fixed;
  width: 40px;
  height: 40px;
  margin: 5px 0 10px;
  border-radius: 50%;
  right: 20px;
  top: 10px;
  z-index: 9999999;
animation-duration: 2s;
}
#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #172870;
  transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #172870;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -6px;
}
#panel-btn-icon:after{
  margin-top: 4px;
}
#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
}