/*ヘッダー*/

/* smartPhone */
@media screen and (max-width: 820px) {
    /*ここにスマホ用スタイルを記述*/
    header {
        position: relative;
        width: 100%;
        height: 46px;
        background-color: #5b5649;
        z-index: 100;
    }
    .head_logo {
        position: absolute;
        width: 150px;
        height: auto;
        z-index: 102;
        left: 46px;
        top: -1px;
    }
    .head_logo img {
        position: absolute;
        width: 80%;
        height: auto;
        z-index: 102;
        padding: 3%;
    }
    .sp_none {
        display: none;
    }
    .navbar {
        position: absolute;
        z-index: 101;
        width: 100%;
        background-color: #5b5649;
        padding: 4px 0px;
    }
    .navbar-toggler {
        color: rgba(255, 255, 255, 0.5);
        border-color: rgba(255, 255, 255, 0.1);
        margin-right: auto;
        border: none;
        padding: 0px 2px 2px 0px;
        margin-top: 3px;
        margin-left: 8px;
        background-color: #fae000;
        border-radius: 5px;
    }
    .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='-8 -8 46 46' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(91,86,73,1.00)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='20' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }
    #head_search {
        margin: 0px 0px;
        /* display: inline-block; */
        position: absolute;
        /* float: right; */
        padding: 0;
        width: 10%;
        z-index: 1000;
        top: 0px;
        right: 46px;
    }
    #head_search .fa-search {
        color: #fae000;
        /* margin: 4px 0px; */
        position: absolute;
        z-index: 2;
        right: 0px;
    }
    .icon_search {
        position: absolute;
        width: 32px;
        height: 32px;
        display: block;
        background-image: url(../img/icon_search.png);
        background-size: 32px 32px;
        background-position: center 0px;
        background-repeat: no-repeat;
        top: 50%;
        right: 13px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .head_dropdown {
        position: absolute;
        z-index: 1100;
        right: 9px;
    }
    .head_dropdown i {
        position: absolute;
        font-size: 28px;
        color: #fae000;
        right: 7px;
        top: 8px;
    }

    .head_user_name {
        font-size: 10px;
        /* text-align:left; */
        letter-spacing: 0px;
        color: #5b5649;
    }
    .head_user_name strong {
        font-size: 10px;
        /* text-align:left; */
        margin: 0px 0px -4px 4px;
    }
    li.nav_line {
        border-top: 1px solid #d1d1d1;
        padding: 16px 8px 0px;
    }
    .navbar li a {
        margin: 4px;
        border-top: 1px solid #7a7467;
        padding: 16px 0px 8px;
        font-size: 100%;
        letter-spacing: 0px;
        transition-duration: 0.5s;
        display: block;
    }
    .navbar li a:hover {
        margin: 4px;
        border-top: 1px solid #7a7467;
        padding: 16px 0px 8px;
        font-size: 100%;
        letter-spacing: 0.5vw;
    }
    .navbar-nav .nav-link {
        padding-right: 0;
        padding-left: 8px;
    }
    .navbar-nav {
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
        flex-direction: inherit;
    }
    .nav-link {
        width: 150px;
    }
    .nav_color {
        color: #fae000;
    }
    .mymenu-icon {
        position: relative !important;
        left: -3px !important;
        top: 0px !important;
        color: #009ca3 !important;
        font-size: 100% !important;
    }

    #head_box {
        display: none;
    }

    .site-header {
        background: #5b5649;
        padding: 0px 0px 12px;
        position: fixed;
        bottom: 0;
        transition: 0.5s;
        width: 100%;
        z-index: 999;
    }

    .site-header.hide {
        transform: translateY(130%);
    }
    .pc_menu {
        width: 100%; /* IE8以下とAndroid4.3以下用フォールバック */
    }
    .pc_menu span {
        letter-spacing: 0.2vw;
    }

    .pc_menu ul {
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
        justify-content: center;
    }
    .pc_menu li {
        position: relative;
        padding: 0px 0px 0px;
        font-size: 9px;
        text-align: center;
        white-space: nowrap;
        z-index: 1;
        width: 16.66%;
        margin-bottom: -16px;
    }
    .pc_menu li a {
        text-decoration: none;
        color: #f5f4f0;
        padding: 46px 0px 20px;
        letter-spacing: 0px;
        display: block;
    }
    .pc_menu .active {
        background-color: #fae000;
        position: relative;
        color: #5b5649;
        margin-top: -3px;
    }
    .pc_menu li.active a {
        color: #5b5649 !important;
    }

    .pc_menu .active::after {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 8px 10px 8px;
        border-color: transparent transparent #fae000 transparent;
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
    }
    .pc_menu li:hover {
        background-color: #fae000;
    }
    .pc_menu li a:hover {
        color: #5b5649;
    }

    .icon_home {
        background-image: url(../img/icon_home_sp.png);
        background-size: 32px 32px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_home:hover,
    .icon_home.active {
        background-image: url(../img/icon_home_hover.png);
    }
    .icon_playlists {
        background-image: url(../img/icon_playlists_sp.png);
        background-size: 32px 32px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_playlists:hover,
    .icon_playlists.active {
        background-image: url(../img/icon_playlists_hover.png);
    }
    .icon_event {
        background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ticket-alt" class="svg-inline--fa fa-ticket-alt fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="%23f5f4f0" d="M128 160h320v192H128V160zm400 96c0 26.51 21.49 48 48 48v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96c26.51 0 48-21.49 48-48s-21.49-48-48-48v-96c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v96c-26.51 0-48 21.49-48 48zm-48-104c0-13.255-10.745-24-24-24H120c-13.255 0-24 10.745-24 24v208c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V152z"></path></svg>');
        background-size: 32px 32px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_event:hover,
    .icon_event.active {
        background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ticket-alt" class="svg-inline--fa fa-ticket-alt fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="%235b5649" d="M128 160h320v192H128V160zm400 96c0 26.51 21.49 48 48 48v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96c26.51 0 48-21.49 48-48s-21.49-48-48-48v-96c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v96c-26.51 0-48 21.49-48 48zm-48-104c0-13.255-10.745-24-24-24H120c-13.255 0-24 10.745-24 24v208c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V152z"></path></svg>');
    }
    .icon_live_streaming {
        background-image: url(../img/icon_live_sp.png);
        background-size: 32px 32px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_live_streaming:hover,
    .icon_live_streaming.active {
        background-image: url(../img/icon_live_hover.png);
    }
    .icon_company {
        background-image: url(../img/icon_company_sp.png);
        background-size: 28px 28px;
        background-position: center 14px;
        background-repeat: no-repeat;
    }
    .icon_company:hover,
    .icon_company.active {
        background-image: url(../img/icon_company_hover.png);
    }
    .icon_feature {
        background-image: url(../img/icon_feature_sp.png);
        background-size: 32px 32px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_feature:hover,
    .icon_feature.active {
        background-image: url(../img/icon_feature_hover.png);
    }
    .icon_mylist {
        background-image: url(../img/icon_mylist_sp.png);
        background-size: 32px 32px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_mylist:hover,
    .icon_mylist.active {
        background-image: url(../img/icon_mylist_hover.png);
    }

    .icon_howto {
        background-image: url(../img/icon_howto_sp.png);
        background-size: 30px 30px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_howto:hover,
    .icon_howto.active {
        background-image: url(../img/icon_howto_hover.png);
    }
    .icon_howto {
        display: none;
    }
    .icon_faq {
        background-image: url(../img/icon_faq_sp.png);
        background-size: 32px 32px;
        background-position: center 6px;
        background-repeat: no-repeat;
    }
    .icon_faq {
        display: none;
    }
    .icon_faq:hover,
    .icon_faq.active {
        background-image: url(../img/icon_faq_hover.png);
    }
    .icon_theater {
        background-image: url(../img/icon_theater_sp.png);
        background-size: 32px 32px;
        background-position: center 6px;
        background-repeat: no-repeat;
    }
    .icon_theater:hover,
    .icon_theater.active {
        background-image: url(../img/icon_theater_hover.png);
    }
    .icon_login {
        background-image: url(../img/icon_login_sp.png);
        background-size: 32px 32px;
        background-position: center 11px;
        background-repeat: no-repeat;
    }
    .icon_login:hover,
    .icon_login.active {
        background-image: url(../img/icon_login_hover.png);
    }
    .header_sp_btn{
        color:#fae000;
        border-color:#fae000;
        background-color:#5b5649;
    }
    .header_sp_btn:hover {
        color:#5b5649;
        border-color:#5b5649;
        background-color:#fae000;
    }
}
/* smartPhone */
@media screen and (max-width: 374px) {
    /*ここにスマホ用スタイルを記述*/

    .pc_menu span {
        display: none;
    }
    .pc_menu li {
        position: relative;
        padding: 0px 0px 4px;
        font-size: 9px;
        text-align: center;
        white-space: nowrap;
        z-index: 1;
        width: 16.66%;
    }
    .site-header {
        background: #5b5649;
        padding: 0px 0px 4px;
        position: fixed;
        bottom: 0;
        transition: 0.5s;
        width: 100%;
        z-index: 999;
    }
}
/* pc */
@media screen and (min-width: 821px) {
    /*サービスナビ：991px以下でスライドメニュー*/
    .pc_none {
        display: none;
    }
    header {
        position: relative;
        width: 100%;
        text-align: right;
        background-color: #5b5649;
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
    }
    .navbar-toggler {
        color: #fae000;
        border-color: none;
        padding: 2px;
        font-size: 1.25rem;
        line-height: 1;
        background-color: transparent;
        border: none;
        border-radius: 0.25rem;
    }
    .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(250,224,0,1.00)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }
    .head_dropdown {
        width: 60px;
        position: absolute;
        z-index: 1000;
        right: 8px;
        top: 64px;
        max-width: 210px;
        padding: 8px 4px;
        border: 1px solid #5b5649;
        border-radius: 5px;
        text-align: center;
    }
    .head_user_name {
        color: #5b5649;
        font-size: 12px;
        /* text-align:left; */
        letter-spacing: 0px;
    }
    .head_user_name strong {
        font-size: 8px;
        /* text-align:left; */
        margin: 0px 0px -4px 4px;
    }
    .head_dropdown i {
        position: absolute;
        font-size: 20px;
        color: #5b5649;
        left: 10px;
        top: 8px;
    }
    .dropdown-menu {
        position: absolute;
        width: 21vw;
        min-width: 100px;

        will-change: transform;
        top: 7px !important;
        left: -2px !important;
        box-shadow: 2px 2px 7px #cdcdcd;
    }
    .dropdown-menu li {
        text-align: left;
    }
    .dropdown-menu li a {
        display: block;
        padding: 14px 15px;
    }
    .dropdown-toggle::after {
        color: #5b5649;
        margin: 0px 0px -1px 24px;
        padding: 0px;
    }
    .head_logo {
        display: none;
    }

    .head_nav {
        width: 70%; /* IE8以下とAndroid4.3以下用フォールバック */
        width: -webkit-calc(90% - 180px);
        width: calc(90% - 180px);
    }

    li.nav_line {
        border-top: 1px solid #d1d1d1;
    }
    .mymenu-icon {
        position: relative !important;
        left: -3px !important;
        top: 0px !important;
        color: #009ca3 !important;
        font-size: 100% !important;
    }
    .btn-mymenu a {
        display: block;
        padding: 8px 0px;
    }
    .btn-mymenu li:hover:not(.mymenu-name) {
        background-color: #f5f4f0;
    }
    .btn-mymenu li a:hover {
        text-decoration: none;
    }
    .mymenu-name {
        padding-left: 5px;
    }

    @media only screen and (min-width: 821px) and (max-width: 991px) {
        /*ここにtablet用スタイルを記述*/
        .navbar li a {
            margin: 8px;
            border-top: 1px solid #fae000;
            padding: 16px 0px 0px;
            font-size: 85%;
            letter-spacing: 0px;
            transition-duration: 0.5s;
        }
        .navbar li a:hover {
            margin: 8px;
            border-top: 1px solid #fae000;
            padding: 16px 0px 0px;
            font-size: 100%;
            letter-spacing: 0.5vw;
        }
    }

    #head_search {
        margin: 0px 0px;
        display: inline-block;
        position: relative;
        /* float: right; */
        padding: 0;
        width: 10%;
        z-index: 2;
    }
    #head_search .fa-search {
        color: #fae000;
        /* margin: 4px 0px; */
        position: absolute;
        z-index: 2;
        right: 8px;
    }

    #head_box {
        width: 180px;
    }
    .icon_search {
        position: absolute;
        width: 32px;
        height: 32px;
        display: block;
        background-image: url(../img/icon_search.png);
        background-size: 32px 32px;
        background-position: center 0px;
        background-repeat: no-repeat;
        top: 50%;
        right: 13px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .head_sns {
        margin: 6px 0px 0px 0px;
    }
    .headBoxEn {
        position: absolute;
        z-index: 1;
    }
    .headBoxEn a {
        position: absolute;
        right: 0px;
        top: 16px;
        z-index: 1;
        color: #f4f1ea;
    }
    .fa-language {
        color: #f4f1ea;
        font-size: 20px;
        margin: 0px 0px 0px 0px;
    }
    nav {
        position: relative;
        width: 100%;
        overflow: hidden;
        text-align: right;
        height: 100px;
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
    }
    .pc_logo {
        width: 150px;
    }
    .pc_logo img {
        width: 105%;
        height: auto;
        padding: 20px 8px 0px;
    }
    .pc_menu {
        width: 70%; /* IE8以下とAndroid4.3以下用フォールバック */
        width: -webkit-calc(100% - 250px);
        width: calc(100% - 250px);
        padding-left: 0;
    }

    .pc_menu ul {
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
    }
    .pc_menu li {
        position: relative;
        padding: 56px 3px 14px;
        font-size: 11px;
        min-width: 47px;
        text-align: center;
        white-space: nowrap;
    }
    .pc_menu li span {
        letter-spacing: 0px;
    }

    .pc_menu li a {
        text-decoration: none;
        color: #5b5649;
        letter-spacing: 0px;
        padding: 56px 0px 0px;
    }

    .pc_menu .active {
        background-color: #fae000;
        position: relative;
    }
    .pc_menu .active::after {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 8px 0 8px;
        border-color: #fae000 transparent transparent transparent;
        position: absolute;
        bottom: -14px;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
    }
    .pc_menu li:hover {
        background-color: #fae000;
    }
    .max375 {
        display: none; /* 幅375px以上非表示 */
    }
    .icon_home {
        background-image: url(../img/icon_home.png);
        background-size: 42px 42px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_home:hover,
    .icon_home.active {
        background-image: url(../img/icon_home_hover.png);
    }
    .icon_playlists {
        background-image: url(../img/icon_playlists.png);
        background-size: 42px 42px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_playlists:hover,
    .icon_playlists.active {
        background-image: url(../img/icon_playlists_hover.png);
    }
    .icon_event {
        background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ticket-alt" class="svg-inline--fa fa-ticket-alt fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="%2300b9b2" d="M128 160h320v192H128V160zm400 96c0 26.51 21.49 48 48 48v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96c26.51 0 48-21.49 48-48s-21.49-48-48-48v-96c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v96c-26.51 0-48 21.49-48 48zm-48-104c0-13.255-10.745-24-24-24H120c-13.255 0-24 10.745-24 24v208c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V152z"></path></svg>');
        background-size: 42px 42px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_event:hover,
    .icon_event.active {
        background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ticket-alt" class="svg-inline--fa fa-ticket-alt fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="%235b5649" d="M128 160h320v192H128V160zm400 96c0 26.51 21.49 48 48 48v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96c26.51 0 48-21.49 48-48s-21.49-48-48-48v-96c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v96c-26.51 0-48 21.49-48 48zm-48-104c0-13.255-10.745-24-24-24H120c-13.255 0-24 10.745-24 24v208c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V152z"></path></svg>');
    }
    .icon_live_streaming {
        background-image: url(../img/icon_live.png);
        background-size: 42px 42px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_live_streaming:hover,
    .icon_live_streaming.active {
        background-image: url(../img/icon_live_hover.png);
    }
    .icon_company {
        background-image: url(../img/icon_company.png);
        background-size: 42px 42px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_company:hover,
    .icon_company.active {
        background-image: url(../img/icon_company_hover.png);
    }
    .icon_feature {
        background-image: url(../img/icon_feature.png);
        background-size: 42px 42px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_feature:hover,
    .icon_feature.active {
        background-image: url(../img/icon_feature_hover.png);
    }
    .icon_howto {
        background-image: url(../img/icon_howto.png);
        background-size: 42px 42px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_howto:hover,
    .icon_howto.active {
        background-image: url(../img/icon_howto_hover.png);
    }
    .icon_faq {
        background-image: url(../img/icon_faq.png);
        background-size: 42px 42px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_faq:hover,
    .icon_faq.active {
        background-image: url(../img/icon_faq_hover.png);
    }
    .icon_theater {
        background-image: url(../img/icon_theater.png);
        background-size: 42px 42px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_theater:hover,
    .icon_theater.active {
        background-image: url(../img/icon_theater_hover.png);
    }
    .icon_film {
        background-image: url(../img/icon_film.png);
        background-size: 42px 42px;
        background-position: center 12px;
        background-repeat: no-repeat;
    }
    .icon_film:hover,
    .icon_film.active {
        background-image: url(../img/icon_film_hover.png);
    }

    .pc_login {
        width: 100px;
        padding-top: 2px;
        padding-right: 4px;
        text-align: left;
    }
    .pc_login01 a {
        padding: 6px 6px;
        background-color: #00b9b2;
        text-decoration: none;
        color: #ffffff;
        border-radius: 8px;
        border: 2px solid #00b9b2;
        line-height: 100%;
        letter-spacing: 0px;
        font-size: 10px;
        text-align: center;
        margin: 8px 0px;
        display: block;
    }
    .pc_login01 a:hover {
        background-color: #65c7c4;
        border: 2px solid #65c7c4;
    }

    .pc_login02 a {
        padding: 6px 6px;
        background-color: #f6f6f4;
        text-decoration: none;
        color: #00b9b2;
        border-radius: 8px;
        border: 2px solid #00b9b2;
        line-height: 100%;
        letter-spacing: 0px;
        font-size: 10px;
        text-align: center;
        margin: 8px 0px;
        display: block;
    }
    .pc_login02 a:hover {
        background-color: #65c7c4;
        border: 2px solid #65c7c4;
        color: #ffffff;
    }
}

/* pc */
@media screen and (min-width: 992px) {
    /**/
    header {
        position: relative;
        width: 100%;
        overflow: visible;
        text-align: right;
        height: auto;
        background-color: #5b5649;
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
        padding: 0px 0px 2px;
    }
    .head_logo {
        display: none;
    }
    .head_nav {
        width: 70%; /* IE8以下とAndroid4.3以下用フォールバック */
        width: -webkit-calc(90% - 180px);
        width: calc(90% - 180px);
    }
    .navbar {
        padding: 0.5rem 0rem;
    }
    .navbar li {
        margin: 0 1px;
    }

    .navbar li a {
        margin-bottom: -10px;
        border-bottom: 2px solid #fae000;
        padding-bottom: 12px;
        margin-right: 0vw;
        font-size: 11px;
        letter-spacing: -1px;
    }
    #head_search {
        margin: 0px 0px;
        display: inline-block;
        position: relative;
        /* float: right; */
        padding: 0;
        width: 10%;
        z-index: 2;
    }
    #head_search .fa-search {
        color: #fae000;
        /* margin: 4px 0px; */
        position: absolute;
        z-index: 2;
        right: 8px;
    }

    #head_box {
        width: 180px;
    }
    .head_sns {
        margin: 6px 0px 0px 0px;
    }
    .headBoxEn {
        position: absolute;
        z-index: 1;
    }
    .headBoxEn a {
        position: absolute;
        right: 0px;
        top: 16px;
        z-index: 1;
        color: #f4f1ea;
    }
    .fa-language {
        color: #f4f1ea;
        font-size: 20px;
        margin: 0px 0px 0px 0px;
    }

    .pc_logo img {
        width: 105%;
        height: auto;
        padding: 20px 8px 0px;
    }
    .pc_menu li a {
        text-decoration: none;
        color: #5b5649;
        letter-spacing: 0px;
        padding: 56px 0px 0px;
    }
    .head_dropdown {
        position: absolute;
        z-index: 1000;
        right: 8px;
        top: 64px;
        width: 60px;
        max-width: 230px;
        padding: 8px 4px;
        border: 1px solid #5b5649;
        border-radius: 5px;
        text-align: center;
    }
    .head_user_name {
        font-size: 12px;
        /* text-align:left; */
        letter-spacing: 0px;
    }
    .head_user_name strong {
        font-size: 8px;
        /* text-align:left; */
        margin: 0px 0px -4px 4px;
    }
    .head_dropdown i {
        position: absolute;
        font-size: 20px;
        color: #5b5649;
        left: 10px;
        top: 8px;
    }
    .dropdown-menu {
        position: absolute;
        width: 20vw;
        min-width: 100px;
        max-width: 230px;
        will-change: transform;
        top: 7px !important;
        left: -2px !important;
        /* transform: none!important; */
        /* -webkit-box-shadow: 2px 2px 7px #CDCDCD; */
        box-shadow: 2px 2px 7px #cdcdcd;
    }
}

@media screen and (min-width: 1100px) {
    /*pc */
    .navbar li {
        margin: 0 0.1vw;
    }

    .navbar li a {
        margin-bottom: -10px;
        border-bottom: 2px solid #fae000;
        padding-bottom: 12px;
        margin-right: 0.2vw;
        font-size: 12px;
        letter-spacing: 0px;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1vw;
        padding-left: 1vw;
    }
    .pc_logo {
        width: 200px;
    }
    .pc_logo img {
        width: 100%;
        height: auto;
        padding: 16px 8px;
    }

    .pc_menu {
        width: 70%; /* IE8以下とAndroid4.3以下用フォールバック */
        width: -webkit-calc(100% - 400px);
        width: calc(100% - 400px);
        padding-left: 1.5%;
    }

    .pc_menu ul {
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .pc_menu li {
        position: relative;
        padding: 56px 5px 14px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
    }
    .pc_menu li a {
        text-decoration: none;
        color: #5b5649;
        letter-spacing: 0px;
        padding: 56px 0px 0px;
    }
    .pc_login {
        width: 200px;
        padding-top: 12px;
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
    }

    .pc_login01 a {
        padding: 12px 12px;
        background-color: #00b9b2;
        text-decoration: none;
        color: #ffffff;
        border-radius: 8px;
        border: 2px solid #00b9b2;
        line-height: 100%;
        letter-spacing: 0px;
        font-size: 10px;
        text-align: center;
        margin: 6px 2px;
        display: inline-block;
    }
    .pc_login01 a:hover {
        background-color: #65c7c4;
        border: 2px solid #65c7c4;
    }

    .pc_login02 a {
        padding: 12px 12px;
        background-color: #f6f6f4;
        text-decoration: none;
        color: #00b9b2;
        border-radius: 8px;
        border: 2px solid #00b9b2;
        line-height: 100%;
        letter-spacing: 0px;
        font-size: 10px;
        text-align: center;
        margin: 6px 2px;
        display: inline-block;
    }
    .pc_login02 a:hover {
        background-color: #65c7c4;
        border: 2px solid #65c7c4;
        color: #ffffff;
    }
}

@media screen and (min-width: 1300px) {
    /*pc */
    .navbar li {
        margin: 0 0.1vw;
    }

    .navbar li a {
        margin-bottom: -10px;
        border-bottom: 2px solid #fae000;
        padding-bottom: 12px;
        margin-right: 0.2vw;
        font-size: 12px;
        letter-spacing: 0px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.2vw;
        padding-left: 1.2vw;
    }
    .pc_logo {
        width: 240px;
    }
    .pc_logo img {
        width: 100%;
        height: auto;
        padding: 6px 4px;
    }

    .pc_menu {
        width: 70%; /* IE8以下とAndroid4.3以下用フォールバック */
        width: -webkit-calc(100% - 480px);
        width: calc(100% - 480px);
        padding-left: 2.5%;
    }

    .pc_menu ul {
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
    }
    .pc_menu li {
        position: relative;
        padding: 56px 0.9vw 14px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
    }
    .pc_menu li a {
        text-decoration: none;
        color: #5b5649;
        letter-spacing: 0px;
        padding: 56px 0px 0px;
    }
    .pc_login {
        width: 240px;
        padding-top: 12px;
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
    }

    .pc_login01 a {
        padding: 12px 16px;
        background-color: #00b9b2;
        text-decoration: none;
        color: #ffffff;
        border-radius: 8px;
        border: 2px solid #00b9b2;
        line-height: 100%;
        letter-spacing: 0px;
        font-size: 14px;
        text-align: center;
        margin: 6px 6px;
        display: inline-block;
    }
    .pc_login01 a:hover {
        background-color: #65c7c4;
        border: 2px solid #65c7c4;
    }

    .pc_login02 a {
        padding: 12px 16px;
        background-color: #f6f6f4;
        text-decoration: none;
        color: #00b9b2;
        border-radius: 8px;
        border: 2px solid #00b9b2;
        line-height: 100%;
        letter-spacing: 0px;
        font-size: 14px;
        text-align: center;
        margin: 6px 6px;
        display: inline-block;
    }
    .pc_login02 a:hover {
        background-color: #65c7c4;
        border: 2px solid #65c7c4;
        color: #ffffff;
    }
}