@charset "utf-8";
/* ----------------------------------------------------------------------
 layout
---------------------------------------------------------------------- */
body { position:relative; overflow:hidden; width:100%; min-width:0; padding:0; background:#f8f8f8; }

#container {
  border:none; background:#f8f8f8; box-shadow:0 -55px 10px 7px rgba(0,0,0,0.3);
  position:relative; width:100%; right:0; z-index:9999; padding-top:45px;
  -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:85%; }

#contents { width:auto; padding:0; border:none; box-shadow:none; margin:-46px 15px 0; background:none; }
#main_col { background:#fff; border:1px solid #ccc; width:auto; float:none; margin:0 0 20px; padding:0; overflow:hidden; box-shadow:0 0 5px 1px rgba(0,0,0,0.2); }
#side_col { background:#fff; width:auto; float:none; margin:0 0 20px; border:1px solid #ccc; padding:0; box-shadow:0 0 5px 1px rgba(0,0,0,0.2);  }
.page-template-page-noside-php #main_col { float:none; width:auto; }




/* ----------------------------------------------------------------------
 header
---------------------------------------------------------------------- */
#header { width:100%; min-width:0; height:auto; border:none; box-shadow:0; position:fixed; top:0px; }
#header_top {
  width:100%; min-width:0; height:45px; z-index:10; background:#fff;
  border-bottom:1px solid #ccc; box-shadow:0 0 5px rgba(0, 0, 0, 0.2);
}
#header_top_inner { width:100%; height:45; margin:0; position:relative; }
#header #header_bottom { display:none; }
#header_bottom_inner { display:block; height:100%; width:100%; }
#mobile_menu { position:fixed; right:0%; top:0px; width:85%; height:100%; background:#2a3134; z-index:1; overflow:auto; }

