@charset "UTF-8";

@media print, screen and (min-width:1200px) {

#topHead,
#topHeadCo {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 500;
}

#topHead #logo,
#topHeadCo #logo {
position: fixed;
background: url("../img/logo.png") no-repeat;
background-size: 200px;
width: 200px;
height: 54px;
top: 30px;
left: 30px;
z-index: 1501;
}

#topHeadCo #logo {
background: url("../img/logo_b.png") no-repeat;
background-size: 200px;
}

#topHead #logo a span,
#topHeadCo #logo a span {
display: block;
width: 200px;
height: 54px;
font-size: 0;
text-indent: -10000px;
}

#topHead #globalNav ul,
#topHeadCo #globalNav ul {
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 40px;
margin: auto;
padding: 0 120px;
display: flex;
justify-content: flex-end;
z-index: 501;
}

#topHead #lineR,
#topHeadCo #lineR {
position: absolute;
background-color: #fff;
width: 1px;
height: 35px;
right: 100px;
top: 34px;
z-index: 501;
}

#topHeadCo #lineR {
background-color: var(--themeColor);
}

#topHead #globalNav ul li,
#topHeadCo #globalNav ul li {
margin: 0 20px;
}

#topHead #globalNav ul li a,
#topHeadCo #globalNav ul li a {
position: relative;
font-size: 1.8rem;
font-weight: 600;
color: #fff;
text-decoration: none;
margin: 0;
padding: 2px 0;
display: block;
line-height: 1;
}

#topHeadCo #globalNav ul li a {
color: var(--themeColor);
}

#topHead #globalNav #call a,
#topHeadCo #globalNav #call a {
position: relative;
font-family: var(--font-cormorant);
font-size: 2.6rem !important;
top: -3px;
}

#topHead #globalNav #callIcon {
background: url("../img/nav_tel.png") no-repeat left 4px;
background-size: 20px;
padding-left: 28px !important;
}

#topHead #globalNav #webIcon {
background: url("../img/nav_web.png") no-repeat left 4px;
background-size: 18px;
padding-left: 28px !important;
}

#topHead #globalNav #lineIcon {
background: url("../img/nav_line.png") no-repeat left 4px;
background-size: 19px;
padding-left: 28px !important;
}

#topHeadCo #globalNav #callIcon {
background: url("../img/nav_tel_co.png") no-repeat left 4px;
background-size: 20px;
padding-left: 28px !important;
}

#topHeadCo #globalNav #webIcon {
background: url("../img/nav_web_co.png") no-repeat left 4px;
background-size: 18px;
padding-left: 28px !important;
}

#topHeadCo #globalNav #lineIcon {
background: url("../img/nav_line_co_n.png") no-repeat left 4px;
background-size: 19px;
padding-left: 28px !important;
}

#topHead #globalNav ul li a::after,
#topHeadCo #globalNav ul li a::after {
position: absolute;
content: "";
width: 100%;
height: 1px;
background-color: #fff;
bottom: -8px;
left: 0;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

#topHeadCo #globalNav ul li a::after {
background-color: var(--themeColor);
}

#topHead #globalNav ul li a:hover::after,
#topHeadCo #globalNav ul li a:hover::after {
transform: scale(1, 1);
}

#navInsta i {
position: relative;
font-size: 3rem;
margin-top: -5px;
}

#navInstaSp,
#navInstaSpCo {
display: none;
}

.gNav {
position: fixed;
background: rgba(0,0,0,.9);
width: 100%;
height: 100vh;
z-index: -1;
opacity: 0;
top: 0;
transition: all 0.3s;
display: none;
}

.gNav.panelactive {
opacity: 1;
z-index: 999;
}

#gNavLogo {
position: fixed;
background: url("../img/logo.png") no-repeat;
background-size: 200px;
width: 200px;
height: 54px;
top: 30px;
left: 30px;
z-index: 1501;
}

#gNavLogo a span {
display: block;
width: 200px;
height: 54px;
font-size: 0;
text-indent: -10000px;
}

.openbtn,
.openbtnCo {
position: fixed;
width: 26px;
height: 16px;
top: 44px;
right: 40px;
cursor: pointer;
z-index: 9999;
}

.openbtn span,
.openbtnCo span {
position: absolute;
background-color: #fff;
width: 100%;
height: 2px;
display: inline-block;
left: 0;
transition: all .4s;
}

.openbtnCo span {
background-color: var(--themeColor);
}

.openbtn span:nth-of-type(1),
.openbtnCo span:nth-of-type(1) {
top: 0;
}

.openbtn span:nth-of-type(2),
.openbtnCo span:nth-of-type(2) {
top: 12px;
}

.openbtn.active span:nth-of-type(1),
.openbtnCo.active span:nth-of-type(1) {
background-color: #fff;
top: 0;
left: 0;
transform: translateY(6px) rotate(-45deg);
width: 30px;
}

.openbtn.active span:nth-of-type(2),
.openbtnCo.active span:nth-of-type(2) {
background-color: #fff;
top: 12px;
left: 0;
transform: translateY(-6px) rotate(45deg);
width: 30px;
}

#topHead #logo,
#topHead #snsNav {
transition: all .4s;
}

#topHead.fixed #logo {
background: url("../img/logo_b.png") no-repeat;
background-size: 200px;
}

.openbtn.fixed  span {
background-color: var(--themeColor);
}

.gNavWrap {
position: absolute;
width: 1100px;
display: flex;
justify-content: space-between;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 122999;
}

.gNavLr {
width: 48%;
}

.gNav.panelactive ul {
width: 100%;
}

