@charset "utf-8";
@import "common.less?1234";
@import "plugins/elements.less";

/* ---------------------------------------------------------------------- */

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family: "メイリオ",Meiryo,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Helvetica Neue",Helvetica,"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    /*font-family: Georgia,Baskerville,Palatino,Times;*/
    font-size: 14px;
    color: #464646;
    -webkit-text-size-adjust: none;
    background: #e6f5ff;
}

img {
    border: none;
    vertical-align: middle;
}

li {
    list-style-type: none;
}

header,
footer,
nav,
section,
article{
    display: block;
}

a {
    outline : 0;
    color: #333;
    text-decoration: underline;
    &:visited {
        color: #666;
        text-decoration: underline;
    }
    &:hover {
        color: #fe6d6d;
        text-decoration: underline;
    }
}

hr.line{
    border-color:#c6c6c6 transparent #e4e3e3;
    border-style:solid none;
    border-width:1px 0;
}


/* wrapper ---------------------------------------------------------------------- */

#wrapper{
    margin: 50px auto;
    position: relative;
    left: 3px;
    /*min-width: 984px;*/
}

#header{
    background-color: #FFF;
    /*border-bottom: solid 1px rgba(0,0,0,.2);*/
    // .drop-shadow(0px, 1px, 1px, .3);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    h1{
        // height: 90px;
        a#logo{
            margin: 10px auto;        
            .text-image('logo.png', 300px, 90px);
            cursor: pointer;
            outline-color: invert;
            outline-style: none;
            outline-width: medium;
            text-decoration: none;
            position: relative;
            top: 7px;
            z-index: 10000;
            background-color: #FFF;
        }
    }

    #header_menu{
        position: relative;
        margin: auto;
/*        min-width: 984px;
        width: 984px;*/
        form{

// float: left;
            position: relative;
            top: 10px;
            input{
                position: absolute;
                top: 0px;
                left: 0px;
                border: none 0 transparent;
                padding: 5px 5px 5px 30px;
            }
            #search_icon{
                position: absolute;
                top: 0px;
                left: 8px;
                z-index: 1000;
                font-size: 18px;
                color: #000;            
            }

        }

        #header_menu_inner{
            display: none;
            position: absolute;
            top: 5px;
            left: -5px;
            a{
                padding: 5px 7px;
                font-size: 18px;
                font-family: 'Questrial', sans-serif;
                text-decoration: none;
                color: #000;
            }
            a.selected{
                .btn_yellow;
                padding: 4px 7px;
                font-size: 12px;
            }
        }
        #menu{
            padding: 10px 15px 10px 10px;
            // display: none;
            /*width: 120px;*/
            width: 570px;
            margin: auto auto 20px;

// float: left;

            & > ul{
                margin: auto;
                li{
                    position: relative;
                    float: left;
                    a{
                        font-size: 11px;
                        text-decoration: none;  
                        // display: block;
                        color: #000;
                        padding: 5px;
                        position: relative;
                        font-family: 'bs-light', sans-serif;
                        letter-spacing: 2px;
                        margin-right: 20px;
                        // &:hover{
                        //     color: #000;
                        //     i{
                        //         color: #000;
                        //     }
                        // }
                        // &.selected{
                        //     i{
                        //         color: #000;
                        //     }
                        // }
                        // i{
                        //     position: absolute;
                        //     left: 0px;
                        //     top: 6px;
                        //     color: rgba(0,0,0,.3);
                        //     width: 20px;
                        //     text-align: center;
                        //     font-size: 14px;
                        // }
                    }
                    .svg-10{
                        font-size: 80px;
                        position: absolute;
                        top: -32px;
                        left: 50%;
                        margin-left: -40px;
                        color: red;
                        opacity: 0;
                    }
                    .sub-menu{
                        display: none;
                        position: absolute;
                        padding-top: 10px;
                        width: 180px;
                        z-index: 10;

                        &:after {
                            bottom: 100%;
                            border: solid transparent;
                            content: " ";
                            height: 0;
                            width: 0;
                            position: absolute;
                            top: 0px;
                            left: 5px;
                            pointer-events: none;
                            border-color: rgba(0, 0, 0, 0);
                            border-bottom-color: #000000;
                            border-width: 5px;
                            margin-left: -5px;
                        }

                        ul{

                            li{
                                border-top: solid 1px #000;
                                border-left: solid 1px #000;
                                border-right: solid 1px #000;
                                &:last-child{
                                    border-bottom: solid 1px #000;
                                }
                                a{
                                    width: 170px;
                                    display: block;
                                    margin: 0px;
                                    letter-spacing: 0;
                                    background: #FFF;
                                    &:hover{
                                        // background: #000;
                                        // color: #FFF;
                                    }
                                }
                            }
                        }
                    }


                }

            }
        }


        #header_share{
