@charset 'UTF-8';

/* --- 編集用ポップアップ -------------------------------*/

div.popup_edit_windows {
	display: none;
}

div.popup_edit_windows .wrapper {
	padding: 20px;
}
@media screen and (max-width:768px){
div.popup_edit_windows .wrapper {
    padding: 10px;
}
}

div.popup_edit_windows img {
    width: 160px;
    height: auto;
}

/* --- 編集用ポップアップ -------------------------------*/
/* style */
html {
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans', "ヒラギノ角ゴシック", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3',Roboto, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    font-size: 14px;
    /*line-height: 22px;*/
    color: #333333;
    -webkit-font-smoothing: antialiased;
}

.fixed{
    position:fixed;
    top:0;
    left:0;
    right:0;
    margin:auto;
    z-index: 997;
    width:100%;
}
header{
    background-color:#fff;
}
.header-social-sp{
    display:none;
}
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

.container{
    width: 95%;
    /*max-width: 890px;*/
    max-width:960px;
    margin: auto;
    position:relative;
}
.header-wrap{
    /*max-width:960px;*/
    max-width:none;
}
.heading{
    /* margin-bottom:10px; */
}
.header-logo{
    display:inline-block;
    vertical-align:middle;
}
.header-logo a{
    padding:5px 19px;
    display:block;
}
.header-logo-text{
    display:inline-block;
    vertical-align:middle;
    font-weight:bold;
    font-size:13px;
}
.header-logo-text > a{
    color:#333333;
    text-decoration:none;
}
.header-search-wrapper {
    display:inline-block;
    vertical-align:middle;
}
.nav{
    font-size:13px;
    float:right;
    /* margin-bottom:10px; */
}
.nav-li{
    display:inline-block;
    vertical-align:middle;
    margin-left:5px;
}
.nav-li a{
    text-decoration:none;
    color:#000;
}
.separator{
    /* border-right:1px solid #000; */
}
.header-left{
    float:left;
}
.header-right{
    float:right;
    padding:5px 19px;
}
.head-icon-list{
    letter-spacing:-.4em;
    float:right;
}
.head-icon-li{
    display:inline-block;
    margin-left:3px;;
}
.head-icon-li a{
    position:relative;
    display:block;
    letter-spacing:normal;
    vertical-align:middle;
    border:1px solid #CBCBCB;
    width:30px;
    height:30px;
    border-radius:50%;
    background-color:#fff;
    transition:background-color 0.2s linear;
}
.head-icon-li img{
    width:15px;
}
.head-icon-li a:hover{
    background-color:#F16506;
    border-color:#fff;
    transition:background-color 0.2s linear;
}
.head-icon-li a:hover img{
    -webkit-filter:brightness(200%);
}
.head-icon-li:last-child a{
    background-color:#F1F1F1;
}

.head-icon-li:last-child a:hover{
    border-color:#CBCBCB;
}
.head-icon-li:last-child a:hover img{
    -webkit-filter:none;
}

.head-icon-li img{
    position:absolute;
    display:block;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
#searchForm{
    position:relative;
    /*display:inline-block;*/
    /*vertical-align:middle;*/
}
.header-search{
    border:1px solid #CBCBCB;
    border-radius:5px;
    padding: 5px 5px;
    width: 250px;
    font-size: 13px;
}

.spot-header-search{
    margin-left: 19px;
}
.header-search-btn{
    position:absolute;
    right:5px;;
    top:0;
    bottom:0;
    margin:auto;
}
.right-icon{
    display:inline-block;
    vertical-align:middle;
    float:right;
}
/*
.spot-grobal-header{
    border-bottom:4px solid #F2A107;
    padding:3px 0;
    background-color:rgba(255,255,255,0.8);
}*/
.header-facebook-login a{
    text-decoration:none;
    background-color:#0071B8;
    color:#fff;
    border-radius:5px;
    padding:2px 1em;
}

.header-email-entry a{
    text-decoration:none;
    background-color:#4D4D4D;
    color:#fff;
    border-radius:5px;
    padding:2px 1em;
}
.header-facebook-login a,
.header-email-entry a{
    font-size:13px;
}

.drawer-nav {
    color: #fff;
    background-color: #333333 !important;
    z-index:998 !important;
}
.drawer-nav ul li{
    color:#fff;
    border-bottom:1px solid #4D4D4D;
    padding:20px 1.5em;
}
.drawer-nav ul li a{
    color:#fff;
    text-decoration:none;
    display:block;
    
}
.drawer-nav ul li.logo{
    text-align:center;
}
.drawer-nav ul li.sp-menu-inner-li{
    padding:0;
    border:none;
}
.drawer-hamburger {
    z-index: 1005 !important;
    padding:10px !important;
}
.drawer-nav ul li select{
    width:11em;
}
/* header-sub-nav(tag) */
.header-sub-nav{
    background-color:#F1A007;
    padding:1px 0 4px;
}
.header-sub-nav-list{

}
.header-sub-nav-li{
    display:inline-block;
    font-size:12px;
    border-right:1px solid #fff;
    padding-right:0.4em;
}
.header-sub-nav-li a{
    color:#fff;
    text-decoration:none;
}
/* breadcrumb */
.breadcrumb{
    background-color:#E2D0BA;
}
.breadcrumb-list{

}

