/* ################################################################ Author: URL: Project Name: Version: 1.0 URL: ################################################################# */ /* ------------------------------------------ COMMON ------------------------------------------ */ body { padding-top: 80px; font:15px 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; color: #111; line-height: 1.6; } a { color: #eb5591; } a:hover, a:focus { color: #EA1067; } header { } .navbar { position: fixed; top: 0; left: 0; width: 100%; margin-bottom: 0; padding: 1em 0; border-radius: 0; border-bottom: solid 1px #e9e9e9; background: rgba(255,255,255,0.88); z-index: 1000; transition :all 0.2s ease-in-out 0s; } .sticky { padding: 0.25em 0; background: rgba(255,255,255,0.98); } .navbar h1 { text-align: left; } .navbar h1 img { transition :all 0.2s ease-in-out 0s; } .sticky h1 img { transform :scale(0.8); } .navbar-header { margin: 0; } .navbar-collapse { padding-left: 0; padding-right: 0; } .navbar-nav > li { padding: 5px 0; } .navbar-nav > li > a { padding: 10px 12px; } .navbar-nav li > a:hover { background: #F3F1EC; } .navbar-nav li.active > a { background: #F3F1EC; color: #EA1067; } .dropdown-menu { padding: 0; overflow: hidden; } .dropdown-menu > li > a { padding: 5px 15px; } .dropdown-toggle i { padding-left: 0.5em; font-size: 72%; } ul.header-socialbtn { float: right; margin-bottom: 0; padding-left: 1em; } ul.header-socialbtn li { display: inline-block; padding: 10px 0; list-style: none; line-height: 20px; } ul.header-socialbtn li a { min-width: 30px; display: inline-block; padding: 5px 0; color: #fff; text-align: center; } ul.header-socialbtn li.googleplus a { background: #DB4A39; } ul.header-socialbtn li.twitter a { background: #00B6F1; } ul.header-socialbtn li.facebook a { background: #3B599C; } footer { padding: 15px 0; background: #452C0A; font-size: 86%; color: #fff; } #footer-navi li { display: inline-block; list-style: none; } #footer-navi li a { display: inline-block; padding: 0 0 0 10px; color: #fff; } /* ------------------------------------------ CONTENT COMMON STYLES ------------------------------------------ */ #content { padding: 2em 0; } #content article h1 { margin: 0 0 15px 0; font-size: 30px; } #content article h2 { font-size: 25px; } #content article h3 { font-size: 20px; } #content article h4 { font-weight: bold; } #content article p { margin-bottom: 1em; } #content article .row { margin-bottom: 1em; } /* ------------------------------------------ LOWER CONTENT ------------------------------------------ */ #mainvisual-lower { position: relative; padding: 3.5em 0; background: url(<$mt:BlogRelativeURL$>images/bg-top-main.jpg) no-repeat center bottom; background-size: cover; color: #fff; text-shadow: 0 1px 0px #000; } #mainvisual-lower .overray { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(235,85,145,0.8); } #mainvisual-lower .row { display: table; width: 100%; } #mainvisual-lower .row .col-sm-12 { display: table-cell; width: 100%; vertical-align: middle; } #mainvisual-lower h2 { margin: 0; font-size: 40px; } #mainvisual-lower h2 i { padding-right: 10px; font-size: 50px; } #localnavi { background: #f6f6f6; border-bottom: solid 1px #e9e9e9; } #localnavi nav { border-left: solid 1px #e9e9e9; } #localnavi nav ul { margin: 0; padding: 0; text-align: left; } #localnavi nav li { display: inline-block; list-style: none; float: left; } #localnavi nav li a { position: relative; display: inline-block; padding: 10.5px 1.5em; border-right: solid 1px #e9e9e9; } #localnavi nav li.home a { padding: 10.5px 1em 10.5px ; } #localnavi nav li a:hover { background: #fff; text-decoration: none; } #localnavi nav li span { display: inline-block; padding: 10.5px 1.5em; background: #fff; border-right: solid 1px #e9e9e9; } #localnavi nav li.pagetop span { position: relative; } #localnavi nav li a:before { border:11px solid transparent; border-left-color:#f6f6f6; border-right-width:0; border-top-width: 23px; border-bottom-width: 23px; right:-10px; content:""; display:block; top: 0; position:absolute; width:0; z-index:1; } #localnavi nav li a:after { border:11px solid transparent; border-left-color:#e9e9e9; border-right-width:0; border-top-width: 23px; border-bottom-width: 23px; right:-11px; content:""; display:block; top:0; position:absolute; width:0; } #localnavi nav li a:hover:before { border-left-color:#fff; } #localnavi nav li.pagetop ul li { display: block; float: none; } #localnavi nav li.pagetop ul li a { display: block; border-right: none; } #localnavi nav li.pagetop ul li a:hover { background: #f6f6f6; } #localnavi nav li.pagetop ul li.active a:hover { background: #428bca; } #localnavi nav li.pagetop ul li a:before, #localnavi nav li.pagetop ul li a:after { display: none; } .breadcrumb { background-color: #none; border-radius: 0; list-style: none outside none; margin-bottom: 0; padding: 0; } #blog-primary-content { padding-left: 0; } #entry-list article { margin-bottom: 3em; padding-bottom: 3em; border-bottom: solid 1px #e9e9e9; } #entry-list figure { width: 300px; float: right; margin-left: 2em; margin-bottom: 1em; } #entry-list figure img { border: solid 1px #e9e9e9; } .entry-meta { margin-bottom: 1em; font-size: 86%; } .entry-meta time { display: inline-block; margin-right: 0.5em; padding: 0.2em 0.3em 0.2em 0.5em; background: #f1f1f1; } .entry-meta time span { display: inline-block; } .entry-meta time span.year { padding-right: 0.3em; } .entry-meta time span.monthday { padding: 0.2em 0.5em; background: #fff; } .entry-meta .category { padding: 0.5em 0.8em; margin: 0 2px; background: #88cfc5; color: #fff; } .entry-excerpt { margin-bottom: 1em; } .pagemore { text-align: left; } #content #entry-list h1 { margin-bottom: 15px; font-size: 20px; color: #111; } #sidebar nav { margin-bottom: 2em; padding-bottom: 2em; border-bottom: solid 3px #e9e9e9; } #sidebar h1 { margin: 0 0 20px 0; font-size: 15px; font-weight: bold; } #sidebar ul { padding: 0; margin-bottom: 0; } #sidebar ul li { margin-bottom: 0.7em; padding-bottom: 0.7em; list-style: none; border-bottom: solid 1px #e9e9e9; } #sidebar ul li:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } h1.page-title { margin: 0 0 1em 0; } /* ------------------------------------------ ENTRY DETAIL ------------------------------------------ */ #entry-detail figure { margin-bottom: 2em; } #entry-detail img { max-width: 100%; height: auto; } /* ------------------------------------------ BTN ------------------------------------------ */ .btn-primary { background: #EB5591; border-color: #EB5591; } .btn-primary:hover { background: #EA1067; border-color: #EA1067; } .btn-secondary { background: #f1f1f1; border-color: #e1e1e1; } .btn-secondary:hover { background: #f9f9f9; border-color: #e9e9e9; } .btn-info { background: #60A79D; border-color: #60A79D; } .btn-info:hover { background: #74BBB1; border-color: #74BBB1; } .btn-success { background: #60A79D; border-color: #60A79D; } .btn-success:hover { background: #74BBB1; border-color: #74BBB1; } /* ------------------------------------------ TOP ------------------------------------------ */ body#sitetop { padding-top: 0; } #mainvisual { width: 100%; min-height: 300px; padding: 8em 0 3em 0; background: url(<$mt:BlogRelativeURL$>images/bg-top-main.jpg) no-repeat center bottom; background-size: cover; text-align: center; border-bottom: solid 1px #e9e9e9; } #mainvisual h2 { margin: 0 0 20px 0; } #mainvisual #main-text { margin-bottom: 2em; } #mainvisual .btn-group { } #mainvisual .btn-group .btn { width: 300px; } #top-about { } #top-about .webpages { padding: 3em 0; border-bottom: solid 1px #f1f1f1; } #top-about .webpages:nth-child(even) { background: #F5F7FA; } #top-about .webpages h3 { border-bottom: 2px dashed #452c0a; color: #452c0a; padding-bottom: 12px; margin: 0; text-align: center; font-size: 36px; } #top-about .webpages p.webpage-lead { margin-bottom: 2em; text-align: center; } #top-about .webpages i { padding-right: 0.2em; } #top-about .webpages .page-detail { text-align: center; } #top-about .webpages .page-detail .btn { width: 100%; } #top-news { padding: 3em 0; background: #EB5591; color: #fff; } #top-news h3 { font-size: 40px; margin: 0 0 25px 0; text-align: center; } #top-news a.col-sm-3 { display: block; width: 262.5px; padding: 0; margin: 0 15px 15px 15px; background: #fff; color: #111; } #top-news a:hover { color: #5f76a6; text-decoration: none; } #top-news figure { display: block; height: 150px; overflow: hidden; } #top-news figure.noimage { height: 150px; background: #999; text-align: center; line-height: 150px; color: #fff; font-size: 30px; } #top-news figure img { width: 100%; } #top-news .entry-detail { padding: 1em; } #top-news h1 { margin: 0 0 0.5em 0; font-size: 114%; } #top-news p { margin: 0; } #top-news p.entry-excerpt { font-size: 86%; } #top-news .top-newslist { margin-top: 2em; text-align: center; } /* ------------------------------------------ STYLE FOR TABLET ------------------------------------------ */ @media screen and (max-width:767px){ img { max-width: 100%; } header { margin-bottom: 5px; } .container > .navbar-header { position: relative; width: 100%; margin: 0; text-align: center; } .navbar-nav { margin: 0; border: solid 1px #f1f1f1; } .navbar-nav > li { padding: 0; } button.navbar-toggle { position: absolute; right: 0; top: 0; padding: 8px 11px; margin-right: 0; background: #f6f6f6; border: solid 1px #f1f1f1; border-radius: 3px; font-size: 15px; } .container>.navbar-collapse { margin: 0; } ul.header-socialbtn { float: none; margin: 0; padding: 0; text-align: center; } .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { margin-bottom: 3em; } section .col-sm-1:last-of-type, section .col-sm-2:last-of-type, section .col-sm-3:last-of-type, section .col-sm-4:last-of-type, section .col-sm-5:last-of-type, section .col-sm-6:last-of-type, section .col-sm-7:last-of-type, section .col-sm-8:last-of-type, section .col-sm-9:last-of-type, section .col-sm-10:last-of-type, section .col-sm-11:last-of-type, section .col-sm-12:last-of-type { margin-bottom: 0; } #footer-logoarea { text-align: center; } #footer-navi ul.pull-right { float: none !important; padding: 0; text-align: center; } footer .col-sm-6 { margin-bottom: 0; } #mainvisual .btn-group { display: block; text-align: center; } #mainvisual .btn-group .btn { display: inline-block; width: 45%; float: none; margin-bottom: 0.5em; border-radius: 3px; } #mainvisual .btn-group .btn:last-of-type { margin: 0; } #top-news a.col-sm-3 { width: 90%; margin: 0 auto 2em auto; } #sidebar { width: 100%; } #sidebar h1 { padding: 1em 0.7em; background: #f6f6f6; } #entry-list figure { width: 40%; } } /* ------------------------------------------ for sp ------------------------------------------ */ @media(max-width:480px){ #entry-list figure { display: none; } } /* ------------------------------------------ Pagination ------------------------------------------ */ .page-navigation { text-align: center; } .page-navigation ul{ display: block; padding-bottom: 10px; } .page-navigation li { display: inline-block; border-bottom: none; } .page-navigation li a{ padding: 0 10px; } .page-navigation li a[rel="prev"]::before { content: "«"; margin-right: 0.3em; } .page-navigation li a[rel="next"]::after { content: "»"; margin-left: 0.3em; }