.gNav li {
position: relative;
text-align: left;
display: block;
transition: .3s;
line-height: 1;
}

.gNav li:hover {
background: #222;
}

.gNav li::before {
position: absolute;
width: 10px;
height: 10px;
content: "";
margin: auto;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
right: 30px;
top: 0;
bottom: 0;
transition: .5s;
}

.gNav li:hover::before {
right: 25px;
}

.gNav li::after {
position: absolute;
background-color: #fff;
width: 100%;
height: 1px;
content: "";
opacity: .3;
left: 0;
bottom: 0;
}

.gNav li a {
position: relative;
font-size: 1.8rem;
font-weight: 600;
color: #fff;
text-decoration: none;
display: block;
padding: 30px;
transition: .3s;
}

.gNavLr li a:hover {
text-decoration: none !important;
}

.gNavFlex {
margin-top: 20px;
display: flex;
justify-content: space-between;
}

.gNavH {
width: 48% !important;
}

.gNavH li {
position: relative;
border-bottom: 0 !important;
}

.gNavH li::before {
position: absolute;
width: 7px;
height: 7px;
content: "";
margin: auto;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
right: 30px;
top: 0;
bottom: 0;
}

.gNavH li::after {
display: none !important;
}

.gNavH li a {
font-size: 1.4rem;
padding: 10px 30px;
}

}

@media print, screen and (max-width:1199px) {

#topHead #globalNav,
#topHeadCo #globalNav,
#snsNav {
display: none;
}

#topHead,
#topHeadCo {
position: fixed;
width: 100%;
height: 70px;
padding: 0;
line-height: 1;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 500;
}

#topHeadCo {
background-color: #fff;
}

#navInstaSp,
#navInstaSpCo {
position: absolute;
font-size: 3rem;
top: 11px;
right: 60px;
z-index: 50;
}

#navInstaSp a {
color: #fff;
}

#navInstaSpCo a {
color: var(--themeColor);
}

#topHead #logo,
#topHeadCo #logo {
position: relative;
background: url("../img/logo.png") no-repeat;
background-size: contain;
width: 170px;
height: 45px;
padding: 0;
top: 10px;
left: 15px;
z-index: 501;
}

#topHeadCo #logo {
background: url("../img/logo_b.png") no-repeat;
background-size: contain;
}

#topHead #logo a span,
#topHeadCo #logo a span {
display: block;
width: 170px;
height: 45px;
font-size: 0;
text-indent: -10000px;
}

.openbtn,
.openbtnCo {
position: fixed;
width: 26px;
height: 16px;
top: 20px;
right: 20px;
cursor: pointer;
z-index: 9999;
}

.openbtn span,
.openbtnCo span {
position: absolute;
background-color: #fff;
width: 100%;
height: 2px;
display: inline-block;
left: 0;
transition: all .4s;
}

.openbtnCo span {
background-color: var(--themeColor);
}

.openbtn span:nth-of-type(1),
.openbtnCo span:nth-of-type(1) {
top: 0;
}

.openbtn span:nth-of-type(2),
.openbtnCo span:nth-of-type(2) {
top: 12px;
}

.openbtn.active span:nth-of-type(1),
.openbtnCo.active span:nth-of-type(1) {
background-color: #fff;
top: 0;
left: 0;
transform: translateY(6px) rotate(-45deg);
width: 30px;
}

.openbtn.active span:nth-of-type(2),
.openbtnCo.active span:nth-of-type(2) {
background-color: #fff;
top: 12px;
left: 0;
transform: translateY(-6px) rotate(45deg);
width: 30px;
}

#topHead.fixed #logo {
background: url("../img/logo_b.png") no-repeat;
background-size: 170px
}

.openbtn.fixed  span {
background-color: var(--themeColor);
}

.gNav {
position: fixed;
background: rgba(0,0,0,.9);
width: 100%;
height: 100vh;
z-index: -1;
opacity: 0;
top: 0;
transition: all 0.3s;
display: none;
}

.gNav.panelactive {
opacity: 1;
z-index: 999;
}

#gNavLogo {
display: none;
}

#gNavLogo a span {
display: block;
width: 200px;
height: 54px;
font-size: 0;
text-indent: -10000px;
}

.gNavWrap {
position: absolute;
width: 80%;
margin: auto;
top: 5%;
left: 0;
right: 0;
z-index: 122999;
}

.gNavLr {
width: 100%;
}

.gNav.panelactive ul {
width: 100%;
}

.gNav li {
position: relative;
text-align: left;
display: block;
line-height: 1;
}

.gNav li::before {
position: absolute;
width: 10px;
height: 10px;
content: "";
margin: auto;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
right: 30px;
top: 0;
bottom: 0;
transition: .5s;
}

.gNav li::after {
position: absolute;
background-color: #fff;
width: 100%;
height: 1px;
content: "";
opacity: .3;
left: 0;
bottom: 0;
}

.gNav li a {
position: relative;
font-size: 1.3rem;
font-weight: 600;
color: #fff;
text-decoration: none;
display: block;
padding: 16px 15px 20px;
transition: .3s;
}

.gNavLr li a:hover {
text-decoration: none !important;
}

.gNavFlex {
display: none;
}

.gNavH {
width: 48% !important;
}

.gNavH li {
position: relative;
border-bottom: 0 !important;
}

.gNavH li::before {
position: absolute;
width: 7px;
height: 7px;
content: "";
margin: auto;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
right: 30px;
top: 0;
bottom: 0;
}

.gNavH li::after {
display: none !important;
}

.gNavH li a {
font-size: 1.4rem;
padding: 10px 30px;
}

}