/* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ @charset "utf-8"; /* ---------------------------------------------------------------------- basic setting ---------------------------------------------------------------------- */ a img { border:none; height: auto; } a, a:visited { outline:none; color:#333; } a:hover { } p { margin:0 0 1.5em 0; padding:0; line-height:240%; } ul { list-style-type:none; margin:0 0 2em 0; padding:0; line-height:0%; } ul li { margin:0; padding:0; line-height:normal; zoom:1; } ol { margin:0 0 2em 19px; padding:0; } ol li { padding:0 0 5px 0; line-height:normal; } dl { list-style-type:none; margin:0 0 1em 0; padding:0; line-height:0%; } dl dt, dl dd { margin:0; padding:0; line-height:normal; zoom:1; } dl dt { font-weight:bold; } form,table,input,textarea,dl,dt,dd { margin:0; padding:0; } table { border-collapse:collapse; width:100%; border:0; } cite { text-align:right; display:block; } object { display:block; margin:0 auto; height:auto; } del { color:#333; } hr { border:1px solid #ccc; margin:40px 0; } .wp-caption-text { text-align:center; } .alignright { float:right; } .alignleft { float:left; } .aligncenter { margin-left:auto; margin-right:auto; } .centered { margin-left:auto; margin-right:auto; } .clear { clear:both; } input[type="text"], input[type="password"], textarea, select { outline: none; } .hide{ display: none; } /* --- WordPress preset CSS ----------------------------------------------------------------------------------------- */ .post p { line-height:2; margin:0 0 2em 0; } /* headline */ .post h1, .post h2, .post h3, .post h4, .post h5, .post h6 { clear:both; line-height:1.2; font-weight:600; margin:0 0 24px 0; } .post h1 { font-size:150%; } .post h2 { font-size:140%; } .post h3 { font-size:130%; } .post h4 { font-size:120%; } .post h5 { font-size:110%; } .post h6 { font-size:100%; } /* image */ .post img { height:auto; max-width:100%; } .post img.centered,div.centered { display:block; margin:15px auto; } .post img.aligncenter,div.aligncenter { display:block; margin:15px auto; } .post img.alignright,div.alignright { margin:10px 0 30px 30px; display:inline; } .post img.alignleft,div.alignleft { margin:10px 30px 30px 0; display:inline; } .post .wp-caption { background:#FFFFFF; border:1px solid #ccc; max-width:96%; padding:14px 3px 1px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .post .wp-caption img { display:block; margin:0 auto; max-width:100%; } .post .wp-caption .wp-caption-text { padding:10px 0 0; } /* table */ .post table { margin:0 0 24px 0; } .post td, .post th { border:1px solid #ccc; padding:10px 15px 7px; line-height:2; } .post th { background:#f2f2f2; font-weight:normal; } /* block quote */ .post blockquote { margin:0 0 24px 0; padding:27px 30px 1px; background:#f2f2f2; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; position:relative; } .post blockquote:before { content: '"'; font-style:italic; font-size:30px; font-weight:normal; line-height:40px; width:30px; height:30px; position:absolute; top:5px; left:10px; color:#999; } .post blockquote:after { content: '"'; font-style:italic; font-size:30px; font-weight:normal; text-align:left; line-height:60px; width:30px; height:30px; position:absolute; bottom:7px; right:-2px; color:#999; } /* list */ .post li, .post dt, .post dd { line-height:2; } .post ul, .post ol, .post dl { margin-bottom:24px; } .post ol { list-style:decimal outside none; margin-left:1.5em; } .post ul { list-style:disc outside none; margin-left:1.3em; } .post li > ul, .post li > ol { margin-bottom:0; } .post dt { font-weight:bold; } .post dd { margin-bottom:1em; } /* captions */ .post .wp-caption { margin-bottom:24px; background:#FFFFFF; border:1px solid #ccc; padding:5px; max-width:100%; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .post .wp-caption-text { text-align:center; font-size:12px; font-style:italic; line-height:2; margin:9px auto; } .post .wp-caption img[class*="wp-image-"] { display:block; margin:0 auto; } /* etc */ .post pre { margin:0 0 24px 0; line-height:1.5; background:#f2f2f2; padding:15px; overflow:auto; white-space:pre-wrap; word-wrap:break-word; } /* next page */ #post_pagination { margin:0 0 30px 0; clear:both; } #post_pagination h5 { margin:0 10px 0 0; float:left; line-height:30px; font-size:12px; } #post_pagination a, #post_pagination p { float:left; display:inline-block; background:#eee; margin:0 5px 0 0; width:30px; height:30px; line-height:30px; text-align:center; text-decoration:none; color:#333; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; font-size:12px; } #post_pagination p { background:#999; color:#FFFFFF; } #post_pagination a:hover { background:#333; color:#FFFFFF; } /* ---------------------------------------------------------------------- side content ---------------------------------------------------------------------- */ .side_widget { margin:0 0 20px 0; font-size:11px; background:#f9f9f9; border:1px solid #ddd; padding:15px 15px 10px; position:relative; } .side_widget ul { margin:0; } .side_widget li ul { margin:10px 0 0 0; } .side_widget li { line-height:170%; margin:0 0 10px 0; padding:0 0 0 9px; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/bullet1.gif) no-repeat left 8px; } .side_widget a { } .side_widget img { height:auto; max-width:100%; width:auto; } .side_headline { margin:-15px -15px 15px; line-height:3px; line-height:36px; font-size:14px; font-weight:bold; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/headline1.gif) repeat-x left bottom; padding:0 15px; border-bottom:1px solid #ccc; } /* tcd archive list */ #tcd_archive_list li span { display:inline-block; width:6px; width:8px; text-indent:-9999px; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow_right.png) no-repeat right 6px; margin-right:5px; cursor:pointer; } #tcd_archive_list li span.open { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow_bottom.png) no-repeat right 6px; } #tcd_archive_list li { background:none; padding:0; } #tcd_archive_list li ul { margin:10px 0 0 12px; display:none; } #tcd_archive_list2 li { background:none; padding:0; font-weight:bold; font-size:12px; } #tcd_archive_list2 ul li { float:left; font-weight:normal; font-size:11px; line-height:100%; } #tcd_archive_list2 ul li a { display:inline-block; border-right:1px solid #ccc; padding:0 10px 0 0; margin:0 10px 0 0; } #tcd_archive_list2 ul li:last-child a { border:none; } /* banner */ .ml_ad_widget { margin:0 0 20px 0; border:none; padding:0; background:none; } .ml_ad_widget img { height:auto; max-width:100%; width:auto; margin:0 auto; display:block; } /* PR post */ .pr_widget { margin:-10px 0 20px 0; border:none; padding:0; background:none; } .pr_widget ul { margin:0; } .pr_widget ul li { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; margin:0; padding:10px 0; font-size:12px; font-weight:bold; } .pr_widget a { text-decoration:none; color:#333; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow_yellow.gif) no-repeat left 5px; padding:0 0 0 12px; display:block; } .pr_widget a:hover { text-decoration:underline; color:#9a9a00; } .pr_widget ul li:last-child { background:none; padding-bottom:0; } #footer_widget .pr_widget { margin-top:-10px; } /* Ranking */ .ranking_widget ul { margin:-10px 0 0 0; } .ranking_widget ul li { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; padding:8px 0; margin:0; } .ranking_widget span { display:block; width:25px; height:25px; line-height:25px; text-align:center; background:#888; color:#FFFFFF; float:left; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; margin:0 10px 0 0; } .ranking_widget a { text-decoration:none; top:3px; position:relative; } .ranking_widget ul li:last-child { background:none; padding-bottom:0; } .ranking_widget .rank1 span, .ranking_widget .rank2 span, .ranking_widget .rank3 span { background:#1ca2e6; } /* News, Press */ .news_widget_list { margin:-15px 0 -10px; padding:0; list-style-type:none; overflow:hidden; } .news_widget_list li { margin:0 0 -1px 0; padding:13px 0px 10px; background:none; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; } .news_widget_list .news_date { margin:0 0 5px 0; padding:0; line-height:100%; color:#888; } .news_widget_list .news_title { font-size:12px; font-weight:bold; display:block; text-decoration:none; } .news_widget_list .news_title:hover { text-decoration:underline; } a.news_widget_list_link { position:absolute; right:10px; top:11px; text-decoration:none; font-size:11px; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow1.png) no-repeat left 4px; padding:0 0 0 12px; font-weight:bold; color:#999; } a.news_widget_list_link:hover { text-decoration:underline; } .footer_widget .news_widget_list {margin: 0;} .footer_widget .news_widget_list li { background: url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; padding: 0 0 10px;} .footer_widget a.news_widget_list_link{ top:2px;} /* calendar */ #wp-calendar { margin:0 auto; width:100%; font-size:11px; border-collapse:separate; table-layout:fixed; } #wp-calendar th, #wp-calendar td { color:#333; padding:0; line-height:240%; text-align:center; } #wp-calendar td a { display:block; margin:0; padding:0; text-decoration:none; color:#333; background-color:#eee; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } #wp-calendar td a:hover { text-decoration:none; color:#FFFFFF; background:#ccc; } #wp-calendar caption { padding:7px 0; } #wp-calendar thead th, #wp-calendar tfoot td { border:none; padding:0; line-height:200%; } #wp-calendar #prev, #wp-calendar #next { line-height:200%; } #wp-calendar #prev a, #wp-calendar #next a { text-decoration:none; background:none; color:#333; } #wp-calendar #prev a:hover, #wp-calendar #next a:hover { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; color:#FFFFFF; background:#ccc; } #wp-calendar td#today { font-weight:bold; } /* styled post list1 */ .styled_post_list1 { margin:0; } .styled_post_list1 li { background:none; padding:0 0 10px 0; margin:0 0 10px 0; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; } .styled_post_list1 li.last { background:none; margin:0; padding:0; } .styled_post_list1 .info { } .styled_post_list1 .info .date { margin:2px 0 5px 0; line-height:100%; color:#004b64; font-weight:bold; } .styled_post_list1 .info .title { font-size:12px; margin:0; padding:0 0 5px 0; display:block; font-weight:bold; } .styled_post_list1 .image { float:left; display:block; margin:0 15px 0 0; width:100px; height:70px; background:#000; } .styled_post_list1 .image img { width:100px; height:auto; opacity:1; transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); } .styled_post_list1 .image:hover img { opacity:0.5; } .styled_post_list1 .excerpt { clear:both; padding:7px 0 0 0; } #footer_widget .styled_post_list1 li { background:none; padding:0 0 10px 0; margin:0 0 10px 0; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; } #footer_widget .styled_post_list1 li.last { background:none; margin:0; padding:0; } /* styled post list2 */ .styled_post_list2 { margin:0; padding:0; list-style-type:none; } .styled_post_list2 li { margin:0 0 15px 0; padding:0 0 10px 0; line-height:100%; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; } .styled_post_list2 li.last { margin:0; padding:0; background:none; } .styled_post_list2 .image { display:block; margin:0 0 15px 0; background:#000; } .styled_post_list2 .image img { width:100%; height:auto; display:block; opacity:1; transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); } .styled_post_list2 .image:hover img { opacity:0.5; } .styled_post_list2 .date { margin:0 0 10px 0; line-height:100%; color:#004b64; font-weight:bold; } .styled_post_list2 .title { font-size:13px; margin:0 0 5px 0; padding:0; display:block; font-weight:bold; line-height:160%; } .styled_post_list2 .excerpt { clear:both; padding:7px 0 0 0; line-height:180%; } #footer_widget .styled_post_list2 li { margin:0 0 15px 0; padding:0 0 10px 0; line-height:100%; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; } #footer_widget .styled_post_list2 li.last { margin:0; padding:0; background:none; } /* archive category dropdown */ .widget_archive select, .widget_categories select { border:1px solid #ddd; padding:6px 10px; width:100%; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; margin:0 0 20px 0; } /* ---------------------------------------------------------------------- other page ---------------------------------------------------------------------- */ /* author profile */ .author_social_link { margin:15px 0 12px 0; } .author_social_link li { float:left; font-size:11px; margin:0 4px 0 0; } .author_social_link li a { display:block; text-decoration:none; background:#ccc; color:#FFFFFF; height:20px; line-height:20px; padding:0 15px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .author_social_link li.author_link a { color:#FFFFFF; } .author_social_link li.twitter a { background-color:#16b9dc; color:#FFFFFF; } .author_social_link li.twitter a:hover { background-color:#09d4ff; } .author_social_link li.facebook a { background-color:#3B5998; color:#FFFFFF; } .author_social_link li.facebook a:hover { background-color:#4674d3; } /* page nav */ .page_navi { margin:20px 0 15px 0; } .page_navi h4 { font-size:10px; font-weight:normal; margin:0 0 10px 0; color:#888; } .page_navi ul { margin:0; } .page_navi li { float:left; } .page_navi a, .page_navi a:hover, .page_navi span { text-decoration:none; color:#FFFFFF; font-size:11px; padding:13px 15px; line-height:100%; margin:0 4px 4px 0; background:#bbb; display:block; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } .page_navi a:hover { color:#FFFFFF; text-decoration:none; } .page_navi span.dots { background:none; color:#333; } .page_navi span.current { color:#FFFFFF; background:#333; } .page_navi p.back { margin:0; } .page_navi p.back a, .page_navi p.back a:hover { display:inline-block; padding: 10px 15px; } /* ---------- clearfix hack ---------- */ .clearfix:after { content: "."; display:block; clear:both; height:0; font-size:0.1em; line-height:0; visibility:hidden; overflow:hidden; } .clearfix { display:inline-block; } /* exlude MacIE5 \*/ * html .clearfix { height:1% } .clearfix { display:block;} /* end MacIE5 */ /* ---------------------------------------------------------------------- ソーシャルボタン ---------------------------------------------------------------------- */ #share_top1 ul li a, #share_top2 ul li a, #share_btm1 ul li a, #share_btm2 ul li a { -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s; } /*-------------------------------- share_top1（Style1） ---------------------------------*/ #share_top1 { width:100%; margin:-15px 0 10px; position: relative; z-index: -1; } #share_top1 h2 { color:#666666; font-weight:400; } #share_top1 ul { margin:0; padding:0; list-style:none; } #share_top1 ul li { display:inline-block; padding:0; text-align:center; } #share_top1 ul li a { min-width:27px; text-decoration:none; display:inline-block; margin:0 5px 5px 0; font-size:12px; font-weight:400; color: #FFFFFF!important; background:#fafafa; border-radius:2px; box-shadow:0 1px 0 rgba(0,0,0,.03); text-shadow:none; text-align:center; line-height:25px; padding:1px 5px 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; } #share_top1 ul li a i { position:relative; top:3px; color:#FFFFFF; font-size:1.3em; text-shadow:1px 1px 0 rgba(255, 255, 255, .1); } #share_top1 ul li a .ttl { margin:0 3px 0 2px; text-align:center; line-height:20px; } #share_top1 ul li a .share-count { display:inline; font-size:9px; color:#FFFFFF; padding:0; line-height:25px; margin:0; border-radius:0 1px 1px 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; } #share_top1 ul li > a:hover { -webkit-transform:translate3d(0, 1px, 0); transform:translate3d(0, 1px, 0) } @media screen and (max-width:480px) { #share_top1 { width:100%; margin:-15px 0 15px; } #share_top1 ul {} #share_top1 ul li a { margin-right:2px; } #share_top1 ul li a i { left:1px; } #share_top1 ul li>a span { display:none; } #share_top1 ul li a .share-count { margin-left:3px; } } /*-------------------------------- share_btm1（Style3） ---------------------------------*/ #share_btm1 { margin:-15px 0 30px; } #share_btm1 .sns { text-align:center; } #share_btm1 ul { margin:0 0 2%; list-style:none; } #share_btm1 li { float:left; width:48%; margin:0 1% 1.5%; cursor:pointer; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .post #share_btm1 ul li { list-style:none; background-image:none; padding:0; } #share_btm1 ul li a { position:relative; display:block; top:3px; font-size:13px; padding:10px 2px; color:#FFFFFF; border-radius:2px; text-align:center; text-decoration:none; vertical-align:middle; } #share_btm1 ul li a i { position:relative; top:3px; font-size:140%; } #share_btm1 ul li a .ttl { margin:0 3px 0 4px; display:inline-block; text-align:center; font-size:12px; } #share_btm1 ul li a .share-count { position:absolute; bottom:-2px; right:8px; font-size:10px; padding:0; line-height:25px; margin: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; } #share_btm1 ul li a:hover { -webkit-transform: translate3d(0px, 2px, 1px); -moz-transform: translate3d(0px, 2px, 1px); transform: translate3d(0px, 2px, 1px); } @media only screen and (min-width:480px) { #share_btm1 { width:100%; margin:-15px 0 15px; } #share_btm1 ul { margin-right:-1%; list-style:none; overflow:hidden; } #share_btm1 li { width:24%; margin:0 1% 1% 0; } #share_btm1 li a { font-size:12px; padding:10px 2px; } #share_btm1 li:nth-child(4n) { margin-right:0; } } /*------------- share_top1 & share_btm1 button_color -------------*/ /* Twitter */ #share_top1 ul li.twitter a, #share_btm1 ul li.twitter a { color:#FFFFFF; background-color:#000; } #share_top1 ul li.twitter a:hover, #share_btm1 ul li.twitter a:hover { background-color:#000; } /* Facebook */ #share_top1 ul li.facebook a, #share_btm1 ul li.facebook a { background-color:#35629a; } #share_top1 ul li.facebook a:hover, #share_btm1 ul li.facebook a:hover { background-color:#1f3669; } /* Google+ */ #share_top1 ul li.googleplus a, #share_btm1 ul li.googleplus a { background-color:#dd4b39;} #share_top1 ul li.googleplus a:hover, #share_btm1 ul li.googleplus a:hover { background-color:#b94031;} #share_top1 ul li.googleplus a i { top:4px; } /* Hatena */ #share_top1 ul li.hatebu>a, #share_btm1 ul li.hatebu a { background-color:#3c7dd1;} #share_top1 ul li.hatebu>a:hover, #share_btm1 ul li.hatebu a:hover { background-color:#0270ac;} /* Pocket */ #share_top1 ul li.pocket a, #share_btm1 ul li.pocket a { background-color:#ee4056; } #share_top1 ul li.pocket a:hover, #share_btm1 ul li.pocket a:hover { background-color:#c53648; } /* rss */ #share_top1 ul li.rss a, #share_btm1 ul li.rss a { background-color:#ffb53c; } #share_top1 ul li.rss a:hover, #share_btm1 ul li.rss a:hover { background-color:#e09900; } /* Feedly */ #share_top1 ul li.feedly a, #share_btm1 ul li.feedly a { background-color:#6cc655; } #share_top1 ul li.feedly>a:hover, #share_btm1 ul li.feedly>a:hover { background-color:#5ca449; } /* Pinterest */ #share_top1 ul li.pinterest a, #share_btm1 ul li.pinterest a { background-color:#d4121c; } #share_top1 ul li.pinterest a:hover, #share_btm1 ul li.pinterest a:hover { background-color:#a42f35; } /*-------------------------------- share_top2（Style2） ---------------------------------*/ #share_top2 { width:100%; margin:-15px 0 10px; } #share_top2 h2 { color:#444; font-weight:400; } #share_top2 ul.type2 { margin:0; padding:0; list-style:none; } #share_top2 ul.type2 li { display:inline-block; padding:0; text-align:center; } #share_top2 ul.type2 li a { text-decoration:none; display:inline-block; margin:0 5px 5px 0; font-size:12px; font-weight:400; border-radius:2px; color:#222 !important; text-align:center; background:#fafafa !important; border:1px solid rgba(0,0,0,.1); box-shadow:0 1px 0 rgba(0,0,0,.03); text-shadow:none; line-height:25px; padding:1px 5px 0; } #share_top2 ul.type2 li a i { position:relative; top:3px; color:#222; font-size:1.3em; text-shadow:1px 1px 0 rgba(255, 255, 255, .1); } #share_top2 ul.type2 li a .ttl { margin:0 3px 0 2px; text-align:center; line-height:20px; } #share_top2 ul.type2 li a .share-count { color:#444; font-size:9px; padding:0; line-height:25px; margin: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; } #share_top2 ul.type2 li a:hover, #share_top2 ul.type2 li a:hover i, #share_top2 ul.type2 li a:hover .share-count { color:#FFFFFF !important; } #share_top2 ul.type2 li a:hover { border-color:rgba(255,255,255,.1); } @media screen and (max-width:480px) { #share_top2 { width:100%; margin:-15px 0 15px; } #share_top2 ul.type2 {} #share_top2 ul.type2 li a { margin-right:2px; } #share_top2 ul.type2 li a i { left:1px; } #share_top2 ul.type2 li>a span.ttl { display:none; } #share_top2 ul.type2 li a .share-count { margin-left:3px; } } /*-------------------------------- share_btm2（Style4） ---------------------------------*/ #share_btm2 { margin:-15px 0 30px; text-align:center; } #share_btm2 .sns {} #share_btm2 ul.type4 { margin:0 0 2%; list-style:none; } #share_btm2 ul.type4 li { float:left; width:48%; margin:0 1% 1.5%; cursor:pointer; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .post #share_btm2 ul li { list-style:none; background-image:none; padding:0; } #share_btm2 ul.type4 li a { position:relative; display:block; top:5px; font-size:13px; padding:10px 2px; text-decoration:none; border-radius:2px; color:#222 !important; text-align:center; background:#fafafa !important; border:1px solid rgba(0,0,0,.1); box-shadow:0 1px 0 rgba(0,0,0,.03); text-shadow:none; } #share_btm2 ul.type4 li a i { position:relative; top:3px; font-size:140%; color:#222 !important; } #share_btm2 ul.type4 li a .ttl { margin:0 3px 0 4px; display:inline-block; text-align:center; font-size:12px; } #share_btm2 ul.type4 li a .share-count { position:absolute; bottom:-2px; right:8px; font-size:10px; padding:0; line-height:25px; margin: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; color:#222 !important; } #share_btm2 ul.type4 li a:hover, #share_btm2 ul.type4 li a:hover i, #share_btm2 ul.type4 li a:hover .share-count { color:#FFFFFF !important; } @media only screen and (min-width:480px) { #share_btm2 { width:100%; margin:-15px 0 15px; } #share_btm2 ul.type4 { margin-right:-1%; list-style:none; overflow:hidden; } #share_btm2 ul.type4 li { width:24%; margin:0 1% 1% 0; } #share_btm2 ul.type4 li a { font-size:12px; padding:10px 2px; } #share_btm2 ul.type4 li:nth-child(4n) { margin-right:0; } } /*------------- share_top2 & share_btm4 button_color -------------*/ /* Twitter */ #share_top2 ul.type2 li.twitter a, #share_btm2 ul.type4 li.twitter a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.twitter a:hover, #share_btm2 ul.type4 li.twitter a:hover { color:#FFFFFF !important; background-color:#55acee !important; } /* Facebook */ #share_top2 ul.type2 li.facebook a, #share_btm2 ul.type4 li.facebook a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.facebook a:hover, #share_btm2 ul.type4 li.facebook a:hover { color:#FFFFFF !important; background-color:#35629a !important; } /* Google+ */ #share_top2 ul.type2 li.googleplus a, #share_btm2 ul.type4 li.googleplus a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.googleplus a:hover, #share_btm2 ul.type4 li.googleplus a:hover { color:#FFFFFF !important; background-color:#dd4b39 !important;} #share_top2 ul.type2 li.googleplus a i, #share_btm2 ul.type4 li.googleplus a i { top:4px; } /* Hatena */ #share_top2 ul.type2 li.hatebu a, #share_btm2 ul.type4 li.hatebu a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.hatebu a:hover, #share_btm2 ul.type4 li.hatebu a:hover { color:#FFFFFF !important; background-color:#3c7dd1 !important;} /* Pocket */ #share_top2 ul.type2 li.pocket a, #share_btm2 ul.type4 li.pocket a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.pocket a:hover, #share_btm2 ul.type4 li.pocket a:hover { color:#FFFFFF !important; background-color:#ee4056 !important; } /* rss */ #share_top2 ul.type2 li.rss a, #share_btm2 ul.type4 li.rss a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.rss a:hover, #share_btm2 ul.type4 li.rss a:hover { color:#FFFFFF !important; background-color:#ff8c00 !important; } /* Feedly */ #share_top2 ul.type2 li.feedly a, #share_btm2 ul.type4 li.feedly a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.feedly a:hover, #share_btm2 ul.type4 li.feedly a:hover { color:#FFFFFF !important; background-color:#6cc655 !important; } /* Pinterest */ #share_top2 ul.type2 li.pinterest a, #share_btm2 ul.type4 li.pinterest a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.pinterest a:hover, #share_btm2 ul.type4 li.pinterest a:hover { color:#FFFFFF !important; background-color:#d4121c !important; } /*-------------------------------- share_top5（公式ボタン） ---------------------------------*/ #share5_top { margin:-10px 0 -15px; } #share5_btm { margin:0 0 -15px; } .sns_default_top { margin:0; padding:0; overflow:hidden; list-style:none; } .sns_default_top ul li { display:inline-block; margin:0 5px 3px 0; line-height:1!important; overflow:hidden; vertical-align:top; } .sns_default_top ul li.twitter_button { width:62px; } .sns_default_top ul li.fbshare_button:hover { text-decoration:none; } .sns_default_top ul li.google_button { width:58px; } .sns_default_top ul li.pocket_button { width:88px; } @media only screen and (max-width: 480px) { .sns_default_top { margin:0 0 -25px; } .sns_default_top ul li { margin-bottom:6px; } .sns_default_top ul li.twitter_button { margin-left:0; } } /* ----------------------- TCD Advanced Style ------------------------ */ /* ---------------------------------------------------------------------- Column layout - カラムレイアウト ---------------------------------------------------------------------- */ .post .post_row { margin-left:-15px; margin-right:-15px; line-height:2; } .post .post_col, .post .post_col-2, .post .post_col-3 { position:relative; min-height:1px; width:100%; padding-right:15px; padding-left:15px; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin-bottom:2em; } @media screen and (min-width:768px){ .post .post_col-2 { width:50%; /* 2カラム */ } .post .post_col-3 { width:33.33333%; } } @media screen and (min-width:1024px){ .post .post_col-2 { width:50%; /* 2カラム */ } .post .post_col-3 { width:33.33333%; } } .post .post_row:before, .post .post_row:after { content: " "; display: table; } .post .post_row:after { clear: both; } /* ---------------------------------------------------------------------- headline - 見出しのスタイル ---------------------------------------------------------------------- */ .post h3, .post h4, .post h5, .post h6 { line-height:1.6; } /* h3 */ .post .style3a { margin:3em 0 1.5em; padding:1.1em .2em 1em; font-size:22px; font-weight:400; border-top:1px solid #222; border-bottom:1px solid #222; } .post .style3b { margin:3em 0 1.5em; padding:1.1em .9em 1em; font-size:22px; font-weight:400; border-top:2px solid #222; border-bottom:1px solid #ddd; background:#fafafa; box-shadow:0px 1px 2px #f7f7f7; } /* h4 */ .post .style4a { margin:2.5em 2px 1.2em; padding:.3em 0 .3em .8em; font-size:20px; font-weight:400; border-bottom:none; border-left:2px solid #222; } .post .style4b { margin:2.5em 0 1.2em; padding:.9em 0 .8em; font-size:20px; font-weight:400; border-bottom:1px dotted #aaa; } /* h5 */ .post .style5a { margin:2em 0 1em; padding:.5em .8em .3em 1em; font-weight:700; font-size:18px; background:#f5f5f5; box-shadow:0px 2px 0px 0px #f2f2f2; } .post .style5b { margin:2em 0 1em; padding:.5em .8em .4em 1em; font-weight:400; font-size:18px; color:#FFFFFF; background:#222; border-radius:4px; box-shadow:0px 2px 0px 0px #f2f2f2; } /* h6 */ .post .style6 { position:relative; margin:2em 0 1em; padding:.5em .8em .8em 1.3em; color:#222; font-weight:bold; font-size:16px; } .post .style6:before { position:absolute; width:12px; height:12px; top:.5em; left:.2em; background:#222; content:""; } .post .news_headline1{ position:relative; margin:80px 0 25px 0; padding:.5em; border-left:8px solid #444; line-height:1.2; font-size:1.2em; } .post .news_headline1:after { content:""; position:absolute; bottom:0px; left:0; height:0; width:100%; border-bottom:1px dotted #ddd; } .post .news_headline2{ margin:40px 0 20px 0; padding:0 .5em; border-left:6px solid #545454; line-height:26px; font-size:1.1em;} .post .balloon { clear:both; display:block; position:relative; margin:50px 0 22px; padding:.5em 18px .5em; width:auto; min-width:115px; color:#FFFFFF; text-align:left; font-size:20px; font-weight:400; background:#222; z-index:0; border-bottom:0; } .post .balloon:after { content:""; position:absolute; bottom:-10px; left:30px; margin-left:-10px; display:block; width:0px; height:0px; border-style:solid; border-width:10px 10px 0 10px; border-color:#222 transparent transparent transparent; } /* ---------------------------------------------------------------------- flame - 囲み枠 ---------------------------------------------------------------------- */ .well { min-height:20px; padding:19px; margin-bottom:20px; background-color:#f5f5f5; border:1px solid #e3e3e3; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05); box-shadow:inset 0 1px 1px rgba(0,0,0,0.05); } .well2 { margin:1em 0 30px; padding:1em 1.5em; line-height:2; border:1px solid #cdcdcd; background:#fcfcfc; box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3); } .well3 { margin:2em 0 2.5em; padding:1em 1.5em;line-height:2.0; border:1px dashed #cdcdcd; background:#fcfcfc; box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3); } .wl_red { background-color: #f2dede; border-color: #ebccd1; color: #a94442; } .wl_yellow { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; } .wl_blue { background-color: #d9edf7; border-color: #bce8f1; color: #31708f; } .wl_green { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; } /* ---------------------------------------------------------------------- button - CSSボタンのスタイル ---------------------------------------------------------------------- */ .q_button { min-width:200px; max-width:90%; background-color:#535353; display:inline-block; vertical-align:middle; padding:.6em 1.3em .5em; font-weight:400; font-size:100%; color:#FFFFFF !important; margin:0; text-decoration:none; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; transition:all 0.3s ease-in-out 0s; box-shadow:0 1px 3px rgba(0,0,0,.15); } .q_button:hover, .q_button:focus { text-decoration:none; color:#FFFFFF !important; background-color:#7d7d7d; box-shadow:0 2px 2px rgba(0,0,0,.15) inset; } /* Button option */ .rounded { border-radius:6px; } .pill { border-radius:50px; } .sz_full { min-width:100px; max-width:100%; display:block; font-size:110%; padding:1em 1.5em .9em; } .sz_l { min-width:350px; max-width:90%; font-size:110%; padding:.8em 1.5em .7em; } @media screen and (max-width: 479px) { .sz_l { min-width:320px; max-width:95%; } } .sz_s { min-width:100px; max-width:90%; font-size:85%; padding:.4em 1em .3em; } .bt_red{ background:#c01f0e; color:#FFFFFF; } .bt_red:hover, .bt_red:focus { background-color:#d33929; color:#FFFFFF; } .bt_yellow{ background:#f1c40f; color:#FFFFFF; } .bt_yellow:hover, .bt_yellow:focus { background-color:#f9d441; color:#FFFFFF; } .bt_blue{ background:#2980b9; color:#FFFFFF; } .bt_blue:hover, .bt_blue:focus { background-color:#3a91c9; color:#FFFFFF; } .bt_green{ background:#27ae60; color:#FFFFFF; } .bt_green:hover, .bt_green:focus { background-color:#39c574; color:#FFFFFF; } /* ---------------------------------------------------------------------- Youtube responsive - Youtube動画のレスポンシブ表示 ---------------------------------------------------------------------- */ .ytube { position:relative; height:0; margin-top:20px; margin-bottom:20px; padding-bottom:56.25%; padding-top:30px; overflow:hidden; } .ytube iframe { position:absolute; top:0; right:0; width:100% !important; height:100% !important; } /* ---------------------------------------------------------------------- Table responsive - テーブルのレスポンシブ表示 ---------------------------------------------------------------------- */ .rps_table { line-height:2.0; } @media only screen and (max-width:480px) { .rps_table tr { display:block; margin-bottom:1.5em; } .rps_table th, .rps_table td{ display:list-item; list-style-type:none; border:none; } } /* ---------------------------------------------------------------------- Cardlink style - カードリンクのスタイル ---------------------------------------------------------------------- */ .cardlink { padding:12px 12px 8px; margin:10px 0; border:1px solid #ddd; word-wrap:break-word; max-width:100%; background:#fafafa; } .cardlink_thumbnail { float:left; margin:0 20px 0 0; } .cardlink_content { margin:0; line-height:1.6; } .cardlink .timestamp { margin:0; padding:0; font-size:12px; font-weight:400; line-height:100%; color:#333; } .cardlink_title { font-size:14px; margin:4px 0 4px; } .cardlink_title a { font-weight:bold; color:#000; text-decoration:none; } .cardlink_title a:hover { text-decoration:underline; } .cardlink_excerpt { color:#333; font-size:12px; overflow:hidden; line-height:1.8; } .cardlink_footer { clear:both; } .clear { clear:both; } @media screen and (max-width: 767px) { .cardlink_thumbnail { float:none; } } @media screen and (max-width: 479px) { .cardlink_excerpt { float:none; } } /* ---------------------------------------------------------------------- Contactform - お問い合わせフォーム ---------------------------------------------------------------------- */ .wpcf7 { width:100%; border:1px solid #ddd; background:#fafafa; padding:0; margin:0 0 2.5em !important; font-size:14px;} .wpcf7 form{ margin:1.5em 1.5em 0;} .wpcf7 p { margin-bottom:1em; font-size:12px; } .wpcf7 input, .wpcf7 textarea { width:auto; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; border:1px solid #ccc; line-height:1.2; padding:8px; } .wpcf7 select, .wpcf7 input[type=checkbox], .wpcf7 input[type=radio] { width:auto; max-width:97%; border:1px solid #ccc; padding:8px; } .wpcf7 select, .wpcf7 .wpcf7-list-item-label { line-height:1.2; font-size:14px; } .wpcf7-list-item { display:block; } .wpcf7 textarea { height:300px; } .wpcf7 input:focus, .wpcf7 textarea:focus { outline:none; border:1px solid #bbb; -webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); box-shadow:inner 0 0 5px rgba(0, 0, 0, 0.5); } .wpcf7 input.wpcf7-submit { position:relative; display:block; width:225px; height:48px; margin:30px auto 0; background-color:#333333; cursor:pointer; border:none !important; color:#FFFFFF; text-align:center; text-decoration:none; font-size:14px; line-height:1.5; outline:none; -webkit-transition: all .3s; transition: all .3s; } .wpcf7 input.wpcf7-submit, .wpcf7 input.wpcf7-submit::before, .wpcf7 input.wpcf7-submit::after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .wpcf7 input.wpcf7-submit:hover { background-color:#666666; } .wpcf7 .wpcf7-not-valid { background:pink; } .wpcf7 .wpcf7-response-output { margin:10px 0 0; padding:8px 35px 8px 14px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .wpcf7 .wpcf7-validation-errors { color:#B94A48; background-color:#F2DEDE; border:1px solid #EED3D7; } .wpcf7 .wpcf7-mail-sent-ok { color:#3A87AD; background-color:#D9EDF7; border:1px solid #BCE8F1; } /* ---------------------------------------------------------------------- font-size - フォントサイズ ---------------------------------------------------------------------- */ .text70{font-size:70%} /* フォントサイズ70% */ .text80{font-size:80%} .text90{font-size:90%} .text100{font-size:100%} .text110{font-size:110%} .text120{font-size:120%} .text130{font-size:130%} .text140{font-size:140%} .text150{font-size:150%} .text160{font-size:160%} .text170{font-size:170%} .text180{font-size:180%} .text190{font-size:190%} .text200{font-size:200%} .text210{font-size:210%} .text220{font-size:220%} .b{font-weight:700} /* 太字 */ .u{text-decoration:underline} /* 下線 */ .del{text-decoration:line-through} /* 打ち消し線 */ /* ---------------------------------------------------------------------- font-color - フォントカラー ---------------------------------------------------------------------- */ .red{color:red} /* 赤色 */ .blue{color:#2ca9e1} /* 青色 */ .green{color:#82ae46} /* 緑色 */ .orange{color:#ff7d00} /* 橙色 */ .yellow{color:#FFFFFF000} /* 黄色 */ .pink{color:#ff0084} /* ピンク */ .gray{color:#999999} /* グレー */ /* ---------------------------------------------------------------------- background-color - 背景色 ---------------------------------------------------------------------- */ .bg-yellow{padding:2px;background-color:#ff0} /* 黄色の文字背景 */ .bg-blue{padding:2px;background-color:#4ab0f5} /* 青色の文字背景 */ .bg-red{padding:2px;background-color:red} /* 赤色の文字背景 */ /* ---------------------------------------------------------------------- text-align - 配置 ---------------------------------------------------------------------- */ .align1{text-align:center !important} /* 中央寄せ */ .align2{text-align:right !important} /* 右寄せ */ .align3{text-align:left !important} /* 左寄せ */ /* ---------------------------------------------------------------------- float - 回り込み ---------------------------------------------------------------------- */ .r-flo{float:right;margin:10px} /* 右に回り込み */ .l-flo{float:left;margin:10px} /* 左に回り込み */ .f-clear{clear:both} /* 回り込みの解除 */ /* ---------------------------------------------------------------------- hover - 画像リンクマウスオーバー時の不透明度 ---------------------------------------------------------------------- */ a img.fade { background:none !important; outline:none; -webkit-transition:all .3s; transition:all .3s; } a:hover img.fade { opacity:0.7; filter:alpha(opacity=70); -ms-filter:"alpha( opacity=70 )"; background:none !important; } /* ---------------------------------------------------------------------- text-style - テキストスタイル ---------------------------------------------------------------------- */ .att {padding-left:1em;text-indent:-1em;} /* 注意書き等で二行目以降を字下げ */ .att_box { margin:2em 0 2.5em; padding:1em 1.2em; line-height:2.0; border:1px dotted #cccccc; background:#fcfcfc; box-shadow:0px 4px 0px 0px #f7f7f7; } /* テキストボックス */ /* ---------------------------------------------------------------------- margin - 要素の外側の余白 ---------------------------------------------------------------------- */ .m0{margin:0 !important} /* margin 0px を指定するクラス */ .mt0{margin-top:0 !important} /* margin-top0px を指定するクラス */ .mr0{margin-right:0 !important} /* margin-right0px を指定するクラス*/ .mb0{margin-bottom:0 !important} /* margin-bottom0px を指定するクラス*/ .ml0{margin-left:0 !important} /* margin-left0px を指定するクラス*/ .m5{margin:5px !important} .mt5{margin-top:5px !important} .mr5{margin-right:5px !important} .mb5{margin-bottom:5px !important} .ml5{margin-left:5px !important} .m10{margin:10px !important} .mt10{margin-top:10px !important} .mr10{margin-right:10px !important} .mb10{margin-bottom:10px !important} .ml10{margin-left:10px !important} .m15{margin:15px !important} .mt15{margin-top:15px !important} .mr15{margin-right:15px !important} .mb15{margin-bottom:15px !important} .ml15{margin-left:15px !important} .m20{margin:20px !important} .mt20{margin-top:20px !important} .mr20{margin-right:20px !important} .mb20{margin-bottom:20px !important} .ml20{margin-left:20px !important} .m25{margin:25px !important} .mt25{margin-top:25px !important} .mr25{margin-right:25px !important} .mb25{margin-bottom:25px !important} .ml25{margin-left:25px !important} .m30{margin:30px !important} .mt30{margin-top:30px !important} .mr30{margin-right:30px !important} .mb30{margin-bottom:30px !important} .ml30{margin-left:30px !important} .m35{margin:35px !important} .mt35{margin-top:35px !important} .mr35{margin-right:35px !important} .mb35{margin-bottom:35px !important} .ml35{margin-left:35px !important} .m40{margin:40px !important} .mt40{margin-top:40px !important} .mr40{margin-right:40px !important} .mb40{margin-bottom:40px !important} .ml40{margin-left:40px !important} .m45{margin:45px !important} .mt45{margin-top:45px !important} .mr45{margin-right:45px !important} .mb45{margin-bottom:45px !important} .ml45{margin-left:45px !important} .m50{margin:50px !important} .mt50{margin-top:50px !important} .mr50{margin-right:50px !important} .mb50{margin-bottom:50px !important} .ml50{margin-left:50px !important} .m55{margin:55px !important} .mt55{margin-top:55px !important} .mr55{margin-right:55px !important} .mb55{margin-bottom:55px !important} .ml55{margin-left:55px !important} .m60{margin:60px !important} .mt60{margin-top:60px !important} .mr60{margin-right:60px !important} .mb60{margin-bottom:60px !important} .ml60{margin-left:60px !important} .m65{margin:65px !important} .mt65{margin-top:65px !important} .mr65{margin-right:65px !important} .mb65{margin-bottom:65px !important} .ml65{margin-left:65px !important} .m70{margin:70px !important} .mr70{margin-right:70px !important} .mb70{margin-bottom:70px !important} .ml70{margin-left:70px !important} .m75{margin:75px !important} .mt75{margin-top:75px !important} .mr75{margin-right:75px !important} .mb75{margin-bottom:75px !important} .ml75{margin-left:75px !important} .m80{margin:80px !important} .mt80{margin-top:80px !important} .mr80{margin-right:80px !important} .mb80{margin-bottom:80px !important} .ml80{margin-left:80px !important} /* ---------------------------------------------------------------------- padding - 要素の内側の余白 ---------------------------------------------------------------------- */ .p0{padding:0 !important} /* padding-0px を指定するクラス */ .pt0{padding-top:0 !important} /* padding-top0px を指定するクラス */ .pr0{padding-right:0 !important} /* padding-right0px を指定するクラス */ .pb0{padding-bottom:0 !important} /* padding-bottom0px を指定するクラス */ .pl0{padding-left:0 !important} /* padding-left0px を指定するクラス */ .p5{padding:5px !important} .pt5{padding-top:5px !important} .pr5{padding-right:5px !important} .pb5{padding-bottom:5px !important} .pl5{padding-left:5px !important} .p10{padding:10px !important} .pt10{padding-top:10px !important} .pr10{padding-right:10px !important} .pb10{padding-bottom:10px !important} .pl10{padding-left:10px !important} #comment_headline { margin:0 0 20px 0; } #comments { margin:0; font-size:12px; } #comment_area, #trackback_area { margin:15px 0 20px; padding:0 0 5px 0; } #trackback_area { display:none; } /* ------ comment_header ----------------------------------------------------------------------------------------------------------------------- */ #comment_header { border-bottom:1px solid #ccc; position:relative; margin:0 0 20px 0; padding:0; } #comment_header_right { float:left; position:relative; margin:0 0 -1px 0; } #comment_header_right li { display:inline; float:right; text-align:center; margin:0 0 0 -1px; } #comment_header_right li a, #comment_header_right li p { color:#333; font-size:11px; padding:7px 0; margin:0; width:314px; text-decoration:none; display:block; border:1px solid #ccc; background:#f2f2f2; } #comment_header_right li.comment_switch_active a, #comment_header_right li#comment_closed p { border-bottom:1px solid #FFFFFF; background:#FFFFFF; } #comment_header_right li a:hover { background:#999; color:#FFFFFF; } #comment_header_right li.comment_switch_active a:hover { background:#FFFFFF; color:#333; } /* ------ comment ------------------------------------------------------------------------------------------------------------------------------ */ .commentlist { list-style-type:none; margin:0; padding:0; } .comment { border:1px solid #ccc; color:#777; margin:0 0 15px; padding:15px 20px 3px; background:#eee; } .even_comment, .odd_comment_children { background:#fafafa; } .odd_comment, .even_comment_children { background:#fefefe; } .admin-comment { } /* ----- comment-meta ----- */ .comment-meta { position:relative; margin:0; } .comment-meta-left { float:left; width:400px; } .avatar { float:left; margin:0 10px 0 0; border:1px solid #ccc; background:#FFFFFF; width:37px; height:37px; padding:2px; } .comment-name-date { padding:2px 0 0 0; } .commentlist a, .commentlist a:visited, .comment-name { } .commentlist a:hover { } a.admin-url { text-decoration:underline; } a.guest-url { text-decoration:underline; } .comment-name-date { margin:0; } .comment-date { font-size:11px; color:#757676; margin:0 0 0 0; } .comment-act { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow3.gif) no-repeat left; font-size:11px; position:absolute; right:0px; padding:0 0 0 10px; margin:5px 0 0 0; } .comment-act li { display:inline; margin:0; } .comment-reply a, .comment-reply a:visited { border-right:1px solid #aaa; padding:0 10px 0 0; margin:0 6px 0 0; } .comment-edit a, .comment-edit a:visited { border-left:1px solid #aaa; padding:0 0 0 10px; margin:0 0 0 6px; } /* ----- comment-content ----- */ .comment-content { padding:0; margin:-20px 0 0 0; } .comment-content .no_comment { padding-top:20px; } * html .comment-content { padding:5px 0 0 0; } .comment-content a, .comment-content a:visited { text-decoration:underline; } .comment-content a:hover { } .comment-content p { margin:0 0 10px 0; } .comment blockquote span { margin:0 0 -1em 0; display:block; } .comment-note { display:block; font-size:11px; margin:0 0 1em 0; color:#33a8e5; border:1px solid #94ddd4; padding:10px 15px; background:#d6f4f0; } .comment_closed { border:1px solid #ccc; text-align:center; margin:0 0 15px; padding:15px; background:#fefefe; } /* ----- trackback-contens ----- */ .trackback_time { font-size:11px; color:#757676; margin:0 0 7px 0px; } .trackback_title { margin:2px 0 8px 0; margin:0 0 10px 0px; } #trackback_url_area { } #trackback_url_area label { display:block; margin:4px 0 10px 0; font-size:11px; } #trackback_url_area input { border:1px solid #ccc; background:#fafafa; padding:5px; width:617px; font-size:11px; } /* ----- comment-pager ----- */ #comment_pager { margin:0 0 10px; height:24px; } #comment_pager a, #comment_pager span { display:inline; float:left; margin:0 10px 0 0; } #comment_pager .current { text-decoration:underline; } /* ---------- form area ------------------------------------------------------------------------------------------------------------------------- */ .comment_form_wrapper { border:1px solid #ccc; margin:0 0 15px; padding:15px; background:#FFFFFF; } #cancel_comment_reply { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow3.gif) no-repeat left center; margin:0 0 1em 0; padding:0 0 0 11px; } #comment_user_login p { padding:0 0 0 1px; margin:0; line-height:100%; } #comment_user_login span { margin:0 0 0 40px; } #comment_login { margin:0; padding:3px 30px 10px 30px; } #comment_login p { margin:0; padding:12px 0 11px 36px; line-height:100%; } #comment_login a { margin:0 0 0 20px; padding:0 0 0 20px; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow3.gif) no-repeat 10px 3px; } #guest_info { padding:0; width:100%; } #guest_info div { margin:0 0 12px 0; text-align:left; } #guest_info input { margin:0; padding:5px 0; border:1px solid #ccc; width:100%; background:#FFFFFF; color:#777; } #guest_info input:focus { } #guest_info label { display:block; margin:0 0 5px 0; padding:0 0 0 0; font-size:11px; color:#888;} #guest_info span { color:#666; margin:0 10px 0 0; } #comment_textarea textarea { margin:15px 0 0; width:100%; height:150px; border:1px solid #ccc; background:#FFFFFF; color:#777; font-size:11px; overflow:auto; } #comment_textarea textarea:focus { } #submit_comment_wrapper { text-align:center; } #submit_comment { background:#aaa; border:none; cursor:pointer; color:#FFFFFF; font-size:13px; width:200px; height:37px; margin:15px auto 0; display:block; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } #submit_comment:hover { } #input_hidden_field { display:none; } /* ----- password protected ----- */ .password_protected { text-align:center; margin:0 0 10px 0; padding:10px 20px; color:#FFFFFF; background:#3db4b2; } .password_protected p { font-size:12px; margin:0; } @media screen and (min-width:1159px) { /* ---------------------------------------------------------------------- pc style setting ---------------------------------------------------------------------- */ body { margin:0; padding:0; background:#fff; font-family: " メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif; color:#333; overflow-x:hidden; } /* layout */ #header_wrap { border-top:5px solid #222; width:100%; min-width:1150px; } #header { width:1150px; height:118px; margin:0 auto; position:relative; } #contents { width:1150px; margin:0 auto 70px; } #main_col { width:950px; float:left; margin:0; } #side_col { width:180px; float:right; margin:-41px 0 0 0; } #side_col.no_global_menu { margin:0; } #left_col { width:630px; float:left; margin:20px 0 0 0; } #right_col { width:300px; float:right; margin:20px 0 0 0; } /* no side */ .page-template-page-noside-php #global_menu { width:950px; } .page-template-page-noside-php #contents { width:950px; } .page-template-page-noside-php #left_col { float:none; width:950px; } /* headline */ .headline1 { margin:0; padding:0 15px; height:36px; line-height:36px;} .archive_headline { margin:0 0 20px 0; padding:0 15px; height:36px; line-height:36px; background:#aaa; color:#FFFFFF; font-size:14px; } .headline2 { margin:0; padding:0 15px; height:36px; line-height:36px; border:1px solid #ccc; font-size:15px; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/headline1.gif) repeat-x left bottom; } /* mobile banner */ #mobile_banner_top, #mobile_banner_bottom { display:none; } .pc_none { display: none !important; } /* ---------------------------------------------------------------------- header ---------------------------------------------------------------------- */ #logo { margin:0 0 6px 0; padding:0; line-height:100%; font-size:24px; font-weight:normal; } #logo_image #logo { position:absolute; } #logo a { color:#333; text-decoration:none; } #description { font-size:10px; color:#888; margin:0; padding:0; line-height:100%; font-weight:normal; } /* header menu */ #header_menu { float:left; margin:4px 20px 0 0; } #header_menu ul { margin:0; padding:0; font-size:11px; } #header_menu li { float:left; margin:0 0 0 20px; padding:0; } #header_menu li a { text-decoration:none; padding:0 0 0 11px; } #header_menu li a:hover { text-decoration:underline; } /* banner */ #header_banner { position:absolute; top:30px; right:360px; } /* search */ .search_area { width:330px; height:35px; position:absolute; right:0px; top:82px;} .search_area .searchKeyword input { font-size:12px; color:#6d7478; width:205px; height:26px; float:left; margin:5px 0 0 10px; padding:0; border:none; background:none; } .search_area #search_button input { cursor:pointer; float:right; height:35px; width:92px; line-height:42px; text-indent:150%; white-space:nowrap; overflow:hidden; display:block; border:none; } .search_area #search_button input:hover { background-position:left bottom; } /* global menu */ .menu_button { display:none; } #global_menu { height:41px; width:1150px; margin:0 auto; } #global_menu > ul { height:36px; width:950px; border-bottom:5px solid #222; margin:0 -30px 0 0; position:relative; } #global_menu > ul > li { float:left; margin:0 5px 0 0; font-size:1%; position:relative; } #global_menu > ul > li.last { margin:0 0 0 -10px; float:right; } #global_menu > ul > li a { background:#adb8bf; font-size:12px; font-weight:bold; text-align:center; text-decoration:none; color:#FFFFFF; margin:0; display:block; height:36px; line-height:36px; -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; } #global_menu > ul > li a:hover { background:#6e787e; } /* bread crumb */ #bread_crumb { margin:0; height:40px; line-height:40px; overflow:hidden; border:1px solid #ccc; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/bread_background.gif) repeat-x left bottom; padding:0 20px; } #bread_crumb li { float:left; height:40px; line-height:40px; font-size:12px; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/bread_arrow.gif) no-repeat right bottom; padding-right:30px; margin-right:20px; } #bread_crumb li.last { background:none; margin:0; padding:0; } #bread_crumb li a { color:#aaa; text-decoration:none; display:inline-block; } #bread_crumb li.home span { display:block; text-indent:-9999px; width:17px; height:16px; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/bread_home.gif) no-repeat left 1px; height:40px; line-height:40px; } #bread_crumb li.home a:hover span { background-position:left -39px; } /* ---------------------------------------------------------------------- index ---------------------------------------------------------------------- */ /* featured post */ #index_featured_post { background:#222; position:relative; width:950px; height:330px; overflow:hidden; } #main_slider { width:650px; height:330px; float:left; } #main_slider img { width:650px; height:330px; display:block; } #main_slider img:hover img { opacity:0.7; } #main_slider .caption { margin:0; background:rgba(0, 0, 0, 0.5); height:50px; width:610px; line-height:50px; padding:0 20px; color:#FFFFFF; display:block; font-size:14px; position:absolute; bottom:0px; left:0px; z-index:2; text-decoration:none; } #sub_slider { width:300px; float:right; margin:0; padding:0; } #sub_slider .item { height:82px; line-height:100%; margin:0; padding:0; border-bottom:1px dotted #555; cursor:pointer; -webkit-transition: background-color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out; } #sub_slider .item:hover, #sub_slider .item.slick-current { background:#444; } #sub_slider .image { float:left; margin:10px 15px 0 10px; } #sub_slider .image img { width:60px; height:60px; display:block; } #sub_slider .info { float:left; width:200px; margin:11px 0 0 0; } #sub_slider .title { clear:both; margin:0; padding:0; color:#FFFFFF; font-size:13px; line-height:170%; } #sub_slider p { float:left; color:#888; line-height:100%; font-size:11px; border-right:1px solid #888; margin:0 10px 5px 0; padding:0 10px 0 0; } #sub_slider p.category { border:none; margin:0; padding:0; } /* recent post */ #index_recent_post { margin:0 0 20px 0; overflow:hidden; } #index_recent_post ul { border-left:1px solid #ccc; border-right:1px solid #ccc; margin:0; padding:0; background:#f9f9f9; } #index_recent_post li { width:314px; height:95px; float:left; 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; } #index_recent_post li.odd { border-right:1px solid #ccc; width:313px; } #index_recent_post .image { float:left; margin:10px 10px 0 10px; display:block; background:#000; width:100px; height:75px; } #index_recent_post .image img { width:100px; height:75px; display:block; opacity:1; transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; -webkit-transform:rotate(0); -moz-transform: rotate(0); transform: rotate(0); } #index_recent_post .image:hover img { opacity:0.5; } #index_recent_post .info { float:left; width:180px; margin:10px 0 0 0; } #index_recent_post .date { margin:0 0 5px 0; padding:0; line-height:100%; font-size:12px; } #index_recent_post .title { margin:0; padding:0; font-size:13px; line-height:160%; height:60px; overflow:hidden; } #index_recent_post .title a { text-decoration:none; display:block; } #index_recent_post .title a:hover { text-decoration:underline; } /* PR post */ #index_pr_post { margin:0 0 20px 0; } #index_pr_post .headline1 { border-left:5px solid #d9d900; } #index_pr_post ul { margin:0; } #index_pr_post ul li { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; padding:10px 0; font-size:14px; } #index_pr_post a { text-decoration:none; color:#333; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow_yellow.gif) no-repeat left 5px; padding:0 0 0 12px; display:block; } #index_pr_post a:hover { text-decoration:underline; color:#9a9a00; } #index_pr_post ul li:last-child { background:none; padding-bottom:0; } /* category post */ .index_category_post { margin:0 0 20px 0; overflow:hidden; position:relative; } .index_category_post .post1 { float:left; width:312px; } .index_category_post .post1 .image { background:#000; display:block; width:280px; height:210px; margin:11px 0 15px 16px; } .index_category_post .post1 .image img { display:block; width:280px; height:210px; opacity:1; transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; -webkit-transform: rotate(0); -moz-transform:rotate(0); transform: rotate(0); } .index_category_post .post1 .image:hover img { opacity:0.5; } .index_category_post .post1 .date { margin:0 0 5px 16px; padding:0; line-height:100%; font-size:12px; } .index_category_post .post1 .title { margin:0 16px 12px; padding:0; font-size:15px; line-height:160%; max-height:50px; overflow:hidden; } .index_category_post .post1 .title a { text-decoration:none; display:block; } .index_category_post .post1 .title a:hover { text-decoration:underline; } .index_category_post .post1 .excerpt { margin:0 16px; padding:0; line-height:200%; font-size:12px; max-height:50px; overflow:hidden; } .index_category_post .post2 { float:right; width:315px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;} .index_category_post .post2 li { height:94px; } .index_category_post .post2 .image { width:100px; height:75px; display:block; float:left; margin:10px 10px 0 10px; background:transparent; } .index_category_post .post2 .image img { width:100px; height:auto; display:block; opacity:1; transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); } .index_category_post .post2 .image:hover img { opacity:0.5; } .index_category_post .post2 .info { float:left; width:180px; margin:10px 0 0 0; } .index_category_post .post2 .date { margin:0 0 5px 0; padding:0; line-height:100%; font-size:12px; } .index_category_post .post2 .title { margin:0; padding:0; font-size:13px; line-height:150%; height:58px; overflow:hidden; } .index_category_post .post2 .title a { text-decoration:none; display:block; } .index_category_post .post2 .title a:hover { text-decoration:underline; } .headline1 a { float:right; font-size:11px; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow1.png) no-repeat left 15px; text-decoration:none; color:#999; padding:0 0 0 12px; } /* ranking post */ #index_ranking_post { margin:0 0 20px 0; } #index_ranking_post .headline1 { border-left:5px solid #865fac; } #index_ranking_post ul { margin:0; } #index_ranking_post ul li { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; padding:10px 0; font-size:14px; } #index_ranking_post span { width:60px; font-weight:bold; color:#865fac; float:left; } #index_ranking_post a { width:565px; float:left; text-decoration:none; color:#333; display:block; } #index_ranking_post a:hover { text-decoration:underline; color:#865fac; } #index_ranking_post ul li:last-child { background:none; padding-bottom:0; } /* bottom banner */ #index_bottom_banner { margin:0 -28px 0 0; position:relative; } #index_bottom_banner li { float:left; margin:0 28px 10px 0; } #index_bottom_banner img { display:block; } /* ---------------------------------------------------------------------- archive ---------------------------------------------------------------------- */ #post_list { margin:0; padding:0; border:1px solid #ccc; background:#f9f9f9; } #post_list li { border-bottom:1px solid #ccc; padding:0 0 15px 0; } #post_list ul { margin:0; } #post_list ul li { border:none; padding:0; margin:0 0 10px 0; float:left; font-size:12px; line-height:100%; } #post_list .meta { margin:0 0 15px 0; } #post_list li.post_date { border-right:1px solid #aaa; margin:0 10px 10px 0; padding:0 10px 0 0; } #post_list li.post_author { margin:0 0 10px 0; padding:0; } #post_list li.post_category { border-right:1px solid #aaa; margin:0 10px 10px 0; padding:0 10px 0 0 ; } #post_list .image { width:280px; height:210px; background:transparent; display:block; float:left; margin:15px; } #post_list .image img { display:block; width:280px; height:auto; opacity:1; transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; -webkit-transform:rotate(0); -moz-transform: rotate(0); transform: rotate(0); } #post_list .image:hover img { opacity:0.5; } #post_list .info { float:left; width:300px; margin:15px 0 0 0; overflow:hidden; } #post_list .title { font-size:16px; margin:0 0 10px 0; line-height:160%; } #post_list .title a { text-decoration:none; display:block; } #post_list .title a:hover { text-decoration:underline; } #post_list .excerpt { font-size:12px; line-height:180%; margin:0 0 15px 0; } #post_list .bookmark { margin:0 0 -10px 0; } #post_list .bookmark li { float:none; display:inline-block; width:120px; margin:0 0 10px 0; } #post_list .bookmark li.social3 { width:60px; margin-right:-15px; position:relative;} /* Author page */ #author_post_list #post_list { border-top:none; } #author_profile_area { border:1px solid #ccc; margin:20px 0; padding:15px 15px 0; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#f9f9f9; } #author_avatar { float:left; margin:0 10px 20px 0; } #author_avatar img { width:70px; height:70px; display:block; border:none; padding:0; } #author_meta { float:left; width:505px; position:relative; } #author_name { margin:0 0 10px 0; font-size:14px; line-height:160%; background:#222; color:#FFFFFF; padding:7px 15px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } #author_name2 { margin:0 0 0 15px; font-size:10px; } #author_desc { font-size:12px; } /* Author list page */ #profile_author_list { margin:0; padding:0; } #profile_author_list li { border:1px solid #ccc; margin:20px 0; padding:15px 15px 0; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#f9f9f9; } .profile_author_avatar { float:left; margin:0 10px 20px 0; } .profile_author_avatar img { width:70px; height:70px; display:block; border:none; padding:0; } .profile_author_meta { float:left; width:505px; position:relative; } .profile_author_name { margin:0 0 10px 0; font-size:14px; line-height:160%; } .profile_author_name2 { margin:0 0 0 15px; font-size:10px; } .profile_author_link { color:#333; position:absolute; right:0px; top:0px; text-decoration:none; font-size:12px; background:#e8e8e8 url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow_right.gif) no-repeat 16px 9px; padding:5px 20px 5px 30px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .profile_author_link:hover { color:#FFFFFF; } .profile_author_desc { font-size:12px; } .profile_author_desc p { margin:0 0 10px 0; } /* News Press */ #news_list { margin:0; padding:0; list-style-type:none; } #news_list li { margin:0; padding:15px 0; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; } #news_list .news_date { font-size:12px; margin:0 0 7px 0; padding:0; line-height:100%; } #news_list .news_title { font-size:14px; margin:0; padding:0; } #news_list .news_title a { text-decoration:none; display:block; } #news_list .news_title a:hover { text-decoration:underline; } /* ---------------------------------------------------------------------- single post page ---------------------------------------------------------------------- */ #single_title { border:1px solid #ccc; overflow:hidden; } #single_title h1 { margin:0; font-size:16px; background:#ccc; color:#FFFFFF; padding:10px 15px; line-height:180%; } #single_meta { margin:0; font-size:12px; overflow:hidden; background:#f9f9f9; } #single_meta li { float:left; padding:10px 15px; margin:0 0 -1px 0; border-right:1px dotted #ccc; border-bottom:1px dotted #ccc; line-height:100%; } #single_meta li:last-child { border:none; } #single_meta li.post_category { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/icon_category.png) no-repeat 15px 11px; padding-left:31px; } #single_meta li.post_tag { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/icon_tag.png) no-repeat 15px 11px; padding-left:31px; } #single_meta li.post_comment { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/icon_comment.png) no-repeat 15px 9px; padding-left:31px; } #single_meta li.post_author { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/icon_author.png) no-repeat 15px 11px; padding-left:31px; } #news_title { border:1px solid #ccc; overflow:hidden; } #news_title h2 { margin:0; font-size:16px; background: #1ca2e6; color:#FFFFFF; padding:10px 15px; line-height:180%; } #news_title p { margin:0 15px; font-size:12px; overflow:hidden; } .post { padding:30px 0px 10px; } .post_image { text-align:center; margin:0 0 15px 0; } /* next page */ #post_pagination { margin:0 0 30px 0; } #post_pagination h5 { margin:0 10px 0 0; float:left; line-height:30px; font-size:12px; } #post_pagination a, #post_pagination p { float:left; display:inline-block; background:#eee; margin:0 5px 0 0; width:30px; height:30px; line-height:30px; text-align:center; text-decoration:none; color:#333; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; font-size:12px; } #post_pagination p { background:#999; color:#FFFFFF; } #post_pagination a:hover { background:#333; color:#FFFFFF; } /* bookmark */ .post .bookmark2 { clear:both; float:right; margin:5px 0 0 0; padding:0; list-style-type:none; } .post .bookmark2 li { background:none; padding:0; float:left; margin:0 0 0 10px; } /* banner */ #single_banner1 { text-align:center; margin:-10px 0 18px 0; } #single_banner2 { clear:both; text-align:center; padding:15px 0 10px 0; } /* author information */ #single_author { margin:0 0 20px; border:1px solid #ccc; padding:15px 15px 2px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius :4px; border-radius:4px; background:#f9f9f9; } #single_author_avatar { float:left; margin:0 10px 20px 0; } #single_author_avatar img { width:70px; height:70px; display:block; border:none; padding:0; } #single_author_meta { float:left; width:505px; position:relative; } #single_author_name { margin:0 0 10px 0; font-size:14px; line-height:160%; } #single_author_name2 { margin:0 0 0 15px; font-size:10px; } #single_author_link { color:#333; position:absolute; right:0px; top:0px; text-decoration:none; font-size:12px; background:#e8e8e8 url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow_right.gif) no-repeat 16px 9px; padding:5px 20px 5px 30px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } #single_author_link:hover { color:#FFFFFF; } #single_author_desc { padding:10px 0 0 0; font-size:12px; border-top:1px dotted #ccc; } #single_author_desc p { margin:0 0 10px 0; } /* author post */ #single_author_post { margin:0 0px 20px; } #single_author_post ul { margin:0; border:1px solid #ccc; border-top:none; background:#f9f9f9; } #single_author_post ul ul { margin:0 0 10px 0; border:none; } #single_author_post li { float:left; display:inline-block; margin:0 0 -1px 0; width:314px; height:105px; border-bottom:1px solid #ccc; } #single_author_post li.odd { border-right:1px solid #ccc; width:313px; } #single_author_post li li { color:#999; float:none; display:inline; margin:0 0 5px 0; width:auto; font-size:11px; line-height:110%; border:none; height:auto; width:auto; } #single_author_post li li.date { border-right:1px solid #ccc; margin:0 5px 0 0; padding:0 9px 0 0; } #single_author_post .image { } #single_author_post .image img { width:100px; height:auto; display:block; float:left; margin:15px; } #single_author_post .image:hover img { opacity:0.5; } #single_author_post .info { width:170px; float:left; margin:15px 0 0 0; overflow:hidden; } #single_author_post .title { font-size:13px; margin:0; } #single_author_post .title a { display:block; text-decoration:none; } #single_author_post li li a { color:#999; text-decoration:none; } #single_author_post a:hover { text-decoration:underline; } /* related post*/ #related_post { margin:0 0 20px 0; } #related_post ul { margin:0; border:1px solid #ccc; border-top:none; background:#f9f9f9; } #related_post li { float:left; margin:0; width:125px; height:170px; border-right:1px solid #ccc; padding-bottom:15px; overflow:hidden; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } #related_post li.num5 { border:none; width:124px; } #related_post .image { } #related_post .image img { width:100px; height:70px; display:block; margin:13px; } #related_post .image:hover img { opacity:0.5; } #related_post .title { font-size:12px; margin:0 13px; max-height:60px; overflow:hidden; } #related_post .title a { text-decoration:none; display:block; } #related_post .title a:hover { text-decoration:underline; } /* next prev post link */ #previous_next_post { margin:0 0 40px; padding:0; } #previous_next_post a { color:#333; text-decoration:none; line-height:140%; font-size:11px; padding:12px 0; } #previous_post a { margin:0; width:284px; float:left; padding-left:30px; background:#eee url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow_left.png) no-repeat 12px 16px; } #next_post a { margin:0; width:285px; float:right; text-align:right; padding-right:30px; background:#eee url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow_right.png) no-repeat 296px 16px; } #previous_next_post a:hover { color:#FFFFFF; } /* ---------------------------------------------------------------------- footer ---------------------------------------------------------------------- */ #return_top { z-index:10; position:fixed; right:20px; bottom:20px; margin:0; display:block; width:44px; height:44px; text-indent:-9999px; background:#222 url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/footer/return_top.png) no-repeat center; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } #return_top:hover { background-color:#0077b3 !important; opacity: 0.8 } /* footer widget */ #footer_widget_wrap { background:#f9f9f9; width:100%; min-width:1150px; } #footer_widget { width:1150px; margin:0 auto; padding:40px 0 0; } .footer_widget { width:250px; float:left; margin:0 50px 30px 0; font-size:11px; position: relative; } .footer_widget.right_widget { margin-right:0; } .footer_headline { font-size:14px; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; padding:0 0 7px 0; margin:0 0 12px 0; } .footer_widget ul { margin:0; } .footer_widget li ul { margin:10px 0 0 0; } .footer_widget li { line-height:170%; margin:0 0 10px 0; padding:0 0 0 9px; } .footer_widget a { } .footer_widget img { height:auto; max-width:100%; width:auto; } /* search */ .widget_search label { display:none; } .google_search #search_input, .widget_search #search-box, .widget_search #s { width:168px; height:33px; margin:0 -2px 5px 0; border:1px solid #ccc; background:#f2f2f2; padding:0 10px; box-shadow:2px 2px 3px 0px #ddd inset; } .google_search input#search_button, .widget_search #search-btn input, .widget_search #searchsubmit { border:none; width:80px; height:35px; background:#bbb; color:#FFFFFF; cursor:pointer; display:block; float:right; } .google_search input#search_button:hover, .widget_search #search-btn input:hover, .widget_search #searchsubmit:hover { background:#666; color:#FFFFFF; } } @media screen and (max-width:1158px) { /* ---------------------------------------------------------------------- smart phone setting ---------------------------------------------------------------------- */ body { -webkit-text-size-adjust:100%; margin:0; padding:0; font-family: " メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif; width:100%; position:relative; color:#333; background:#FFFFFF; } /* layout */ #contents { width:100%; } #main_col { padding:0 20px 20px; } #left_col { } #right_col { margin-top: 20px; } #side_col { } .no_side #main_col { } #right_col .side_widget:last-child { margin:0; } /* headline */ .headline1 { height:42px; line-height:42px; } .archive_headline { margin:0 0 20px -20px; padding:0 20px; height:50px; line-height:50px; background:#aaa; color:#FFFFFF; font-size:14px; width: 100%; } .headline2 { margin:0; padding:0 15px; height:36px; line-height:36px; border:1px solid #ccc; font-size:15px; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/headline1.gif) repeat-x left bottom; } /* mobile banner */ #mobile_banner_top { padding:15px; text-align:center; background:#FFFFFF; } #mobile_banner_top img { display:block; height:auto; max-width:100%; width:auto; margin:0 auto; } #mobile_banner_bottom { padding:0 0 30px; text-align:center; } #mobile_banner_bottom img { display:block; height:auto; max-width:100%; width:auto; margin:0 auto; } /* ---------------------------------------------------------------------- index ---------------------------------------------------------------------- */ #index_featured_post { margin:0 0 25px -20px; width: calc(100% + 40px); } #main_slider { position:relative; width:100%; background:none; padding:0; margin-bottom:15px; } #main_slider img { width:100%; height:auto; display:block; } #main_slider img:hover img { opacity:0.7; } #main_slider .caption { margin:0; background:rgba(0, 0, 0, 0.5); height:50px; width:90%; line-height:50px; padding:0 5%; color:#FFFFFF; display:block; font-size:12px; position:absolute; bottom:0px; left:0px; z-index:2; text-decoration:none; text-align:center; } #sub_slider { display:none; } /* recent post */ #index_recent_post { margin:0 0 15px 0; } #index_recent_post ul { margin:0; padding:0; background:#f9f9f9; } #index_recent_post li { border:1px solid #ccc; border-top:none; padding:15px; } #index_recent_post .image { float:left; width:30%; margin:0 5% 0 0; } #index_recent_post .image img { width:100%; height:auto; display:block; } #index_recent_post .image:hover img { opacity:0.5; } #index_recent_post .info { float:left; width:65%; margin:0; } #index_recent_post .date { margin:0 0 5px 0; padding:0; line-height:100%; font-size:12px; } #index_recent_post .title { margin:0; padding:0; font-size:12px; line-height:160%; } #index_recent_post .title a { text-decoration:none; display:block; } #index_recent_post .title a:hover { text-decoration:underline; } .blog_archive_link{ text-align: center;} .blog_archive_link a{ display: inline-block; width: 150px; height: 40px; line-height: 40px; background: #000; color: #FFFFFF; text-decoration: none; font-size: 12px; margin: 20px auto 10px; } /* PR post */ #index_pr_post { margin:0 0 15px 0; } #index_pr_post .headline1 { border-left:5px solid #d9d900; } #index_pr_post ul { margin:0; } #index_pr_post ul li { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; padding:10px 0; font-size:14px; } #index_pr_post a { text-decoration:none; color:#333; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow_yellow.gif) no-repeat left 5px; padding:0 0 0 12px; display:block; } #index_pr_post a:hover { text-decoration:underline; color:#9a9a00; } #index_pr_post ul li:last-child { background:none; padding-bottom:0; } /* category post */ .index_category_post .post1 { border:1px solid #ccc; border-top:none; padding:15px; margin:0; } .index_category_post .post1 .image img { display:block; width:100%; height:auto; margin-bottom:15px; } .index_category_post .post1 .image:hover img { opacity:0.5; } .index_category_post .post1 .date { margin:0 0 5px 0; padding:0; line-height:100%; font-size:12px; } .index_category_post .post1 .title { margin:0 0 10px; padding:0; font-size:14px; line-height:160%; } .index_category_post .post1 .title a { text-decoration:none; display:block; } .index_category_post .post1 .title a:hover { text-decoration:underline; } .index_category_post .post1 .excerpt { margin:0; padding:0; line-height:200%; font-size:12px; } .index_category_post .post2 { margin:0; padding:0; } .index_category_post .post2 .image { float:left; width:30%; margin:0 3% 0 0; } .index_category_post .post2 .image img { width:100%; height:auto; display:block; } .index_category_post .post2 .image:hover img { opacity:0.5; } .index_category_post .post2 .info { float:left; width:65%; margin:0; } .index_category_post .post2 .date { margin:0 0 5px 0; padding:0; line-height:100%; font-size:12px; } .index_category_post .post2 .title { margin:0; padding:0; font-size:12px; line-height:160%; } .index_category_post .post2 .title a { text-decoration:none; display:block; } .index_category_post .post2 .title a:hover { text-decoration:underline; } .headline1 a { float:right; font-size:12px; background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow1.png) no-repeat left 15px; text-decoration:none; color:#999; padding:0 0 0 12px; } /* ranking post */ #index_ranking_post { margin:0 0 20px 0; } #index_ranking_post .headline1 { border-left:5px solid #865fac; } #index_ranking_post ul { margin:0; } #index_ranking_post ul li { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/dot1.gif) repeat-x left bottom; padding:10px 0; font-size:12px; } #index_ranking_post span { width:60px; font-weight:bold; color:#865fac; display:block; font-size: 12px; } #index_ranking_post a { text-decoration:none; color:#333; display:block; } #index_ranking_post a:hover { text-decoration:underline; color:#865fac; } #index_ranking_post ul li:last-child { background:none; padding-bottom:0; } /* bottom banner */ #index_bottom_banner { margin:0 0 20px 0; text-align:center; } #index_bottom_banner li { margin:0 0 10px 0; } #index_bottom_banner img { display:block; margin:0 auto; max-width:100%; height:auto; } /* ---------------------------------------------------------------------- header ---------------------------------------------------------------------- */ #header_menu { display:none; } .search_area { display:none; } /* logo */ #logo_image { float:left; margin:10px 15px; font-size:21px; line-height:140%; } #logo_image a { text-decoration:none; } #logo_image a:hover { text-decoration:underline; } #logo_image img { display:none; } #logo_image a:before { content:attr(data-label); } #logo_image_mobile{ display: table-cell; vertical-align: middle; height: 60px; padding-left: 15px; } #logo_image_mobile a{ display: inline-block; height: 20px; margin: 0; text-decoration:none; } #logo_image_mobile img{ width: auto; max-height: 100%; } /* news ticker */ #news_ticker { display:none; } a.menu_button:before{ font-family: 'design_plus'; color: #888; position: absolute; top: 17px; left: 19px; font-size: 18px; width: 24px; height: 24px; line-height: 24px; content: '\f0c9'; text-align: center; } a.menu_button{ position: absolute; right: 0px; top: 0px; z-index: 9; display: block; font-size: 11px; color: #333; width: 60px; height: 60px; line-height: 56px; text-decoration: none; } a.menu_button:hover:before{ color: #FFFFFF; } a.menu_button:hover{ background: #333; } /* banner */ #header_banner { display:none; } /* bread crumb */ #bread_crumb { margin:0 0 0 -20px; padding:12px 20px; width: 100%; background: #eee; } /*#bread_crumb li { float:left; font-size:12px; background:url(img/common/arrow3.gif) no-repeat right; padding:0 15px 0 0; margin:0 10px 0 0; } #bread_crumb li.last { background:none; margin:0; padding:0; } #bread_crumb li a { text-decoration:none; display:inline-block; }*/ #bread_crumb li.home a { float:left; height:15px; width:0px; line-height:15px; display:block; position:relative; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } #bread_crumb li.home a span { text-indent:100%; white-space:nowrap; overflow:hidden; display:block; } #bread_crumb li.home a:before { font-family:'design_plus'; color:#000; font-size:12px; display:block; position:absolute; top:0px; left:0px; width:17px; height:17px; line-height:17px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #bread_crumb li.home:after { display:none; } #bread_crumb li.home a:before { content:'\e90c'; } #bread_crumb li.home a:hover:before { color:#FFFFFF; } #bread_crumb li { color:#000; font-size:12px; display:inline; padding:0 15px 0 0; margin:0 0 0 15px; line-height:160%; position:relative; } #bread_crumb li:after { font-family:'design_plus'; content:'\e910'; color:#333; font-size:9px; display:block; position:absolute; left:-20px; top:-1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #bread_crumb li a { color:#000; text-decoration: none; } /* ---------------------------------------------------------------------- single post page ---------------------------------------------------------------------- */ #single_title { overflow:hidden; margin:0 0 0 -20px; width: calc(100% + 40px); } #single_title h1 { margin:0; height: auto; line-height: 1.8; font-size:14px; background:#aaa; color:#FFFFFF; padding:10px 20px; } #single_meta { margin:0; padding:3px 15px; font-size:12px; overflow:hidden; } #single_meta li { float:left; padding:8px 0; margin:0 15px 0 0; line-height:100%; } #single_meta li.post_category { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/icon_category.png) no-repeat left 7px; padding-left:16px; } #single_meta li.post_tag { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/icon_tag.png) no-repeat left 7px; padding-left:16px; } #single_meta li.post_comment { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/icon_comment.png) no-repeat left 7px; padding-left:18px; } #single_meta li.post_author { background:url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/icon_author.png) no-repeat left 7px; padding-left:18px; } #single_meta li a{ text-decoration: none; } #news_title { border:1px solid #ccc; overflow:hidden; } #news_title h2 { margin:0; font-size:16px; background:#ccc; color:#FFFFFF; padding:10px 15px; line-height:180%; } #news_title p { margin:0 15px; font-size:12px; overflow:hidden; } .post { padding:15px 0 10px; } .post_image { text-align:center; margin:-10px 0 15px -20px; width: calc(100% + 40px); height: auto; } /* bookmark */ .post .bookmark2 { clear:both; float:right; margin:5px 0 0 0; padding:0; list-style-type:none; } .post .bookmark2 li { background:none; padding:0; float:left; margin:0 0 0 10px; } /* banner */ #single_banner1 { text-align:center; margin:-5px 0 15px 0; } #single_banner2 { clear:both; text-align:center; padding:10px 0 10px 0; } /* author information */ #single_author { margin:0 0 20px; border:1px solid #ccc; padding:15px 15px 2px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#f9f9f9; position:relative; } #single_author_avatar { } #single_author_avatar img { width:70px; height:70px; display:block; border:none; padding:0 0 15px 0; margin:0 auto; float:none; } #single_author_meta { width:100%; text-align:center; } #single_author_name { margin:0 0 10px 0; font-size:14px; line-height:160%; } #single_author_name a{ text-decoration: none; } #single_author_name2 { margin:0; font-size:12px; display:block; } #single_author_link { color:#333; text-decoration:none; font-size:12px; background:#e8e8e8; padding:5px 25px; -moz-border-radius:20px; -khtml-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; margin:0 auto 15px; display:inline-block; } #single_author_link:hover { color:#FFFFFF; } #single_author_desc { padding:15px 0 0 0; margin:0; font-size:12px; border-top:1px dotted #ccc; text-align:left; } #single_author_desc p { margin:0 0 10px 0; } .author_social_link li{ float: none; display: inline-block; margin: 0; } /* author post */ #single_author_post { margin:0 0 20px 0; } #single_author_post ul { margin:0; padding:0; background:#f9f9f9; } #single_author_post li { border:1px solid #ccc; border-top:none; padding:15px; } #single_author_post ul li li { border:none; padding:0; margin:0 0 7px 0; float:left; font-size:12px; line-height:110%; } #single_author_post ul li li.date { display:block; margin:0 10px 0 0; padding:0 10px 0 0; border-right:1px solid #ccc; } #single_author_post .image { float:left; width:30%; margin:0 5% 0 0; } #single_author_post .image img { width:100%; height:auto; display:block; } #single_author_post .image:hover img { opacity:0.5; } #single_author_post .info { float:left; width:65%; margin:0; } #single_author_post .title { margin:0; padding:0; font-size:13px; line-height:160%; } #single_author_post .title a { text-decoration:none; display:block; } #single_author_post .title a:hover { text-decoration:underline; } /* related post */ #related_post { margin:0 0 20px 0; } #related_post ul { margin:0; padding:0; background:#f9f9f9; } #related_post li { border:1px solid #ccc; border-top:none; padding:15px; } #related_post .image { float:left; width:30%; margin:0 5% 0 0; } #related_post .image img { width:100%; height:auto; display:block; } #related_post .image:hover img { opacity:0.5; } #related_post .title { float:left; width:65%; margin:0; font-size:13px; line-height:160%; } #related_post .title a { text-decoration:none; display:block; } #related_post .title a:hover { text-decoration:underline; } /* comment box-sizing: content-box;　*/ #comment_header{ margin: 0; } #comment_header_right { float:none; position:relative; margin:0; } #comment_header_right li { float:none; } #comment_header_right li a, #comment_header_right li p { width:calc(50% - 2px); margin:0 0 -1px 0; float:right; } #comment_header_right li:nth-child(even) a, #comment_header_right li:nth-child(even) p { border-right: none; width:calc(50% - 1px); } .comment-meta { margin:0 0 10px 0; } .comment-meta-left { float:left; width:auto; min-width:150px; } .comment-content { padding:0; margin:0; } #submit_comment { width:100%; } #trackback_url_area input { padding:5px 2%; width:96%; border:none; background:#eee; } #comment_area, #trackback_area{ margin: -1px 0 20px; } .comment-content .no_comment{ padding: 0; } /* ---------------------------------------------------------------------- archive ---------------------------------------------------------------------- */ #post_list { background:#f9f9f9; border:1px solid #ccc; overflow:hidden; margin:0; padding: 20px; } #post_list li { border-bottom:1px dotted #000; padding:0 0 20px; margin-bottom:20px; } #post_list ul { overflow:hidden; margin:0 0 5px 0; } #post_list ul li { border:none; padding:0; margin:0 0 7px 0; float:left; font-size:12px; line-height:110%; } #post_list ul li.post_date { display:block; margin:0 10px 0 0; padding:0 10px 0 0; border-right:1px solid #ccc; } #post_list ul li.post_author { display:block; margin:0 0 0 10px; padding:0 0 0 10px; border-left:1px solid #ccc; } #post_list li:last-child{ margin-bottom: 0; padding-bottom: 0; border: none; } #post_list .info { } #post_list .title { font-size:14px; margin:0 0 10px 0; } #post_list .title a { display:block; text-decoration: none; } #post_list .excerpt { font-size:12px; line-height:160%; margin:0; } #post_list .link { font-size:12px; display:block; background:url(img/common/arrow1.gif) no-repeat left top; padding:0 0 0 30px; height:13px; line-height:13px; margin:0 0 20px 0; } #post_list .image img { display:block; margin:0 auto 15px; height:auto; width:100%; } #post_list .bookmark { margin:0 0 -10px 0; } #post_list .bookmark li { border:none; padding:0; margin:0 5px 0 0; height:30px; } #post_list .bookmark li.social1 { width:140px; } /* Author page */ #author_post_list #post_list { border-top:none; } #author_profile_area { border:1px solid #ccc; margin:20px 0; padding:15px 15px 0; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#f9f9f9; } #author_avatar { float:left; width:15%; margin:0 5% 20px 0; } #author_avatar img { width:100%; height:auto; display:block; border:none; padding:0; } #author_meta { } #author_name { float:left; position:relative; width:75%; margin:0; font-size:18px; line-height:160%; } #author_name2 { margin:0 0 0 15px; font-size:12px; } #author_desc { clear:both; border-top:1px dotted #aaa; padding:10px 0 0 0; font-size:12px; } /* Author list page */ #profile_author_list { margin:0; padding:0; } #profile_author_list li { border:1px solid #ccc; margin:20px 0; padding:15px 15px 0; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#f9f9f9; } .profile_author_avatar { float:left; width:15%; margin:0 5% 20px 0; } .profile_author_avatar img { width:100%; height:auto; display:block; border:none; padding:0; } .profile_author_meta_top { float:left; position:relative; width:75%; margin:-2px 0 15px 0; } .profile_author_name { margin:0 0 6px 0; font-size:16px; line-height:130%; } .profile_author_name2 { margin:0; font-size:12px; display:block; } .profile_author_link { color:#333; text-decoration:none; font-size:12px; background:#e8e8e8 url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/arrow_right.png) no-repeat 16px 9px; padding:5px 20px 5px 30px; -moz-border-radius:20px; -khtml-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; } .profile_author_link:hover { color:#FFFFFF; } .profile_author_desc { clear:both; border-top:1px dotted #aaa; padding:5px 0 0 0; font-size:12px; } .profile_author_desc p { margin:0 0 10px 0; } /* page nav */ .page_navi { margin:20px 0 0; } .page_navi h4 { display: none; } .page_navi ul { margin:0; } .page_navi li { float:left; } .page_navi a, .page_navi a:hover, .page_navi span { text-decoration:none; color:#FFFFFF; font-size:12px; padding:13px 15px; line-height:100%; margin:0 4px 4px 0; background:#999; display:block; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } .page_navi a:hover { color:#FFFFFF; background:#3F7985; text-decoration:none; } .page_navi span.dots { background:none; } .page_navi span.current { color:#FFFFFF; background:#333; } .page_navi p.back { margin:0; text-align: center; } .page_navi p.back a, .page_navi p.back a:hover { display:inline-block; padding:0; width: 150px; height: 40px; line-height: 40px; background: #000; border-radius: 0; } /* 404 not found */ #not_found .search_area { margin:0 0 20px 0; } #not_found #search_input { float:left; margin:0 5px 0 0; border:1px solid #ccc; background:#f2f2f2; width:260px; height:33px; position:relative; padding:0 10px; box-shadow:2px 2px 3px 0px #ddd inset; } #not_found .back { margin:0; line-height:100%; } #not_found .back a { background:url(img/common/arrow1.gif) no-repeat left; padding:0 0 0 28px; } /* ---------------------------------------------------------------------- side ---------------------------------------------------------------------- */ /* search */ /*.widget_search #search-box, .widget_search #s { width:65%; margin:0 0px 5px 0; } .widget_search #search-btn input, .widget_search #searchsubmit { width:25%; }*/ /* search */ .widget_search label { display:none; } .widget_search #search-box, .widget_search #s, .google_search #search_input { width:230px; height:33px; margin:0 0 10px 0; border:1px solid #ccc; background:#f2f2f2; padding:0 10px; box-shadow:2px 2px 3px 0px #ddd inset; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .widget_search #search-btn input, .widget_search #searchsubmit, .google_search #search_button { border:none; float:right; background:#ccc url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/icon_search.png) no-repeat center; height:35px; width:35px; text-indent:-9999px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .widget_search #search-btn input:hover, .widget_search #searchsubmit:hover, .google_search #search_button:hover { cursor:pointer; } .widget_search #search-btn input:hover, .widget_search #searchsubmit:hover{ background:#ccc url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/common/icon_search.png) no-repeat center; } .google_search { } /* google search, search */ .google_search form, .widget_search form{ margin: 0; } .google_search #search_input, .widget_search #s { width:calc(100% - 62px); margin:0; border-radius: 0; height: 38px; } .google_search input#search_button, .widget_search #searchsubmit { width:40px; height: 40px; border-radius: 0; background-color: #000; } /* ---------------------------------------------------------------------- footer ---------------------------------------------------------------------- */ #footer_wrap{ padding: 25px 20px; background: #f2f2f2; } /* widget area */ #footer_widget_wrap { padding:20px 20px 0; background:#f2f2f2; } #footer_widget { margin:0; } .footer_widget { margin:0 0 30px 0; font-size:12px; position: relative; } .footer_widget:last-child { margin:0; } .footer_headline { font-size:14px; border-bottom:1px dotted #aaa; padding:0 0 7px 0; margin:0 0 12px 0; } .footer_widget ul { margin:0; } .footer_widget li ul { margin:10px 0 0 0; } .footer_widget li { line-height:170%; margin:0 0 10px 0; padding:0 0 0 9px; } .footer_widget a { } .footer_widget img { height:auto; max-width:100%; width:auto; } /* footer menu */ #footer_menu_area { background:#f2f2f2; border-top:none; padding: 0; } #footer_menu { margin: 0 0 30px;} #footer_menu ul { margin:0; padding:0; font-size:12px; overflow:hidden; display: flex; flex-wrap:wrap; } #footer_menu li { margin:0 5px 0 0; padding:0; width: calc(50% - 5px); } #footer_menu li:nth-child(2n) { margin:0 0 0 5px; } #footer_menu li a { text-decoration:none; display:block; border-bottom:none; padding:5px 0; margin:0; } #footer_menu li a:hover { color:#333; } /* return_top */ #return_top { position:fixed; bottom:0; right:0; display:block; text-indent:100%; overflow:hidden; white-space:nowrap; width:50px; height:50px; margin:0; padding:0; background:#333 url(//21248701.fs1.hubspotusercontent-na1.net/hubfs/21248701/raw_assets/public/lp_themes/japanese_blog_media/library/img/footer/return_top.png) no-repeat center; border-radius:0; } #return_top:hover { background-color:#003d53; } @media screen and (max-width:768px) { @charset "UTF-8"; /** * スマホ用固定フッターバーの設定 */ @font-face { font-family: 'design_plus'; src: url('../fonts/design_plus.eot?v=1.3'); src: url('../fonts/design_plus.eot?v=1.3#iefix') format('embedded-opentype'), url('../fonts/design_plus.woff?v=1.3') format('woff'), url('../fonts/design_plus.ttf?v=1.3') format('truetype'), url('../fonts/design_plus.svg?v=1.3#design_plus') format('svg'); font-weight: normal; font-style: normal; } .icon-file-text:before { content: "\f15c"; } .icon-share-alt:before { content: "\f1e0"; } .icon-phone:before { content: "\f095"; } .icon-envelope:before { content: "\f0e0"; } .icon-tag:before { content: "\f02b"; } .icon-pencil:before { content: "\f040"; } .icon-close:before { content: "\e91a"; font-family: 'design_plus' !important; } .dp-footer-bar { background: #FFFFFFfff; border-top: 1px solid #ddd; display: flex; flex-wrap: wrap; font-size: 10px; position: fixed; bottom: 0; table-layout: fixed; text-align: center; width: 100%; z-index: 9998; margin: 0; } .dp-footer-bar a { display: block; padding: 10px 0; text-decoration: none; } .dp-footer-bar-item { flex: 1; } .dp-footer-bar-item + .dp-footer-bar-item { border-left: 1px solid #ddd; } .dp-footer-bar-item:only-child .dp-footer-bar-icon { display: block; position: relative; } .dp-footer-bar-item:only-child .dp-footer-bar-icon:before { position: absolute; right: 15px; } .dp-footer-bar-icon:before { display: block; font-family: "design_plus"; font-size: 16px; margin-bottom: .5em; } .modal-overlay { background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } .modal-content { margin: auto; position: fixed; bottom: 20%; left: 0; right: 0; width: 209px; z-index: 9999; } .modal-close:before { color: #FFFFFF; font-size: 32px; position: absolute; bottom: 20%; right: 0; text-align: center; width: 50px; } .share { text-align: center; } .share-button { float: left; vertical-align: center; width: 50px; height: 50px; } .share-button--rounded-square { border-radius: 2px; overflow: hidden; } .share-button + .share-button { margin-left: 3px; } .share-button a { display: block; position: relative; width: 100%; height: 100%; } .share-button a img { width:100%; height:auto; } } body { font-size: 16px; } a:hover, #index_featured_post .post2 h4.title a:hover, #index_featured_post a, #logo a:hover, #footer_logo_text a:hover { color: #0077b3; } .pc #global_menu li a, .archive_headline, .page_navi a:hover:hover, #single_title h2, #submit_comment:hover, #author_link:hover, #previous_next_post a:hover, #news_title h2, .profile_author_link:hover, #return_top, .author_social_link li.author_link a { background-color: #0077b3; } #comment_textarea textarea:focus, #guest_info input:focus { border-color: #0077b3; } #index_featured_post .post2 h4.title a:hover, #index_featured_post a:hover { color: #57bdcc; } .pc #global_menu li a:hover, #return_top:hover, .author_social_link li.author_link a:hover { background-color: #57bdcc; } .pc #global_menu ul li.menu-category-12 a { background: #c97a37; } .pc #global_menu ul li.menu-category-12 a:hover { background: #db9c5c; } .flex-control-nav p span.category-link-12 { color: #c97a37; } #index-category-post-12 .headline1 { border-left: 5px solid #c97a37; } #index-category-post-12 a:hover { color: #c97a37; } .category-12 a:hover { color: #c97a37; } .category-12 .archive_headline { background: #c97a37; } .category-12 #post_list a:hover { color: #c97a37; } .category-12 .post a { color: #c97a37; } .category-12 .post a:hover { color: #db9c5c; } .category-12 .page_navi a:hover { color: #FFFFFF; background: #c97a37; } .category-12 #guest_info input:focus { border: 1px solid #c97a37; } .category-12 #comment_textarea textarea:focus { border: 1px solid #c97a37; } .category-12 #submit_comment:hover { background: #c97a37; } .category-12 #previous_next_post a:hover { background-color: #c97a37; } .category-12 #single_author_link:hover { background-color: #c97a37; } .category-12 #single_author_post li li a:hover { color: #c97a37; } .category-12 #post_pagination a:hover { background-color: #c97a37; } .category-12 #single_title h2 { background: #c97a37; } .category-12 .author_social_link li.author_link a { background-color: #c97a37; } .category-12 .author_social_link li.author_link a:hover { background-color: #db9c5c; } .pc #global_menu ul li.menu-category-10 a { background: #8da64a; } .pc #global_menu ul li.menu-category-10 a:hover { background: #abc96d; } .flex-control-nav p span.category-link-10 { color: #8da64a; } #index-category-post-10 .headline1 { border-left: 5px solid #8da64a; } #index-category-post-10 a:hover { color: #8da64a; } .category-10 a:hover { color: #8da64a; } .category-10 .archive_headline { background: #8da64a; } .category-10 #post_list a:hover { color: #8da64a; } .category-10 .post a { color: #8da64a; } .category-10 .post a:hover { color: #abc96d; } .category-10 .page_navi a:hover { color: #FFFFFF; background: #8da64a; } .category-10 #guest_info input:focus { border: 1px solid #8da64a; } .category-10 #comment_textarea textarea:focus { border: 1px solid #8da64a; } .category-10 #submit_comment:hover { background: #8da64a; } .category-10 #previous_next_post a:hover { background-color: #8da64a; } .category-10 #single_author_link:hover { background-color: #8da64a; } .category-10 #single_author_post li li a:hover { color: #8da64a; } .category-10 #post_pagination a:hover { background-color: #8da64a; } .category-10 #single_title h2 { background: #8da64a; } .category-10 .author_social_link li.author_link a { background-color: #8da64a; } .category-10 .author_social_link li.author_link a:hover { background-color: #abc96d; } .pc #global_menu ul li.menu-category-11 a { background: #546696; } .pc #global_menu ul li.menu-category-11 a:hover { background: #6a80ad; } .flex-control-nav p span.category-link-11 { color: #546696; } #index-category-post-11 .headline1 { border-left: 5px solid #546696; } #index-category-post-11 a:hover { color: #546696; } .category-11 a:hover { color: #546696; } .category-11 .archive_headline { background: #546696; } .category-11 #post_list a:hover { color: #546696; } .category-11 .post a { color: #546696; } .category-11 .post a:hover { color: #6a80ad; } .category-11 .page_navi a:hover { color: #FFFFFF; background: #546696; } .category-11 #guest_info input:focus { border: 1px solid #546696; } .category-11 #comment_textarea textarea:focus { border: 1px solid #546696; } .category-11 #submit_comment:hover { background: #546696; } .category-11 #previous_next_post a:hover { background-color: #546696; } .category-11 #single_author_link:hover { background-color: #546696; } .category-11 #single_author_post li li a:hover { color: #546696; } .category-11 #post_pagination a:hover { background-color: #546696; } .category-11 #single_title h2 { background: #546696; } .category-11 .author_social_link li.author_link a { background-color: #546696; } .category-11 .author_social_link li.author_link a:hover { background-color: #6a80ad; } .pc #global_menu ul li.menu-category-5 a { background: #3d7bac; } .pc #global_menu ul li.menu-category-5 a:hover { background: #5a8fb8; } .flex-control-nav p span.category-link-5 { color: #3d7bac; } #index-category-post-5 .headline1 { border-left: 5px solid #3d7bac; } #index-category-post-5 a:hover { color: #3d7bac; } .category-5 a:hover { color: #3d7bac; } .category-5 .archive_headline { background: #3d7bac; } .category-5 #post_list a:hover { color: #3d7bac; } .category-5 .post a { color: #3d7bac; } .category-5 .post a:hover { color: #5a8fb8; } .category-5 .page_navi a:hover { color: #FFFFFF; background: #3d7bac; } .category-5 #guest_info input:focus { border: 1px solid #3d7bac; } .category-5 #comment_textarea textarea:focus { border: 1px solid #3d7bac; } .category-5 #submit_comment:hover { background: #3d7bac; } .category-5 #previous_next_post a:hover { background-color: #3d7bac; } .category-5 #single_author_link:hover { background-color: #3d7bac; } .category-5 #single_author_post li li a:hover { color: #3d7bac; } .category-5 #post_pagination a:hover { background-color: #3d7bac; } .category-5 #single_title h2 { background: #3d7bac; } .category-5 .author_social_link li.author_link a { background-color: #3d7bac; } .category-5 .author_social_link li.author_link a:hover { background-color: #5a8fb8; } .pc #global_menu ul li.menu-category-4 a { background: #7b93a0; } .pc #global_menu ul li.menu-category-4 a:hover { background: #8da9b8; } .flex-control-nav p span.category-link-4 { color: #7b93a0; } #index-category-post-4 .headline1 { border-left: 5px solid #7b93a0; } #index-category-post-4 a:hover { color: #7b93a0; } .category-4 a:hover { color: #7b93a0; } .category-4 .archive_headline { background: #7b93a0; } .category-4 #post_list a:hover { color: #7b93a0; } .category-4 .post a { color: #7b93a0; } .category-4 .post a:hover { color: #8da9b8; } .category-4 .page_navi a:hover { color: #FFFFFF; background: #7b93a0; } .category-4 #guest_info input:focus { border: 1px solid #7b93a0; } .category-4 #comment_textarea textarea:focus { border: 1px solid #7b93a0; } .category-4 #submit_comment:hover { background: #7b93a0; } .category-4 #previous_next_post a:hover { background-color: #7b93a0; } .category-4 #single_author_link:hover { background-color: #7b93a0; } .category-4 #single_author_post li li a:hover { color: #7b93a0; } .category-4 #post_pagination a:hover { background-color: #7b93a0; } .category-4 #single_title h2 { background: #7b93a0; } .category-4 .author_social_link li.author_link a { background-color: #7b93a0; } .category-4 .author_social_link li.author_link a:hover { background-color: #8da9b8; } .pc #global_menu ul li.menu-category-6 a { background: #538b6e; } .pc #global_menu ul li.menu-category-6 a:hover { background: #6f9e82; } .flex-control-nav p span.category-link-6 { color: #538b6e; } #index-category-post-6 .headline1 { border-left: 5px solid #538b6e; } #index-category-post-6 a:hover { color: #538b6e; } .category-6 a:hover { color: #538b6e; } .category-6 .archive_headline { background: #538b6e; } .category-6 #post_list a:hover { color: #538b6e; } .category-6 .post a { color: #538b6e; } .category-6 .post a:hover { color: #6f9e82; } .category-6 .page_navi a:hover { color: #FFFFFF; background: #538b6e; } .category-6 #guest_info input:focus { border: 1px solid #538b6e; } .category-6 #comment_textarea textarea:focus { border: 1px solid #538b6e; } .category-6 #submit_comment:hover { background: #538b6e; } .category-6 #previous_next_post a:hover { background-color: #538b6e; } .category-6 #single_author_link:hover { background-color: #538b6e; } .category-6 #single_author_post li li a:hover { color: #538b6e; } .category-6 #post_pagination a:hover { background-color: #538b6e; } .category-6 #single_title h2 { background: #538b6e; } .category-6 .author_social_link li.author_link a { background-color: #538b6e; } .category-6 .author_social_link li.author_link a:hover { background-color: #6f9e82; } .pc #global_menu ul li.menu-category-1 a { background: #bb6969; } .pc #global_menu ul li.menu-category-1 a:hover { background: #c27e7e; } .flex-control-nav p span.category-link-1 { color: #bb6969; } #index-category-post-1 .headline1 { border-left: 5px solid #bb6969; } #index-category-post-1 a:hover { color: #bb6969; } .category-1 a:hover { color: #bb6969; } .category-1 .archive_headline { background: #bb6969; } .category-1 #post_list a:hover { color: #bb6969; } .category-1 .post a { color: #bb6969; } .category-1 .post a:hover { color: #c27e7e; } .category-1 .page_navi a:hover { color: #FFFFFF; background: #bb6969; } .category-1 #guest_info input:focus { border: 1px solid #bb6969; } .category-1 #comment_textarea textarea:focus { border: 1px solid #bb6969; } .category-1 #submit_comment:hover { background: #bb6969; } .category-1 #previous_next_post a:hover { background-color: #bb6969; } .category-1 #single_author_link:hover { background-color: #bb6969; } .category-1 #single_author_post li li a:hover { color: #bb6969; } .category-1 #post_pagination a:hover { background-color: #bb6969; } .category-1 #single_title h2 { background: #bb6969; } .category-1 .author_social_link li.author_link a { background-color: #bb6969; } .category-1 .author_social_link li.author_link a:hover { background-color: #c27e7e; } .LP-Google-Search-Result .Wrap { min-height: 200px; } .LP-Google-Search-Result .gsc-adBlock { display: none !important; } .LP-Google-Search-Result .gsc-above-wrapper-area, .LP-Google-Search-Result .gsc-resultsHeader { display: none !important; } .LP-Google-Search-Result .gsc-webResult.gsc-result { border-bottom: 1px solid #ddd !important; padding-bottom: 0px; margin-top: 10px; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-title a.gs-title, .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-image { transition: all 0.3s; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-title a.gs-title:hover, .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-image:hover { opacity: 0.7 !important; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-title, .LP-Google-Search-Result .gsc-webResult.gsc-result a.gs-title { height: 25px !important; font-family: 'Segoe UI', Verdana, '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; text-decoration: none; } .LP-Google-Search-Result .gsc-webResult.gsc-result a.gs-title { font-size: 18px; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gsc-url-top div.gs-visibleUrl { font-size: 16px; } .LP-Google-Search-Result .gsc-control-cse .gsc-table-result { margin-top: 0px; margin-bottom: 20px; font-family: 'Segoe UI', Verdana, '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; border: none; } .LP-Google-Search-Result .gsc-control-cse .gsc-table-result td { border: none; } .LP-Google-Search-Result .gsc-control-cse .gsc-table-result .gsc-table-cell-snippet-close { border: none; padding-left: 8px; padding-top: 0px; } .LP-Google-Search-Result .gsc-cursor-box.gs-bidi-start-align { margin-top: 20px; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box { margin-left: 0px; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box .gsc-cursor-page { border: none; background-color: #c91c1c; color: #FFFFFF; padding: 6px 8px; margin-right: 12px; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page { background-color: #d9d9d9; color: #3e3e3e; font-weight: normal; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page:hover { text-decoration: none; } .MD-Hero .inner { position: relative; z-index: 9; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; height: 100%; -ms-flex-direction: column; flex-direction: column; color: white; } .MD-Hero h1 { font-size: 40px; font-weight: 500; font-family: " " メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif"; } @media screen and (max-width: 768px) { .MD-Hero h1 { font-size: 32px; word-break: keep-all; } } form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input { /* height: 40px; */ padding: 0; border-bottom: #999 dotted 1px; } form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box { border: none; height: auto; } form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box-focus, form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box-hover { box-shadow: none !important; } form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input { font-size: 14px; line-height: 1; padding-left: 5px !important; margin: 0 !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-bottom: #999 dotted 1px; box-sizing: border-box; transition: background-color 0.24s ease-in-out; } form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input::-webkit-input-placeholder, form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input:-ms-input-placeholder, form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input::-moz-placeholder { color: #ccc; border: none !important; } form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input:focus, form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input:hover { box-shadow: none; color: #0D1722; border: none !important; } form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-search-button:before { display: none; } form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-search-button .gsc-search-button-v2 { padding: 8px 27px; width: auto; background-color: #222 !important; border: none !important; cursor: pointer; height: 30px; margin-top: 10px; margin-left: 8px !important; transition: all 0.3s linear; border-radius: 0 !important; } form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-search-button .gsc-search-button-v2:hover { opacity: 0.7; } #main_slider .thumb__slider { width: 650px; height: 330px; background-size: cover; background-position: center center; } .thumb__background { background-size: cover; background-position: center center; } .thumb__background.thumb__background--sm { width: 100px; height: 70px; } .thumb__background.thumb__background--md { width: 100px; height: 75px; } @media only screen and (max-width: 1024px){ #main_slider .thumb__slider { width: 100%; height: 490px; } .thumb__background.thumb__background--md { width: 200px; height: 125px; } .thumb__background.thumb__background--sm { width: 200px; height: 125px; } } .thumb__background.thumb__background--float { display: block; float: left; margin: 15px; } .thumb__background.thumb__background--m-13 { margin: 13px; } .img-thumb { background-size: cover; background-position: center center; } .img-thumb.img-thumb__sm { width: 100px; height: 70px; } .img-thumb.img-thumb__md { width: 280px; height: 200px; } @media only screen and (max-width: 1024px){ #index_recent_post .image { width: auto; } #index_recent_post .image .img-thumb.img-thumb__sm { width:200px; height: 150px; } #footer_widget_wrap .styled_post_list1 li .image { width: auto; height: auto; } } @media only screen and (max-width: 768px){ #global_menu { top: 45px !important; } #global_menu > ul > li { width: 100% !important; } #global_menu > ul > li a{ background-color: #fff !important; border-left-color: unset !important; } .non__sidebar #global_menu > ul > li.menu-item { width: 100% !important; } #index_recent_post .image { margin: 0 3% 0 0; } .img-thumb.img-thumb__sm { width: 26vw; height: 16vw; } .img-thumb.img-thumb__md { width: 100%; height: 500px; margin-bottom: 15px; } #main_slider .thumb__slider { width: 100%; height: 390px; } .thumb__background.thumb__background--sm { width: 95%; height: 120px; } .thumb__background.thumb__background--md { width: 26vw; height: 16vw; } .thumb__background.thumb__background--m-13 { margin: 0; } .thumb__background.thumb__background--float { margin: 0; } .footer_widget .thumb__background.thumb__background--sm { width: 100px; height: 70px; } .gb_mr_recommend_post .thumb__background.thumb__background--sm { width: 100px; height: 70px; } } @media only screen and (max-width: 576px){ #main_col #index_bottom_banner > a:first-child img{ margin-bottom: 20px } #main_slider .thumb__slider { height: 50.5vw; } .img-thumb.img-thumb__sm { width: 22vw; height: 16vw; } .img-thumb.img-thumb__md { /* width: 300px; */ width: 100%; height: 220px; margin-bottom: 15px; } #previous_next_post p, #previous_next_post p { overflow: hidden; } .thumb__background.thumb__background--md { width: 22vw; height: 16vw; } .thumb__background.thumb__background--sm { width: 90px; height: 72px; } #single_author_post .image { margin: 0; } } @media only screen and (max-width: 576px){ .thumb__background.thumb__background--sm { width: 80px; height: 60px; } } @media only screen and (min-width: 769px){ .non__sidebar #global_menu > ul { width: 100%; } .non__sidebar #main_col { width: 100%; } .non__sidebar #main_col #left_col{ width: calc(100% - 330px); } .non__sidebar #main_col #right_col{ width: 300px; } .non__sidebar #main_col #index_featured_post{ width: 100%; height: 420px; } .non__sidebar #main_col #index_featured_post #main_slider{ width: calc(100% - 300px); height: 420px; } .non__sidebar #main_col #main_slider .thumb__slider { width: 100%; height: 420px; } .non__sidebar #main_col #main_slider .caption { width: 100%; } .non__sidebar #main_col #index_recent_post > ul > li.odd { width: 50%; } .non__sidebar #main_col #index_recent_post > ul > li.even { width: calc(100%/2 - 1px); } .non__sidebar #main_col #index_recent_post .info { width: calc(100% - 120px); } .non__sidebar #main_col .index_category_post .post1{ width: calc(100% - 330px); overflow: hidden; } .non__sidebar #main_col .index_category_post .post1 .image{ width: 100%; height: 230px; } .non__sidebar #main_col .index_category_post .post1 .img-thumb__md{ width: 100%; height: 100%; } .non__sidebar #main_col .index_category_post .post2{ width: 315px; } .non__sidebar #main_col #index_bottom_banner { justify-content: flex-start; } .non__sidebar #main_col #index_bottom_banner > a:first-child { margin-right: 2em; } .non__sidebar #main_col #single_author { display: flex; } .non__sidebar #main_col #single_author #single_author_avatar{ width: 10%; } .non__sidebar #main_col #single_author #single_author_meta{ width: 90%; } .non__sidebar #main_col #single_author_post > ul > li.odd { width: 50%; } .non__sidebar #main_col #single_author_post > ul > li.even { width: calc(100%/2 - 1px); } .non__sidebar #main_col #single_author_post .info { width: calc(100% - 140px); } .non__sidebar #main_col #related_post > ul{ display: flex; justify-content: space-around; } .non__sidebar #main_col #related_post > ul > li{ width: calc(100% / 6 ); height: 180px; float: unset; } .non__sidebar #main_col #related_post > ul > li.num5{ border-right: 1px solid #ccc; width: calc(100% / 6 ) } .non__sidebar #main_col #related_post > ul > li:last-child{ border-right: unset; } } #hs-pwd-widget-password { margin-top: 0px !important; height: 48px !important; line-height: 48px; width: 300px; margin-right: 15px; padding: 0 10px; } @media (max-width: 479px) { #hs-pwd-widget-password { margin-bottom: 20px; margin-right: 0; height: 40px !important; } } @media screen and (max-width: 1158px) { #related_post .image { width: auto; } .gb_mr_recommend_post .styled_post_list1 .image { width: auto; height: auto; } } @media screen and (max-width: 768px) { #related_post .image { width: 30%; } } .ranking_widget a { display: table; } #share_top1 ul li.facebook a, #share_btm1 ul li.facebook a{ background-color: #0866FF !important; } #share_top1 ul li.facebook a, #share_btm1 ul li.facebook:hover a{ color: #0866FF; }