/*===============================================
共通のスタイル
===============================================*/
#contents { overflow: scroll; }
#contents #profile { min-width: 1000px; }
img[src^="/images/no_image"] { border: 1px solid #ccc; }
#profile_header { width: 100%; }
.profile_main_back { width: 100%; height: 100%; }
.profile-body { padding-bottom: 20px; min-height: 700px; z-index: 10; }
.profile_header { position: relative; }
.profile_header img { width: 100%; height: auto; min-width: 980px; margin-top: 10px; }
.profile_header-image-fixed {
    width: 100%;
    /* z-index: -1; */
    text-align: center;
    overflow: hidden;
    background-size: 100% auto;
    background-position:  center top;
    background-repeat: no-repeat;
    /* min-height: 370px; */
}
.profile_header-image-fixed img {  width: 100%; min-width: 980px; }
.p_image { min-height: 370px; overflow: hidden; }
.p_blank {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    z-index: 9;
    width: 980px;
    height: 0;
    margin: auto;
    background: none;
}
.profile_top_header {
    z-index: 20;
    height: 50px;
    background-color: #ccc;
    position: fixed;
    display: block;
    overflow: hidden;
    top: -100px;
    padding-top: 7px;
    transition: top .2s, background .2s;
}
.profile_header_detail { width: 980px; margin: auto; position: relative; }
.profile_header_move { top: 20px; transition: top .2s, background .2s; }
.profile_header_image { float: left; width: 40px; height: 40px; margin-right: 10px; }
.profile_header_image img { width: 40px; height: 40px; }
.profile_header_image img.thumbnail { border: solid 1px #ccc; border-radius: 5px; }
#profile_header .profile_header_name {
    float: left;
    width: 150px;
    overflow: hidden;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 4rem;
}
.popup_seller_name {
    display: none;
    position: absolute;
    top: 0;
    left: 50px;
    height: 40px;
    background-color: #ccc;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 4rem;
}
.profile_header_menu_bar { color: #636363; background-color: #ccc; height: 40px; }
.profile_header_menu_center { width: 980px; height: 40px; margin: auto; }
.profile_header_menu_center ul { height: 40px; }
.profile_header_menu_center ul li {
    float: left;
    height: 40px;
    min-width: 80px;
    padding: 0 10px;
    text-align: center;
    display: block;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 4rem;
    cursor: pointer;
}
.profile_follow { display: block }
.profile_follow .followBtn { float: left; }
.profile_follow .follow_btn {
    display: block;
    height: 30px;
    background-color: #22ac38;
    border-radius: 3px;
    color: #fff;
    font-size: 1.6rem;
    line-height: 2rem;
    padding: 5px 10px;
    margin-right: 10px;
}
.profile_follow_sns a {
    display: block;
    width: 30px;
    height: 30px;
    background-color: #999;
    border-radius: 3px;
    margin-right: 10px;
    float: left;
}
.profile_follow_sns a.twitter { background-color: #1B95E0; padding: 5px 0 0 7px; }
.profile_follow_sns a.facebook { background-color: #4561AF; padding: 5px 0 0 10px; }
.profile_follow_sns span { font-size: 2rem; color: #fff; }
.profile_contents { width: 980px; margin: auto; margin-top: 0; position: relative; }
.profile_contents.profile_page { padding-top: 80px; }
.profile_col_single { width: 100%; }
.profile_col_left { width: 300px; float: left; }
.profile_col_right { width: 660px; margin-left: 320px; }
.profile_contents .wrapper,
.profile_contents .freespace.wrapper { width: 100%; margin-bottom: 10px; background: rgba(255,255,255,0.93); }
.profile_contents .wrapper:not(.freespace) { border: solid 1px #ccc; }
.profile_contents .wrapper h2 {
    position: relative;
    padding: 7px 0;
    margin: 0;
    min-height: 40px;
    background-color: #ccc;
    border-left: none;
    border: solid 1px #999;
    font-size: 1.8rem;
    font-weight: normal;
    text-align: center;
}
h2 .profile_rss_btn { position: absolute; right: 5px; top: 0; font-size: 2.5rem; }
.wrapper img { max-width: 100%; }

/* コンテンツ別 monologue */
.profile_left_colum .monologue { position: relative; }
.monologue .followBtn {
    width: 300px;
    display: block;
    text-align: right;
    position: absolute;
    top: 5px;
    right: 5px;
}
.monologue .followBtn span.follow_btn {
    display: inline-block;
    font-weight: normal;
    text-decoration: none;
    padding: 5px 10px;
    background-color: #22ac38;
    color: #fff;
    line-height: 14px;
    border-radius: 3px;
}
.monologue .post_contents { border-top: solid 1px #ccc; padding: 5px 0; min-height: 70px; }
.monologue .post_contents:first-child { border: none; }
.monologue .post_contents .profile_image { width: 60px; height: 60px; float: left; }
.monologue .post_contents img { width: 100%; height: 100%; }
.monologue .post_contents p { margin-left: 65px; margin-bottom: 5px; }
.monologue .post_contents span.post_time { color: #919191; }

/* コンテンツ別 schedule */
.schedule.wrapper .date { text-align: right; }
.schedule.wrapper ul { padding: 5px; }
.schedule.wrapper ul li { padding: 5px 0; border-bottom: dotted 1px #999; margin-bottom: 0; }
.schedule.wrapper ul li:last-child { border: none; }
.schedule.wrapper h3 { border: none; font-size: 1.5rem; }

/* コンテンツ別 news */
.wrapper div.wrapper_main { margin: 5px; }
.news.wrapper div.profile_main { padding: 5px; border-bottom: dashed 1px #999; }
.news.wrapper .date { text-align: right; }
.news.wrapper h3 { border: none; }
.news.wrapper ul { padding: 5px; }
.news.wrapper ul li { padding: 5px 0; border-bottom: dashed 1px #999; margin-bottom: 0; }
.news.wrapper ul li:last-child { border: none; }

/* コンテンツ別 calendar */
.calendar.wrapper table { border: none; outline: none; margin: 2px; }
.calendar.wrapper table th { border: none; padding: 0; background: none; text-align: center; }
.calendar.wrapper table td {
    border: none;
    height: 30px;
    padding: 0;
    background: none;
    text-align: center;
}
.calendar.wrapper table td.today { background: #f1f1f1; }

/* コンテンツ別 seller_products */
.seller_products ul { padding: 5px; }
.seller_products ul li { display: block; height: 60px; padding: 5px 0; border: none; }
.seller_products ul a { display: block; border-top: solid 1px #ccc; }
.seller_products ul a:first-child { border: none; }
.seller_products ul li .thumbnail { float: left; margin-right: 5px; }

/* profile_layout_1_only */
#profile_layout_1 .profile_header {
    margin: auto;
    margin-bottom: 0;
    color: #fff;
    z-index: 9;
    position: relative;
    background: none;
}
#profile_layout_1 .profile_detail {
    width: 980px;
    margin: auto;
    margin-top: 90px;
    position: relative;
    z-index: 10;
    display: block;
}
#profile_layout_1  .profile_publisher_image {
    float: left;
    width: 180px;
    height: 180px;
    margin-right: 20px;
    margin-top: -200px;
}
#profile_layout_1 .profile_header_menu_center ul { margin-left: 180px; }
#profile_layout_1 .profile_publisher_name {
    position: absolute;
    text-shadow: #fff 0 0 5px, #fff 0 0 5px, #fff 0 0 5px, #fff 0 0 5px;
    font-size: 2rem;
    color: #666;
    padding-top: 0;
    width: 780px;
    margin-top: -90px;
    margin-left: 190px;
    white-space: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}
#profile_layout_1 .profile_follow { width: 780px; margin-left: 190px; margin-top: -190px; position: absolute; }
#profile_layout_1 .social_btn { top: -40px; position: absolute; right: 0; }
#profile_layout_1 .tw_campaign { display: none; }
#profile_layout_1 .profile_seller_prf { margin: 100px 0 20px 0; }
#profile_layout_1 .introduction { background: rgba(255, 255, 255, 0.93); padding: 5px; }

/* profile_layout_2_only */
#profile_layout_2 { position: relative; }
#profile_layout_2 .profile_header {
    margin: auto;
    margin-bottom: 0;
    color: #fff;
    z-index: 9;
    position: relative;
    background: none;
}
#profile_layout_2  .profile_header-image-fixed { position: relative; min-height: 350px; }
#profile_layout_2  .profile_header-image-fixed img { position: absolute; bottom: 0; left: 0; }
#profile_layout_2 .header-padding-pc { position: relative; margin: auto; }
#profile_layout_2 .profile_detail {
    width: 100%;
    margin: auto;
    bottom: 50px;
    position: absolute;
    z-index: 10;
    display: block;
    text-align: center;
}
#profile_layout_2 .social_btn { margin-top: 20px; display: inline-block; position: relative; right: -440px; }
#profile_layout_2 .introduction { background: rgba(255, 255, 255, 0.93); padding: 5px; }
#profile_layout_2 .profile_publisher_image { float: none; margin-right: 0; margin: auto; }
#profile_layout_2 .profile_publisher_name {
    color: #666;
    text-shadow: #fff 0 0 5px, #fff 0 0 5px, #fff 0 0 5px, #fff 0 0 5px;
    padding-top: 0;
    width: auto;
    margin: 0 auto 5px;
    text-align: center;
}
#profile_layout_2 .profile_follow .followBtn { float: none; width: 250px; margin: auto; margin-bottom: 10px; }
#profile_layout_2 .profile_follow .profile_follow_sns { margin: auto; text-align: center; display: inline-block; }
#profile_layout_2 .tw_campaign { display: none; }

/* profile_layout_3_only */
.left_profile_detail.wrapper { padding: 5px; border: solid 1px #d00; }
#profile_layout_3 .profile_header {
    margin: auto;
    margin-bottom: 0;
    color: #fff;
    z-index: 9;
    position: relative;
    background: none;
}
#profile_layout_3 .profile_publisher_image { float: none; width: 180px; height: 180px; margin: 10px auto; }
#profile_layout_3 .profile_publisher_name {
    font-size: 1.5rem;
    color: #666;
    padding-top: 0;
    width: 100%;
    margin: 0 auto 10px;
    white-space: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}
#profile_layout_3 .profile_follow .followBtn { float: none; width: 270px; text-align: center; margin: 0 auto 10px; }
#profile_layout_3 .profile_follow .follow_btn { margin-right: 0; }
#profile_layout_3 .profile_follow .profile_follow_sns { margin: 0 105px 10px; display: inline-block; width: 100%; }
#profile_layout_3 .profile_detail {
    width: 980px;
    height: 30px;
    margin: auto;
    text-align: right;
    margin-top: 0;
    position: absolute;
    top: -100px;
}
#profile_layout_3 .profile_contents { margin-top: 20px; }
#profile_layout_3 .social_btn { margin-top: 0; }
#profile_layout_3 .tw_campaign { display: none; }

/*===============================================
PCサイズ
===============================================*/
@media screen and (min-width: 768px) {
    .profile_publisher_image img {
        width: 180px;
        height: 180px;
        border: solid 2px #fff;
        border-radius: 5px;
        object-fit: cover;
    }
    .profile_header_name:hover { text-decoration:none; overflow: none; }
    .profile_header_name:hover + .popup_seller_name  { display: block; }
    .profile_header_menu_center ul li:hover {  opacity: 0.5; }
    .monologue .followBtn span.follow_btn:hover { cursor: pointer; }
    .calendar.wrapper table td:hover { background: #ccc; transition: background-color 0.1s ease-in-out; }
    .seller_products ul li:hover { background-color: #f1f1f1; }

    .detail .showmore_content { position: relative; overflow: hidden; }
    .detail .showmore_trigger {
        width: 100%;
        padding: 5px 0;
        margin-top: 10px;
        text-align: center;
        color: #1d5aac;
        background-color: #f0f0f0;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
    .detail .showmore_trigger span { display: block; line-height: 1; text-decoration: none; }
}

/*===============================================
スマホサイズ
===============================================*/
@media screen and (max-width: 767px) {
    #profile { margin-top: -40px; font-size: .8rem; }
    #profile h1 { position: static; }
    #profile h2,
    #build-menu.profile h2 {
        margin: -10px -10px 0;
        padding: 5px 10px;
        text-align: left;
        font-size: 1.0rem;
        line-height: 1.4;
    }
    #profile h2 a { color: #303030; }
    #build-menu.profile h2 a { color: #fff; }
    #profile h2 a:nth-of-type(2),
    #build-menu.profile h2 a:nth-of-type(2) { float: right; }
    #profile h2 a:nth-of-type(2) .fa,
    #build-menu.profile h2 a:nth-of-type(2) .fa { margin-right: 0; }
    #profile h3,
    .seller #profile h3 {
        height: auto;
        margin-bottom: .5rem;
        padding: 0;
        font-size: .9rem;
        line-height: 1.4;
        border: none;
    }
    #profile h3 a,
    .seller #profile h3 a { margin: 0; padding: 0; color: #303030; border: none; }
    #profile #header-sub img { width: 40px; height: 40px; margin: 5px 10px; }
    
    /* header */
    #profile #header-sub { width: 100%; height: 50px; line-height: 1; z-index: 999; }

    /* Toggle Button */
    #profile #nav-toggle {
        display: block;
        position: absolute;
        top: 16px;
        right: 10px;
        width: 26px;
        height: 26px;
        z-index: 3;
    }
    #bds #profile #nav-toggle {
        display: block;
        float: right;
        position: relative;
        top: -35px;
        right: 10px;
        width: 26px;
        height: 26px;
        z-index: 3;
    }
    #profile #nav-toggle span {
        position: absolute;
        left: 0;
        display: block;
        width: 100%;
        height: 4px;
        background: #666;
        transition: .3s ease-in-out;
    }
    #profile #nav-toggle span:nth-child(1) { top: 0; }
    #profile #nav-toggle span:nth-child(2) { top: 8px; visibility: visible; }
    #profile #nav-toggle span:nth-child(3) { top: 16px; }
    
    /* #nav-toggle 切り替えアニメーション */
    #profile .open #nav-toggle span:nth-child(1) { top: 10px; transform: rotate(225deg); }
    #profile .open #nav-toggle span:nth-child(2) { left: 50%; width: 0; visibility: hidden; }
    #profile .open #nav-toggle span:nth-child(3) { top: 10px; transform: rotate(-225deg); }
    
    #profile #nav-sub {
        position: absolute;
        top: -500px; /* 開いてないときは画面外に配置 */
        z-index: 2;
        width: 100%;
        padding: 5px 0 10px;
        text-align: center;
        background: #fff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);
        transition: .3s ease-in-out;
    }
    #profile #nav-sub li:first-child { height: 50px; line-height: 50px; font-weight: bold; font-size: 1.0rem; }
    #profile #nav-sub li a { display: block; width: 100%; padding: 15px 0; }
    #profile #nav li a:hover,
    #profile #nav-sub li a:hover { text-decoration: none !important; }
    
    /* #nav-sub スライドアニメーション */
    #profile .open #nav-sub { transform: translateY(500px); }
    #bds #profile .open #nav-sub { position: relative; top: 0; transform: translateY(-50px); }
    #bds #profile .open #nav-sub li:not(:first-child) { display: none; }
    
    /* メインビュー */
    #profile #profile-contents { padding: 10px 10px 100px; }
    #profile .wrapper,
    #build-menu.profile .wrapper { margin: 1em 0; padding: 10px; border: 1px solid #ccc; border-radius: 3px; }
    #profile .wrapper.nb,
    #build-menu.profile .wrapper.nb { padding: 0; background: transparent !important; }
    
    /* お知らせ・スケジュール */
    #profile .news li,
    #profile .schedule li,
    #build-menu.profile .news li,
    #build-menu.profile .schedule li { padding: 1em 0; border-bottom: none; }
    #profile .news li:not(:first-child),
    #profile .schedule li:not(:first-child),
    #build-menu.profile .news li:not(:first-child),
    #build-menu.profile .schedule li:not(:first-child) { border-top: 1px solid #ccc; }
    #profile .news .date,
    #profile .schedule .date,
    #build-menu.profile .news .date,
    #build-menu.profile .schedule .date { margin-bottom: .5em; text-align: right; }
    #profile .news .txtr,
    #profile .schedule .txtr,
    #build-menu.profile .news .txtr,
    #build-menu.profile .schedule .txtr { padding-top: 1em; border-top: 1px solid #ccc; }
    #profile .news li .txtr,
    #profile .schedule li .txtr,
    #build-menu.profile .news li .txtr,
    #build-menu.profile .schedule li .txtr { border: none; }
    #profile .news .empty,
    #profile .schedule .empty { margin-top: 1em; }
    
    /* 独り言 */
    #profile .monologue #monologues,
    #build-menu.profile .monologue #monologues { max-height: 200px; overflow-y: scroll; }
    #profile .monologue .post_contents,
    #build-menu.profile .monologue .post_contents { padding: 1em 0 10px; min-height: 70px; border: none; }
    #profile .monologue .post_contents:not(:last-child),
    #build-menu.profile .monologue .post_contents:not(:last-child) { border-bottom: 1px solid #ccc; }
    #profile .monologue .post_contents img,
    #build-menu.profile .monologue .post_contents img { float: left; width: 50px; height: 50px; }
    #profile .monologue .post_contents p,
    #build-menu.profile .monologue .post_contents p { margin-left: 60px; margin-bottom: 5px; }
    
    /* コンテンツ */
    #profile div[class^="sale_"] ul { max-height: 200px; overflow-y: scroll; }
    #profile div[class^="sale_"] li { padding: 1em 0; }
    #profile div[class^="sale_"] li:not(:last-child) { border-bottom: 1px solid #ccc; }
    #profile div[class^="sale_"] .tofs { height: 50px; }

    /* フッターメニュー */
    #build-menu.profile .slidemenu-content { padding-top: 1em; font-size: .8rem; }
    #build-menu.profile .slidemenu-content h2 { margin: 0; border-radius: 3px; }
    #build-menu.profile .slidemenu-content h2 a:nth-of-type(2) { float: right; }
    #build-menu.profile .slidemenu-content h2 a:nth-of-type(2) .fa { margin-right: 0; }
    #build-menu.profile .slidemenu-content a { display: inline-block; padding: 0; }
    #build-menu.profile .slidemenu-content a:hover { text-decoration: underline !important; }
    #build-menu.profile .slidemenu-content .slidemenu-header img.thumbnail { width: 100px; height: 100px; margin: 0 0 5px; }
    #build-menu.profile .slidemenu-content .slidemenu-header .button_follow {
        display: inline-block;
        margin: 1em auto;
        padding: 5px 10px;
        color: #fff;
        font-weight: bold;
        font-size: .8rem;
        background: #22ac38;
        border-radius: 3px;
    }
    #build-menu.profile .slidemenu-content .slidemenu-header .wrapper { margin: 1em 0 0; }
    #build-menu.profile .slidemenu-content > li { padding: 10px; font-weight: normal; border: none; }
    #build-menu.profile .slidemenu-content > li li { white-space: normal; }
    #build-menu.profile .slidemenu-content .wrapper { padding: 0; border: none; }
    #build-menu.profile .slidemenu-content .wrapper.nb { padding: 0; background: transparent; }
    #build-menu.profile .slidemenu-content .calendar th,
    #build-menu.profile .slidemenu-content .calendar td { position: relative; padding: 5px; text-align: center; border: none; }
    #build-menu.profile .slidemenu-content .calendar th[colspan="7"] { padding: 10px 0; font-size: 1.0rem; }
    #build-menu.profile .slidemenu-content .calendar th a .fa { margin: 0; padding: 0 10px; }
    #build-menu.profile .slidemenu-content .calendar td a { text-decoration: underline; }
    #build-menu.profile .slidemenu-content .calendar td:hover { background: transparent; }
    #build-menu.profile .slidemenu-content .calendar .today { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); }
    #build-menu.profile .slidemenu-content .news .date,
    #build-menu.profile .slidemenu-content .schedule .date { text-align: left; }
    #build-menu.profile .slidemenu-content div[class^="sale_"] ul { max-height: none; }
    #build-menu.profile .slidemenu-content div[class^="sale_"] li { padding: 1em 0; }
    #build-menu.profile .slidemenu-content div[class^="sale_"] li:not(:last-child) { border-bottom: 1px solid #ccc; }
    #build-menu.profile .slidemenu-content div[class^="sale_"] img { float: left; width: 30px; height: 30px; }
    #build-menu.profile .slidemenu-content div[class^="sale_"] .tof {
        width: 185px;
        margin-left: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #build-menu.profile .slidemenu-content .archive li { padding-top: 1em; }

    .profile_header_name:active { text-decoration: none; overflow: none; }
    .profile_header_name:active + .popup_seller_name { display: block; }
    .profile_header_menu_center ul li:active { opacity: 0.5; }
    .calendar.wrapper table td:active { background: #ccc; transition: background-color 0.1s ease-in-out; }
    .seller_products ul li:active { background-color: #f1f1f1; }
}