@charset "utf-8";

/* COMMON
---------------------------------------------------------------------------- */	
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

body{
	font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	color:#333;
    background-color:#f2f2f4;
}
.mac body{
	font-size: 13px;
}
a{
	text-decoration:underline; 
	color: #ed2e64;
	outline: none;
}
a:hover{ text-decoration: none; }

@media screen and (max-width: 1100px) {
    
}

/* HEADER
----------------------------------------------------------------------------- */
.header{
    background-color:#23232d;
    display:table;
    width:100%;
    color:#fff;
    height:40px;
}
.header-home,
.header-ttl,
.header-local,
.header-global{
    display:table-cell;
    vertical-align:middle;
}
@media screen and (max-width: 1100px) {
    .header-home,
    .header-ttl{
        display:inline-block !important;
    }

    .header-local{
        display:block !important;
        width:100%;
        border-top:1px solid #50505b;
        background-color:#50505b;
        text-align:center;
    }
    
    .header-global{
        display:inline-block;
        position:fixed;
        top:0;
        right:0;
        z-index:99999;
    }
}

/* home */
.header-home{
    border-right:1px solid #50505b;
    width:40px;
}
.header-home a{
    display:block;
    height:40px;
    text-align:center;
    padding-top:8px;
}

/* ttl */
.header-ttl{
    padding:0 10px;
    font-size:14px;
    font-weight:bold;
    width:150px;
}
/* ポップアップ用 */
.is-popup .header-ttl{
    width:100%;
}


/* local */
.header-local{
    border-left:1px solid #50505b;
    padding:0 10px;
    font-size:13px;
}
.header-local ul{
    
}
.header-local ul li{
    display:inline-block;
    margin-right:10px;
}
.header-local ul li a{
    display:block;
    height:40px;
    line-height:40px;
    color:#fff;
    text-decoration:none;
    text-align:center;
    position:relative;
}
.header-local ul li a:hover::after,
.header-local ul li.is-current a::after{
    content:"";
    display:block;
    background-color:#ed2e64;
    width:100%;
    height:4px;
    position:absolute;
    left:0;
    bottom:-2px;
}

/* global */
.header-global{
    float:right;
}
.header-global-btn{
    width:40px;
    height:40px;
    background-color:#ed2e64;
    border:none;
}
.header-global-menu{
    position:fixed;
    z-index:999999999;
    top:0;
    right:-330px;
    width:300px;
    height:100vh;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    padding:50px 0;
    background-color:#23232d;
    box-shadow:-3px 0px 13px -4px rgba(0,0,0,0.7);
}
.header-global-menu.is-open{
    right:0;
}
.header-global-menu .header-global-btn{
    position:absolute;
    top:0;
    right:0;
}
.header-global-menu-inner{
}
.header-global-menu-inner-ttl{
    text-align:center;
    font-weight:bold;
    font-size:20px;
    margin-bottom:15px;
}
.header-global-menu-inner ul{
    text-align:center;
    border-top:1px solid #fff;
}
.header-global-menu-inner ul li{
    
}
.header-global-menu-inner ul li a{
    text-decoration:none;
    color:#fff;
    display:block;
    padding:10px;
    font-size:16px;
    border-bottom:1px solid #50505b;
}
.header-global-menu-inner ul li a:hover{
    border-bottom:1px solid #ed2e64;
}

/* ログアウト */
.header-global-inner-logout{
    margin:0 auto;
    border:1px solid #ed2e64;
    width:150px;
    height:40px;
    border-radius:20px;
    background-color:transparent;
    color:#ed2e64;
    text-align:center;
    line-height:40px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;

}
.header-global-inner-logout:hover{
    color:#23232d;
    background-color:#ed2e64;
}


/* NAV
----------------------------------------------------------------------------- */
.nav{
    background-color:#fff;
    width:100%;
    border-bottom:1px solid #c8c6ce;
    display:table;
    height:50px;
}
.nav-search,
.nav-btn{
    display:table-cell;
    vertical-align:middle;
}