.header_main_image { width:100%; min-width:0; height:auto; background:#fff;  position:relative; }
.header_main_image_inner {
  width:100%; height:auto; margin:0 auto; position:relative; padding:40px 20px 85px;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}


/* monochrome */
#header_monochrome .header_main_image_inner { background:url(img/main/monochrome_retina_new.jpg) no-repeat right -300px top; background-size:cover; }
#header_monochrome img { display:block; margin:0 0 20px 0; width:267px; height:auto; position:relative; top:0px; left:0px; }


/* neutral */
#header_neutral .header_main_image_inner { background:url(img/main/neutral_retina_new.jpg) no-repeat right -240px top; background-size:cover; }
#header_neutral img { display:block; margin:0 0 20px 0; width:210px; height:auto; position:relative; top:0px; left:0px; }


/* flat */
#header_flat .header_main_image_inner { background:url(img/main/flat_retina_new.jpg) no-repeat right -300px top; background-size:cover; }
#header_flat img { display:block; margin:0 0 20px 0; width:145px; height:auto; position:relative; top:0px; left:0px; }


/* common */
.header_main_image_inner p { display:inline; background:rgba(255,255,255,0.7); margin:0; position:relative; top:0px; left:0px; line-height:2.4; font-size:13px; padding:3px; }
.header_main_image_inner p:after { content:''; display:block; margin:0 0 15px 0; }
.header_main_image_inner a { margin:0; padding:0 15px; display:inline-block; line-height:40px; height:40px; position:relative; top:0px; left:-3px; }
.header_main_image_inner a:after { right:-30px; top:0px; width:0; height:0; border-top:40px solid #27b0ce; border-right:30px solid transparent; border-bottom:0 solid transparent; border-left:0 solid transparent; }
.header_main_image_inner a:hover { background:#5c4e8c; color:#fff; }
.header_main_image_inner a:hover:after { border-top:40px solid #5c4e8c; }



/* logo */
#logo { top:5px; left:0; right:0; }
#logo img { width:110px; }
#tagline { display:none; }


/* close button */
#mobile_menu .close_button { display:block; width:100%; height:45px; position:relative; cursor:pointer; border-bottom:1px solid #111; }
#mobile_menu .close_button:before {
  color:#666; font-family: 'icomoon-ml';font-size:24px; display:block; width:45px; height:45px; text-align:center; line-height:45px; 
  content:'\e619'; position:absolute; top:2px; right:0px;
}
#mobile_menu .close_button:hover { background:#27b0ce; }
#mobile_menu .close_button:hover:before { color:#fff; }


/* mobile menu */
#header_menu { display:block; width:100%; padding:0; margin:0; overflow:auto; }

#header_menu ul { display:block; margin:0; }
#header_menu ul ul { display:block; margin:0; padding:0; }
#header_menu ul li { margin:0; padding:0; line-height:160%; }

#header_menu > ul { border-bottom:1px solid #444; border-top:1px solid #111; }

#header_menu ul li a, #header_menu ul ul li a, #header_menu .home_menu {
  font-size:12px; display:block; line-height:180%; padding:13px 2em 13px; margin:0;
  background:#2a3134; color:#9da2a5; border-top:1px solid #444; border-bottom:1px solid #111; text-align:left; text-decoration:none;
}
#header_menu .home_menu { border-bottom:none; border-top:1px solid #444; }

#header_menu ul li a:hover, #header_menu .home_menu:hover { background:#27b0ce; color:#fff; }
#header_menu ul li li a { padding-left:3em; }
#header_menu ul li li li a { padding-left:4em; }
#header_menu ul li li li li a { padding-left:5em; }
#header_menu ul ul li a:hover { }


/* social link button */
#search_link_area { height:45px; border-bottom:1px solid #111; border-top:1px solid #444; }
#search_link_area ul { display:block; line-height:0; margin:0; padding:0; float:left; }
#search_link_area li a { width:60px; }
#search_link_area li.search_button a { display:none; }


/* search form */
#header_search { display:none !important; }


/* ads */
.header_adsense { position:absolute; right:0px; top:0px; width:413px; height:120px; display:none; }
.header_adsense a { position:relative; display:block; height:120px; }
.header_adsense img {
  width:413px; height:auto; display:block; position:absolute;
  top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
}


/* menu button */
#menu_button { display:block; position:absolute; right:0px; top:0; margin:0; text-align:center; width:45px; height:45px; text-decoration:none; color:#bbb; }
#menu_button .title { display:none; }
#menu_button .icon:before { font-family:'icomoon-ml'; content:"\e618"; font-size:24px; top:12px; right:0px; position:relative; font-style:normal; }
#menu_button:hover { color:#fff; background-color:#27b0ce; }
.open #menu_button { color:#bbb; }
.open #menu_button:hover { color:#fff; }




/* ----------------------------------------------------------------------
 固定ページ
---------------------------------------------------------------------- */
/* テーマ一覧ページ */
#theme_list { border-top:1px dotted #aaa; padding:40px 0 0; margin:35px 0px 0; }
.theme_list { padding:0 0 30px 0; margin:0 0 30px 0; background:none; border-bottom:1px dotted #aaa; }
.theme_list .image img { float:none; margin:0 auto 20px; display:block; border:1px solid #ddd; width:300px; height:auto; max-width:100%; }
.theme_list .data { width:auto; float:none; margin:0; font-size:12px; }

/* テーマ詳細ページ */
.theme_title { position:relative; margin:0 0 30px; padding:20px 0; line-height:100%; height:auto; border-bottom:1px dotted #aaa; }
.theme_title.monochrome img { position:relative; left:0; top:0; }
.theme_title.piano-black img { position:relative; left:0; top:0; }
.theme_title.neutral img { position:relative; left:0; top:0; }
.theme_title.flat img { position:relative; left:0; top:0; }
.theme_title.flat-black img { position:relative; left:0; top:0; }
.theme_title.cubic img { position:relative; left:0; top:0; }
.theme_title.n1 img { position:relative; left:0; top:0; }
#theme_data { margin:0 0 30px 0; }
#theme_data .image img { float:none; margin:0 auto 30px; width:300px; }
#theme_data .desc { float:none; width:auto; }
#theme_data .desc p { line-height:2; margin:0 0 20px 0; }
#theme_data .link { }
#theme_data .link li { float:none; margin:0 0 10px 0; border:none; padding:0; }
#theme_data .link li a {
  height:40px; line-height:40px; border:1px solid #ccc; text-decoration:none; text-align:center; width:100%; display:block;
  background:#eee; background: -webkit-linear-gradient(top, #ffffff, #f8f8f8); background: -moz-linear-gradient(top, #ffffff, #f8f8f8); background: -ms-linear-gradient(top, #ffffff, #f8f8f8); background: -o-linear-gradient(top, #ffffff, #f8f8f8); background: linear-gradient(to bottom, #ffffff, #f8f8f8); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#ffffff', EndColorStr='#f8f8f8');
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1),-1px -1px rgba(255,255,255,1.0) inset; 
  -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
}
#theme_data .link li a:hover { color:#fff; background:#009DC4; box-shadow:none; }
#theme_spec h2 { font-size:14px; color:#999; line-height:30px; height:30px; padding:0; margin:0 0 20px 0; font-weight:normal; text-align:center; background:#ccc; color:#fff; }
#theme_spec { padding-top:10px; }
#theme_spec dl { margin:0 0 20px 0; }
#theme_spec dt { font-size:11px; width:auto; border:none; clear:none; float:none; padding:0px; padding-bottom:0px; margin:0 0 5px 0; line-height:2; font-weight:bold; }
#theme_spec dd { float:none; border-top:1px solid #ccc; width:auto; font-size:11px; padding:5px 0 0 0; padding-bottom:0px; margin:0 0 20px 0; line-height:2; }
#theme_data2 { margin:0 0 30px 0; }

/* お問い合わせ */
#contact_form { margin:0 auto 30px; }
#contact_submit, #contact_back { display:block; }
#contact_back { margin:0 0 15px 0; }



/* ----------------------------------------------------------------------
 post list
---------------------------------------------------------------------- */
#archive_headline { padding:0 15px; }

#post_list1 .post_thumbnail { margin:0 0 15px 0; float:none; line-height:0; display:block; text-align:center; }
#post_list1 .post_thumbnail img { }

/* post data */
#post_list1 .post_data { float:none; width:auto; margin:0 20px; }

/* page navi */
.page_navi { margin:20px 20px 35px; }



/* ----------------------------------------------------------------------
 article
---------------------------------------------------------------------- */
#article #post_title { font-size:18px; }

#article { position:relative; margin:0 20px; }
.page #article { margin-bottom:10px; }


/* share button */
#share_button { margin:0 0 30px 0; float:left; text-indent:0; list-style:none; line-height:1; }
#share_button li { padding:0; float:left; margin:0 10px 0 0; min-height:75px; max-width:80px; }


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

@media screen and (max-width:480px) {
  #related_post ol { margin:0; }
  #related_post li { display:block; width:100%; margin-right:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
  #related_post li.odd { margint:0%; }
}


/* next prev post link */
#next_prev_post { margin:0; display:block; }
#next_prev_post a { display:block; width:100%; padding:12px 20px; position:relative; }
#next_prev_post a.prev_post { margin:0 0 -1px 0; float:none; border-radius:4px 4px 0 0; }
#next_prev_post a.next_post { float:none; border-radius:0 0 4px 4px; }



/* ----------------------------------------------------------------------
 footer
---------------------------------------------------------------------- */
/* recommend post */
#recommend_wrap { width:100%; min-width:100%; border:none; margin:0; position:relative; padding:20px 20px 15px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
#recommend { width:100%; margin:0 auto; }
#recommend_slider { width:100%; }
#recommend_slider .post { width:90%; text-align:center; margin:0 auto; }
#recommend_slider a.image { display:block; margin:0 0 10px 0; position:relative; overflow:hidden; width:100%; height:auto; }
#recommend_slider a.image img { display:block; width:100%; height:auto; }
#recommend_slider a.image:after { display:none; }
#recommend_slider a.title { font-size:11px; display:block; text-decoration:none; margin:0; width:100%; line-height:160%; }
#recommend_slider a.title:hover { text-decoration:underline; }
#recommend_slider .owl-wrapper-outer { width:100%; overflow:hidden; }
.owl-theme .owl-controls .owl-page { display:none; }
.owl-next { display:none; }
.owl-prev { display:none; }

/* footer */
#footer { border-top:1px solid #ccc; margin:0; width:100%; min-width:0; background:#fff; }
#footer_inner { position:relative; width:100%; margin:0 auto; font-size:11px; height:auto; }

/* footer menu */
#footer_menu1 { width:auto; position:relative; left:0; top:0; margin:20px 20px; }
#footer_menu2 { width:auto; position:relative; left:0; top:0; margin:0 20px 20px; }
#footer_menu3 { width:auto; position:relative; left:0; top:0; margin:0 20px 20px; }
.footer_headline { font-size:13px; font-weight:normal; border-left:4px solid #bcc800; height:22px; line-height:24px; padding:0 0 0 10px; margin:0 0 13px 0; }
.footer_menu { border-top:1px solid #ddd; padding:8px 0 0 0; font-size:12px; }
.footer_menu li { }
.footer_menu li a { display:block; padding:6px 0; }
.footer_menu li a:hover {  }

/* footer info */
#footer_info { width:auto; overflow:auto; position:relative; left:0; top:0; border-top:1px solid #ccc; padding:20px 0 0 0; padding:20px; }
#footer_logo img { width:133px; height:auto; display:block; margin:0 0 10px -10px; }
#footer_info .desc { margin:0 0 14px 0; }
#footer_info p { line-height:2; }

/* search form */
#search_area_bottom { width:auto; height:37px; padding:9px 0 0 0px; }
#search_area_bottom .search_form { width:100%; height:28px; }
#search_area_bottom .search_input input { width:70%; }
#search_area_bottom .search_button input { width:20%; background-color:#e5e5e5; }

/* copyright */
#copyright_area { min-width:0; }
#copyright { text-align:left; padding:0 20px; font-size:11px; margin:0; line-height:50px; height:50px; }

@media screen and (max-width:480px) {
  .theme_author { display:none; }
}


/* return top */
#return_top { 
  position:absolute; bottom:0px; right:0px; display:block; text-indent:100%; overflow:hidden; white-space:nowrap; width:50px; height:50px; margin:0; padding:0; border-left:1px solid #ccc; background:#fff url(img/return_top1.gif) no-repeat center center;
  -moz-border-radius:0; -khtml-border-radius:0; -webkit-border-radius:0; border-radius:0; opacity:1;
  -webkit-transition-property:none; -moz-transition-property:none; -o-transition-property:none; transition-property:none;
}
#return_top:hover { opacity:1; background-image:url(img/return_top2.gif); }




/* ----------------------------------------------------------------------
 comment
---------------------------------------------------------------------- */
#comments { padding:0px; }
.page #comments { margin-bottom:50px; }
#comment_header { margin:0 -20px 30px; }
#comment_header .headline { margin:0; }
#comment_header #comment_tab { right:20px; }
#comment_header #comment_tab li a { padding:10px 30px 12px; }
#comments .post_content { padding:0; margin:0; }
#submit_comment { width:100%; }
.comment_meta a { padding:3px 15px; }

@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 -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: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; }
}




/* ----------------------------------------------------------------------
 side
---------------------------------------------------------------------- */
#facebook_like_box .fb-like-box { min-height:auto; }

/* Facebook Like Box width: 100% */
.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
    width: 100% !important;
}