/* ----------------------------------------------------------------------
 layout
---------------------------------------------------------------------- */
#header_top, #header {
  position:relative; height:40px; width:100%; margin:0 0 30px 0; border-bottom:1px solid #ccc;
  background:#f2f2f2;
  box-shadow:0px 0px 0px 1px #fff inset, 0 0 5px rgba(0, 0, 0, 0.2);
  background: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background: -ms-linear-gradient(top, #ffffff, #f2f2f2);
  background: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background: linear-gradient(to bottom, #ffffff, #f2f2f2);
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#ffffff', EndColorStr='#f2f2f2');
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box;
}
#header_top { display:none; }
.classic #header_top { display:block; }
#contents { }
#main_contents { }
#main_col { }
#side_col { padding:30px 20px 0 20px; border-top:1px solid #ccc; }

body { position:relative; overflow:hidden; width:100%; min-width:0; padding:0; }

#container {
  position:relative; right:0; top:0px; z-index:2; width:100%; background:#fff;
  -webkit-transition:right 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -moz-transition:right 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -o-transition:right 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition:right 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden;
}
.open #container { right:90%; }


/* admin bar setting */
#wpadminbar { position:fixed; top:0px; left:0px; }
.admin-bar { padding-top:46px; }




/* ----------------------------------------------------------------------
 header
---------------------------------------------------------------------- */
/* logo */
#logo_text { position:relative; top:0px; left:0px; height:40px; }
#logo_text #logo { font-size:22px; line-height:40px; margin:0 0 0 15px; padding:0; font-weight:normal; float:left; }
#logo_text.center_align { width:100%; }
#logo_text.center_align #logo { float:none; display:block; text-align:center; margin:0; }
#logo a { color:#333; text-decoration:none; display:block; }
#logo a:hover { }
#logo_text #desc { margin:0 0 0 20px; padding:0; font-weight:normal; line-height:100%; color:#888; font-size:10px; line-height:40px; float:left; }
#logo_text.center_align #desc { display:none; }
@media screen and (max-width:480px) {
  #logo_text #desc { display:none; }
}


/* logo image */
#logo_image { height:40px; position:relative; width:100%; }
#logo_image img { display:none; }
#logo_image.no_mobile_image a:before { content:attr(title); font-size:22px; line-height:40px; margin:0 0 0 10px; font-weight:normal; float:left; }
#logo_image.has_mobile_image .pc_image { display:none; }
#logo_image.has_mobile_image .mobile_image { display:block; position:absolute; top:0; bottom:0; left:15px; margin:auto; }
#logo_image.has_mobile_image.center_align_image .mobile_image { display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
#logo_image.no_mobile_image.center_align_text { width:100%; }
#logo_image.no_mobile_image.center_align_text a:before { float:none; display:block; text-align:center; margin:0; }


/* hide header and global menu */
#header_menu { display:none; }
#global_menu { display:none; }
#search_link_area { display:none; }


/* mobile menu */
#mobile_menu { display:block; position:absolute; right:0px; top:0px; width:90%; height:100%; background:#98a0a3; padding:0; z-index:1; overflow:auto; }
#mobile_menu:before { content:''; display:block; width:10px; height:100%; box-shadow:10px 0 10px 0 rgba(0,0,0,0.5); position:absolute; z-index:9999; left:-10px; }

#mobile_menu ul { display:block; margin:0; }
#mobile_menu ul ul { display:block; position:relative; top:0px; left:0px; margin:0; padding:0; }
#mobile_menu ul ul ul { left:0px; top:0; margin:0; }
#mobile_menu ul li { float:none; margin:0; padding:0; line-height:160%; }

#mobile_menu > ul { border-bottom:1px solid #bbb; border-top:1px solid #6c7375; }

