/* ----- ログインバー ----- */
.common-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
}
/* ヘッダー左側(ロゴ部分) */
.common-header__OCSLogo {
    flex-basis: 35%;
    width: auto;
}
.common-header__OCSLogoImg {
    margin: 14px 0;
}
.common-header__FLSLogoImg {
    vertical-align: baseline;
}
.common-header__FLSLogoImg.loginedImg {
    margin: 0 0 10px 15px !important;
}
/* ヘッダー右側 */
/* メニューバー */
.common-headerExtraNavi {
    flex-basis: 40%;
}
.common-headerExtraNaviItemList {
    display: flex;
    justify-content: flex-end;
    flex-flow: wrap;
    width: 100%;
}
.common-headerExtraNaviItemList__item {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #0D265A;
}
.common-headerMembers__itemText {
    vertical-align: text-bottom;
}
/* 検索バー */
.common-header__ExtraSearch {
    flex-basis: 25%;
}
.common-headerSearch {
    width: 100%;
    height: 40px;
    margin: auto 0;
    margin-left: 10px;
}
.common-headerSearchCategory__overlay {
    background: #18367D;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.common-headerSearchCategory__label {
    margin: 0 21px 0 11px;
    line-height: 40px;
}
.common-headerSearchCategory__icon {
    content: '';
    width: 6px;
    height: 6px;
    border: 0;
    border-bottom: solid 1.5px #fff;
    border-right: solid 1.5px #fff;
    border-top: solid 1.5px transparent;
    border-left: solid 1.5px transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 15px;
    right: 10px;
}
.common-headerSearchButton__button {
    background: #fff;
    border-radius: 0 5px 5px 0;
}
.common-headerSearchInput__input {
    background: #fff;
}
.common-headerSearchInput__input::placeholder {
    color: #D9D9D9;
}
/* お知らせ検索バー */
.common-infoSearch {
    width: 100%;
    height: 40px;
    margin: auto auto 10px auto;
}
.common-infoSearchInput__input::placeholder {
    color: #D9D9D9;
}
.common-infoSearchButton{
    float:right;
    width:auto;
    display:inline-block;
    position:relative;
}
.common-infoSearchButton__button{
    display:block;
    border-radius:0 3px 3px 0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:1px solid #d9d9d9;
    border-left:none;
    box-shadow:none;
    cursor:pointer;
    background:#f6f6f6;
    margin:0;
    padding:8px 9px;
    outline:0;
}
.common-infoSearchButton__icon{
    vertical-align:bottom;
}
.common-infoSearchInput{
    overflow:hidden;
    height:34px;
}
.common-infoSearchInput__wrapper{
    position:relative;
    height:34px;
}
.common-infoSearchInput__input{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    outline:0;
    position:absolute;
    left:0;
    display:block;
    width:100%;
    background:#f6f6f6;
    border:1px solid #d9d9d9;
    border-right:none;
    box-shadow:none;
    border-radius:0;
    font-size:.875rem;
    line-height:1.43;
    padding:6px 7px;
    height:34px;
    transition:background-color 130ms ease-out;
}
.common-infoSearchInput__input :-ms-input-placeholder,.common-infoSearchInput__input :placeholder-shown{
    color:#a8a8a8;
}
.common-infoSearchInput__input {
    font-size:14px;
    background: #fff;
    border-radius: 5px 0 0 5px;
}
.common-infoSearchButton__button {
    background: #fff;
    border-radius: 0 5px 5px 0;
}
.common-infoSearchInput__input.is-invalid{
    background:rgba(184,30,30,.52);
    transition-duration:150ms;
}
.common-infoSearchButton, .common-infoSearchButton__button,
.common-infoSearchInput, .common-infoSearchInput__wrapper,
.common-infoSearchInput__input, .common-infoSearchButton__icon {
    height: 100%;
}
/*
    検索バーの縦幅
    調整したい場合は common-headerSearch,common-headerSearchCategory__labelのline-height を調整
 */
.common-headerSearchCategory, .common-headerSearchCategory__overlay,
.common-headerSearchCategory__label, .common-headerSearchCategory__select,
.common-headerSearchButton, .common-headerSearchButton__button,
.common-headerSearchInput, .common-headerSearchInput__wrapper,
.common-headerSearchInput__input {
    height: 100%;
}