// float: left;

            position: relative;
            ul{
                #tw_btn{
                    display: none;
                    position: absolute;
                    top: -30px;
                    z-index: 1100;
                    right: 0px;
                }
                #fb_btn{
                    display: none;
                    position: absolute;
                    top: -30px;
                    z-index: 1100;
                    right: -10px;
                }
                i{
                    position: absolute;
                    top: -34px;
                    z-index: 1000;
                    font-size: 18px;
                    padding: 5px;
                    width: 14px;
                    text-align: center;
                    color: #000;
                    &.icon-twitter{
                        right: 40px;
                    }
                    &.icon-facebook{
                        right: 0px;
                    }
                }            
            }

        }

    }

}

#page_top{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: none;
    a{
        text-decoration: none;
        i{
            font-size: 24px;
            color: #ababab;
            text-shadow: 0px 1px 0px #FFF;
            &:hover{
                color: #000;
            }
        }
    }
}


/* contents ---------------------------------------------------------------------- */

#contents{
    position: relative;
    top: 50px;
    padding: 10px 0px;
    /*margin-left: @side_left;*/
    display: block;
    /*min-width: @contents_width;*/
}

.no_entry{
    text-align: center;
    margin: 30px auto;
    font-size: 20px;
    color: #c0c0c0;
    text-shadow: 0px 1px 0px #FFF; 
    font-family: 'Century Schoolbook',Century,'Old Standard TT','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,'メイリオ',serif;
    font-style:italic; 
}

a.entry_link{
    text-decoration: none;
}
.entry{
    position: relative;
    margin: 3px 4px 5px 4px;
    background-color: #FFF;
    // border: solid 4px #f1f1f1;
    // border: solid 1px #e6e6e6;
    // .drop-shadow(0px, 1px, 1px, .1);
    &:hover{
        /*.drop-shadow(0px, 0px, 4px, .4);*/
    }
    .entry_new{
        position: absolute;
        top: -5px;
        left: -5px;
        z-index: 100;            
        width: 46px;
        height: 46px;
        display: block;
        color: #FFF;
        line-height: 46px;
        text-align: center;
        background-color: rgba(230,228,0,.9);
        .border-radius(23px, 23px, 23px, 23px);
        /*font-family: 'Century Schoolbook',Century,'Old Standard TT','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,'メイリオ',serif;*/
        /*font-style:italic; */
    }
    .entry_inner{
        border-top: solid 4px transparent;
    }
    .entry_image{
        overflow: hidden;
        width: 100%;
        display: block;
    }
    .entry_note{
        border: solid 1px #e6e6e6;
        border-top: none 0 transparent;
        position: relative;
        z-index: 20;        
    }
    h2{
        padding: 14px 12px 5px;
        font-size: 14px;
        font-weight: normal;
        span{
            padding: 3px;
            text-decoration: underline;
            color: #325ac8;
        }
    }
    .entry_description{
        padding: 0px 15px 7px;
        color: #464646;
        font-size: 12px;
        line-height: 18px;
    }
    .entry_category{
        position: relative;
        top: 13px;
        left: 15px;
        font-size: 8px;
        color: #aaaaaa;
        a{
            text-decoration: none;
        }
        i{
            margin-right: 2px;
            text-decoration: none;
        }
    }
    .entry_date{
        padding: 0px 15px 10px;
        text-align: right;
        font-size: 10px;
        color: #aaaaaa;
        /*font-family: 'Century Schoolbook',Century,'Old Standard TT','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,'メイリオ',serif;*/
        /*font-style:italic;   */
    }

}


.box_s{
    width: 236px;
}
.box_m{
    width: 480px;
}
.box_l{
    // width: 580px;
    width: 968px;
}
.box_3{
    width: 724px;
}
body.sp{
    .box_s, .box_m, .box_l{
        width: 320px;
    }
}

#page_nav{
    position: relative;
    z-index: 1000;
}

