@charset "UTF-8";
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
記事ページ全共通CSS
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
#article_contents{ -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;font-size: 14px;}
#article_contents > h2{text-align: center;font-size: 30px;line-height: 1;letter-spacing: 0.2em;padding: 0 0 4px 0;border-bottom: 2px solid #000;}
#contents{min-height: 500px; position: relative;}

#breadcrumbsList {
    display: block;
    margin: 30px auto 35px;
    font-size: 11px;
}
.main-area.article-list, 
.main-area.article-detail {
    max-width: 1000px;
    margin: 0 auto 100px;
    padding: 0 20px;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
記事リスト共通CSS
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/*並び替え*/
.article-list .search_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#ctl00_ContentPlaceHolder1_ctl00_sortSelector ul{
    font-size: 12px;
    display: inline-flex;
}
#ctl00_ContentPlaceHolder1_ctl00_sortSelector ul li:not(:last-child):after{
    content:"|";
    font-weight: normal;
    margin: 0 5px;
    color: #000;
}
#ctl00_ContentPlaceHolder1_ctl00_sortSelector ul li.now{
    color: #999999;
}
.article-list .page_links ul{
    display: flex;
    width: 440px;
    justify-content: space-between;
}
.article-list .page_links ul li{
    width: 140px;
    border: 1px solid #a8a8a8;
    border-bottom: none;
    font-family: "futura-pt", sans-serif;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    letter-spacing: 0.08em;
    font-weight: 500;
}
.article-list .page_links ul li.now{
    background: #e5e5e5;
}
.article-list .search_top #ctl00_ContentPlaceHolder1_ctl00_selectedTaglist{
    display: none;
}

/*絞り込み*/
.article-list .search_flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    align-items: baseline;
}
.article-list .search_flex .serch_blk #ctl00_ContentPlaceHolder1_ctl01_selectedTaglist,
.article-list .search_flex .serch_blk #ctl00_ContentPlaceHolder1_ctl01_sortSelector{
    display: none;
}
.article-list .search_flex .serch_blk, 
.article-list .search_flex .tag_blk {
    width: 50%;
    padding: 12px 30px;
    border: 1px solid #a8a8a8;
    text-align: center;
}
.article-list .search_flex .serch_blk p.ttl_serch, 
.article-list .search_flex .tag_blk p.ttl_serch {
    font-size: 14px;
    padding-right: 14px;
    position: relative;
    display: inline-block;
}
.article-list .search_flex .tag_blk {
    margin-left: -1px;
}
.article-list .search_flex .serch_blk p.ttl_serch.close .arrow, 
.article-list .search_flex .tag_blk p.ttl_serch.close .arrow {
    border-bottom: none;
}
.article-list .search_flex .serch_blk p.ttl_serch.close .arrow, 
.article-list .search_flex .tag_blk p.ttl_serch.close .arrow {
    border-top: 5px solid #000;
    border-right: 4px solid transparent!important;
    border-left: 4px solid transparent!important;
}
.article-list .search_flex .serch_blk p.ttl_serch .arrow, 
.article-list .search_flex .tag_blk p.ttl_serch .arrow, 
.article-list .search_flex .serch_blk p.ttl_serch.open .arrow, 
.article-list .search_flex .tag_blk p.ttl_serch.open .arrow {
     display: block;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 0;
    height: 0;
    border-bottom: 5px solid #000;
    border-right: 4px solid transparent!important;
    border-left: 4px solid transparent!important;
}
#ctl00_ContentPlaceHolder1_ctl01_staffNameSelector,
#ctl00_ContentPlaceHolder1_ctl01_tagSelector{
    display: flex;
    justify-content: space-between;
    margin: 30px auto;
    width: 100%;
}
#ctl00_ContentPlaceHolder1_ctl01_staffNameSelector p,
#ctl00_ContentPlaceHolder1_ctl01_tagSelector p{
    font-size: 14px;
    line-height: 36px;
}
#ctl00_ContentPlaceHolder1_ctl01_staffNameSelector select,
#ctl00_ContentPlaceHolder1_ctl01_tagSelector select{
    width: 320px;
    height: 36px;
    border: 1px solid #999;
    font-size: 13px;
    position: relative;
    padding: 0 0 0 15px;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#ctl00_ContentPlaceHolder1_ctl01_dvSearch {
    margin: 20px auto 10px;
    display: flex;
    justify-content: center;
    width: 100%;
}
#ctl00_ContentPlaceHolder1_ctl01_dvSearch a {
    width: 150px;
    height: 36px;
    line-height: 36px;
    font-size: 13px;
    text-align: center;
    border: 1px solid #999;
    display: block;
}
#ctl00_ContentPlaceHolder1_ctl01_dvSearch #ctl00_ContentPlaceHolder1_ctl01_lbSearch {
    background: #e5e5e5;
    /*background: #000;
    color: #fff;*/
    margin-right: 10px;
}
#ctl00_ContentPlaceHolder1_ctl02_tagSelector > p{
    display: none;
}
#ctl00_ContentPlaceHolder1_ctl02_tagSelector ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}
#ctl00_ContentPlaceHolder1_ctl02_tagSelector ul li,
#ctl00_ContentPlaceHolder1_ctl02_selectedTaglist ul li.now {
    font-size: 13px;
    border: 1px solid #999;
    border-radius: 15px;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    margin: 0 5px 16px;
}
#ctl00_ContentPlaceHolder1_ctl02_selectedTaglist > p,
#ctl00_ContentPlaceHolder1_ctl02_tagSelector ul li.now {
    display: none;
}
#ctl00_ContentPlaceHolder1_ctl02_selectedTaglist ul{
    margin-top: 20px;
}
#ctl00_ContentPlaceHolder1_ctl02_selectedTaglist ul li.now {
    background: #e5e5e5;
    display: inline-block;
    position: relative;
    margin-bottom: -6px;
}