/* ログイン後ヘッダー */
.common-headerMembers {
    display: inline-block;
    float: none;
    margin: 0;
    margin-left: 5px;
    padding: 2px 0;
    width: 180px;
    text-align: left;
}
.common-welcome {
    font-size: 14px;
}
.common-memberCode {
    display: flex;
    float: none;
    font-weight: normal;
    font-family: monospace;
    color: #0D265A;
}
.common-memberCode svg {
    margin-right: 5px;
}
.common-member {
    font-size: 12px;
}
.common-welcome__mypageLink {
    margin-right: 10px;
    padding: 0;
    font-size: 12px;
    max-width: calc(100% - 4.75rem);
}
.common-logout {
    float: none;
}

/* ----- ナビゲーションバー ----- */
.common-globalNavi {
    position: relative;
}
.common-globalNaviItemList__item:first-child {
    border-left: 0.5px solid #fff;
}
.common-globalNaviItemList__item {
    width: auto;
    border-right: 0.5px solid #fff;
}
.common-globalNaviItemList__dropdown, .common-globalNaviItemList__link {
    padding-left: 20px;
    padding-right: 20px;
}

.common-globalNaviItemList__dropdown:after {
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-bottom: solid 2px #fff;
    border-right: solid 2px #fff;
    border-top: solid 2px transparent;
    border-left: solid 2px transparent;
    transform: rotate(45deg);
    transition: transform 150ms 0s ease;
}
.common-globalNaviItemList__dropdown.is-navi_dropdowned:after {
    transform: rotate(-135deg);
    border-bottom: solid 2px #fff;
    border-right: solid 2px #fff;
    border-top: solid 2px transparent;
    border-left: solid 2px transparent;
    vertical-align: bottom;
}
/* 追跡フォーム */
.trackingArea {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 40px;
    width: 100px;
    height: 100%;
}
.trackingArea__searchToggle {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 3px;
    width: 100%;
    height: 28px;
    background: rgb(246 208 108 / 80%);
    border-radius: 5px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.trackingArea__searchToggle span {
    font-size: 14px;
    vertical-align: super;
}
.trackingArea_List {
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    z-index: 9999;
    width: 400px;
    padding: 20px;
    background: #fff;
}
.trackingArea_List div span {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0D265A;
    margin-bottom: 10px;
}
.trackingArea_List div p {
    display: block;
    font-size: 12px;
    margin-bottom: 10px;
}
.trackingArea_List div a {
    display: block;
    font-size: 12px;
    color: #2873A1;
    margin-bottom: 5px;
}
/* OCSの運送上の番号で探す */
.trackingArea_List_searchNumber {
    margin-bottom: 20px;
}
.searchNumber_trackingForm {
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
}
.searchNumber_searchButton {
    float: right;
    width: auto;
}
.searchNumber_searchButton_button {
    display: block;
    border-radius: 0 5px 5px 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #d9d9d9;
    border-left: none;
    box-shadow: none;
    cursor: pointer;
    background: #18367D;
    margin: 0;
    padding: 8px 9px;
    outline: 0;
}
.searchNumber_searchButton_icon {
    vertical-align: text-bottom;
}
.searchNumber_input {
    overflow: hidden;
    height: 34px;
}
.searchNumberInput__wrapper {
    position: relative;
    height: 34px;
}
.searchNumberInput__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-right: none;
    box-shadow: none;
    border-radius: 5px 0 0 5px;
    font-size: .875rem;
    line-height: 1.43;
    padding: 6px 7px;
    height: 34px;
    transition: background-color 130ms ease-out;
}

.dropdown__icon {
    display: none;
}