.loading,
#infscr-loading{
    .border-radius(4px,4px,4px,4px);
    background-color: #d8d7d7;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px rgba(255, 255, 255, 0.8);
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px rgba(255, 255, 255, 0.8);
    border-style: solid;
    border-width: 1px;
    border-color: #adacac #e1e1e1 #e1e1e1 #adacac;
    text-align: center;
    width: 60px;
    padding: 10px 0;
}
#infscr-loading{
    position: fixed;
    bottom: 30px;
    left: 50%;
    z-index: 500;
    div{
        display: none;
    }
}
.loading{
    background-image: url(/image/loading.gif);
    background-repeat: no-repeat;
    background-position: center center;
    height: 40px;
}

/* permalink ---------------------------------------------------------------------- */

.entry_not_found{
    padding: 10px;
    /*margin-left: @side_left;*/
    text-align: center;
    display: block;
    /*min-width: 600px;*/
    h3{
        font-size: 20px;
        color: #7E7A7A;
        text-shadow: 0px 1px 0px #FFF; 
        font-family: 'Century Schoolbook',Century,'Old Standard TT','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,'メイリオ',serif;
        font-style:italic;
        font-weight: normal; 
        line-height: 400px;
    }
    hr.line{
        margin: 20px 20px 30px;
        border-color:#e5e5e5 transparent #FFF;
    }
}

#permalink{
    padding: 10px;
    /*margin-left: @side_left;*/
    display: block;
    /*min-width: @contents_width;*/

    .entry{
        .entry_inner{
            border: solid 1px #e6e6e6;
            border-top: none 0 transparent;
        }
        // .entry_date{
        //     position: absolute;
        //     top: 30px;
        //     right: 0;
        // }
        .interviewer{
            position: relative;
            top: -15px;
            text-align: right;
            font-size: 10px;
            color: #aaaaaa;
        }
        h2{
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 1px;
            padding: 0px 0px 15px 0;
            margin: 0;
        }
        .h2_interviewer{
            padding: 0px 0px 15px 0;
        }
        .entry_left{
            float: left;
        }
        .entry_image{
            position: relative;
            left: -1px;
        }
        h2{
            span{
                font-size: 18px;
                text-decoration: none;
                font-weight: normal;
            }
        }
        .entry_note{
            display: right;
            border: none 0px transparent;
            font-size: 14px;
            width: auto;
            line-height: 24px;
            padding: 14px 14px 30px 0;
            text-align: justify;
            iframe{
                width: 420px !important;
                height: 315px !important;
            }
            p{
                margin: 10px 0;
            }
        }
        &.box_3{
            .entry_left{
                float: none;
            }
            .entry_note{
                float: none;
                padding: 14px 14px 30px 14px;
            }
        }
        .entry_photos{
            padding: 14px 20px 15px 14px;
            .clearfix;
            display: block;
            a{
                margin: 0 5px 5px 0;
                display: block;
                float: left;
                img{
                    width: 50px;
                }
            }          
        }
        .entry_share{
            .clearfix;
            padding: 0px 20px 20px;
            li{
                float: left;
                width: 110px;
            }
        }
        .entry_category{
            position: relative;
            top:0;
            left:0;
            // padding: 0px 20px 10px;
            font-size: 13px;
            a{
                padding: 10px 8px;
                line-height: 16px;
                text-decoration: none;
                color: #000;
                font-size: 12px;
                font-family: 'bs-light', sans-serif;
                i{
                    margin-left: 5px;
                }
            }
        }

        .entry_via{
            padding: 0px 20px 10px;
            font-size: 12px;
            color: #727171;
            font-family: 'Century Schoolbook',Century,'Old Standard TT','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,'メイリオ',serif;
            font-style:italic;
            a{
                color: #727171;
            }
        }

        .entry_footer{
            position: relative;
            .entry_footer_inner{
                position: absolute;
                right: 20px;
                top: -25px;
                // .entry_date{
                //     font-size: 12px;
                // }
                a{
                    font-size: 11px;
                }
            }
        }

        &.box_3 .entry_footer{
            .entry_footer_inner{
                top: -45px;
            }
        }

        .entry_date{
            padding:0;
            position: relative;
            span{
                position: absolute;
                right: 20px;
                top: -25px;
            }
            font-size: 12px;
        }
        .entry_user{
            position: relative;
            right: 10px;
            font-size: 11px;
            color: #727171;
        }


        hr.line{
            margin: 10px 10px 20px;
            border-color:#e5e5e5 transparent #FFF;
        }
        .entry_comment{
            padding: 0px 20px 0px;
        }
    }

    hr.line{
        margin: 35px 0 0;
        border-color:#cccccc transparent #f5f5f5;
    }
}


