/* ----------------------------------------------------------------------
 layout
---------------------------------------------------------------------- */
#container {
  position:relative; right:0; top:0px; z-index:2; width:100%;
  -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%; }
#main_col { }
#side_col { background:#3b464a; margin:0 -10px; }
#content { }
#side_content { padding:30px 15px; }
@media screen and (max-width:480px) {
  #side_content { padding:30px 20px; }
}

#header { width:100%; height:47px; position:relative; background:#3b464a; box-shadow:0 1px 3px 1px rgba(0,0,0,0.2); }

#main_content { width:100%; margin:0; padding:30px 10px 0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }

body { position:relative; overflow:hidden; width:100%; }



/* page layout for no sidebar */
.page-template-page-noside-php #side_col { display:none; }


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



/* ----------------------------------------------------------------------
 header
---------------------------------------------------------------------- */
/* logo */
#logo a { color:#eee; text-decoration:none; display:block; }
#logo a:hover { }

#logo_text #desc { display:none; }
#logo_text { position:absolute; left:0; top:0; height:47px; width:-webkit-calc(100% - 51px); width:calc(100% - 51px); width:calc(100% - 51px); overflow:hiidden; }
#logo_text #logo { font-size:22px; line-height:47px; margin:0 0 0 10px; 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_image img { display:none; }
#logo_image.no_mobile_image a:before { content:attr(title); font-size:22px; line-height:47px; margin:0 0 0 10px; padding:0; 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 .mobile_image { display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
#logo_image.no_mobile_image.center_align a:before { float:none; display:block; text-align:center; margin:0; }

/* menu button */
#menu_button { display:block; position:absolute; right:0; top:0; margin:0; width:50px; height:100%; text-decoration:none; color:#ccc;  background:#3b464a; }
#menu_button .title { display:none; }
#menu_button .icon:before { font-family:'icomoon-mono-lab'; content:"\e618"; font-size:21px; top:14px; left:15px; position:relative; font-style:normal; }
#menu_button:hover { background:#000; color:#fff; }
.open #menu_button { color:#555; }


/* global menu */
#header .global_menu { display:none; }

#mobile_menu { display:block; position:absolute; right:0px; top:0px; width:90%; height:100%; background:#2a3134; 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; }