#mobile_menu ul li a, #mobile_menu ul ul li a
  { font-size:12px; display:block; width:auto; height:auto; line-height:180%; padding:13px 2em 13px; margin:0; background:#98a0a3; color:#eee; border-left:none; border-top:1px solid #bbb; border-bottom:1px solid #6c7375; text-align:left; text-decoration:none; }

#mobile_menu > ul > li > a:after { display:none; }

#mobile_menu ul li a:hover { background:#a9b0b2; color:#fff; }
#mobile_menu ul li li a { padding-left:3em; }
#mobile_menu ul li li li a { padding-left:4em; }
#mobile_menu ul li li li li a { padding-left:5em; }
#mobile_menu ul ul li a:hover { }


/* search form */
#search_area_mobile { display:block; background:#98a0a3; width:100%; height:40px; }
#search_area_mobile .search_input input { font-size:12px; background:#98a0a3; color:#eee; width:75%; height:40px; padding:0 1.7em; margin:0; border:none; border-right:1px solid #bbb; box-sizing:border-box; }
#search_area_mobile .search_input input:hover, #search_area_mobile .search_input input:focus { background:#676e70; color:#eee; }
#search_area_mobile .search_button input {
  text-indent:200%; white-space:nowrap; overflow:hidden; display:block;
  position:absolute; top:0px; right:0px; height:40px; width:25%; line-height:40px; border:none; border-left:1px solid #6c7375;
  background:#98a0a3 url(img/search_on.png) no-repeat center; -moz-background-size:15px; -webkit-background-size:15px; -o-background-size:15px; -ms-background-size:15px; background-size:15px;
}
#search_area_mobile .search_button input:hover { cursor:pointer; background-color:#a9b0b2; }