/*記事一覧*/
#ArticleList #ctl00_ContentPlaceHolder1_searchCondition{
    font-size: 13px;
    margin-bottom: 20px;
    display: inline-block;
}
#ArticleList #ListShowArea{
    display: flex;
    flex-wrap: wrap;
}
#ArticleList #ListShowArea > li:nth-child(-n+2){
    padding-top: 0;
    border-top: none;
}
#ArticleList #ListShowArea > li{
    width: 50%;
    border-top: 1px solid #a8a8a8;
    padding: 50px 30px;
    box-sizing: border-box;
}
#ArticleList #ListShowArea > li > a{
    display: flex;
    align-items: center;
}
#ArticleList #ListShowArea > li > a > span{
    margin-right: 40px;
    width: 200px;
}
#ArticleList #ListShowArea > li img{
    width: 100%;
}
#ArticleList #ListShowArea > li > a > div{
    width: 200px;
}
#ArticleList #ListShowArea > li span.title{
    line-height: 1.5;
    letter-spacing: 0.12em;
}
#ArticleList #ListShowArea > li span.date{
    font-size: 12px;
    color: #999999;
    letter-spacing: 0.03em;
    margin-top: 10px;
    display: block;
    text-transform: uppercase;
}
#ArticleList #ListShowArea > li .articleListUserImage{
    display: flex;
    margin-top: 30px;
    align-items: center;
}
#ArticleList #ListShowArea > li .articleListUserImage img{
    width: 50px;
    height: 50px;
    margin-right: 15px;
    border-radius: 50%;
}
#ArticleList #ListShowArea > li .articleListUserImage ul{
    width: 135px;
}
#ArticleList #ListShowArea > li .articleListUserImage .shopname{
    font-size: 12px;
    color: #999999;
    margin-bottom: 5px;
}
#ArticleList #ListShowArea > li .articleListUserImage .username{
    line-height: 22px;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
記事詳細共通CSS
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.article-detail #article_contents{font-size: 15px;letter-spacing: 0.05em;}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

/*記事タイトル*/
.article-detail .articleInfo{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000;
    padding-bottom: 30px;
    margin-bottom: 70px;
}
.article-detail .articleInfo #staffImg img { border-radius: 50%; width: 100px;height: 100px;margin-right: 20px;}
.article-detail .articleInfo #title{
    font-size: 24px;
    letter-spacing: 0.04em;
    margin-bottom: 15px;
}
.article-detail .articleInfo #user_name{
    font-size: 15px;
    margin-bottom: 10px;
}
.article-detail .articleInfo #date{
    font-size: 12px;
    color: #999999;
}