.global_menu { display:block; margin:0; }
.global_menu { border-bottom:1px solid #444; border-top:1px solid #111; }

.global_menu li { margin:0; line-height:160%; }
.global_menu li a { font-size:12px; color:#9da2a5; display:block; border-top:1px solid #444; border-bottom:1px solid #111; padding:12px 20px; text-decoration:none; }
.global_menu li a:hover { background:#171b1d; color:#dbe1e5; }
.global_menu li li a { padding-left:3em; }
.global_menu li li li a { padding-left:4em; }
.global_menu li li li li a { padding-left:5em; }

.global_menu li.current-menu-item > a { background:url(img/stripe1.png) left top; position:relative; color:#fff; }
.global_menu > ul > li.current-menu-item > a:after { display:none; }


/* search form */
#search_area_mobile { display:block; background:#2a3134; width:100%; height:47px; margin:0; -webkit-border-radius:0; -khtml-border-radius:0; -moz-border-radius:0; border-radius:0; }
#search_area_mobile .search_input input { font-size:12px; background:#2a3134; color:#9da2a5; width:75%; height:47px; padding:0 1.7em; margin:0; border:none; border-right:1px solid #444; box-sizing:border-box; }
#search_area_mobile .search_input input:hover, #search_area_mobile .search_input input:focus { background:#171b1d; color:#fff; }
#search_area_mobile .search_button input {
  text-indent:200%; white-space:nowrap; overflow:hidden; display:block;
  position:absolute; top:0px; right:0px; height:47px; width:25%; line-height:47px; border:none; border-left:1px solid #111;
  -webkit-border-radius:0; -khtml-border-radius:0; -moz-border-radius:0; box-shadow:none; border-radius:0; box-sizing:border-box;
  background:#2a3134 url(img/search.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:#171b1d; }


/* breadcrumb */
#bread_crumb { margin:-22px 0 6px 0; left:0px; bottom:0; overflow:none; height:auto; width:auto; }
#bread_crumb ol { margin:0; position:relative; padding:0 10px; }
#bread_crumb ol li { display:inline; margin:0 0 10px 0; padding:0; font-size:10px; color:#666; line-height:0; }
#bread_crumb ol li a, #bread_crumb ol li span.last { background:none; margin:0 20px 0 0; height:20px; line-height:180%; color:#666; text-decoration:none; position:relative; padding:0; }
#bread_crumb ol li a:hover { color:#000; }
#bread_crumb ol li a:after { font-family:'icomoon-mono-lab'; color:#888; font-size:6px; display:inline-block; position:absolute; content:"\e612"; top:-1px; right:-15px; background:none; width:auto; height:auto; transform:none; }
#bread_crumb ol li a:before { display:none; }

.page-template-page-noside-php #bread_crumb { left:0px; width:auto; }




/* ----------------------------------------------------------------------
 post list
---------------------------------------------------------------------- */
#post_list { background:#fff; -moz-border-radius:7px; -khtml-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; }
#post_list .article { width:100%; margin:0; display:flex; display: -webkit-flex; flex-direction:row-reverse; }
#post_list .post_right {
  flex:0 0 auto; -webkit-flex:0 0 auto; min-width:0; margin:0;
  width:78%; padding:60px 0 40px; border-bottom:1px solid #ccc;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
#post_list .post_left {
  flex:0 0 auto; -webkit-flex:0 0 auto; min-width:0; margin:0;
  background:#3b464a; width:22%; padding:65px 0 40px; text-align:right;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
.search-no-results #post_list .post_right { border:none; width:100%; text-align:center; padding-bottom:60px; }
.search-no-results #post_list .post_left { display:none; }
#post_list .post_content { margin:0 20px; }

@media screen and (min-width:480px) {
  #post_list .article:first-child .post_left { -moz-border-radius:7px 0 0 0; -khtml-border-radius:7px 0 0 0; -webkit-border-radius:7px 0 0 0; border-radius:7px 0 0 0; }
  #post_list .article:last-child .post_left { -moz-border-radius:0 0 0 7px; -khtml-border-radius:0 0 0 7px; -webkit-border-radius:0 0 0 7px; border-radius:0 0 0 7px; }
  #post_list .article:only-child .post_left { -moz-border-radius:7px 0 0 7px; -khtml-border-radius:7px 0 0 7px; -webkit-border-radius:7px 0 0 7px; border-radius:7px 0 0 7px; }
}
@media screen and (max-width:480px) {
  #post_list { margin:0 0 -20px 0; padding:0; background:none; -moz-border-radius:0px; -khtml-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; }
  #post_list .article { padding:0; margin:0 0 20px 0; display:block; }
  #post_list .post_right { float:none; width:auto; border:none; background:#fff; padding:20px 0 0 0; -moz-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; }
  #post_list .post_left { float:none; width:auto; border:none; padding:15px 20px 5px; background:#3b464a; -moz-border-radius:0 0 5px 5px; -khtml-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; }
  #post_list .post_content { margin:0 20px; }
  .search-no-results #post_list .post_right { border:none; width:100%; text-align:center; padding:60px 0; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
}
/* IE11 hack */
@media all and (-ms-high-contrast: none) {
  #post_list .article:first-child .post_left { margin-bottom:-1px; }
}


/* tilte */
#post_list .title { margin:3px 20px 25px; padding:0; }
@media screen and (max-width:480px) {
  #post_list .title { margin:0 20px 18px; padding:3px 0 0 0; line-height:160%; font-size:21px; border-bottom:1px dotted #ccc; padding:0 0 15px 0; }
}


/* date */
.post_date { margin:2px 20px 30px; }
.post_date .date { font-size:72px; margin:0 0 0 2px; }
@media screen and (max-width:665px) {
  .post_date { margin-top:4px; }
  .post_date .date { font-size:60px; }
  .post_date .month { font-size:20px; }
}
@media screen and (max-width:480px) {
  .post_date { margin:0 -110px 6px 0; padding:0; line-height:1; float:left; height:auto; width:110px; text-align:left; }
  .post_date .date { font-size:40px; margin:0 0 0 5px; }
  .post_date .month { text-transform:uppercase; font-size:40px; color:#b9b9b9; }
}


/* meta */
@media screen and (max-width:480px) {
  .post_meta { float:left; text-align:left; margin:1px 0 5px 110px; padding:0; }
  .post_meta li { float:left; position:relative; padding:1px 0 1px 22px; margin:0 15px 2px 0; }
  .post_meta li:after { left:0px; margin:0; }
  .post_meta li a { display:inline-block; position:relative; }
  .post_meta li a:after { content:","; }
  .post_meta li a:last-child:after { display:none; }
  .no-date .post_meta { float:none; margin:0 0 5px 0; }
}


/* thumbnail */
#post_list .post_list_thumbnail { float:none; margin:0 0 25px 0; text-align:center; }
#post_list .post_list_thumbnail img { height:auto; max-width:100%; display:block; }
@media screen and (max-width:480px) {
  #post_list .post_list_thumbnail { padding-top:10px; }
  #post_list .post_list_thumbnail a:after { display:none; }
}


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


/* archive page */
#archive_headline { text-align:center; margin:0 0 15px 0; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
#archive_headline:after { display:none; }

/* page navi */
.page_navi { padding:20px 0 30px; }
.page_navi a, .page_navi span { background:rgba(255,255,255,0.3); color:#333; }
.page_navi p.back { margin-bottom:-15px; }



/* ----------------------------------------------------------------------
 article
---------------------------------------------------------------------- */
#article { background:#fff; -moz-border-radius:7px; -khtml-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; padding:20px 0; margin:0; }
.page #article { margin-bottom:30px; }


/* title */
#article #post_title { margin:0 20px 18px; padding:3px 0 0 0; line-height:160%; font-size:21px; border-bottom:1px dotted #ccc; padding:0 0 15px 0; }
.error404 #article #post_title { border:none; margin-bottom:0; padding-top:15px; }


/* content */
#article .post_content { padding:0 20px; margin-bottom:40px; }
.page #article .post_content { margin-bottom:-20px; }


/* meta */
#article .post_left { margin:0 20px 25px; width:auto; position:relative; left:0px; top:0px; }
#article .post_date { float:left; margin:2px -100px 0 0; height:auto; font-family:Arial,sans-serif; color:#333; width:100px; text-align:left; }
#article .post_date .date { display:none; }
#article .post_date .month { display:none; }
#article .post_date:before { content:attr(data-label); color:#888; font-size:13px; }

#article .post_meta { margin:0 0 0 100px; padding:0; float:right; }
#article .post_meta li { float:left; text-align:left; position:relative; padding:1px 0 1px 20px; margin:0 15px 2px 0; }
#article .post_meta li:after { color:#aaa; left:0px; margin:0; }
#article .post_meta li a { display:inline-block; position:relative; }
#article .post_meta li a:after { content:","; }
#article .post_meta li a:last-child:after { display:none; }
.no-date #article .post_meta { float:none; margin:0; }


/* 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*/
@media screen and (max-width:480px) {
  #related_post li { display:block; width:100%; }
}


/* next prev post link */
@media screen and (max-width:480px) {
  #next_prev_post { display:block; }
  #next_prev_post a { width:100%; padding:10px 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; border-right:none; 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; }
}


/* to fix the bug on Android default browser */
.post_content pre { overflow:none; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -webkit-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }

/* others */
.post_content iframe, .post_content embed { max-width:100%; }



/* ----------------------------------------------------------------------
 side content
---------------------------------------------------------------------- */
.side_widget { margin:0 0 30px 0; float:left; width:46%; }
.side_widget:nth-child(odd) { clear:left; margin-right:8%; }

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


/* calendar widget */
#wp-calendar td a { -webkit-border-radius:4px; -khtml-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
#wp-calendar td#today { -webkit-border-radius:4px; -khtml-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }



/* ----------------------------------------------------------------------
 footer
---------------------------------------------------------------------- */
#footer { width:auto; height:auto; min-height:60px; margin:0; padding:0; color:#aaa; background:#30393c; position:relative; }
#footer a { color:#aaa; }
#footer a:hover { color:#fff; }
.theme_author a { border-color:#666; }
#copyright { padding-top:25px; }
@media screen and (max-width:480px) {
  .theme_author { display:none; }
}



/* ----------------------------------------------------------------------
 comment
---------------------------------------------------------------------- */
#comment_header #comment_tab li a { padding:10px 30px 12px; }

#comments .post_content { padding:0; margin: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:0 -20px 20px; padding:0 20px 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:0 0 0 0px; }
  .commentlist .avatar { width:35px; height:35px; }
  #has_avatar .main_comment { margin:0 0 10px 45px; }
  .comment_name_date span.comment-date { display:block; margin:7px 0 0 0; }
  .comment_meta a { padding:3px 15px; }
  #submit_comment { width:100%; }
}




/* ----------------------------------------------------------------------
 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); }
}