/* menu button */
.menu_button { display:block; position:absolute; right:0; top:0; z-index:10; margin:0; width:45px; height:100%; text-decoration:none; color:#bbb; }
.menu_button .title { display:none; }
.menu_button .icon:before { font-family:'icomoon-mono-lab'; content:"\e618"; font-size:25px; top:9px; right:-11px; position:relative; font-style:normal; }
.menu_button:hover { color:#fff; }
.open .menu_button { color:#bbb; }
.open .menu_button:hover { color:#fff; }


/* social link button */
#search_link_area { }


/* breadcrumb */
#bread_crumb { background:#fff; border-bottom:1px dotted #ccc; margin:0 0 30px 0; width:100%; min-width:100%; }
#bread_crumb ol { margin:-30px 20px 0; position:relative; padding:0; line-height:100%; width:100%; overflow:hidden; }
.classic #bread_crumb { background:#fff; margin:0 0 30px 0; width:auto; -moz-border-radius:0px; -khtml-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; }
.classic #bread_crumb ol { margin:-30px 20px 0; position:relative; padding:0; line-height:0; }


/* header adsense */
.header_banner_area { width:auto; margin:0 20px 25px; position:relative; }
.header_banner { position:relative; top:auto; right:auto; }
.header_banner img { display:block; margin:0 auto; max-width:100%; height:auto; }
.archive .header_banner, .search .header_banner, .single-post.has_bread .header_banner { top:auto; }




/* ----------------------------------------------------------------------
 post list
---------------------------------------------------------------------- */
#post_list .article:last-child, #post_list .article:only-child { margin:0 0 25px 0; }

/* post tilte */
#post_list .title { margin:0 20px 25px; }

/* post meta */
#post_list .post_meta.top { margin-bottom:25px; }


/* post thumbnail */
#post_list .post_list_thumbnail { float:none; margin:0 0 20px 0; line-height:0; text-align:center; }
#post_list .post_list_thumbnail img { width:100%; height:auto; }

/* post content */
#post_list .post_content { margin:0 20px; }

/* link */
@media screen and (max-width:480px) {
  .post_content a.more-link { margin:0 25%; text-align:center; display:block; border-radius:50px; }
}

/* page navi */
.page_navi { margin:0 20px 0; padding:0 0 25px; }
.page_navi p.back { margin:0 0 -20px 0; }
.page_navi span.dots { border:1px solid #fff; }

/* archive headline */
#archive_headline { background:#fff; margin:-30px 0 30px; border:1px dotted #ccc; }
#archive_headline h3 { width:auto; margin:0 20px; padding:0; }
#archive_headline h3:after { display:none; }

.classic #archive_headline { width:auto; margin:-30px 0 30px; background:#fff; -moz-border-radius:0px; -khtml-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; }
.classic #archive_headline h3 { padding:0; }
.classic #archive_headline h3:after { display:none; }





/* ----------------------------------------------------------------------
 article
---------------------------------------------------------------------- */

/* post content */
#article .post_content { margin:0 20px; }

/* post tilte */
#article #post_title { margin:0 20px 15px; }
#article #page_title { margin:0 20px 25px; }

/* post meta top */
.post_meta.top { margin:0 20px 35px; }



/* author profile */
#author_avatar { width:10%; margin:0 5% 0 0; }
#author_avatar img { width:100%; height:auto; }
#author_info { width:85%; }

@media screen and (max-width:480px) {
  #author_profile { padding:10px; }
  #author_avatar { float:none; margin:0 auto; }
  #author_avatar img { width:70px; height:auto; margin:0 auto 10px; display:block; }
  #author_info { float:none; width:100%; font-size:12px; }
  #author_name { margin:0 0 8px 0; font-size:16px; text-align:center; }
}


/* related post*/
#related_post .headline { border-bottom:1px solid #ccc; margin:0 0 15px 0; padding:0 20px 8px; line-height:100%; }
#related_post ol { margin:0 20px; }

@media screen and (max-width:480px) {
  #related_post .headline { padding:0 20px 8px; }
  #related_post ol { margin:0 20px; }
  #related_post li { display:block; width:100%; margin-right:0; }
  #related_post li:nth-child(even) { margin:0px; }
  #related_post li:last-child { padding-bottom:0; }
}

/* next prev post link */
#next_prev_post { margin:0 20px; }
@media screen and (max-width:480px) {
  #next_prev_post { display:block; margin:0 20px;}
  #next_prev_post a { width:100%; padding:15px 20px; display:block; }
  #next_prev_post a.prev_post { -moz-border-radius:4px 4px 0 0; -khtml-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; margin:0 0 -1px 0; }
  #next_prev_post a.next_post { -moz-border-radius:0 0 4px 4px; -khtml-border-radius:0 0 4px 4px; -webkit-border-radius:0 0 4px 4px; border-radius:0 0 4px 4px; }
  #next_prev_post a:only-child { -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
}






/* ----------------------------------------------------------------------
 side content
---------------------------------------------------------------------- */
.side_widget { margin:0 0 40px 0; padding:0; float:right; color:#444; border:none; width:300px; }
.side_widget a { color:#444; }
.side_widget:nth-child(odd) { float:left; clear:both; }
.side_widget:last-child { border:none; margin:0 0 40px 0; padding:0; }

@media screen and (max-width:665px) {
 .side_widget { width:auto; padding:0 0 30px 0; margin:0 0 30px 0; border-bottom:1px dotted #aaa; float:none; }
 .side_widget:last-child { border:none; margin:0 0 30px 0; padding:0; }
 .side_widget:nth-child(odd) { float:none; margin-right:0; }
}




/* ----------------------------------------------------------------------
 footer
---------------------------------------------------------------------- */
#footer { background:url(img/footer_background.gif) repeat-x left top; width:100%; min-width:0; }

/* footer widget */
#footer_widget_area { padding:0; margin:0; }
#footer_widget { width:auto; margin:0 20px 0; padding:40px 0 0; position:relative; overflow:hidden; }

.footer_widget { margin:0 0 40px 0; padding:0; float:right; color:#444; border:none; width:300px; }
.footer_widget a { color:#444; }
.footer_widget:nth-child(odd) { float:left; clear:both; }


@media screen and (max-width:665px) {
 .footer_widget { width:auto; padding:0; margin:0 0 40px 0; float:none; }
 .footer_widget:last-child { border:none; margin:0 0 30px 0; padding:0; }
 .footer_widget:nth-child(odd) { float:none; margin-right:0; }
}

/* footer menu */
#footer_nav_area { width:100%; margin:0 auto; padding:0; }
#footer_menu { text-align:left; }
#footer_menu ul { margin:0; font-size:11px; }
#footer_menu li { display:block; }
#footer_menu li a, #footer_menu li:last-child a { display:block; border-right:none; border-bottom:1px dotted #ccc; padding:20px 20px 20px 30px; margin:0; text-decoration:none;  background:url(img/arrow1.gif) no-repeat 20px 24px; }
#footer_menu li:last-child a { border:none; }
#footer_menu li a:hover { color:#fff; }


/* copyright */
.theme_author a { }
#copyright { padding-top:35px; border-top:1px solid #ddd; }
@media screen and (max-width:480px) {
  .theme_author { display:none; }
}




/* ----------------------------------------------------------------------
 comment
---------------------------------------------------------------------- */
#comments { padding:0 15px; }
.page #comments { margin-bottom:50px; }
#comment_header { margin:0 -15px 30px; }
#comment_header .headline { margin:0 0 0 15px; }
#comment_header #comment_tab { right:15px; }
#comment_header #comment_tab li a { padding:10px 30px 12px; }
#comments .post_content { padding:0; margin:0; }
.comment_meta a { padding:3px 15px; }
.bad_comment_message .open { border:1px solid #ccc; font-size:11px; padding:0 15px; margin:10px 0; }


@media screen and (max-width:480px) {
  #comment_header { border-bottom:none; margin:0 0px; position:relative; height:auto; }
  #comment_header .headline { position:relative; left:0px; bottom:0; margin:35px -15px 20px; padding:0 15px 8px; display:block; border-bottom:1px solid #ccc; }
  #comment_header #comment_tab { margin:0 0 30px 0; padding:0; position:relative; right:0px; bottom:0px; }
  #comment_header #comment_tab li { width:50%; font-size:10px; }
  #comment_header #comment_tab li a { padding:15px 0px 12px; text-align:center; }
  .commentlist .children { margin-left:0; }
  .commentlist .avatar { width:35px; height:35px; }
  #has_avatar .main_comment { margin:0 0 0 45px; }
  .comment_name_date span.comment-date { display:block; margin:7px 0 0 0; }
  .commentlist .child_menu_button { margin-left:0; }
}



/* ----------------------------------------------------------------------
 share button
---------------------------------------------------------------------- */
.share_button_top { margin:0; }
.share_button_bottom { margin:0 -5px 20px 0px; }
.share_button_bottom li { padding:0; float:left; margin:0 5px 15px 0; width:20%; width:-webkit-calc(20% - 5px); width:-moz-calc(20% - 5px); width:calc(20% - 5px); }
.arrow-box { width:100%; }
a.balloon-btn-link { width:100%; }
.share_button_top li { padding:0; float:left; margin:0 5px 5px 0; width:20%; width:-webkit-calc(20% - 5px); width:-moz-calc(20% - 5px); width:calc(20% - 5px); }
.share_button_top .arrow-box { min-width:0; width:-webkit-calc(100% - 30px); width:-moz-calc(100% - 30px); width:calc(100% - 30px); overflow:hidden; }
@media screen and (max-width:480px) {
  .share_button_bottom li { width:25%; width:-webkit-calc(25% - 5px); width:-moz-calc(25% - 5px); width:calc(25% - 5px); }  
  .share_button_top li { width:33.33333%; width:-webkit-calc(100% / 3 - 5px); width:-moz-calc(100% / 3 - 5px); width:calc(100% / 3 - 5px); }
}