.breadcrumb-li{
    display:inline-block;
    font-size:12px;
    color:#717071;
}
.breadcrumb-li a{
    color:#F06506;
    text-decoration:none;
}
.breadcrumb-li + li:before{
    content: ">";
    margin:0 8px;
}
/* === responsive === */
@media screen and (max-width:973px){
.header-wrap{
    /* width:95%; */
    margin:auto;
}
}
/*
@media screen and (max-width:1024px) and (min-width:769px){
.sp-logo{
    text-align:center;
}
.spot-grobal-header > .right ul li{
    float:left;
}
}
@media screen and (max-width:768px){
.sp-logo{
    text-align:center;
    margin-left:60px;
}
.spot-grobal-header > .right ul li{
    display:inline-block;
    vertical-align:middle;
    margin:0 2px;
}
}
@media screen and (max-width:320px){
.sp-logo{
    margin-top:5px;
}
.sp-logo img{
    max-width:100px;
}
}
*/

.drawer-nav ul li:nth-child(3) {
   display: none;
}


/* new header style */

.g_header_container {
    max-width:980px;
    margin:auto;
    /* width:95%; */
}

.g_header_container a{
    text-decoration:none;
    color:#404040;
}
.g_header_label {
    border-bottom:1px solid #dddddd;
}

.g_header_main {
    border-bottom:2px solid #c5c5c5;
}

.header_left {
    float:left;
}

.header_right {
    float:right;
}

.header_list {
    letter-spacing:-.4em;
}
.header_list > li{
    display:inline-block;
    letter-spacing:normal;
    margin-left:1em;
}
.header_list > li:first-child{
    margin-left:0;
}



.header_logo_left {
    float:left;
    width:300px;
    padding-top:10px;
    padding-bottom:10px;
}

.header_logo_right {
    float:right;
    width:100%;
    margin-left:-310px;
    padding-left:310px;
    box-sizing:border-box;
}

.header_logo_left > h1,
.header_logo_left > h2{
    position:relative;
    display:inline-block;
    vertical-align:middle;
}

.header_search {
    float:left;
    width:100%;
    margin-right:-380px;
    padding-right:380px;
    box-sizing:border-box;
    padding-top:13px;
    padding-bottom:8px;
}

.header_menu {
    float:right;
    width:380px;
}

.header_menu_list {
    letter-spacing:-.4em;
    text-align:right;
}

.header_menu_list > li{
    display:inline-block;
    letter-spacing:normal;
    border-right:1px solid #eeeeee;
    font-size:11px;
    vertical-align: middle;
}

.header_menu_list > li:first-child{
    border-left:1px solid #eeeeee;
}

.header_menu_list > li > a{
    display:block;
    padding:8px 4px;
    text-align: center;
}

.header_menu_list > li.area > a:before{
    content:'';
    display:block;
    margin:auto;
    width:13px;
    height:19px;
    background:url(/images/common/search_by_area.png) no-repeat center center;
    background-size:contain;
}

.header_menu_list > li.genre > a:before{
    content:'';
    display:block;
    margin:auto;
    width:21px;
    height:19px;
    background:url(/images/common/search_by_genre.png) no-repeat center center;
    background-size:contain;
}

.header_menu_list > li.area_genre > a:before{
    content:'';
    display:block;
    margin:auto;
    width:54px;
    height:20px;
    background:url(/images/common/search_by_genre_area_genre.png) no-repeat center center;
    background-size:contain;
}

.header_menu_list > li.login > a:before{
    content:'';
    display:block;
    margin:auto;
    width:21px;
    height:19px;
    background:url(/images/common/login.png) no-repeat center center;
    background-size:contain;
}

.header_search > form >.left{
    float:left;
    width:100%;
    padding-right:70px;
    margin-right:-70px;
    box-sizing:border-box;
}

.header_search > form >.right{
    float:right;
    width:60px;
}

.header_search > form >.left input{
    width:100%;
    border:1px solid #eeeeee;
    padding:4px;
    box-sizing:border-box;
}

.header_search > form >.left input:focus{
    background-color:#FFFFD7;
    border-color:#FBE5B1;
}

.header_search_btn {
    background-color:#eeeeee;
    border:none;
    padding:3px 10px;
    border-radius:5px;
}

@media screen and (max-width:799px){
.header_search {
    display:none;
}
}
@media screen and (max-width:768px){

.header_logo_left {
    position:relative;
    float: none;
    width: auto;
    margin:auto;
    text-align:center;
}
.total_number_of_registrations {
    display:none;
}

.header_menu {
    position:relative;
    z-index:2;
    float:right;
    width:73px;
}
.header_menu_list{
    display:none;
}
.header_menu_list > li{
    border:none;
}
.header_menu_list > li.area {
    display:none;
}

.header_menu_list > li.genre {
    display:none;
}
.header_menu_list > li > a{
    display:block;
    padding:5px 4px;
    font-size:11px;
}

.header_logo_right{
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:auto;
}

.header_menu_list {
    position:absolute;
    right:3px;;
}
}

.user_header {
    margin-top:58px;
}


/**/

#user_header {
    position:absolute;
    top:0;
    width:100%;
    z-index:2;
    height:60px;
}

#user_header_content {
    height:60px;
    position:relative;
}

#user_header_content .left h2,
#user_header_content .left h2 img {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    width:120px;
    z-index:2;
}

#user_header_list {
    float:right;
    margin:auto;
    font-size:13px;
    height:60px;
}

#user_header_list li {
    position:relative;
    display:inline-block;
    line-height:60px;
    margin-left:1em;
}
#user_header_list li a {
    color:#fff;
    text-decoration:none;
}

#user_header_list li a:hover {
    text-decoration:underline;
}

@media screen and (max-width:768px){
#user_header_list{
    display:none;
}

#user_header_list_sp {
    text-align:center;
    margin:20px 0 0;
}

#user_header_list_sp li{
    margin-bottom:10px;
}

#user_header_list_sp li:last-child{
    margin-bottom:0;
}

#user_header_list_sp li a{
    text-decoration:none;
    color:#fff;
    font-size:13px;
}

#user_header_list_sp li a:hover {
    text-decoration:underline;
}
}