/*記事本文*/
.article-detail #article_block{
    line-height: 2;
}
.article-detail #article_block img{
    width: 100%;
}
.article-detail .ss-article-box{
    margin-bottom: 75px;
}
.article-detail .boxtype-1-list .content-area-image,
.article-detail .boxtype-2-list .content-area-image,
.article-detail .boxtype-1-list .ss-content-coordinate-img{
    width: 60%;
}
.article-detail .boxtype-2-list > li:not(:last-child){
    margin-bottom: 50px;
}
.article-detail .boxtype-3-list,
.article-detail .boxtype-4-list{
    display: flex;
    flex-wrap: wrap;
}
.article-detail .boxtype-3-list > li,
.article-detail .boxtype-4-list > li{
    width: 40%;
    margin-right: 4%;
}
.article-detail .boxtype-4-list > li:nth-child(-n+2){
    margin-bottom: 40px;
}
.article-detail .boxtype-1-list .ss-content-product-img{
    width: 40%;
}
.article-detail .ss-content-product-info{
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
    letter-spacing: 0.025em;
    margin-top: 15px;
}
.article-detail .ss-content-user-info-list{
    display: flex;
    margin-top: 15px;
    align-items: center;
    line-height: 1.5;
    font-size: 14px;
}
.article-detail .ss-content-user-info-list .ss-content-user-image img{
    border-radius: 50%;
    width: 80px!important;
    height: 80px;
    margin-right: 20px;
}
.article-detail .ss-content-user-info-list .ss-content-user-label{
    display: none;
}
/*関連タグ*/
.article-detail #tag_block{
    margin-top: 50px;
}
.article-detail #tagList{
    display: flex;
    flex-wrap: wrap;
}
.article-detail #tagList .tagLinks{
    height: 30px;
    line-height: 30px;
    border: 1px solid #999999;
    border-radius: 15px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 15px;
    margin-right: 10px;
}
.article-detail #tagList .tagLinks a{
    font-size: 13px;
    letter-spacing: 0.025em;
    color: #333333;
    display: block;
}

/*この記事を書いたスタッフ*/
.article-bottom #staffinfo_block{
    background: #f8f8f8;
    padding:40px 0;
    font-size: 18px;
    letter-spacing: 0.025em;
}
.article-bottom #staffinfo_block .staffinfo_block_innner{
    width: 1000px;
    margin: auto;
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    justify-content: center;
}
/*アーカイブ非表示の時*/
.article-bottom #staffinfo_block .staffinfo_block_innner > p{
    margin-right: 40px;
}
.article-bottom #staffinfo_block .staffinfo_block_innner .btn{
    display: none;
}





.article-bottom #staffinfo_block .staff{
    display: flex;
    align-items: center;
}
.article-bottom .staffinfo_block_innner .image{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 15px;
}
.article-bottom .staffinfo_block_innner .image img{
    width: 100%;
    border-radius: 50%;
}
.article-bottom .staffinfo_block_innner ul{
    letter-spacing: 0.05em;
}
.article-bottom .staffinfo_block_innner ul .shop_name{
    color: #999999;
    font-size: 12px;
}
.article-bottom .staffinfo_block_innner ul .user_name{
    font-size: 14px;
    margin: 5px auto 10px;
}
.article-bottom .staffinfo_block_innner ul .user_name{
    font-size: 14px;
    margin: 5px auto 10px;
}
.article-bottom .staffinfo_block_innner ul .link{
    font-size: 14px;
}
.article-bottom .staffinfo_block_innner ul .link a{
    text-decoration: underline;
}
.article-bottom .staffinfo_block_innner .btn a{
    padding: 0 90px;
    background: #999999;
    color: #fff;
    line-height: 50px;
    height: 50px;
}


/*その他の新着ブログ*/
.article-bottom #archive_block{
    width: 1000px;
    margin: 80px auto 100px;
    letter-spacing: 0.025em;
}
.article-bottom #archive_block img{
    width: 100%;
}
.article-bottom #archive_block h3{
    font-size: 18px;
    border-bottom: 1px solid;
    padding-bottom: 20px;
    padding-left: 20px;
    margin-bottom: 40px;
}
.article-bottom #archive_block h2.ttl{
    display: none;
}
.article-bottom #archive_block .articlePart .archive{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px;
}
.article-bottom #archive_block .articlePart .archive > li{
    width: 46%;
}
.article-bottom #archive_block .articlePart .archive li > a,
.article-bottom #archive_block .articlePart .article_info > div{
    display: flex;
    align-items: center;
}
.article-bottom #archive_block .articlePart .article_info{
    width: 300px;
    /*height: 165px;*/
    height: 130px;
    justify-content: space-between;
    display: flex;
    flex-direction: column
}
.article-bottom #archive_block .archive > li:nth-child(-n+2){
    border-bottom: 1.5px solid #e8e8e8;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.article-bottom #archive_block .ttl_img{
    width: 130px;
    margin-right: 20px;
}
.article-bottom #archive_block .title{
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
    margin-top: 15px;
}
.article-bottom #archive_block .topUserImage img{
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
.article-bottom #archive_block .articlePart .article_info > div ul{
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.05em;
}
.article-bottom #archive_block .articlePart .article_info > div ul .shop_name{
    color: #999999;
    font-size: 12px;
    margin-right: 18px;
}
.article-bottom #archive_block .articlePart .article_info .date{
    display: block;
    text-align: right;
    font-size: 12px;
    color: #999999;
}
.article-bottom .all_btn{
    text-align: right;
    margin-top: 60px;
}
.article-bottom .all_btn a{
    font-size: 18px;
    padding: 0 10px 10px 10px;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid;
    display: inline;
    font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
お気に入りスタッフリスト用CSS
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
#FavoriteStaffListArea > li{width: 180px; display: inline-block; vertical-align: top; margin: 0 0 10px 10px;}
.favorite_staff_removed_text {
    width: 150px;
    text-align: center;
    position:absolute;
    border: 1px solid #ccc;
    color: #666;
    border-radius: 4px;
    background: #eee;
}
.favorite_staff_registered_text {
    width: 150px;
    text-align: center;
    position:relative;
    border: 1px solid #00a6dd;
    color: #00a6dd;
    border-radius: 4px;
    background: #cceeff;
}




/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
個人ページ
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/*共通部分の調整*/
.main-area #staff_contents h2.ttl-main{
    display: none;
}
#staff_contents{
    margin-top: 50px!important;
}
.main-area.staff-detail #staff_contents .detail_flex{
    border: none;
    margin-bottom: 0;
}
/*タブのスタイル*/
.StaffDetail_tabs .tab_item {
  width: 140px;
    height: 40px;
    margin-right: 10px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    display: block;
    float: left;
    text-align: center;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: "futura-pt", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif!important;
    letter-spacing: 0.08em;
    border: 1px solid #a8a8a8;
    border-bottom: none;
}