.box_m,
.box_s{
    .entry_inner{
        overflow: hidden;
        display: block;
        background-position: top center;
        background-repeat: no-repeat;
        background-color: transparent;
        cursor: pointer;
    }
}

.box_s.new_text,
.box_m.new_text{
    .entry_note{
        margin-top: 20px;
    }
}
.box_s.text{
    .entry_note{
        margin-top: 5px;
    }
}

.box_s.portrait,
.box_m.portrait{
    .entry_note{
        position: absolute;
        bottom: 0;
        visibility: hidden;
    }
    &:hover{
        .entry_note{
            background-color: rgba(255,255,255,.9);
            visibility: visible;
        }
    }
}

.box_s .entry_image img{
    width: 236px;
}

.box_m .entry_image img{
    width: 485px;
}

.box_l.portrait{
    .entry_inner{
        position: relative;
        .entry_image{
            /*min-width: 300px;*/
            width: 452px;
            padding: 14px 14px 0 14px;
        }
        .entry_note{
            overflow: hidden;
            width: auto;
        }
    }
    .entry_photos{
    }
}
.box_3{
    .entry_inner{
        .entry_image{
            width: 696px !important;
        }
    }
}


/* エラーメッセージ ---------------------------------------------------------------------- */

div.err_box ul{
    background:#FF4900;
    padding: 10px;
    li{
        color: #FFF;
    }
}

/* side ---------------------------------------------------------------------- */

#side{

display: none;

    position: absolute;
    top: 114px;
    left: 0;
    /*width: @side_width;*/
    #side_inner{
        background-color: #dddcdc;
        border-right: solid #c0c0c0 1px;
        border-bottom: solid #c0c0c0 1px;
        .drop-shadow(2px, 2px, 0px, .05);        
    }
    p{
        width: 220px;
        margin: 15px auto 30px;
        color: #747474;
        font-size: 11px;
    }

    li.title{
        text-shadow: 0px 1px 0px rgba(0,0,0,.2); 
        padding: 7px 0 10px 20px;
        margin-bottom: 10px;
        text-align: left;
        /*font-style: italic;*/
        border-bottom: solid 1px rgba(255,255,255,.4);
        background-color: rgba(0,0,0,.03);
    }

    #side_menu{
        margin: 0px 0 30px;
        li{
            &:nth-child(even){
                /*background-color: #e9e9e9;*/
            }
            a{
                font-size: 12px;
                text-decoration: none;  
                display: block;
                color: #747474;
                padding: 5px 0 5px 20px;
                position: relative;
                &:hover{
                    color: #000;
                    /*background-color: #e5e43b;*/
                    i{
                        color: #000;
                    }
                }
                &.selected{
                    /*background-color: #e5e43b;*/
                    i{
                        color: #000;
                    }
                }
                i{
                    position: absolute;
                    right: 10px;
                    top: 6px;
                    color: rgba(0,0,0,.3);
                    width: 20px;
                    text-align: center;
                    font-size: 12px;
                }
            }            
        }
    }
    #side_share{
        width: 220px;
        .clearfix;
        margin: 20px auto 10px;        
        li{
            float: left;
            width: 110px;
        }
    }
    #side_copy{
        color: #727171;
        font-size: 10px;
        width: 220px;
        margin: auto;
        padding-bottom: 20px;
        line-height: 16px;
/*        font-family: 'Century Schoolbook',Century,'Old Standard TT','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,'メイリオ',serif;
        font-style:italic;   
*/
    }
    #side_ad{
        margin: 0px auto 0px;
        text-align: center;
        a{
            display: block;
            margin-bottom: 8px;
            img{
                max-width: 225px;
            }
        }
    }

}


/* 完了メッセージ ---------------------------------------------------------------------- */

div.success_box ul{
    background:#21C1FF;
    padding: 10px;
    li{
        color: #FFF;
        color: #000;
    }
}

/* エラーページ ---------------------------------------------------------------------- */

body#error{
    #err_area{
        width: 450px;
        margin: auto;
        h2{
            margin: 20px 0;
        }
        p{
            font-size: 12px;
        }
        hr.line{
            margin: 20px 0px 20px;
            border-color:rgba(0,0,0,.1) transparent rgba(255,255,255,.6);
        }
    }
}


/* user ---------------------------------------------------------------------- */

body#users{
    #contents_main{
        width: 700px;
        margin: 30px auto;
        .btn_area{
            margin-left: 10px;
        }
    }
}

