@charset "utf-8";

/* ============================================================== */
/* 言語選択ボックス */
.lang_area {
    position: relative;
    width: 100px;
    margin-left: auto;
    margin-right: 0px;
    text-align: center;
}
.lang_area .lang_title {
    height: 30px;
    line-height: 30px;
    text-decoration: underline;
    text-underline-offset: 0.3em;
    cursor: pointer;
}
.lang_area .lang_title:after {
    content: '';
    position:relative;
    display:inline-block;
    left: 5px;
    bottom:2px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.lang_area .lang_menu {
    /* アニメーション用に高さ0で超過分を非表示 */
    transition: all .3s;
    height:0;
    overflow-y:hidden;

    width: 100%;
    position: absolute;
    top: 30px; /* タイトルと同じ高さを指定 */
    left: 0;
    list-style-type:none;
    padding:0;
    margin:0;
    z-index: 10;
}
/*.lang_area:hover .lang_menu*/
.lang_area .lang_menu.actv {
    /* アニメーション用に高さを変更 */
    /* 32px(高さ+枠線上下) × 5個＋α */
    height:170px;
}
.lang_area .lang_menu li {
    background: #FFF;
    height: 30px;
    line-height: 30px;
    transition: all .3s;
    position: relative;
    border:1px solid #d7d7d7;
    border-top:0px none;
    cursor: pointer;
}
.lang_area .lang_menu li:first-child {
    border-top:1px solid #d7d7d7;
}
.lang_area .lang_menu li.msta_selected {
    background: #333;
    color: #FFF;
}
.lang_area .lang_menu li:hover {
    background: #333;
    color: #FFF;
}