.sp-display {
    display: none;
}
.background-layer {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    opacity: 0.3;
}
/* ----------- SP ----------- */
@media screen and (max-width: 767px) {
    .sp-none {
        display: none;
    }
    .sp-display {
        display: inherit;
        padding-right: 0;
    }

    .common-header__inner {
        flex-wrap: wrap;
    }
    .common-header__OCSLogo {
        flex-basis: 52%;
    }
    .common-header__OCSLogoImg, .common-header__FLSLogoImg {
        width: 90%;
        float: left;
    }

    .common-header__FLSLogoImg.loginedImg {
        margin: 4px 0 0 5px !important;
    }

    .common-headerExtraNavi {
        flex-basis: 48%;
    }
    .common-headerExtraNaviItemList__item {
        text-align: center;
    }

    .common-header__ExtraSearch {
        flex-basis: 100%;
        margin-top: 10px;
    }

    .common-globalNavi {
        width: 100%;
        display: none;
        position: absolute;
        z-index: 9998;
        top: 0;
        left: 0;
        padding-top: 80px;
        padding-bottom: 20px;
        background: #F9F9F9;
    }
    .common-globalNavi.is-pinned {
        position: absolute;
        z-index: 9998;
    }
    .common-globalNaviItemList {
        width: 100%;
    }
    .common-globalNaviItemList__dropdown {
        background: transparent;
    }
    .common-globalNaviItemList__dropdown:after {
        display: none;
    }
    .common-globalNaviItemList__item:first-child {
        border: none;
    }
    .common-globalNaviItemList__item {
        width: 100%;
        border: none;
        border-top: 1px solid #E4E4E4 !important;
    }
    .common-globalNaviItemList__item:last-child {
        border-bottom: 1px solid #E4E4E4 !important;
    }
    .common-globalNaviItemList__dropdown, .common-globalNaviItemList__link {
        position: relative;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
        font-size: 16px;
        font-weight: 700;
        color: #333333;
    }

    .dropdown__icon,
    .dropdown__icon span {
        display: inline-grid;
        transition: all .4s;
        box-sizing: border-box;
    }
    .dropdown__icon {
        position: absolute;
        right: 0;
        width: 16px;
        height: 16px;
        background: none;
        border: none;
        appearance: none;
        cursor: pointer;
    }
    .dropdown__icon span {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #0D265A;
    }
    .dropdown__icon span:nth-of-type(2) {
        transform: rotate(-90deg);
    }
    .is-navi_dropdowned .dropdown__icon span:nth-of-type(2) {
        transform: rotate(0deg);
    }

    .common-dropdown {
        display: none;
        position: inherit;
        background: inherit;
        text-align: left;
        padding: 0;
        min-width: 0;
    }
    .common-dropdown__seeAll {
        color: #333333;
        padding: 10px 15px 5px 0;
    }
    .common-dropdown__seeAll::before {
        border-color: transparent transparent transparent #333;
    }
    .common-dropdownItemList__column {
        display: block;
    }
    .common-dropdown__seeAll:before, .common-dropdownItemList__link:before {
        display: inline-block;
        content: '';
        width: 8px;
        height: 8px;
        border: 0;
        border-top: solid 2px #18367D;
        border-right: solid 2px #18367D;
        transform: rotate(45deg);
    }
    .common-dropdownItemList__link {
        padding: 5px 15px;
        padding-left: 0;
        color: #333;
    }
    .trackingArea {
        display: block;
        position: static;
        margin: 0;
        padding: 0 20px;
        width: 100%;

    }
    .trackingArea__searchToggleSp {
        border-bottom: 1px solid #E4E4E4;
    }
    .trackingArea__searchToggleSp.active {
        border-bottom: none;
    }
    .trackingArea__searchToggleSp.active + .trackingArea_List {
        border-bottom: 1px solid #E4E4E4;
    }
    .trackingArea_List {
        display: block;
        position: static;
        width: 100%;
        padding: 20px 0;
        background: transparent;
    }

    .common-globalNaviLinkArea {
        padding: 0 20px;
    }
    .globalNaviLinkArea__Textlink {
        display: block;
        margin: 20px 0;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        color: #0D265A;
    }
    .globalNaviLinkAreaItemList__Buttonlink {
        display: inline-block;
        text-decoration: none;
        cursor: pointer;
        position: relative;
        text-align: center;
        font-size: .875rem;
        font-weight: 600;
        line-height: 1.143;
        width: 100%;
        margin: 10px 0;
        padding: 20px;
        border-radius: 5px;
        color: #FFFFFF;
        background: #18367D;
    }
    .globalNaviLinkAreaItemList__Buttonlink.transparent {
        color: #0D265A;
        background: #ffffff;
        border: 1px solid #0D265A;
    }

    .common-footerNavi__category::after {
        display: none !important;
    }
    .common-footerNavi__category .dropdown__icon {
        right: 10px;
        height: 10px;
    }
    .common-footerNavi__category .dropdown__icon span {
        background-color: #ffffff;
    }
}

/* ハンバーガメニュー */
.menu-trigger,
.menu-trigger span {
  display: inline-grid;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 20px;
  height: 18px;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #0D265A;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 8px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active {
    z-index: 9999;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(7px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-8px) rotate(45deg);
}