@charset "UTF-8";


/* ==========================================================================
   reset
========================================================================== */

.style_error {
  margin: 24px 0;
}

.topic_table_area {
  width: 100%;
}

.forum_box02 {
  border-bottom: 1px dotted #e7e7e7;
  margin: 0;
  padding: 16px 0 16px 0;
  text-align: center;
  background-color: #f7f7f7;
}

.forum_box02 p {
  margin: 1em 0 0;
}

.home_icon {
  display: block;
  width: 18px;
  height: 21px;
  background-position: center -274px;
  padding: 0 0 0 80px;
}

.logo_icon {
  display: block;
  width: 18px;
  height: 21px;
  background-position: center 0;
  padding: 0 0 0 80px;
}

  /* ==========================================================================
      button style
  ========================================================================== */
  .sp_red_btn {
    border: 1px solid #e74f5b;
    border-radius: 5px;
    font-size: 14px;
    background-color: #ec5763;
    color: #fff;
    padding: 0;
    height: 35px;
    line-height: 35px;
    display: block;
    text-align: center;
  }

  .sp_red_btn:hover {
    background-color: #e84e5a;
  }

  .sp_gray_btn {
    border: 1px solid #c3c3c3;
    border-radius: 5px;
    font-size: 14px;
    background-color: #f3f3f3;
    color: #333;
    padding: 0;
    height: 35px;
    line-height: 35px;
    display: block;
    text-align: center;
  }

  .sp_gray_btn:hover {
    background-color: #efefef;
  }

  .menu_btn {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: none;
    background: 0 0;
    padding: 15px 40px 17px 10px;
    margin: 0;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .sp_blue_btn {
    border: 1px solid #4791dd;
    border-radius: 5px;
    font-size: 14px;
    background-color: #55a0ed;
    color: #fff;
    padding: 0;
    height: 35px;
    line-height: 35px;
    display: block;
    text-align: center;
  }

  .sp_blue_btn:hover {
     background-color: #4690db;
  }



/*
=====================================================================
*
* media query
*
* ===================================================================
*/

/* 320px - 959px */
@media screen and (max-width: 959px) {

  /* ==========================================================================
     basic
  ========================================================================== */
  .col_2_main {
    margin: 0;
  }

  .style_error {
    margin: 24px 2%;
  }

  /* ==========================================================================
     background images
  ========================================================================== */
  .blog_icon_s {
    background-image: url(//static.fc2.com/image/blog_portal/sp/sp_blog_icon@2x.png?01);
    background-image: url(//blog.fc2.com/images/portal/forum/ie/sp_blog_icon@2x.png?01) \9;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    -webkit-background-size: 29px auto;
    background-size: 29px auto;
  }

  /*スプライトの作成*/
  .entry_comm {
    background: url('//blog.fc2.com/images/portal/forum/icon-s01150b0029.png') 0 -85.5px / 25px 268px no-repeat;
    background: url('//blog.fc2.com/images/portal/forum/ie/icon-s01150b0029.png') 0 -85.5px no-repeat \9;
    width: 17px;
    height: 14px;
    display: inline-block;
    margin: 0 4px 0 0;
    vertical-align: middle;
  }

  .topic_icon {
    background: url('//blog.fc2.com/images/portal/forum/icon-s01150b0029.png') 0 -247px / 25px 268px no-repeat;
    background: url('//blog.fc2.com/images/portal/forum/ie/icon-s01150b0029.png') 0 -247px no-repeat \9;
    width: 21px;
    height: 21px;
    display: inline-block;
    margin: 0 4px 0 0;
    vertical-align: middle;
  }

  .comm_icon {
    background: url('//blog.fc2.com/images/portal/forum/icon-s01150b0029.png') 0 -49.5px / 25px 268px no-repeat;
    background: url('//blog.fc2.com/images/portal/forum/ie/icon-s01150b0029.png') 0 -49.5px no-repeat \9;
    width: 24px;
    height: 21px;
    display: inline-block;
    margin: 0 4px 0 0;
    vertical-align: middle;
  }


  /* ==========================================================================
     header
  ========================================================================== */
  #site_header {
    background-color: #fff;
    position: relative;
    width: 100%;
    min-height: 40px;
    color: #333;
    text-align: center;
    border-bottom: 2px solid #ec5763;
  }

  #site_header .logo_fc2 {
    font-size: 1em;
    margin: 0;
    padding: 0;
  }

  #site_header .logo_fc2 a {
    display: block;
    color: #000;
    width: 150px;
    height: 50px;
    margin: 0 auto;
    text-align: center;
  }

  #site_header .logo_fc2 a img {
    margin: 12px 0 0 0;
  }

  #site_header .logo_fc2 a span {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    font-family: "FC2 Sans Ml Bold", "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    margin: 11px 0 0 0;
    vertical-align: top;
    text-transform: uppercase;
    -ms-transform-origin: 0 0;
    -ms-transform: scale(1, 1.02);
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.02em;
  }

  #site_header .logo_fc2_cn a span {
    font-family: "FC2 Sans CN Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  }

  #site_header .logo_fc2_tw a span {
    font-family: "FC2 Sans TW Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  }

  #site_header .logo_fc2_ko a span {
    font-family: "FC2 Sans KO Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  }

  #site_header .logo_fc2_th a span {
    font-family: "FC2 Sans TH Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  }

  #site_header .logo_fc2_cn a span,
  #site_header .logo_fc2_tw a span,
  #site_header .logo_fc2_ko a span {
    font-size: 17px;
    letter-spacing: 0.02em;
    margin: 13px 0 0 0;
  }
  #site_header .logo_fc2_th a span {
    letter-spacing: 0;
    margin: 10px 0 0 0;
  }

  .left_menu_btn {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: none;
    background: 0 0;
    padding: 15px 40px 17px 10px;
    margin: 0;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
  }

  #app_menu_left_trigger {
    z-index: 9999;
    padding: 15px 40px 17px 10px;
  }

  #app_menu_left_trigger .menu_icon {
    width: 20px;
    height: 15px;
    background-position: center -26px;
  }


  /* ==========================================================================
     slide menu
  ========================================================================== */
  /*** basic ***/
  #app_viewport {
    background: #545454;
    overflow: hidden
  }

  #app_viewport a,#app_viewport li {