/*ラジオボタンを全て消す*/
.StaffDetail_tabs input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.StaffDetail_tabs .tab_content {
  display: none;
  clear: both;
  overflow: hidden;
  border-top: 1px solid #a8a8a8;
}

/*選択されているタブのコンテンツのみを表示*/
.StaffDetail_tabs #STYLESNAP:checked ~ #STYLESNAP_content,
.StaffDetail_tabs #BLOG:checked ~ #BLOG_content{
  display: block;
  padding-top: 20px;
}

/*選択されているタブのスタイルを変える*/
.StaffDetail_tabs input:checked + .tab_item {
  background-color: #e5e5e5;
}

/*個人ページ ブログ一覧*/
.StaffDetail_tabs #BLOG_content ul.archive{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 72px;
}
.StaffDetail_tabs #BLOG_content ul.archive > li{
    width: 31%;
    margin-right: 3.5%;
    margin-top: 50px;
}
.StaffDetail_tabs #BLOG_content ul.archive > li:nth-child(3n){
    margin-right: 0;
}
.StaffDetail_tabs #BLOG_content ul.archive > li:nth-child(-n+3){
    margin-top: 30px;
}
.StaffDetail_tabs #BLOG_content .article_info > div{
    display: none;
}
.StaffDetail_tabs #BLOG_content .article_info .title{
    font-size: 14px;
    line-height: 1.5;
    margin: 20px auto 10px;
    letter-spacing: 0.12em;
}
.StaffDetail_tabs #BLOG_content .article_info .date{
    font-size: 12px;
    color: #999999;
    letter-spacing: 0.03em;
}
.StaffDetail_tabs #BLOG_content .all_btn{
    margin: 80px auto 50px;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ページャ
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
#BLOG_content_pager{
    margin: 60px auto 30px;
}
#article_contents .__right #productList_pager,
#BLOG_content_pager{text-align: center; font-size: 14px;font-family: futura-pt,futura;}

#article_contents .__right #productList_pager > div > span > a,
#BLOG_content_pager > div > span > a{
  display: inline-block;
  line-height: 30px;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  width: 30px;
  height: 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 12px;
}
#article_contents .__right #productList_pager > div a.next span,
#BLOG_content_pager > div a.next span{
  margin: 0 42px 0 12px;
}
#article_contents .__right #productList_pager > div a.back span,
#BLOG_content_pager > div a.back span{
  margin: 0 12px 0 42px;
}
#article_contents .__right #productList_pager > div a span img,
#BLOG_content_pager > div a span img{
  width: 8px;
  height: 30px;
}

#article_contents .__right #productList_pager div a:not(:last-of-type), 
#article_contents .__right #productList_pager div span b ,
#BLOG_content_pager div a:not(:last-of-type),
#BLOG_content_pager div span b{
  margin: 0 12px;
  line-height: 30px;
  width: 30px;
  height: 30px;
  display: inline-block
}
#article_contents .__right #productList_pager div span b,
#BLOG_content_pager div span b {
  border: 1px solid;
}
#article_contents .__right #productList_pager div a.back,
#BLOG_content_pager div a.back{
  display: inline-flex;
  align-items: center;
  width: 100px;
}