@media screen and (max-width: 767px) {
.sp-header-fix #wrap {
padding-top: 50px;
}
.sp-header-fix #header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 20;
}
.sp-header-fix .header-nav {
max-height: 100vh;
overflow: auto;
}
}
#header {
position: relative;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
z-index: 10;
}
@media screen and (min-width: 960px) {
#header {
box-shadow: var(--ns-header-box-shadow-pc);
}
}
#header.show-only-logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
box-shadow: none;
}
#header.show-only-logo .header-main-wrap, #header.show-only-logo .header-main-outer {
background: none;
}
.header-bar {
display: none;
color: var(--ns-headerbar-text);
background-color: var(--ns-headerbar-bg);
}
@media screen and (min-width: 960px) {
.header-bar {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pac: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
height: 40px;
line-height: 40px;
}
}
.header-bar.-empty {
height: 0;
}
.header-bar-tel {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
overflow: hidden;
}
@media screen and (min-width: 768px) and (max-width: 959px) {
.header-bar-tel {
padding-left: 15px;
}
}
@media screen and (min-width: 960px) and (max-width: 1179px) {
.header-bar-tel {
padding-left: 15px;
}
}
@media screen and (min-width: 1180px) {
.header-bar-tel {
padding-left: 30px;
}
}
.header-bar-tel-number {
white-space: nowrap;
font-size: 18px;
}
.header-bar-tel-number i {
line-height: inherit;
vertical-align: bottom;
}
.header-bar-tel-number a {
color: inherit;
text-decoration: none;
}
.header-bar-tel-number i {
margin-right: 0.2em;
}
.header-bar-tel-hours {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
margin-left: 20px;
font-size: 13px;
line-height: 1;
}
.header-bar-right {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.header-bar-right:first-child {
width: 100%;
-ms-flex-pac: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.header-bar-button-wrap {
white-space: nowrap;
height: 100%;
}
.header-bar-button-wrap i {
line-height: inherit;
vertical-align: bottom;
}
.header-bar-button-wrap a {
display: block;
height: 100%;
padding-left: 2em;
padding-right: 2em;
font-size: 14px;
text-align: center;
text-decoration: none;
}
.header-bar-sns-wrap {
display: none;
}
@media screen and (min-width: 960px) {
.header-bar-sns-wrap {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
}
@media screen and (min-width: 960px) {
.header-bar-sns-wrap .header-sns {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
}
#qtranxs_select_qtransxf-select-header-bar-chooser {
height: 40px;
padding-top: 8px;
padding-bottom: 8px;
line-height: 24px;
}
.header-main-wrap {
position: relative;
z-index: 20;
}
.header-main-outer {
position: relative;
color: var(--ns-header-text-pc);
background-color: var(--ns-header-bg-pc);
}
@media screen and (max-width: 959px) {
.header-main-outer {
position: relative;
color: var(--ns-header-text-sp);
background-color: var(--ns-header-bg);
z-index: 10;
}
}
.header-main {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
transition: opacity 0.3s;
}
@media screen and (max-width: 767px) {
.header-main {
height: 50px;
}
}
@media screen and (max-width: 959px) {
.header-main {
padding-left: 15px;
padding-right: 5px;
}
}
@media screen and (min-width: 960px) {
.header-main {
-ms-flex-pac: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
min-height: 60px;
}
}
@media screen and (min-width: 960px) and (max-width: 1179px) {
.header-main-standard-left {
padding-left: 15px;
}
}
@media screen and (min-width: 1180px) {
.header-main-standard-left {
padding-left: 30px;
}
}
.header-main-sns-wrap {
display: none;
}
@media screen and (min-width: 960px) {
.header-main-sns-wrap {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
}
@media screen and (min-width: 960px) {
.header-main-sns-wrap .header-sns {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
.header-main-standard-center:before {
-ms-flex: 0 0 70px;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
content: "";
display: block;
}
}
@media screen and (min-width: 960px) {
.header-main-standard-center .header-title {
padding-left: 15px;
padding-right: 15px;
}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
.header-main-standard-center .header-title {
padding-left: 15px;
padding-right: 15px;
}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
.header-main-standard-center .header-title-pc {
-ms-flex-pac: center;
-webkit-justify-content: center;
justify-content: center;
}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
.header-main-standard-center .header-sp-button {
-ms-flex: 0 0 70px;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
}
@media screen and (min-width: 960px) {
.header-main-standard-center-cols:before {
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
content: "";
display: block;
width: 360px;
}
}
@media screen and (min-width: 960px) {
.header-main-standard-center-cols .header-sns {
-ms-flex-pac: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
width: 360px;
}
}
@media screen and (min-width: 960px) {
.header-main-standard-center-full .header-title {
width: 100%;
}
}
.header-main-standard-center-full .header-title-pc {
-ms-flex-pac: center;
-webkit-justify-content: center;
justify-content: center;
}
.header-main a {
color: inherit;
}
.header-title {
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center;
margin-right: 10px;
}
@media screen and (max-width: 959px) {
.header-title {
-ms-flex: 1 1 100%;
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
}
}
@media screen and (min-width: 960px) {
.header-title {
margin-right: 0;
}
}
.header-title a {
display: block;
text-decoration: none;
}
.header-title img {
display: block;
}
.header-title-sp {
max-height: 44px;
line-height: 22px;
font-size: 18px;
font-weight: bold;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.header-title-sp {
display: none;
}
}
.header-title-sp img {
width: auto;
height: var(--ns-header-image-sp-height, auto);
max-height: 40px;
}
.header-title-pc {
display: none;
}
@media screen and (min-width: 768px) {
.header-title-pc {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding-top: 15px;
padding-bottom: 15px;
line-height: 25px;
font-size: 20px;
font-weight: bold;
}
}
.header-title-pc img {
width: auto;
max-height: var(--ns-header-image-pc-height, 90px);
}
.header-sp-button {
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pac: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
@media screen and (min-width: 960px) {
.header-sp-button {
display: none;
}
}
.header-sp-search, .header-sp-menu {
-ms-flex: 0 0 35px;
-webkit-flex: 0 0 35px;
flex: 0 0 35px;
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center;
width: 35px;
height: 35px;
line-height: 35px;
font-size: 28px;
text-align: center;
}
@media screen and (min-width: 960px) {
.header-sp-search, .header-sp-menu {
display: none;
}
}
.header-sp-search-btn, .header-sp-menu-btn {
cursor: pointer;
}
.header-sp-menu-btn {
position: relative;
width: 35px;
height: 35px;
}
.header-sp-menu-btn .bx-x {
display: none;
}
.header-sp-menu-btn.active .bx-menu {
display: none;
}
.header-sp-menu-btn.active .bx-x {
display: inline-block;
}
.header-sp-menu-btn-normal i {
position: relative;
top: -4px;
}
.header-sp-menu-btn-normal:after {
content: "MENU";
position: absolute;
left: -5px;
bottom: 2px;
display: block;
width: 45px;
line-height: 1;
font-family: "Helvetica Neue", Roboto, sans-serif;
font-size: 10px;
text-align: center;
transform: scale(0.9);
}
.header-sp-menu-btn-normal.active:after {
content: "CLOSE";
}
.header-nav-menu {
color: var(--ns-header-menu-text-pc);
}
.header-nav-menu a {
box-sizing: border-box;
display: block;
color: inherit;
text-decoration: none;
}
.header-nav-menu .menu-item-has-children > a {
position: relative;
}
.header-nav-menu .sub-menu {
display: none;
background-color: var(--ns-header-menu-bg-pc);
}
.header-nav-menu .sub-menu a:hover {
background-color: var(--ns-header-submenu-overlay);
}
.header-nav-menu .label, .header-nav-menu .sublabel {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.header-nav-menu .label .bx, .header-nav-menu .sublabel .bx {
margin-left: 2px;
margin-right: 2px;
line-height: inherit;
font-size: 16px;
vertical-align: middle;
}
.header-nav-menu .sublabel .bx {
font-size: 14px;
}
@media screen and (max-width: 959px) {
.header-nav {
display: none;
position: absolute;
left: 0;
width: 100%;
color: var(--ns-headerbar-text);
background-color: var(--ns-headerbar-bg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
z-index: 5;
}
.header-nav-menu {
padding-top: 20px;
padding-bottom: 20px;
color: var(--ns-header-menu-text-sp);
background-color: var(--ns-header-menu-bg-sp);
}
.header-nav-menu a {
padding-left: 15px;
padding-right: 15px;
white-space: nowrap;
height: 40px;
line-height: 40px;
}
.header-nav-menu a .sublabel {
display: none;
}
.header-nav-menu .toggle-children {
position: absolute;
top: 0;
right: 0;
box-sizing: border-box;
display: block;
width: 40px;
height: 100%;
padding-right: 5px;
line-height: inherit;
font-size: 30px;
text-align: right;
}
.header-nav-menu .toggle-children .bx-chevron-up {
display: none;
}
.header-nav-menu .menu-item-has-children > a {
position: relative;
padding-right: 45px;
}
.header-nav-menu .menu-item-has-children.open .toggle-children .bx-chevron-down {
display: none;
}
.header-nav-menu .menu-item-has-children.open .toggle-children .bx-chevron-up {
display: inline-block;
}
.header-nav-menu > .menu-item-has-children {
cursor: pointer;
}
.header-nav-menu .sub-menu {
background: none;
}
.header-nav-menu .sub-menu a {
padding-left: 30px;
font-weight: normal;
}
.header-nav-menu .sub-menu .sub-menu a {
padding-left: 45px;
}
}
@media screen and (max-width: 767px) {
.header-nav {
top: 0;
padding-top: 50px;
}
}
@media screen and (min-width: 960px) {
.header-nav {
color: var(--ns-header-menu-text-pc);
background-color: var(--ns-header-menu-bg-pc);
}
.header-nav-menu {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pac: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
height: 100%;
}
.header-nav-menu li a {
padding-left: 20px;
padding-right: 20px;
}
.header-nav-menu > li {
position: relative;
}
.header-nav-menu > li > a {
transition: opacity 0.1s;
line-height: 20px;
font-size: 14px;
}
.header-nav-menu > li > a:hover, .header-nav-menu > li > a:active {
opacity: 0.8;
transition: opacity 0.3s;
}
.header-nav-menu > li > a .label {
overflow: hidden;
}
.header-nav-menu > li > a .sublabel {
display: block;
height: 15px;
line-height: 15px;
font-size: 11px;
text-align: center;
overflow: hidden;
}
.header-nav-menu > li > .sub-menu {
position: absolute;
left: 0;
top: var(--ns-header-nav-sub-menu-position-top-pc);
padding-top: 10px;
padding-bottom: 10px;
box-shadow: var(--ns-header-box-shadow-submenu);
z-index: 5;
}
.header-nav-menu > li > .sub-menu li {
padding-left: 0;
padding-right: 0;
}
.header-nav-menu > li > .sub-menu a {
width: 200px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
line-height: 20px;
font-size: 14px;
transition: background-color 0.1s;
}
.header-nav-menu > li > .sub-menu a:hover, .header-nav-menu > li > .sub-menu a:active {
transition: background-color 0.3s;
}
.header-nav-menu > li > .sub-menu a .label {
display: block;
max-height: 40px;
overflow: hidden;
}
.header-nav-menu .label, .header-nav-menu .sublabel {
-ms-flex-pac: center;
-webkit-justify-content: center;
justify-content: center;
}
.header-nav-menu .toggle-children {
display: none;
}
.header-nav .header-nav-menu > li > a {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: column;
-webkit-flex-flow: column;
flex-flow: column;
-ms-flex-pac: center;
-webkit-justify-content: center;
justify-content: center;
height: 100%;
padding-top: 20px;
padding-bottom: 20px;
}
.header-nav .header-nav-menu > li > a .label {
max-height: 40px;
}
.header-nav .header-nav-menu > li.menu-item-has-sublabel > a .label {
max-height: 20px;
}
.header-nav-border .header-nav-menu {
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
}
@media screen and (min-width: 960px) and (min-width: 768px) and (max-width: 959px) {
.header-nav-border .header-nav-menu {
width: calc(100% - 15px * 2);
}
}
@media screen and (min-width: 960px) and (min-width: 960px) and (max-width: 1179px) {
.header-nav-border .header-nav-menu {
width: calc(100% - 15px * 2);
}
}
@media screen and (min-width: 960px) and (min-width: 1180px) {
.header-nav-border .header-nav-menu {
width: calc(100% - 30px * 2);
max-width: 1120px;
}
}
@media screen and (min-width: 960px) {
.header-nav-border .header-nav-menu > li {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
width: 100%;
}
.header-nav-border .header-nav-menu > li:after, .header-nav-border .header-nav-menu > li:first-of-type:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
display: block;
width: 1px;
height: 16px;
margin-top: auto;
margin-bottom: auto;
background-color: currentColor;
}
.header-nav-border .header-nav-menu > li:after {
right: 0;
}
.header-nav-border .header-nav-menu > li:first-child:before {
left: 0;
}
.header-nav-border .header-nav-menu > li:nth-child(n+7) {
display: none;
}
.header-nav-border .header-nav-menu > li > a {
text-align: center;
}
.header-nav-border .header-nav-menu > li > .sub-menu {
width: 100%;
}
.header-nav-border .header-nav-menu > li > .sub-menu li {
width: 100%;
}
.header-nav-border .header-nav-menu > li > .sub-menu a {
width: 100%;
text-align: center;
}
}
@media screen and (min-width: 960px) and (max-width: 1179px) {
.header-nav-menu {
padding-left: -5px;
padding-right: -5px;
}
}
@media screen and (min-width: 1180px) {
.header-nav-menu {
padding-left: 10px;
padding-right: 10px;
}
}
.header-nav-sp-items {
position: relative;
overflow: hidden;
}
@media screen and (min-width: 960px) {
.header-nav-sp-items {
display: none;
}
}
.header-nav-sp-items .header-button .header-btn {
border-radius: var(--ns-button-radius);
}
.header-nav-tel {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
padding-left: 15px;
padding-right: 15px;
margin-top: 12px;
margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
.header-nav-tel {
display: none;
}
}
.header-nav-tel-left {
-ms-flex: 1 1 100%;
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: column;
-webkit-flex-flow: column;
flex-flow: column;
-ms-flex-pac: center;
-webkit-justify-content: center;
justify-content: center;
padding-right: 15px;
}
.header-nav-tel-number {
white-space: nowrap;
line-height: 1;
font-size: 15px;
}
.header-nav-tel-number a {
color: inherit;
text-decoration: none;
}
.header-nav-tel-hours {
margin-top: 3px;
line-height: 1.2;
font-size: 9px;
}
.header-nav-tel-hours i {
line-height: inherit;
vertical-align: bottom;
}
.header-nav-tel-right {
-ms-flex: 0 0 100px;
-webkit-flex: 0 0 100px;
flex: 0 0 100px;
}
.header-nav-tel-button {
display: block;
width: 100px;
height: 35px;
line-height: 35px;
font-size: 12px;
text-align: center;
text-decoration: none;
border-radius: var(--ns-button-radius);
}
.header-nav-button-wrap {
padding-left: 15px;
padding-right: 15px;
margin-top: 12px;
margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
.header-nav-button-wrap {
display: none;
}
}
.header-nav-button-wrap a {
display: block;
height: 40px;
padding-left: 15px;
padding-right: 15px;
line-height: 40px;
font-size: 14px;
text-align: center;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.header-nav-button-wrap a i {
line-height: inherit;
vertical-align: bottom;
}
.header-nav-sns-wrap {
padding-left: 15px;
padding-right: 15px;
}
.header-nav-sns-wrap .header-sns {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pac: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
margin-top: 12px;
margin-bottom: 12px;
}
.header-nav-sns-wrap .header-sns.header-sns-square {
-ms-flex-pac: center;
-webkit-justify-content: center;
justify-content: center;
}
.header-nav-sns-wrap .header-sns.header-sns-square li {
width: 50%;
}
.header-nav-sns-wrap .header-sns.header-sns-square li a {
width: auto;
}
.header-nav-sns-wrap .header-sns .li-search {
display: none;
}
.header-nav-qtransxf {
margin-top: 12px;
margin-bottom: 12px;
text-align: center;
}
@media screen and (min-width: 768px) {
.header-nav-qtransxf {
display: none;
}
}
.header-sns a, .header-sns span {
transition: opacity 0.1s;
}
.header-sns a:hover, .header-sns a:active, .header-sns span:hover, .header-sns span:active {
opacity: 0.8;
transition: opacity 0.3s;
}
.header-sns a {
color: inherit;
text-decoration: none;
}
.header-sns a svg {
width: 1em;
height: auto;
fill: currentColor;
vertical-align: -0.05em;
}
.header-sns span {
cursor: pointer;
}
.header-sns .bx {
line-height: inherit;
}
.header-sns-round, .header-sns-color, .header-sns-monotone {
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center;
}
@media screen and (min-width: 960px) {
.header-sns-round, .header-sns-color, .header-sns-monotone {
padding-right: 5px;
}
}
.header-sns-round a, .header-sns-round span, .header-sns-color a, .header-sns-color span, .header-sns-monotone a, .header-sns-monotone span {
display: block;
width: 40px;
height: 40px;
margin-left: 5px;
margin-right: 5px;
line-height: 40px;
text-align: center;
}
.header-bar .header-sns-round a, .header-bar .header-sns-round span, .header-bar .header-sns-color a, .header-bar .header-sns-color span, .header-bar .header-sns-monotone a, .header-bar .header-sns-monotone span {
width: 30px;
height: 30px;
line-height: 30px;
}
.header-sns-square .facebook, .header-sns-round .facebook {
background-color: #3b5998;
}
.header-sns-square .twitter, .header-sns-round .twitter {
background-color: #30a6df;
}
.header-sns-square .instagram, .header-sns-round .instagram {
background-color: #ef4e88;
}
.header-sns-square .line, .header-sns-round .line {
background-color: #00b800;
}
.header-sns-square .youtube, .header-sns-round .youtube {
background-color: #ff0000;
}
.header-sns-square .search, .header-sns-round .search {
background-color: #34495e;
}
.header-sns-color a, .header-sns-color span, .header-sns-monotone a, .header-sns-monotone span {
font-size: 32px;
}
.header-bar .header-sns-color a, .header-bar .header-sns-color span, .header-bar .header-sns-monotone a, .header-bar .header-sns-monotone span {
font-size: 26px;
}
.header-sns-square {
max-height: 60px;
}
.header-sns-square a, .header-sns-square span {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pac: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
width: 60px;
height: 100%;
color: #ffffff;
font-size: 22px;
}
.header-bar .header-sns-square a, .header-bar .header-sns-square span {
font-size: 18px;
}
.header-sns-round a, .header-sns-round span {
color: #ffffff;
font-size: 24px;
border-radius: 20px;
}
.header-bar .header-sns-round a, .header-bar .header-sns-round span {
font-size: 18px;
}
.header-sns-color .facebook {
color: #3b5998;
}
.header-sns-color .twitter {
color: #30a6df;
}
.header-sns-color .instagram {
color: #ef4e88;
}
.header-sns-color .line {
color: #00b800;
}
.header-sns-color .youtube {
color: #ff0000;
}
.header-sns-color .search {
color: #34495e;
}
.header-search {
position: absolute;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
color: var(--ns-header-text-pc);
overflow: hidden;
opacity: 0;
z-index: 2;
transition: opacity 0.3s;
}
@media screen and (max-width: 959px) {
.header-search {
padding-left: 10px;
padding-right: 5px;
color: var(--ns-header-text-sp);
}
}
.header-search-form {
width: calc(100% - 50px);
}
@media screen and (min-width: 960px) {
.header-search-form {
width: 100%;
text-align: center;
}
}
.header-search input[type="search"].header-search-field {
width: 100%;
color: inherit;
border: 1px solid currentColor;
background-color: transparent;
border-radius: var(--ns-button-radius);
}
@media screen and (max-width: 767px) {
.header-search input[type="search"].header-search-field {
border: none;
}
}
@media screen and (min-width: 960px) {
.header-search input[type="search"].header-search-field {
width: 50%;
}
}
.header-search input[type="search"].header-search-field:-ms-input-placeholder {
color: var(--ns-header-search-placeholder-sp);
}
@media screen and (min-width: 960px) {
.header-search input[type="search"].header-search-field:-ms-input-placeholder {
color: var(--ns-header-search-placeholder-pc);
}
}
.header-search input[type="search"].header-search-field::placeholder {
color: var(--ns-header-search-placeholder-sp);
}
@media screen and (min-width: 960px) {
.header-search input[type="search"].header-search-field::placeholder {
color: var(--ns-header-search-placeholder-pc);
}
}
.header-search-close {
cursor: pointer;
}
@media screen and (min-width: 960px) {
.header-search-close {
position: absolute;
top: 0;
right: 15px;
bottom: 0;
width: 40px;
height: 40px;
margin-top: auto;
margin-bottom: auto;
}
}
.header-search-close i {
font-size: 32px;
vertical-align: bottom;
}
.header-main-wrap-search-open .header-main {
opacity: 0;
}
@media screen and (min-width: 768px) {
.header-main-wrap-search-open .header-nav-straight {
opacity: 0;
}
}
.header-main-wrap-search-open .header-search {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pac: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}