/*       font-family: Helvetica,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3" */
  }

  #app_viewport .disabled a,#app_viewport .disabled iframe {
      pointer-events: none;
      -webkit-tap-highlight-color: transparent
  }

  #app_menu_left {
      position: absolute;
      display: none;
      width: 260px;
      left: 0;
      top: 0;
      overflow: hidden
  }

  #app_viewport .app_menu {
      width: 260px;
      min-height: 100%;
      font-size: 14px;
      color: #fff
  }

  #app_viewport .app_menu a.active {
      background: #777
  }

  #app_frame {
      position: relative;
      width: 100%;
      background: #F0F0F0;
      min-height: 100%;
      -webkit-box-shadow: -3px 0 5px 0 #222;
      -moz-box-shadow: -3px 0 5px 0 #222;
      -o-box-shadow: -3px 0 5px 0 #222;
      box-shadow: -3px 0 5px 0 #222;
/*
      -webkit-transform: translate(0px,0);
      -moz-transform: translate(0px,0);
      transform: translate(0px,0);
      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
      -moz-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
      -o-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)
*/
  }

  .app_overlay {
    cursor: pointer;
      position: absolute;
      display: none;
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      z-index: 9999;
      background: 0 0;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none
  }

  #wrapper {
      background-color: #fff;
      position: relative;
      text-align: left;