/* search */
.nav-search{
    
}
.nav-search-select,
.nav-search-date,
.nav-search-word,
.nav-search-status,
.nav-search-btn{
    display:table-cell;
    border-right:1px solid #c8c6ce;
    vertical-align:middle;
    height:50px;
}

/* search - select */
.nav-search-select select{
    border:none;
    height:50px;
    padding:10px 15px;
    font-size:15px;
}

/* search - date */
.nav-search-date{
    background-image:url("/common/images/icn_nav_date.png");
    background-position:left 15px center;
    background-repeat:no-repeat;
    padding:0 15px 0 50px;
}
.nav-search-date input{
    border:none !important;
    height:50px;
    padding:10px 0;
    font-family:inherit;
}

/* search - word */
.nav-search-word{
    background-image:url("/common/images/icn_nav_search.png");
    background-position:left 15px center;
    background-repeat:no-repeat;
    padding:0 0 0 50px;
}
.nav-search-word input{
    border:none !important;
    height:50px;
    padding:10px 0;
}

/* search - status */
.nav-search-status label{
    display:block;
    height:50px;
    line-height:50px;
    padding:0 15px;
}

/* search - btn */
.nav-search-btn{
    border-right:none;
}
.nav-search-btn button{
    width:60px;
    height:50px;
    border:none;
    color:#fff;
    background-color:#50505b;
    font-family:inherit;
    font-size:15px;
    font-weight:bold;
}

@media screen and (max-width: 1100px) {
    .nav-search{
        display:block;
        padding:10px;
    }
    .nav-search-select,
    .nav-search-date,
    .nav-search-word,
    .nav-search-status,
    .nav-search-btn{
        display:block;
        width:100%;
        border-right:none;
        border-bottom:1px solid #c8c6ce;
        vertical-align:middle;
        height:41px;
    }
    /* search - select */
    .nav-search-select select{
        border:none;
        height:40px;
        padding:5px 10px;
        font-size:14px;
        width:100%;
    }

    /* search - date */
    .nav-search-date{
        padding:0 15px 0 30px;
        background-size:11px 13px;
    }
    .nav-search-date input{
        border:none !important;
        height:40px;
        padding:5px 0;
        font-family:inherit;
    }

    /* search - word */
    .nav-search-word{
        background-size:13px 13px;
        padding:0 0 0 30px;
    }
    .nav-search-word input{
        height:40px;
        padding:5px 0;
        width:100%;
    }

    /* search - status */
    .nav-search-status label{
        height:40px;
        line-height:40px;
        padding:0 10px;
    }

    /* search - btn */
    .nav-search-btn button{
        width:100%;
        height:40px;
        font-size:14px;
        margin-top:5px;
        border-radius:5px;
    }
}

/* nav */
.nav-btn{
    text-align:right;
    padding:5px 10px;
    position:absolute;
    top:42px;
    right:0;
}
/* fixed nav */
.nav-btn.is-fixed{
    position:fixed;
    top:auto;
    left:0;
    bottom:0;
    width:100%;
    text-align:center;
    padding:5px 0;
    background-color:#23232d;
    z-index:999999;
}

@media screen and (max-width: 1100px) {
    /* nav */
    .nav-btn{
        padding:0 5px 5px;
        position:relative;
        top:0;
        display:block;
        width:100%;
        font-size:12px;
        text-align:center;
    }
    /* fixed nav */
    .nav-btn.is-fixed{
        color:#fff;
    }
}

/* MAIN 
----------------------------------------------------------------------------- */
.main{
    padding:5px 5px 60px;
}

/* Main - contents
----------------------------------------------------------------------------- */
.main-contents{
    background-color:#fff;
    padding:15px;
}

.main-inner{
    background-color:#fff;
    margin-bottom:5px;
}

/* メインボックス */
.main-inner{
    padding:5px;
}