body#user{
    #contents_main{
        width: 700px;
        margin: 30px auto;
        .input_text{
            width: 250px;
        }
        #pw_area{
            input, span{
                display: none;
            }
            span{
                margin-left: 10px;
                cursor: pointer;
            }            
        }
        .back_link{
            margin-left: 10px;
        }
        .btn_area{
            margin-left: 10px;
            position: relative;
            .btn{
                width: 200px;
            }
            .btn_gray{
                // position: absolute;
                // right: 10px;
            }
        }
    }
}



/* スマホ ---------------------------------------------------------------------- */

body.sp{

    a#logo{
        left: 0px;
        background-size: 130px !important;
    }

    #header_menu{
        height: 30px;
    }
    #header_menu_inner{
        left: 7px !important;
        position: relative;
        display: block !important;
    }
    #menu{
        // top: -2px !important;
        display: none;
        position: fixed;
        top: 0px;
        left: 50% !important;
        margin-left: -157px !important;
        z-index: 20000;
        width: 320px !important;
        padding: 0 !important;
        & > ul{
            li{
                position: static;
                &:last-child a{
                    border-bottom: solid 1px #000;
                }
                a{
                    width: 303px !important;
                    background: #FFF;
                    display: block;
                    line-height: 40px;
                    border-top: solid 1px #000;
                    border-left: solid 1px #000;
                    border-right: solid 1px #000;
                    margin: 0 !important;
                    padding: 0 5px 0 10px !important;
                }

                .sub-menu{
                    display: none;
                    position: absolute;
                    top: 0;
                    padding-top: 0px !important;
                    width: 310px !important;
                    z-index: 10;

                    &:after {
                        display: none;
                    }

                    ul{

                        li{
                            border-top: solid 1px #000;
                            border-left: solid 1px #000;
                            border-right: solid 1px #000;
                            padding: 0px 5px 0 9px;
                            background: #FFF;
                            &:last-child{
                                border-bottom: solid 1px #000;
                            }
                            &.item{
                                padding: 0 0 0 14px;
                            }
                            a{
                                border: none;
                                width: 304px !important;
                                display: block;
                                margin: 0px;
                                padding: 0 !important;
                                letter-spacing: 0;
                                &:hover{
                                    background: #000;
                                    color: #FFF;
                                }
                            }
                        }
                    }
                }

            }            
        }

    }
    .menu-close, .menu-reply{
        // text-align: right;
        a{
            line-height: 40px !important;
            i{
                font-size: 20px;
                margin-left: 5px;
                position: relative;
                top: 3px;
            }            
        }
    }
    #header_share{
        top: 33px;
        left: 20px;
        #tw_btn{
            top: -32px !important;
        }
        .icon-twitter{
            right: 45px !important;
        }
        #fb_btn{
            top: -32px !important;
            right: 0px !important;

        }
        .icon-facebook{
            right: 15px !important;
        }
    }

    .box_s,
    .box_m,
    .box_l{
        margin: 3px auto 5px auto;
        width: 320px;
        div.entry_image img{
            width: 320px;
        }
        h2 span{
            font-size: 18px;
        }
        .entry_description{
            font-size: 15px;
            text-align: justify;
            line-height: 22px;
        }
        .entry_footer_inner{
            left: 0 !important;
            right: 0 !important;
            .entry_user{
                left: 20px !important;
                right: 0 !important;
            }
            .entry_date{
                left: 30px !important;
                right: 0 !important;
            }
        }
    }

    #permalink{
        .entry{
            h2{
                // padding: 25px 0px 20px 0;
                span{
                }
            }
            .entry_image{
                width: 320px !important;
                padding: 0 !important;
            }
            .entry_photos{
                margin-top: 20px;
            }
            .entry_note{
                font-size: 15px;
                padding-left: 14px;                
                iframe{
                    width: 290px !important;
                    height: 164px !important;
                }
                img{
                    width: 290px !important;
                }
            }
            .entry_via{
                word-wrap: break-word;
            }
            .entry_footer{
                position: relative;
                .entry_footer_inner{
                    position: relative;
                    left: 20px;
                    top: 0px;
                }
            }

        }
    }

#infscr-loading{
    left: 40%;
}

    #wrapper,
    #header_menu,
    #contents{
        width: 320px;
    }
    #header_menu form,
    // #header_share,
    #page_top{
        display: none !important;
    }
    #header_share{
        z-index: 11000;
    }
}