/*       z-index: 2 */
  }

  #left_menu {
      position: relative;
      display: block;
      z-index: 0;
      left: 0
  }

  /*** slide menu ***/
  #app_viewport .app_menu .list_titile {
      font-size: 11px;
      padding: 0 0 0 12px;
      border-top: 1px solid #999;
      border-bottom: 1px solid #4d4d4d;
      background: #666;
      background: -webkit-gradient(linear,left top,left bottom,from(gray),to(#666));
      background: -moz-linear-gradient(top,gray,#666);
      background: -o-linear-gradient(top,gray,#666);
      background: linear-gradient(to bottom,gray 0,#666 100%)
  }

  #app_viewport .app_menu a {
      display: block;
      padding: 12px;
      text-decoration: none;
      color: #fff;
      border-top: 1px solid #666;
      border-bottom: 1px solid #333
  }

  .sidemenu {
      display: none;
      position: absolute;
      top: 0;
      width: 260px;
      font-size: 14px;
      min-height: 100%;
      background: #545454;
      color: #fff
  }

  body>.sidemenu {
      height: auto
  }

  .sidemenu span {
      display: table-cell;
      text-align: left;
      vertical-align: middle
  }

  .sidemenu ul {
      display: block;
      margin: 0;
      padding: 0
  }

  .sidemenu ul li:first-child {
      border-top: none
  }

  .sidemenu .list_titile {
      font-size: 11px;
      padding: 0 0 0 12px;
      border-top: 1px solid #999;
      border-bottom: 1px solid #4d4d4d;
      background: #666;
      background: -webkit-gradient(linear,left top,left bottom,from(gray),to(#666));
      background: -moz-linear-gradient(top,gray,#666);
      background: -o-linear-gradient(top,gray,#666);
      background: linear-gradient(to bottom,gray 0,#666 100%)
  }

  .sidemenu .list_titile h3 {
      margin: 0;
      padding: 0;
      font-size: 12px
  }

  .sidemenu ul li a {
      text-decoration: none;
      color: #fff;
      border-top: 1px solid #666;
      border-bottom: 1px solid #333;
      padding: 12px 0;
      display: block
  }

  .sidemenu ul li a:hover {
      background-color: #3F3F3F;
      border-bottom: 1px solid #3F3F3F;
      border-top: 1px solid #3F3F3F
  }

  .sidemenu ul li a span {
      padding: 0 12px
  }


  /* ==========================================================================
       login menu
  ========================================================================== */
  #menu_login_tb {
    background-color: #f6f6f6;
    padding: 0;
  }

  .login_menu {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    padding: 10px 10px 15px;
    padding: 10px 10px 15px \9;
    box-sizing: border-box;
    overflow: hidden;
  }

  .login_menu .login_menu_btn {
    position: relative;
    list-style: none;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    ーms−flex: 1;
    flex: 1;
    width: 48% \9;
    font-size: 14px;
    float: left \9;
    margin: 0 10px 0 0;
    margin: 0 1% 0 \9;
    text-align: center;
  }

  .login_menu .primary_btn {
    margin: 0;
  }

  .login_menu .default_btn {
    display: block;
  }


  /* ==========================================================================
     footer navigation
  ========================================================================== */
  .contents_area {
    margin-top: 36px;
  }

  .contents_title_sup {
    font-size: 16px;
  }

  .relation_tag_list {
    margin: 0;
    overflow: hidden;
    padding: 0;
  }

  .relation_tag_item {
    float: left;
    margin: 0;
    font-size: 14px;
    position: relative;
    font-weight: 700;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
  }

  .relation_tag_item a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    border: none;
    border-radius: 0;
    color: #4d4d4d;
    width: 100%;
    padding: 14px 19px 14px 10px;
    display: block;
  }

  .relation_tag_item {
    border-bottom: 1px solid #e7e7e7;
    border-right: 1px solid #e7e7e7 \9;
  }

  .relation_tag_item:nth-child(odd) {
    border-right: 1px solid #e7e7e7;
  }

  .list_arr_icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    left: auto;
    margin: auto;
    display: block;
    width: 6px;
    height: 10px;
    height: 12px \9;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAVCAYAAACdbmSKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANRJREFUeNqMk4ERwiAMRYEJHMERdAKvGzgCbKCTdAS6CSPIBjqCI/jR6MU0ieaOowVefkJ/Q2DRWjthbMKPSAyomObXow9GBmS23jEmxF1Voqw7sT7eq1keZZsoO48jVaCXRyVuMV0wZD8LEhf1IrBxI0XZR5aKUUrjwOineYpJQtjojmJWlf5QLNH7iJS5mo4w4qCs9eSoSJcE6lMvzwGGtdZKAGYPWN2e0fgXIG2UDZPuOfC5PQcoEngqkVGvBrBYv8YwahG2MQHZ09s2Zw8Y8RBgAAtuZ+qooV8QAAAAAElFTkSuQmCC) 0 0/6px 10px no-repeat;
    background: url(//blog.fc2.com/images/portal/forum/ie/tri_sp.png) 0 0 no-repeat \9;
  }


  /* ==========================================================================
      footer
  ========================================================================== */
  #footer_container {
	  display: none;
  }




  #site_footer {
    margin-top: 32px;
    clear: both;
    padding-bottom: 60px;
    background-color: #f5f8fa;
  }

  .footer_nav {
    overflow: hidden;
    margin: 0;
    padding: 0 10px 16px;
    background-color: #fff;
  }

  .footer_nav p {
    margin: 0;
  }

  .twitter_link {
    position: relative;
    background-color: #5ea9dd;
    width: 35px;
    height: 35px;
    float: left;
  }

  .twitter_link .twitter_white_icon {
    width: 27px;
    height: 26px;
    background-position: center -245px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .goto_top {
    float: right;
    text-align: center;
  }

  .goto_top a {
    display: block;
    border-radius: 2px;
    color: #666;
    background-color: #eaeaea;
    border: 1px solid #e7e7e7;
    padding: 0 21px;
    height: 33px;
    line-height: 33px;
  }

  .goto_top .top_arr_icon {
    margin-right: 4px;
  }

  .goto_top .btn_text, .goto_top .top_arr_icon {
    width: 12px;
    height: 10px;
    background-position: center -296px;
    vertical-align: middle;
  }

  .footer_link_area {
    clear: both;
    background-color: #f5f8fa;
    overflow: hidden;
  }

  .footer_about_link {
    text-align: center;
    margin: 16px 0;
    padding: 0;
  }

  .footer_about_item {
    display: inline-block;
    border-right: 1px solid #4d4d4d;
  }

  .footer_about_item a {
    color: #4d4d4d;
    display: block;
    padding: 0 10px;
    font-size: 12px;
  }

  .footer_about_item:last-child {
    border: none;
  }

  .footer_info_link {
    margin: 16px 10px;
    padding: 0;
  }

  .footer_info_item {
    position: relative;
    background-color: #fff;
    border: 1px solid #e7e7e7;
  }

  .footer_info_item a {
    color: #656565;
    display: block;
    padding: 10px;
  }

  .footer_info_item + .footer_info_item {
    border-top: none;
  }

  .footer_info_item:first-child {
    border-radius: 3px 3px 0 0;
  }

  .footer_info_item:last-child {
    border-radius: 0 0 3px 3px;
  }

  .footer_service_btn_area {
    text-align: center;
  }

  .footer_service_btn {
    display: inline-block;
  }

  .footer_service_btn a {
    width: 100px;
    padding: 8px 15px;
    display: block;
    vertical-align: middle;
    color: #666;
    background-color: #eaeaea;
    border: 1px solid #e7e7e7;
  }

  .footer_service_btn .blog_icon {
    vertical-align: middle;
    margin-right: 4px;
  }

  .footer_service_btn .btn_text {
    vertical-align: middle;
  }

  .copyright {
    text-align: center;
    margin: 0;
    padding: 10px 10px 16px;
    background-color: #f5f8fa;
  }

}


/* 320px - 767px */
@media screen and (max-width: 767px) {

  /* ==========================================================================
     base/reset
  ========================================================================== */
  /*** reset ***/
  #h-service_link,
  #h-main,
  #h-gnav,
  .menu_login,
  #menu_login_tb,
  #col_nav,
  .topic_path_list,
  .forum_top_about,
  .topic_table,
  .topic_table_area,
  .forum_contents_more,
  .forum_search_area,
  .topic_detail_post,
  .main_contents_title,
  .forum_nav_list,/*comunity _top*/
  .forum_box02,
  #main_title_pc,
  .view_total,
  .more_read,
  .comm_btn_pc,
  #f-wrap {
    display: none;
  }

   /*** basic ***/
  html {
    font-size: 14px;
  }

  body {
    width: 100%;
    min-width: 100%;
  }

  #contents_body {
    padding: 0px;
    margin: 0 0 36px 0;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
  }

  .style_error {
    margin: 40px 2%;
    font-size: 16px;
  }


  /* ==========================================================================
     login menu
  ========================================================================== */
  #menu_login {
    background-color: #f6f6f6;
    padding: 0;
  }

  #menu_login > p {
    font-size: 12px;
    font-weight: bold;
    padding: 12px 0 0;
    margin: 0;
    text-align: center;
  }

  /* ==========================================================================
     title
  ========================================================================== */
  .main_title {
    background: url(//blog.fc2.com/images/portal/forum/main_icon.png) no-repeat center 20px;
    background: url(//blog.fc2.com/images/portal/forum/ie/main_icon.png) no-repeat center 20px \9;
    background-size: 70px 72px;
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    margin: 0 0 8px;
    padding: 100px 0 0;
    text-align: center;
  }

  .topic_article_title,
  .contents_title,
  .main_contents_title_sp,
  .topic_table_title {
    font-size: 21px;
    border-bottom: 1px solid #e7e7e7;
    font-weight: 400;
    margin: 0;
    padding: 0 0 4px 10px;
  }

  .page_title {
    background-color: #f6f6f6;
    color: #4d4d4d;
    font-size: 16px;
    margin: 0;
    padding: 14px 12px;
    font-weight: 700;
    line-height: 100%;
  }

  /* ==========================================================================
     article
  ========================================================================== */
  .topic_article_area {
    margin-top: 40px;
  }

  .topic_list {
    border: none;
    margin: 0px;
    padding: 0px;
  }

  .topic_list {
    border: none;
    margin: 0px;
    padding: 0px;
  }

  .topic_list .topic_article {
    border-bottom: 1px solid #e7e7e7;
    border-top: none;
    padding: 16px 10px;
    position: relative;
  }

  .topic_list .topic_article:hover {
    background-color: #f2f2f2;
  }

  .topic_list .topic_article a {
    display: block;
  }

  .topic_list .add_icon {
    padding: 16px 56px 16px 10px;
  }

  .topic_list .topic_entry_title {
    color: #4d4d4d;
    font-size: 16px;
    padding: 0;
    margin: 0 0 10px 0;
    line-height: 100%;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    font-weight: 700;
    line-height: 1.4;
  }

  .topic_list .topic_entry_desc {
    color: #4d4d4d;
  }

  .topic_list .topic_entry_detail {
    color: #959595;
    margin: 0;
    line-height: 1.6;
  }

  .topic_list .add_icon .blog_icon_s {
    width: 25px;
    height: 40px;
    background: url(//blog.fc2.com/images/portal/forum/icon-s01150b0029.png) no-repeat top left;
    background: url(//blog.fc2.com/images/portal/forum/ie/icon-s01150b0029.png) no-repeat top left \9;
    background-size: 25px 268px;
    position: absolute;
    top: 16px;
    right: 16px;
    margin-right: 0;
  }

  .topic_list .add_icon .forum_pick_icon {
    background-position: 0 -115px;
  }

  .topic_list .add_icon .forum_pick_o_icon {
    background-position: 0 -167px;
  }

  .topic_list .add_icon .forum_close_icon {
    background-position: 0 0;
  }

  .forum_contents_more_s {
    margin: 0;
  }

  .forum_contents_more_s a {
    display: block;
    font-weight: 700;
    text-align: center;
    padding: 15px 10px;
    color: #666;
    background-color: #fcfcfc;
    border-bottom: 1px solid #e7e7e7;
  }

  .forum_contents_more_s a:hover {
    text-decoration: none;
    background-color: #f2f2f2;
  }


  /* ==========================================================================
     search area
  ========================================================================== */
  .forum_search_area_sp {
    background-color: #f6f6f6;
    margin: 24px 0 0;
    padding: 16px 10px;
  }

  .forum_search_area_sp form {
    text-align: center;
  }

  .forum_search_area_sp .forum_search_text {
    padding: 8px;
    margin-right: 4px;
    width: 65%;
  }

  .forum_search_area_sp .forum_search_select {
    display: inline-block;
    margin: 8px auto 0;
    text-align: center;
    width: 100%;
  }

  .forum_search_area_sp .forum_search_select select {
     margin-bottom: 4px;
  }

  .forum_search_area_sp .sp_gray_btn {
    height: auto;
    line-height: 100%;
    display: inline-block;
    padding: 10px 20px;
  }



  /* ==========================================================================
     pager style
  ========================================================================== */
  .forum_box p {
    margin: 0;
  }

  .forum_box .pager {
    margin: 16px 0 0;
  }

  .forum_box .pager a, .forum_box .pager span {
    color: #4d4d4d;
    min-width: 16px;
    display: inline-block;
    line-height: 1em;
    padding: 11px 9px 10px;
    height: 13px;
    border: 1px solid #e7e7e7;
    margin-right: 2px;
  }

  .forum_box .pager .disabled .blog_icon {
    filter: alpha(opacity=40);
    -moz-opacity: .4;
    opacity: 0.5;
  }

  .pager a:hover, .pager span {
    background-color: #e7e7e7;
  }


  /* ==========================================================================
     TOP Page (main image)
  ========================================================================== */
  .main_img_area {
    background: url(//blog.fc2.com/images/portal/forum/main_bg.png) no-repeat;
    background-size: cover;
    height: 215px;
  }
  .main_img_area .forum_description {
    color: #fff;
    font-size: 12px;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    text-align: center;
  }


  /* ==========================================================================
     community page
  ========================================================================== */
  .forum_community_about {
    border: 3px solid #e7e7e7;
    margin: 12px;
    padding: 12px;
  }

  .forum_community_about .comm_btn {
    margin-top: 12px;
  }

  .comm_btn {
    width: 100%;
  }

  .comm_btn input {
    width: 100%;
  }

  .forum_community_img {
    display: table-cell;
    float: none;
    margin: 0 12px 0 0;
    vertical-align: top;
    width: 72px;
  }

  .forum_community_img img {
    padding: 0 12px 0 0;
    width: 72px;
  }

  .forum_community_text {
    display: table-cell;
    word-break: break-all;
  }

  .forum_community_text p {
    margin: 0px;
    line-height: 1.2;
  }


  /* ==========================================================================
     topic detail
  ========================================================================== */
  .topic_detail_title {
    margin-bottom: 32px;
  }

  .topic_detail {
    border: none;
    padding: 32px 15px 0;
  }

  .topic_detail .topic_detail_text {
    font-size: 14px;
    line-height: 1.6;
  }

  .topic_detail_post_sp {
    color: #959595;
    margin: 32px 0 0 0;
    text-align: right;
    line-height: 1.8;
  }

  .forum_search {
    margin: 0;
    padding: 0;
  }

  .forum_search li {
    border-bottom: 1px solid #e7e7e7;
    margin: 0;
    padding: 24px 15px;
  }

  .main_contents_title_sp {
    padding: 0 10px 10px 10px;
  }

  .topic_detail_comment_title {
    padding-top: 40px;
  }

  .main_contents_title_sp span {
    float: left;
  }

  .main_contents_title_sup_right_sp {
    color: #959595;
    float: right;
    font-size: 14px;
    margin: 4px 2% 0 0;
  }

}

/* 768px - 959px */
@media screen and (min-width: 768px) and (max-width: 959px) {

  /* ==========================================================================
     basic
  ========================================================================== */
  /* reset */
  #h-service_link,
  #h-main,
  #h-gnav,
  .menu_login,
  #col_nav,
  .main_img_area,
  .topic_list,
  .forum_search_area_sp,
  .topic_article_area,
  .topic_article_title,
  .topic_detail_post_sp,
  .main_contents_title_sp,
  .forum_nav_list,/*comunity _top*/
  #menu_login,
  .comm_btn,
  .more_read,

  #f-wrap {
    display: none;
  }

  /* basic */
  body {
    min-width: 100%;
    width: 100%;
  }

  #contents_body {
    padding: 20px 0 0;
    min-width: 100%;
  }


    /* ==========================================================================
     background images
  ========================================================================== */
  .blog_icon {
    background-image: url(//static.fc2.com/image/blog_portal/pc/blog_icon.png);
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
  }


    /* ==========================================================================
     header
  ========================================================================== */
  .menu_btn {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: none;
    background: 0 0;
    padding: 15px 40px 17px 10px;
    margin: 0;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
  }


  /* ==========================================================================
     login menu
  ========================================================================== */
  #menu_login_tb {
    background-color: #f6f6f6;
    padding: 0;
  }


    /* ==========================================================================
     footer
  ========================================================================== */
  .footer_info_link {
    margin: 16px 2%;
  }

  /* ==========================================================================
     contents
  ========================================================================== */
  /* basic */
  .topic_path_list {
    padding: 0 0 8px 2%;
  }

  .page_title {
    margin: 20px 2% 30px;
  }

  .forum_search_area {
    margin: 0 2% 24px;
  }

  /* article */
  .topic_table_title {
    margin: 0 2% 8px;
  }

  .topic_table .topic_title {
    width: 40% !important;
  }

  .topic_table th {
    padding: 13px 2%;
  }

  .topic_table td {
    padding: 2px 18px;
  }

  .topic_table .post_date,
  .topic_table .user_name {
     width: auto;
  }

  .forum_contents_more {
    margin: 8px 1% 0 16px;
  }

  /* footer navigation */
  .contents_title {
    font-size: 21px;
    border-bottom: 1px solid #e7e7e7;
    font-weight: 400;
    margin: 0;
    padding: 0 0 4px 2%;
  }

  .relation_tag_item a {
    padding: 14px 19px 14px 4%;
  }

  /* top page */
  .forum_top_about {
    margin: 0 2% 10px;
  }
  .topic_search_list .main_entry_item {
    padding: 16px 2%;
    width: 96%;
  }

  /* comunity detail page */
  .forum_community_about {
    margin: 0 2% 24px;
  }

  .forum_community_about .comm_btn_pc {
    margin-top: 12px;
  }

  /* topic detail page */
  .topic_detail {
    padding: 24px;
    margin: 0 2% 40px;
  }

  .main_contents_title {
    margin: 0;
    padding: 0 2% 8px;
    border-bottom: 1px solid #e7e7e7;
  }

  .forum_search {
    margin: 0;
  }

  .forum_search li {
    border-bottom: 1px dotted #dedede;
    padding: 18px 2%;
    margin: 0;
  }

  .topic_detail_post {
    color: #959595;
    margin: 32px 0 0 0;
  }

}


  /* UNDER 450px */
@media screen and (max-width: 450px) {

  .relation_tag_item {
    float: none;
    width: 100%;
    border-right: none;
  }

}


/* OVER 960px */
@media screen and (min-width: 960px) {
    /* reset */
    #site_header,
    #site_footer,
    #app_menu_left,
    .main_img_area,
    .topic_list,
    .forum_search_area_sp,
    .topic_article_area,
    .contents_area,
    .topic_detail_post_sp,
    .main_contents_title_sp,
    .comm_btn,
    #menu_login,
    #menu_login_tb {
      display: none;
    }

}


