@charset "UTF-8"; /* Theme Name: Cocoon Description: SEO・高速化・モバイルファースト最適化済みの無料テーマ。 Theme URI: https://wp-cocoon.com/ Author: わいひら Author URI: https://nelog.jp/ Text Domain: cocoon Version: 2.2.8.7 Requires at least: 5.3.0 Requires PHP: 5.6.0 Tags: two-columns, left-sidebar, right-sidebar License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl-2.0.html */ .faw::before { font-family: FontAwesome; padding-right: 4px; } .entry-card, .related-entry-card { position: relative; height: 100%; } .entry-card-thumb, .widget-entry-card-thumb, .related-entry-card-thumb, .carousel-entry-card-thumb { float: left; margin-top: 3px; position: relative; } .entry-card-content, .related-entry-card-content { padding-bottom: 1.2em; } .entry-card-title, .related-entry-card-title { font-size: 18px; margin: 0 0 5px 0; line-height: 1.2; font-weight: bold; } .entry-card-snippet, .related-entry-card-snippet { font-size: 0.8em; max-height: 7.8em; line-height: 1.3; overflow: hidden; } .entry-card-meta, .related-entry-card-meta { bottom: 0; position: absolute; right: 0; text-align: right; line-height: 1; } .entry-categories-tags { margin-bottom: 18px; } .sns-share, .sns-follow { margin: 24px 0; } .sns-share-message, .sns-follow-message { text-align: center; margin-bottom: 3px; } body, .header, .appeal { /* 画像を常に左右の中央に配置 */ background-position: top center; /* 画像をタイル状に繰り返し表示しない */ background-repeat: no-repeat; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: 100% auto; } body.ba-fixed, .ba-fixed.header, .ba-fixed.appeal { /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; } .entry-category, .post-date, .post-update, .post-author, .amp-back { padding: 2px; display: inline; font-size: 0.7em; } .search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select { padding: 11px; border: 1px solid #ccc; border-radius: 4px; font-size: 18px; width: 100%; } .fz-12px { font-size: 12px; } .fz-13px { font-size: 13px; } .fz-14px { font-size: 14px; } .fz-15px { font-size: 15px; } .fz-16px { font-size: 16px; } .fz-17px { font-size: 17px; } .fz-18px { font-size: 18px; } .fz-19px { font-size: 19px; } .fz-20px { font-size: 20px; } .fz-21px { font-size: 21px; } .fz-22px { font-size: 22px; } .fz-24px { font-size: 24px; } .fz-28px { font-size: 28px; } .fz-32px { font-size: 32px; } .fz-36px { font-size: 36px; } .fz-40px { font-size: 40px; } .fz-44px { font-size: 44px; } .fz-48px { font-size: 48px; } .fw-100 { font-weight: 100; } .fw-200 { font-weight: 200; } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } .fw-900 { font-weight: 900; } .ff-meiryo, .wf-loading body { font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; } .ff-yu-gothic { font-family: "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; } .ff-ms-pgothic { font-family: "MS PGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; } .ff-noto-sans-jp, .wf-active .ff-noto-sans-jp { font-family: "Noto Sans JP" ,sans-serif; } .ff-noto-serif-jp, .wf-active .ff-noto-serif-jp { font-family: "Noto Serif JP" ,sans-serif; } .ff-mplus-1p, .wf-active .ff-mplus-1p { font-family: "M PLUS 1p" ,sans-serif; } .ff-rounded-mplus-1c, .wf-active .ff-rounded-mplus-1c { font-family: "M PLUS Rounded 1c" ,sans-serif; } .ff-kosugi, .wf-active .ff-kosugi { font-family: "Kosugi" ,sans-serif; } .ff-kosugi-maru, .wf-active .ff-kosugi-maru { font-family: "Kosugi Maru" ,sans-serif; } .ff-sawarabi-gothic, .wf-active .ff-sawarabi-gothic { font-family: "Sawarabi Gothic" ,sans-serif; } .ff-sawarabi-mincho, .wf-active .ff-sawarabi-mincho { font-family: "Sawarabi Mincho" ,sans-serif; } .sub-caption { font-family: Tunga, "Trebuchet MS", Tahoma, Verdana, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-weight: 400; font-size: 0.75em; opacity: 0.5; } span.sub-caption { opacity: 0.8; } /************************************ ** 基本表示 ************************************/ /*初期化*/ * { padding: 0; margin: 0; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; } .container { padding-right: constant(safe-area-inset-right); padding-left: constant(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left); } body { /* フォントの種類 */ font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* フォントのサイズ */ font-size: 18px; /* フォントの色 */ color: #333; /* カーニングの設定 */ /* 行間の設定 */ line-height: 1.8; margin: 0; overflow-wrap: break-word; background-color: #f4f5f7; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; } /*デフォルトリンク*/ a { color: #1967d2; } a:hover { color: #e53900; } ol, ul { padding-left: 40px; } ul { list-style-type: disc; } hr { color: #eee; } /* クリアフィックス */ .cf::after { clear: both; content: ""; display: block; } .header-container, .main, .sidebar, .footer { background-color: #fff; } /* インナーを囲む */ .wrap { width: 1256px; margin: 0 auto; } /************************************ ** 本文部分 ************************************/ .content-in { display: flex; justify-content: space-between; flex-wrap: wrap; } .main { width: 860px; padding: 20px 29px; border: 1px solid transparent; border-radius: 4px; position: relative; } .no-sidebar .content .main { margin: 0; width: 100%; } .no-scrollable-main .main { height: 100%; } .main-scroll { position: -webkit-sticky; position: sticky; top: 0; margin-top: 2em; } @media all and (-ms-high-contrast: none) { .main-scroll { position: static; top: auto; } .logo { height: 100%; } } .publisher { display: none; } #wpadminbar { font-size: 13px; } .wp-caption { margin: 1em 0; } /************************************ ** WordPress Misc ************************************/ .aligncenter { display: block; margin-right: auto; margin-left: auto; } .alignleft { float: left; margin-right: 10px; margin-bottom: 10px; } .alignright { float: right; margin-left: 10px; margin-bottom: 10px; } .wp-caption { padding-top: 4px; border: 1px solid #eee; border-radius: 3px; background-color: #f5f6f7; text-align: center; max-width: 100%; } .wp-caption .wp-caption-text, .gallery .gallery-caption { font-size: 0.8em; margin: 2px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption-dd { margin: 0; padding: 0 4px 5px; font-size: 11px; line-height: 17px; } img.alignright { display: inline-block; margin: 0 0 1em 1.5em; } img.alignleft { display: inline-block; margin: 0 1.5em 1em 0; } .comment-btn { margin: 24px 0; cursor: pointer; } label { cursor: pointer; } .sitemap li a::before { display: none; } .content-top, .content-bottom { margin: 1em 0; } /************************************ ** 画像関係のスタイル ************************************/ figure { margin: 0; } img { max-width: 100%; height: auto; border: 0; } .circle-image img { border-radius: 50%; } /************************************ ** 画像の囲み効果 ************************************/ /*ボーダー*/ .iwe-border img, .iwe-border amp-img { border: 1px solid #ccc; } /*ボーダー(太線)*/ .iwe-border-bold img, .iwe-border-bold amp-img { border: 4px solid #eee; } /*シャドー*/ .iwe-shadow img, .iwe-shadow amp-img { box-shadow: 5px 5px 15px #eee; } /*シャドーペーパー*/ .iwe-shadow-paper img, .iwe-shadow-paper amp-img { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08); } .entry-card-thumb, .author-thumb, .blogcard-thumbnail, .related-entry-card-thumb, .popular-entry-card-thumb, .new-entry-card-thumb { margin-right: 1.6%; } .ect-vertical-card .entry-card-thumb, .rect-vertical-card .related-entry-card-thumb { margin: 0; } .ib-right .blogcard-thumbnail, .eb-right .blogcard-thumbnail { margin-right: 0; margin-left: 1.4%; } .no-thumbnail .card-thumb, .no-thumbnail .widget-entry-card-pv { display: none; } .no-thumbnail .card-content, .no-thumbnail .widget-entry-cards .widget-entry-card-content, .no-thumbnail .rect-mini-card .related-entry-card-content { margin: 0; } .no-thumbnail .widget-entry-cards div.widget-entry-card-content { font-size: 18px; margin-bottom: 0.6em; } .no-thumbnail .widget-entry-cards.large-thumb-on .card-title { max-height: none; position: static; } .no-thumbnail .entry-card-meta { position: static; background-color: transparent; margin-top: 0.4em; } .no-thumbnail .entry-card-snippet, .no-thumbnail .related-entry-card-snippet { max-height: 10.4em; } .no-thumbnail .entry-card-day { display: inline; } .no-thumbnail .entry-card-meta .entry-card-categorys { display: inline; } .no-thumbnail .entry-card-meta .entry-card-categorys > span { margin-left: 0.6em; } img.emoji { display: inline; width: 1em; height: auto; vertical-align: text-bottom; margin-right: 0.1em; } /************************************ ** ヘッダー ************************************/ .header { height: 100%; flex-shrink: 0; } .header-in { display: flex; flex-direction: column; justify-content: center; } .tagline { text-align: center; font-size: 14px; margin: .6em 1em; } .logo { text-align: center; } .logo-image span, .logo-image a { display: inline-block; max-width: 100%; } .site-name-text-link { color: #333; text-decoration: none; font-weight: normal; } .site-name-text-link:hover { color: inherit; } .site-name-text { font-size: 28px; } .logo-text { padding: 20px 0 30px; font-size: 1em; } .logo-image { padding: 10px 0; font-size: inherit; } /************************************ ** ヘッダーレイアウト ************************************/ .header-container-in.hlt-top-menu { display: flex; justify-content: space-between; align-items: center; align-content: center; } .header-container-in.hlt-top-menu .wrap { width: auto; } .header-container-in.hlt-top-menu .header { background-image: none; } .header-container-in.hlt-top-menu .logo-text { padding: 0; display: flex; align-items: center; align-content: center; } .header-container-in.hlt-top-menu .logo-image { padding: 0; margin: 0; } .header-container-in.hlt-top-menu .site-name-text-link { margin: 0 16px; display: block; } .header-container-in.hlt-top-menu .site-name-text { font-size: 22px; white-space: nowrap; } .header-container-in.hlt-top-menu .tagline { display: none; } .header-container-in.hlt-top-menu .logo-header { max-height: 60px; } .header-container-in.hlt-top-menu .logo-header .site-name { margin: 0; } .header-container-in.hlt-top-menu .logo-header img { max-height: 60px; height: auto; vertical-align: middle; } .header-container-in.hlt-top-menu amp-img { max-width: 160px; max-height: 60px; } .header-container-in.hlt-top-menu amp-img img { height: auto; } .header-container-in.hlt-top-menu .navi { width: 100%; } .header-container-in.hlt-top-menu.hlt-tm-small .site-name-text-link { margin: 0 16px; } .header-container-in.hlt-top-menu.hlt-tm-small .site-name-text { font-size: 20px; } .header-container-in.hlt-top-menu.hlt-tm-small .logo-header { max-height: 40px; } .header-container-in.hlt-top-menu.hlt-tm-small .logo-header img { max-height: 40px; } .header-container-in.hlt-top-menu.hlt-tm-small .navi-in > ul > li, .header-container-in.hlt-top-menu.hlt-tm-small .navi-in > ul > .menu-item-has-description > a > .caption-wrap { line-height: 40px; height: 40px; display: block; } .header-container-in.hlt-top-menu.hlt-tm-small .item-description { display: none; } .hlt-tm-right .navi-in > ul { justify-content: flex-end; } /************************************ ** センターロゴ(トップメニュー) ************************************/ .header-container-in.hlt-center-logo-top-menu { display: flex; flex-direction: column-reverse; } .fixed-header .cl-slim .logo-header { max-height: 40px; } .fixed-header .cl-slim .logo-header img { max-height: 40px; } .cl-slim .navi-in > ul li { height: 40px; line-height: 40px; } .cl-slim .navi-in > ul li .sub-menu ul { top: -40px; } .cl-slim .navi-in > ul li.menu-item-has-description > a > .caption-wrap { height: 40px; line-height: 16px; font-size: 14px; padding-top: 6px; } /************************************ ** グローバルメニュー ************************************/ .navi { background-color: #fff; } .navi-in a { position: relative; } .navi-in .has-icon { position: absolute; right: 6px; top: 0; display: inline-block; opacity: 0.7; font-size: 11px; } .navi-in > ul { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; /*サブメニュー*/ } .navi-in > ul li { display: block; width: 176px; height: 60px; line-height: 60px; position: relative; } .navi-in > ul li:hover > ul { display: block; } .navi-in > ul .menu-item-has-description > a > .caption-wrap { line-height: 21.4285714286px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; height: 60px; } .navi-in > ul .menu-item-has-description > a > .caption-wrap > div { width: 100%; } .navi-in > ul .sub-menu { display: none; position: absolute; margin: 0; min-width: 240px; list-style: none; padding: 0; background-color: #fafbfc; z-index: 99; text-align: left; /*サブメニューのサブメニュー*/ } .navi-in > ul .sub-menu li { width: auto; } .navi-in > ul .sub-menu a { padding-left: 16px; padding-right: 16px; } .navi-in > ul .sub-menu ul { top: -60px; left: 240px; position: relative; } .navi-in a { color: #333; text-decoration: none; display: block; font-size: 16px; transition: all 0.3s ease-in-out; } .navi-in a:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } .navi-in a:hover > ul { display: block; } /************************************ ** モバイルメニュー ************************************/ .navi-in > .menu-mobile { display: none; } .navi-in > .menu-mobile .sub-menu { display: none; } /************************************ ** フッターメニュー ************************************/ .navi-footer-in > .menu-footer { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; text-align: center; margin: 0; } .navi-footer-in > .menu-footer li { width: 120px; border-left: 1px solid #ddd; } .navi-footer-in > .menu-footer li:last-child { border-right: 1px solid #ddd; } .navi-footer-in a { color: #333; text-decoration: none; display: block; font-size: 14px; transition: all 0.3s ease-in-out; } .navi-footer-in a:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } /************************************ ** エントリーカードの設定 ************************************/ .a-wrap { text-decoration: none; display: block; color: #333; padding: 1.5%; margin-bottom: 3%; transition: all 0.3s ease-in-out; } .a-wrap:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } .card-thumb img { width: 100%; } .entry-card-thumb { width: 320px; } .related-entry-card-thumb { width: 160px; } .cat-label { position: absolute; top: 0.3em; left: 0.3em; border: 1px solid #eee; font-size: 11px; color: #fff; background-color: rgba(51, 51, 51, 0.7); padding: 1px 5px; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entry-card-content { margin-left: 330px; } .entry-card-info > * { font-size: 0.7em; padding: 2px; } .entry-card-meta .entry-card-categorys { display: none; } .e-card-info .post-author { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .post-author-image { margin-right: 3px; } .post-author-image img { border-radius: 50%; } .e-card-info { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .e-card-info > span { margin-right: 4px; } /************************************ ** エントリーカードタイプ ************************************/ .ect-vertical-card { display: flex; flex-wrap: wrap; justify-content: space-between; } .ect-vertical-card .entry-card-wrap { width: 49.5%; display: inline-block; margin-bottom: 12px; } .ect-vertical-card .entry-card-wrap .entry-card-thumb { width: 100%; float: none; } .ect-vertical-card .entry-card-wrap .entry-card-thumb img { width: 100%; } .ect-vertical-card .entry-card-wrap .entry-card-content { margin: 0; } .ect-vertical-card .entry-card-wrap .post-date, .ect-vertical-card .entry-card-wrap .post-update { margin-right: 0; } .ect-vertical-card.ect-tile-card .a-wrap { margin: 0 0.25% 12px; } .ect-vertical-card.ect-tile-card .entry-card-content { padding: 0; } .ect-vertical-card.ect-tile-card .card-snippet { padding: 0; margin: 0; } .ect-vertical-card.ect-tile-card .card-meta { position: static; } .ect-vertical-card.ect-tile-card .a-wrap { margin: 0 0.16666% 12px; } .ect-2-columns > * { width: 49.5%; display: inline-block; } .ect-3-columns { justify-content: space-around; } .ect-3-columns .entry-card-wrap { width: 33%; padding: 7px; } .ect-3-columns .entry-card-snippet { max-height: 4em; overflow: hidden; } .ect-3-columns > * { width: 33%; display: inline-block; } .ecb-entry-border .entry-card-wrap { border: 1px solid #ccc; } .entry-card-day span:last-child { margin-right: 0; } .front-top-page .ect-big-card-first .a-wrap:first-of-type .card-thumb, .ect-big-card .card-thumb { float: none; width: 100%; } .front-top-page .ect-big-card-first .a-wrap:first-of-type .card-content, .ect-big-card .card-content { margin: 0; } /************************************ ** 日付関係のスタイル ************************************/ .date-tags { line-height: 0.8; text-align: right; margin-bottom: 1em; } .post-date, .post-update, .post-author, .amp-back { margin-right: 8px; } .related-entry-post-date { margin-right: 0; } /************************************ ** パンくずリスト ************************************/ .breadcrumb { margin: 1em .4em; color: #777; font-size: 13px; } .breadcrumb div { display: inline; } .breadcrumb .sp { margin: 0 10px; } .breadcrumb a { text-decoration: none; color: #777; } .breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before { background-color: #fff; margin: 12px auto 0; padding: .6em 1em; } .breadcrumb.sbp-main-before + .content, .breadcrumb.pbp-main-before + .content { margin-top: 12px; } .breadcrumb-caption { margin: 0 3px; } .sns-buttons { display: flex; align-items: center; } .sns-buttons a { display: block; background-color: #333; text-align: center; color: #fff; text-decoration: none; border-radius: 4px; height: 45px; } .sns-buttons a:hover { opacity: 0.7; color: #fff; transition: all 0.3s ease-in-out; } .sns-share a, .sns-follow a { cursor: pointer; } .bc-brand-color.sns-share .twitter-button, .bc-brand-color.sns-follow .twitter-button { background-color: #1da1f2; } .bc-brand-color.sns-share .facebook-button, .bc-brand-color.sns-follow .facebook-button { background-color: #3b5998; } .bc-brand-color.sns-share .hatebu-button, .bc-brand-color.sns-follow .hatebu-button { background-color: #2c6ebd; } .bc-brand-color.sns-share .google-plus-button, .bc-brand-color.sns-follow .google-plus-button { background-color: #dd4b39; } .bc-brand-color.sns-share .pocket-button, .bc-brand-color.sns-follow .pocket-button { background-color: #ef4056; } .bc-brand-color.sns-share .line-button, .bc-brand-color.sns-follow .line-button { background-color: #00c300; } .bc-brand-color.sns-share .website-button, .bc-brand-color.sns-follow .website-button { background-color: #002561; } .bc-brand-color.sns-share .instagram-button, .bc-brand-color.sns-follow .instagram-button { background-color: #405de6; } .bc-brand-color.sns-share .pinterest-button, .bc-brand-color.sns-follow .pinterest-button { background-color: #bd081c; } .bc-brand-color.sns-share .youtube-button, .bc-brand-color.sns-follow .youtube-button { background-color: #cd201f; } .bc-brand-color.sns-share .linkedin-button, .bc-brand-color.sns-follow .linkedin-button { background-color: #0077b5; } .bc-brand-color.sns-share .note-button, .bc-brand-color.sns-follow .note-button { background-color: #41c9b4; } .bc-brand-color.sns-share .soundcloud-button, .bc-brand-color.sns-follow .soundcloud-button { background-color: #ff8800; } .bc-brand-color.sns-share .flickr-button, .bc-brand-color.sns-follow .flickr-button { background-color: #111; } .bc-brand-color.sns-share .amazon-button, .bc-brand-color.sns-follow .amazon-button { background-color: #ff9900; } .bc-brand-color.sns-share .rakuten-room-button, .bc-brand-color.sns-follow .rakuten-room-button { background-color: #c61e79; } .bc-brand-color.sns-share .slack-button, .bc-brand-color.sns-follow .slack-button { background-color: #e01563; } .bc-brand-color.sns-share .github-button, .bc-brand-color.sns-follow .github-button { background-color: #4078c0; } .bc-brand-color.sns-share .codepen-button, .bc-brand-color.sns-follow .codepen-button { background-color: #333; } .bc-brand-color.sns-share .feedly-button, .bc-brand-color.sns-follow .feedly-button { background-color: #2bb24c; } .bc-brand-color.sns-share .rss-button, .bc-brand-color.sns-follow .rss-button { background-color: #f26522; } .bc-brand-color-white.sns-share a, .bc-brand-color-white.sns-follow a { background-color: #fff; font-weight: 500; border: 1px solid #333; color: #333; } .bc-brand-color-white.sns-share a:hover, .bc-brand-color-white.sns-follow a:hover { opacity: 0.5; } .bc-brand-color-white.sns-share .twitter-button, .bc-brand-color-white.sns-follow .twitter-button { color: #1da1f2; border-color: #1da1f2; } .bc-brand-color-white.sns-share .facebook-button, .bc-brand-color-white.sns-follow .facebook-button { color: #3b5998; border-color: #3b5998; } .bc-brand-color-white.sns-share .hatebu-button, .bc-brand-color-white.sns-follow .hatebu-button { color: #2c6ebd; border-color: #2c6ebd; } .bc-brand-color-white.sns-share .google-plus-button, .bc-brand-color-white.sns-follow .google-plus-button { color: #dd4b39; border-color: #dd4b39; } .bc-brand-color-white.sns-share .pocket-button, .bc-brand-color-white.sns-follow .pocket-button { color: #ef4056; border-color: #ef4056; } .bc-brand-color-white.sns-share .line-button, .bc-brand-color-white.sns-follow .line-button { color: #00c300; border-color: #00c300; } .bc-brand-color-white.sns-share .website-button, .bc-brand-color-white.sns-follow .website-button { color: #002561; border-color: #002561; } .bc-brand-color-white.sns-share .instagram-button, .bc-brand-color-white.sns-follow .instagram-button { color: #405de6; border-color: #405de6; } .bc-brand-color-white.sns-share .pinterest-button, .bc-brand-color-white.sns-follow .pinterest-button { color: #bd081c; border-color: #bd081c; } .bc-brand-color-white.sns-share .youtube-button, .bc-brand-color-white.sns-follow .youtube-button { color: #cd201f; border-color: #cd201f; } .bc-brand-color-white.sns-share .linkedin-button, .bc-brand-color-white.sns-follow .linkedin-button { color: #0077b5; border-color: #0077b5; } .bc-brand-color-white.sns-share .note-button, .bc-brand-color-white.sns-follow .note-button { color: #41c9b4; border-color: #41c9b4; } .bc-brand-color-white.sns-share .soundcloud-button, .bc-brand-color-white.sns-follow .soundcloud-button { color: #ff8800; border-color: #ff8800; } .bc-brand-color-white.sns-share .soundcloud-button, .bc-brand-color-white.sns-follow .soundcloud-button { color: #ff8800; border-color: #ff8800; } .bc-brand-color-white.sns-share .flickr-button, .bc-brand-color-white.sns-follow .flickr-button { color: #111; border-color: #111; } .bc-brand-color-white.sns-share .amazon-button, .bc-brand-color-white.sns-follow .amazon-button { color: #ff9900; border-color: #ff9900; } .bc-brand-color-white.sns-share .rakuten-room-button, .bc-brand-color-white.sns-follow .rakuten-room-button { color: #c61e79; border-color: #c61e79; } .bc-brand-color-white.sns-share .slack-button, .bc-brand-color-white.sns-follow .slack-button { color: #e01563; border-color: #e01563; } .bc-brand-color-white.sns-share .github-button, .bc-brand-color-white.sns-follow .github-button { color: #4078c0; border-color: #4078c0; } .bc-brand-color-white.sns-share .codepen-button, .bc-brand-color-white.sns-follow .codepen-button { color: #333; border-color: #333; } .bc-brand-color-white.sns-share .feedly-button, .bc-brand-color-white.sns-follow .feedly-button { color: #2bb24c; border-color: #2bb24c; } .bc-brand-color-white.sns-share .rss-button, .bc-brand-color-white.sns-follow .rss-button { color: #f26522; border-color: #f26522; } .ss-top { margin-top: 0; margin-bottom: 0; } .ss-top .sns-share-message { display: none; } .sns-share.ss-col-1 a { width: 100%; } .sns-share.ss-col-2 a { width: 49%; } .sns-share.ss-col-4 a { width: 24%; } .sns-share.ss-col-5 a { width: 19%; } .sns-share.ss-col-6 a { width: 16%; } .sns-share.ss-high-and-low-lc a, .sns-share.ss-high-and-low-cl a { display: flex; align-content: center; line-height: 16px; } .sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption { display: block; font-size: 16px; margin: 0; } .sns-share.ss-high-and-low-lc a .social-icon.button-caption, .sns-share.ss-high-and-low-cl a .social-icon.button-caption, .sns-share.ss-high-and-low-lc a .button-caption.button-caption, .sns-share.ss-high-and-low-cl a .button-caption.button-caption { font-size: 12px; } .sns-share.ss-high-and-low-lc a { flex-direction: column; } .sns-share.ss-high-and-low-lc a > span { padding-top: 3px; } .sns-share.ss-high-and-low-cl a { flex-direction: column-reverse; } .sns-share-buttons { flex-wrap: wrap; justify-content: space-around; align-content: center; } .sns-share-buttons a { width: 32%; margin-bottom: 8px; font-size: 18px; display: inline-flex; align-content: center; align-items: center; justify-content: center; position: relative; } .sns-share-buttons a .button-caption { font-size: 16px; margin-left: 10px; } .sns-share-buttons a .share-count { position: absolute; right: 3px; bottom: 3px; font-size: 12px; line-height: 1; } .share-menu-content .sns-share-buttons a { width: 24%; } .sbc-hide .share-count { display: none; } /* メッセージ */ .copy-info { display: none; /*初期状態は非表示*/ padding: 1em 2em; color: #fff; border-radius: 8px; /*画面上部に表示*/ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #333; opacity: 0.8; box-shadow: 0 4px 8px #777; z-index: 2; } /************************************ ** 内容 ************************************/ .content { margin-top: 24px; } /*エントリー・アーカイブの見出し*/ .entry-title, .archive-title { font-size: 26px; margin: 16px 0; line-height: 1.3; } .archive-title span { margin-right: 10px; } .entry-content { margin-top: 1em; margin-bottom: 3em; } pre, pre * { line-height: 1.6; word-wrap: normal; } /*本文下カテゴリとタグ*/ .entry-categories-tags > div { margin-bottom: 0.5em; } .ctdt-one-row > div { display: inline-block; } .ctdt-category-only .entry-tags { display: none; } .ctdt-tag-only .entry-categories { display: none; } .ctdt-none { display: none; } /*本文下カテゴリ*/ .cat-link { color: #fff; text-decoration: none; display: inline-block; margin-right: 5px; padding: 2px 6px; font-size: 12px; background-color: #333; border-radius: 2px; word-break: break-all; } .cat-link:hover { opacity: 0.5; color: #fff; } /*本文下タグ*/ .tag-link, .comment-reply-link { color: #333; text-decoration: none; display: inline-block; margin-right: 5px; padding: 1px 5px; font-size: 12px; border: 1px solid #999; border-radius: 2px; word-break: break-all; } .tag-link:hover, .comment-reply-link:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } /************************************ ** 投稿・固定ページで使うHTML要素 ************************************/ table { margin-bottom: 20px; max-width: 100%; width: 100%; border-collapse: collapse; border-spacing: 0; } table th { background-color: #f5f6f7; } table tr:nth-of-type(2n+1) { background-color: #fafbfc; } table th, table td { border: 1px solid #eee; padding: 6px; } .scrollable-table { -webkit-overflow-scrolling: touch; margin: 0; } .scrollable-table.stfc-sticky tr > *:first-child { background-color: #e9eff2; color: #333; position: sticky; position: -webkit-sticky; left: 0; z-index: 2; } .scrollable-table table { border-collapse: collapse; max-width: none; margin: 0; } .scrollable-table th { background-color: #eee; } .scrollable-table th, .scrollable-table td { padding: 3px 5px; white-space: nowrap; } .scrollable-table { overflow-x: auto !important; overflow-y: hidden !important; } figure.wp-block-table table { width: auto; } figure.wp-block-table.alignwide table, figure.wp-block-table.alignfull table { width: 100%; } .main figure.wp-block-table { width: auto; max-width: 100%; display: block; } figure.wp-block-table table { margin-right: auto; } figure.wp-block-table.aligncenter table { margin-left: auto; } figure.wp-block-table.alignright table { margin-left: 0; } .scroll-hint-icon-wrap { overflow: hidden; } .article dd { margin-left: 40px; } .article ul li, .article ol li { margin: 0.2em; } .article .wp-block-gallery ul { padding-left: 0; } .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 { line-height: 1.25; font-weight: bold; } .article h4, .article h5, .article h6 { font-size: 20px; padding: 9px 10px; } .article h2 { font-size: 24px; padding: 25px; background-color: #f5f6f7; border-radius: 2px; } .article h3 { border-left: 7px solid #888; border-right: 1px solid #ddd; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 22px; padding: 12px 20px; } .article h4 { border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; } .article h5 { border-bottom: 2px solid #ddd; } .article h6 { border-bottom: 1px solid #ddd; } .article .column-wrap h1, .article .column-wrap h2, .article .column-wrap h3, .article .column-wrap h4, .article .column-wrap h5, .article .column-wrap h6 { margin-top: 0; } /************************************ ** 引用(blockquote) ************************************/ blockquote { background-color: #fafbfc; border: 1px solid #ddd; padding: 1.2em; position: relative; } blockquote::before, blockquote::after { color: #C8C8C8; font-family: serif; position: absolute; font-size: 300%; } blockquote::before { content: "“"; line-height: 1.1; left: 10px; top: 0; } blockquote::after { content: "”"; line-height: 0; right: 10px; bottom: 0px; } blockquote cite { font-size: 0.7em; } /*本文下情報*/ .footer-meta { font-size: 0.8em; text-align: right; } /*投稿者*/ .author-info .post-author { font-size: 14px; } /************************************ ** ページ管理画面の設定で「本文のみ」表示 ************************************/ .content-only .header-container, .content-only .appeal, .content-only .ad-area, .content-only .sns-share, .content-only .date-tags, .content-only .sns-follow, .content-only .article-footer, .content-only .under-entry-content, .content-only .breadcrumb, .content-only .main-scroll, .content-only .footer, .content-only .go-to-top-button, .content-only .notice-area, .content-only .content-top, .content-only .content-bottom, .content-only .recommended { display: none; } .content-only .carousel { display: none !important; } /************************************ ** 外部リンク・内部リンク ************************************/ span.external-icon, span.internal-icon { margin-left: 3px; font-size: 0.8em; } .login-user-only { text-align: center; padding: 2em; background-color: #fafbfc; border: 1px solid #ccc; } .no-post-date .post-date, .no-post-update .post-update, .no-post-author .author-info { display: none; } .read-time { text-align: center; font-size: 0.7em; border-top: 4px double #eee; border-bottom: 4px double #eee; margin: 0 3%; margin-bottom: 1em; } .eye-catch-wrap { display: flex; } .eye-catch { position: relative; margin-bottom: .6em; max-width: 100%; } .eye-catch .cat-label { position: absolute; right: auto; top: 0.4em; bottom: auto; left: 0.4em; font-size: 14px; padding: 2px 8px; opacity: 0.9; border: 1px solid #eee; } .eye-catch img { vertical-align: bottom; } .eye-catch-caption { color: #fff; position: absolute; bottom: 0; padding: 2em 0.6em 0.2em; text-align: right; width: 100%; font-size: 0.9em; background: linear-gradient(180deg, transparent, #555); opacity: 0.9; } @media all and (-ms-high-contrast: none) { .eye-catch-wrap { display: block; } /* IE10~ */ } .show-pinterest-button .eye-catch:hover .cat-label { display: none; } /************************************ ** 広告 ************************************/ .ad-area { text-align: center; margin-bottom: 1.8em; overflow: hidden; } .ad-label-invisible .ad-label { display: none; } .ad-content-top { margin-top: 1em; } .ad-responsive ins { width: 100%; } .ad-single-rectangle .ad-responsive, .ad-dabble-rectangle .ad-responsive { max-width: 336px; margin: auto; } /************************************ ** ダブルレクタングル ************************************/ .ad-dabble-rectangle .ad-wrap { display: flex; } .ad-dabble-rectangle .ad-responsive { width: 336px; } /************************************ ** 記事内広告 ************************************/ @media screen and (max-width: 692px) { .ad-dabble-rectangle .ad-responsive { width: 300px; } } @media screen and (max-width: 626px) { .ad-dabble-rectangle .ad-responsive { width: 250px; } } @media screen and (max-width: 556px) { .ad-dabble-rectangle .ad-wrap { display: block; } .ad-dabble-rectangle .ad-responsive { width: auto; max-width: none; margin: auto; } .ad-dabble-rectangle .ad-additional-double { display: none; } } /************************************ ** サイドバーのダブルレクタングル ************************************/ .sidebar .ad-additional-double { display: none; } /************************************ ** サイドバーのスカイスクレイパー ************************************/ .sidebar .ad-additional-vertical { display: none; } @media screen and (max-width: 834px) { .sidebar .ad-vertical .ad-usual { display: none; } .sidebar .ad-vertical .ad-additional-vertical { display: block; } } .blogcard-wrap { margin-left: auto; margin-right: auto; padding: 0; width: 90%; background-color: #fff; } .blogcard { padding: 1.6% 2.2% 2%; border: 1px solid #ccc; border-radius: 4px; line-height: 1.6; position: relative; } .blogcard-thumbnail { float: left; margin-top: 3px; width: 160px; } .blogcard-thumbnail img { width: 100%; } .blogcard-content { margin-left: 170px; max-height: 140px; min-height: 100px; overflow: hidden; } .blogcard-title { font-weight: bold; margin-bottom: 0.4em; } .blogcard-snippet { font-size: 0.8em; } .blogcard-footer { clear: both; font-size: 16px; padding-top: 0.6%; } .blogcard-site { float: left; display: flex; align-content: center; } .blogcard-date { float: right; display: flex; align-content: center; } .blogcard-favicon { margin-right: 4px; margin-top: 2px; } img.blogcard-favicon-image { border: 0; box-shadow: none; } /************************************ ** ブログカードのサムネイルスタイル ************************************/ .ib-right .blogcard-thumbnail, .eb-right .blogcard-thumbnail { float: right; margin-left: 1.6%; } .ib-right .blogcard-content, .eb-right .blogcard-content { margin-left: 0; margin-right: 170px; } .nwa .blogcard-wrap { width: 100%; } .nwa .blogcard-thumbnail { width: 120px; } .nwa .blogcard-title { font-size: 0.9em; margin-bottom: 0; } .nwa .blogcard-snippet { font-size: 12px; } .nwa .blogcard-content { margin-left: 130px; margin-right: 0; max-height: 120px; min-height: 70px; font-size: 0.9em; line-height: 1.2; } .nwa .blogcard-footer { font-size: 14px; } .nwa .ib-right .blogcard-content, .nwa .eb-right .blogcard-content { margin-right: 31.6%; margin-left: 0; } /************************************ ** 目次 ************************************/ .toc { border: 1px solid #ccc; font-size: 0.9em; padding: 1em 1.6em; display: table; } .toc .toc-list { padding-left: 1em; } .toc .toc-list ul, .toc .toc-list ol { padding-left: 1em; margin: 0; } .toc li { margin: 0; } .toc ul { list-style: none; } .toc a { color: #333; text-decoration: none; } .toc a:hover { text-decoration: underline; } .toc-title { font-size: 1.1em; text-align: center; display: block; padding: 2px 16px; } .toc-widget-box .toc-title { display: none; } .toc-widget-box .toc-content { visibility: visible; opacity: 1; height: 100%; } .nwa .toc { border: 0; padding: 0 1em; } .tnt-none .toc-list, .tnt-number-detail .toc-list { padding-left: 0; } /************************************ ** h2-h6の見出し目次に連番を振る ************************************/ .toc.tnt-number-detail ol { list-style: none; counter-reset: toc; } .toc.tnt-number-detail ol li:before { margin-right: 6px; counter-increment: toc; content: counters(toc,".") "."; } .tnt-disc ol { list-style-type: disc; } .tnt-circle ol { list-style-type: circle; } .tnt-square ol { list-style-type: square; } .toc-center { margin: 1em auto; } /************************************ ** サイドバーのスタイル ************************************/ .sidebar { width: 376px; border: 1px solid transparent; padding: 19px; border-radius: 4px; background-color: #fff; } .sidebar h3 { background-color: #f5f6f7; padding: 12px; margin: 16px 0; border-radius: 2px; } .no-scrollable-sidebar .sidebar { height: 100%; } .sidebar-scroll { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } .sidebar-menu-content .sidebar { height: auto; } /************************************ ** サイドバーの非表示 ************************************/ .no-sidebar .sidebar { display: none; } /************************************ ** サイドバーの位置 ************************************/ .sidebar-left .content-in { flex-direction: row-reverse; } .nwa .ranking-item-img-desc, .nwa .ranking-item-link-buttons { display: block; } .nwa .ranking-item-img-desc a, .nwa .ranking-item-link-buttons a { padding: 6px 0; } .nwa .ranking-item-image-tag { max-width: 100%; text-align: center; display: flex; justify-content: center; } .nwa .ranking-item-name-text, .nwa .widget_item_ranking .main-widget-label { font-size: 20px; } .nwa .ranking-item-description p { font-size: 0.9em; } .nwa .blogcard-wrap { width: auto; } /************************************ ** ウィジェット ************************************/ label.screen-reader-text { display: none; } /*タグクラウド*/ .tagcloud { display: flex; flex-wrap: wrap; } .tagcloud a { border: 1px solid #eee; border-radius: 2px; color: #555; padding: 3px 8px; text-decoration: none; font-size: 12px; margin: 2px; flex: 1 1 auto; display: flex; justify-content: space-between; transition: all 0.3s ease-in-out; } .tagcloud a:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } .tagcloud a .tag-caption { word-break: break-all; } .tagcloud a .tag-link-count { margin-left: 8px; } /*ウィジェット(カテゴリー・アーカイブなど)*/ .widget_recent_entries ul, .widget_categories ul, .widget_archive ul, .widget_pages ul, .widget_meta ul, .widget_rss ul, .widget_nav_menu ul { padding: 0; margin: 0; list-style: none; } .widget_recent_entries ul li ul, .widget_categories ul li ul, .widget_archive ul li ul, .widget_pages ul li ul, .widget_meta ul li ul, .widget_rss ul li ul, .widget_nav_menu ul li ul { padding-left: 20px; margin: 0; } .widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a { color: #333; text-decoration: none; padding: 10px 0; display: block; padding-right: 4px; padding-left: 4px; } .widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } .widget_recent_entries ul li a .post-count, .widget_categories ul li a .post-count, .widget_archive ul li a .post-count, .widget_pages ul li a .post-count, .widget_meta ul li a .post-count, .widget_rss ul li a .post-count, .widget_nav_menu ul li a .post-count { display: block; float: right; } .widget_recent_comments li { padding: 10px 0; } /*カレンダー*/ .calendar_wrap { margin: 20px 0; } #wp-calendar { border-collapse: collapse; border-top-width: 1px; border-right-width: 1px; border-top-style: solid; border-right-style: solid; border-top-color: #eee; border-right-color: #eee; width: 100%; max-width: 400px; } #wp-calendar caption { font-weight: bold; text-align: center; } #wp-calendar #today { background-color: #ffe6b2; } #wp-calendar #today a { background-color: #ffe6b2; } #wp-calendar #today a:hover { background-color: #ffd67e; } #wp-calendar tr:nth-of-type(2n+1) { background-color: transparent; } #wp-calendar th { border-bottom-width: 1px; border-left-width: 1px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #eee; border-left-color: #eee; } #wp-calendar td { text-align: center; padding: 0px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #eee; border-left-color: #eee; } #wp-calendar td a { color: #333; display: block; background-color: #ffface; } #wp-calendar td a:hover { background-color: #fff69b; } /************************************ ** 新着記事ウィジェット(デフォルト) ************************************/ .widget-entry-cards .a-wrap { padding: 5px; line-height: 1.3; margin-bottom: 4px; } .widget-entry-cards figure { width: 120px; } .widget-entry-card { font-size: 16px; position: relative; } .widget-entry-card-content { margin-left: 126px; } .widget-entry-card-snippet { margin-top: 6px; font-size: 12px; opacity: 0.8; } .widget-entry-card-pv { margin-left: 5px; font-style: italic; font-size: 0.8em; } .border-partition a { border-bottom: 2px dotted #eee; } .border-partition a:first-of-type { border-top: 2px dotted #eee; } .border-square a { border-radius: 4px; border: 1px solid #ddd; } .card-title-bold .card-title { font-weight: 700; } .card-arrow .a-wrap { position: relative; } .card-arrow .a-wrap::after { display: block; content: ''; position: absolute; top: 50%; bottom: 0; right: 20px; width: 6px; height: 6px; border-top: solid 2px #697b91; border-right: solid 2px #697b91; transform: rotate(45deg); margin-top: -3px; } .card-arrow .card-content { margin-right: 22px; } /************************************ ** 新着記事ウィジェット(大きなサムネイル) ************************************/ .widget-entry-cards.card-large-image .a-wrap { max-width: 400px; } .widget-entry-cards.card-large-image .e-card { font-size: 18px; } .widget-entry-cards.card-large-image figure { float: none; width: 100%; } .widget-entry-cards.card-large-image figure img { width: 100%; display: block; } .widget-entry-cards.card-large-image .card-content { margin: 0 0 0.5em; padding: 0.4em 0; } .widget-entry-cards.card-large-image .widget-entry-card-pv { opacity: 0.7; position: absolute; top: 0; right: 0; padding: 3px 6px; background-color: #333; color: #fff; } /************************************ ** 新着記事ウィジェット(タイトルを重ねた大きなサムネイル) ************************************/ .widget-entry-cards.large-thumb-on .a-wrap { overflow: hidden; } .widget-entry-cards.large-thumb-on .a-wrap:hover { opacity: 0.8; } .widget-entry-cards.large-thumb-on .a-wrap:hover .card-content { margin-bottom: -4em; transition: all 0.5s; opacity: 0; } .widget-entry-cards.large-thumb-on .e-card { position: relative; } .widget-entry-cards.large-thumb-on .card-content { margin: 0; position: absolute; width: 100%; bottom: 0; padding: .6em; background: linear-gradient(180deg, transparent, #555); color: #fff; max-height: 40%; overflow: hidden; transition: all 0.5s; } .widget-entry-cards.large-thumb-on .card-snippet { margin: 0; } /************************************ ** 人気記事ウィジェットランキング表示 ************************************/ .widget-entry-cards.ranking-visible { counter-reset: p-rank; } .widget-entry-cards.ranking-visible .no-1 .card-thumb::before { background: #cca11f; } .widget-entry-cards.ranking-visible .no-2 .card-thumb::before { background: #b1b1b3; } .widget-entry-cards.ranking-visible .no-3 .card-thumb::before { background: #b37036; } .widget-entry-cards.ranking-visible .card-thumb { counter-increment: p-rank; } .widget-entry-cards.ranking-visible .card-thumb::before { content: counter(p-rank); position: absolute; top: 0; left: 0; padding: 4px; width: 18px; height: 18px; line-height: 18px; background-color: #666; color: #fff; opacity: 0.9; text-align: center; font-size: 13px; z-index: 1; } /************************************ ** 最近のコメントウィジェット ************************************/ .recent-comments { line-height: 1.3; } .recent-comment-avatar { float: left; margin-right: 10px; } .recent-comment-author { font-weight: bold; } .recent-comment-info, .recent-comment-article { font-size: 16px; } .recent-comment-article { margin-top: 3px; } .recent-comment-content { position: relative; background: #fff; border: 1px solid #ddd; padding: 6px; margin-top: 4px; font-size: 0.9em; border-radius: 5px; } .recent-comment-content::after, .recent-comment-content::before { bottom: 100%; left: 18px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .recent-comment-content::after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px; } .recent-comment-content::before { border-color: rgba(221, 221, 221, 0); border-bottom-color: #ddd; border-width: 9px; margin-left: -9px; } /************************************ ** フォーローボタウィジェット ************************************/ .sidebar .sns-follow-buttons, .footer .sns-follow-buttons { flex-wrap: wrap; justify-content: space-between; } .sidebar .sns-follow-buttons a, .footer .sns-follow-buttons a { width: 49%; margin-right: 0; } .widget_mobile_text, .widget_mobile_ad { display: none; } .widget h2 { font-size: 20px; } .entry-content .main-widget-label { display: none; } /*拡張クラスを追加するスタイルシート*/ .badge, .ref, .reffer, .sankou, .badge-red, .badge-pink, .badge-purple, .badge-blue, .badge-green, .badge-yellow, .badge-brown, .badge-grey { color: #fff; padding: 1px 5px 0; border-radius: 2px; font-size: 12px; } .badge, .ref, .reffer, .sankou { background-color: #f39800; } .badge-red { background-color: #e60033; } .badge-pink { background-color: #e95295; } .badge-purple { background-color: #884898; } .badge-blue { background-color: #0095d9; } .badge-green { background-color: #3eb370; } .badge-yellow { background-color: #ffd900; } .badge-brown { background-color: #954e2a; } .badge-grey { background-color: #949495; } /*太字*/ .bold { font-weight: bold; } /*赤色*/ .red { color: #e60033; } /*太字で赤色*/ .bold-red { font-weight: bold; color: #e60033; } /*青色*/ .blue { color: #0095d9; } /*太字で青色*/ .bold-blue { font-weight: bold; color: #0095d9; } /*緑色*/ .green { color: #3eb370; } /*太字で緑色*/ .bold-green { font-weight: bold; color: #3eb370; } /*赤のアンダーライン*/ .red-under { border-bottom: 2px solid red; } /*マーカーの黄色のような色*/ .marker { background-color: #ff9; } .marker-red { background-color: #ffd0d1; } .marker-blue { background-color: #a8dafb; } /*下半分のマーカー色(km)*/ .marker-under { background: linear-gradient(transparent 60%, #ff9 60%); } .marker-under-red { background: linear-gradient(transparent 60%, #ffd0d1 60%); } .marker-under-blue { background: linear-gradient(transparent 60%, #a8dafb 60%); } /*打ち消し線*/ .strike { text-decoration: line-through; } /*キーボードキーのスタイル*/ .keyboard-key { background-color: #f9f9f9; background-image: -moz-linear-gradient(center top, #eee, #f9f9f9, #eee); border: 1px solid #888; border-radius: 2px; box-shadow: 1px 2px 2px #ddd; font-family: inherit; font-size: 0.85em; padding: 1px 3px; } /*ブートストラップのインフォメーションライクな囲みが表示される*/ .is-style-primary-box, .primary-box, .sp-primary, .primary { color: #004085; background-color: #cce5ff; border-color: #b8daff; padding: 15px; border-radius: 4px; margin-bottom: 20px; } /*サクセスメッセージ*/ .is-style-success-box, .success-box, .sp-success, .success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; padding: 15px; border-radius: 4px; margin-bottom: 20px; } /*インフォメッセージ*/ .is-style-info-box, .info-box, .sp-info, .info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; padding: 15px; border-radius: 4px; margin-bottom: 20px; } /*注意メッセージ*/ .is-style-warning-box, .warning-box, .sp-warning, .warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; padding: 15px; border-radius: 4px; margin-bottom: 20px; } /*警告メッセージ*/ .is-style-danger-box, .danger-box, .sp-danger, .danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; padding: 15px; border-radius: 4px; margin-bottom: 20px; } /*セカンダリー*/ .is-style-secondary-box, .secondary-box { color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; padding: 15px; border-radius: 4px; margin-bottom: 20px; } /*ライト*/ .is-style-light-box, .light-box { color: #818182; background-color: #fefefe; border-color: #fdfdfe; padding: 15px; border-radius: 4px; margin-bottom: 20px; } /*ダーク*/ .is-style-dark-box, .dark-box { color: #1b1e21; background-color: #d6d8d9; border-color: #c6c8ca; padding: 15px; border-radius: 4px; margin-bottom: 20px; } /******************************* * 補足説明 ********************************/ .is-style-information-box, .is-style-question-box, .is-style-alert-box, .is-style-memo-box, .is-style-comment-box, .is-style-ok-box, .is-style-ng-box, .is-style-good-box, .is-style-bad-box, .is-style-profile-box, .information-box, .question-box, .alert-box, .information, .question, .alert, .memo-box, .comment-box, .common-icon-box { padding: 20px 20px 20px 72px; border-radius: 4px; position: relative; display: block; } .article blockquote :last-child, .article .wp-block-media-text__content :last-child, .article .wp-block-columns :last-child, .article .column-left :last-child, .article .column-center :last-child, .article .column-right :last-child, .article .column-wrap :last-child, .article .timeline-box :last-child, .article .wp-block-cover :last-child, .article .blogcard-type :last-child, .article .btn-wrap :last-child, .article .wp-block-group :last-child, .article .wp-block-gallery :last-child, .article .block-box :last-child, .article .blank-box :last-child, .article .is-style-blank-box-red :last-child, .article .is-style-blank-box-navy :last-child, .article .is-style-blank-box-blue :last-child, .article .is-style-blank-box-yellow :last-child, .article .is-style-blank-box-green :last-child, .article .is-style-blank-box-pink :last-child, .article .is-style-blank-box-orange :last-child, .article .is-style-sticky-gray :last-child, .article .is-style-sticky-yellow :last-child, .article .is-style-sticky-red :last-child, .article .is-style-sticky-blue :last-child, .article .is-style-sticky-green :last-child, .article .common-icon-box :last-child, .article .info-box :last-child, .article .primary-box :last-child, .article .success-box :last-child, .article .warning-box :last-child, .article .danger-box :last-child, .article .secondary-box :last-child, .article .light-box :last-child, .article .dark-box :last-child, .article .toc :last-child { margin-bottom: 0; } .article div.scrollable-table table, .article .wp-block-table table { margin-bottom: 0; } .article .wp-block-table .scrollable-table { margin-bottom: 0; } .is-style-information-box, .information-box, .information { background: #f3fafe; border: 1px solid #bde4fc; } .is-style-question-box, .question-box, .question { background: #fff7cc; border: 1px solid #ffe766; } .is-style-alert-box, .alert-box, .alert { background: #fdf2f2; border: 1px solid #f6b9b9; } .is-style-memo-box, .memo-box { background: #ebf8f4; border: 1px solid #8dd7c1; } .is-style-comment-box, .comment-box { background: #fefefe; border: 1px solid #ccd; } .is-style-ok-box, .ok-box { background: #f2fafb; border: 1px solid #3cb2cc; } .is-style-ng-box, .ng-box { background: #ffe7e7; border: 1px solid #dd5454; } .is-style-good-box, .good-box { background: #f7fcf7; border: 1px solid #98e093; } .is-style-bad-box, .bad-box { background: #fff1f4; border: 1px solid #eb6980; } .is-style-profile-box, .profile-box { background: #fefefe; border: 1px solid #ccd; } .is-style-information-box::before, .is-style-question-box::before, .is-style-alert-box::before, .is-style-memo-box::before, .is-style-comment-box::before, .is-style-ok-box::before, .is-style-ng-box::before, .is-style-good-box::before, .is-style-bad-box::before, .is-style-profile-box::before, .information-box::before, .question-box::before, .alert-box::before, .information::before, .question::before, .alert::before, .memo-box::before, .comment-box::before, .common-icon-box::before { font-family: "FontAwesome"; font-size: 34px; position: absolute; padding-right: .15em; line-height: 1em; top: 50%; margin-top: -.5em; left: 10px; width: 44px; text-align: center; } .is-style-information-box::before, .information-box::before, .information::before { content: '\f05a'; color: #87cefa; border-right: 1px solid #bde4fc; } .is-style-question-box::before, .question-box::before, .question::before { content: '\f059'; color: gold; border-right: 1px solid #ffe766; } .is-style-alert-box::before, .alert-box::before, .alert::before { content: '\f06a'; color: #f3aca9; border-right: 1px solid #f6b9b9; } .is-style-memo-box::before, .memo-box::before { content: '\f040'; color: #7ad0b6; border-right: 1px solid #8dd7c1; } .is-style-comment-box::before, .comment-box::before, .is-style-profile-box::before, .profile-box::before { content: '\f0e5'; color: #999; border-right: 1px solid #ccd; } .is-style-profile-box::before, .profile-box::before { content: '\f007'; } .is-style-ok-box::before, .ok-box::before { content: '\f10c'; color: #3cb2cc; border-right: 1px solid #3cb2cc; font-size: 36px; } .is-style-ng-box::before, .ng-box::before { content: '\f00d'; color: #dd5454; border-right: 1px solid #dd5454; font-size: 36px; } .is-style-good-box::before, .good-box::before { content: '\f164'; color: #98e093; border-right: 1px solid #98e093; font-size: 36px; } .is-style-bad-box::before, .bad-box::before { content: '\f165'; color: #eb6980; border-right: 1px solid #eb6980; font-size: 36px; } #wpadminbar .alert::before { display: none; } @media screen and (max-width: 440px) { .is-style-information-box, .is-style-question-box, .is-style-alert-box, .is-style-memo-box, .is-style-comment-box, .is-style-ok-box, .is-style-ng-box, .is-style-good-box, .is-style-bad-box, .is-style-profile-box, .information-box, .question-box, .alert-box, .information, .question, .alert, .memo-box, .comment-box, .common-icon-box { padding: 26px 6px 6px; } .is-style-information-box::before, .is-style-question-box::before, .is-style-alert-box::before, .is-style-memo-box::before, .is-style-comment-box::before, .is-style-ok-box::before, .is-style-ng-box::before, .is-style-good-box::before, .is-style-bad-box::before, .is-style-profile-box::before, .information-box::before, .question-box::before, .alert-box::before, .information::before, .question::before, .alert::before, .memo-box::before, .comment-box::before, .common-icon-box::before { padding: 0; top: 0.7em; left: 50%; margin-left: -0.5em; font-size: 18px; border: none; width: auto; } .container .blank-box, .container .is-style-blank-box-red, .container .is-style-blank-box-navy, .container .is-style-blank-box-blue, .container .is-style-blank-box-yellow, .container .is-style-blank-box-green, .container .is-style-blank-box-pink, .container .is-style-blank-box-orange, .container .is-style-sticky-gray, .container .is-style-sticky-yellow, .container .is-style-sticky-red, .container .is-style-sticky-blue, .container .is-style-sticky-green { margin-left: 0; margin-right: 0; } } .blank-box, .is-style-blank-box-red, .is-style-blank-box-navy, .is-style-blank-box-blue, .is-style-blank-box-yellow, .is-style-blank-box-green, .is-style-blank-box-pink, .is-style-blank-box-orange, .is-style-sticky-gray, .is-style-sticky-yellow, .is-style-sticky-red, .is-style-sticky-blue, .is-style-sticky-green { border: 3px solid #949495; padding: 1.2em 1em; margin-left: 2%; margin-right: 2%; border-radius: 4px; } .blank-box ol, .is-style-blank-box-red ol, .is-style-blank-box-navy ol, .is-style-blank-box-blue ol, .is-style-blank-box-yellow ol, .is-style-blank-box-green ol, .is-style-blank-box-pink ol, .is-style-blank-box-orange ol, .is-style-sticky-gray ol, .is-style-sticky-yellow ol, .is-style-sticky-red ol, .is-style-sticky-blue ol, .is-style-sticky-green ol, .blank-box ul, .is-style-blank-box-red ul, .is-style-blank-box-navy ul, .is-style-blank-box-blue ul, .is-style-blank-box-yellow ul, .is-style-blank-box-green ul, .is-style-blank-box-pink ul, .is-style-blank-box-orange ul, .is-style-sticky-gray ul, .is-style-sticky-yellow ul, .is-style-sticky-red ul, .is-style-sticky-blue ul, .is-style-sticky-green ul { margin: 0; } .blank-box.bb-red, .bb-red.is-style-blank-box-red, .bb-red.is-style-blank-box-navy, .bb-red.is-style-blank-box-blue, .bb-red.is-style-blank-box-yellow, .bb-red.is-style-blank-box-green, .bb-red.is-style-blank-box-pink, .bb-red.is-style-blank-box-orange, .bb-red.is-style-sticky-gray, .bb-red.is-style-sticky-yellow, .bb-red.is-style-sticky-red, .bb-red.is-style-sticky-blue, .bb-red.is-style-sticky-green { border-color: #e60033; } .blank-box.bb-pink, .bb-pink.is-style-blank-box-red, .bb-pink.is-style-blank-box-navy, .bb-pink.is-style-blank-box-blue, .bb-pink.is-style-blank-box-yellow, .bb-pink.is-style-blank-box-green, .bb-pink.is-style-blank-box-pink, .bb-pink.is-style-blank-box-orange, .bb-pink.is-style-sticky-gray, .bb-pink.is-style-sticky-yellow, .bb-pink.is-style-sticky-red, .bb-pink.is-style-sticky-blue, .bb-pink.is-style-sticky-green { border-color: #e95295; } .blank-box.bb-purple, .bb-purple.is-style-blank-box-red, .bb-purple.is-style-blank-box-navy, .bb-purple.is-style-blank-box-blue, .bb-purple.is-style-blank-box-yellow, .bb-purple.is-style-blank-box-green, .bb-purple.is-style-blank-box-pink, .bb-purple.is-style-blank-box-orange, .bb-purple.is-style-sticky-gray, .bb-purple.is-style-sticky-yellow, .bb-purple.is-style-sticky-red, .bb-purple.is-style-sticky-blue, .bb-purple.is-style-sticky-green { border-color: #884898; } .blank-box.bb-blue, .bb-blue.is-style-blank-box-red, .bb-blue.is-style-blank-box-navy, .bb-blue.is-style-blank-box-blue, .bb-blue.is-style-blank-box-yellow, .bb-blue.is-style-blank-box-green, .bb-blue.is-style-blank-box-pink, .bb-blue.is-style-blank-box-orange, .bb-blue.is-style-sticky-gray, .bb-blue.is-style-sticky-yellow, .bb-blue.is-style-sticky-red, .bb-blue.is-style-sticky-blue, .bb-blue.is-style-sticky-green { border-color: #0095d9; } .blank-box.bb-green, .bb-green.is-style-blank-box-red, .bb-green.is-style-blank-box-navy, .bb-green.is-style-blank-box-blue, .bb-green.is-style-blank-box-yellow, .bb-green.is-style-blank-box-green, .bb-green.is-style-blank-box-pink, .bb-green.is-style-blank-box-orange, .bb-green.is-style-sticky-gray, .bb-green.is-style-sticky-yellow, .bb-green.is-style-sticky-red, .bb-green.is-style-sticky-blue, .bb-green.is-style-sticky-green { border-color: #3eb370; } .blank-box.bb-orange, .bb-orange.is-style-blank-box-red, .bb-orange.is-style-blank-box-navy, .bb-orange.is-style-blank-box-blue, .bb-orange.is-style-blank-box-yellow, .bb-orange.is-style-blank-box-green, .bb-orange.is-style-blank-box-pink, .bb-orange.is-style-blank-box-orange, .bb-orange.is-style-sticky-gray, .bb-orange.is-style-sticky-yellow, .bb-orange.is-style-sticky-red, .bb-orange.is-style-sticky-blue, .bb-orange.is-style-sticky-green { border-color: #f39800; } .blank-box.bb-yellow, .bb-yellow.is-style-blank-box-red, .bb-yellow.is-style-blank-box-navy, .bb-yellow.is-style-blank-box-blue, .bb-yellow.is-style-blank-box-yellow, .bb-yellow.is-style-blank-box-green, .bb-yellow.is-style-blank-box-pink, .bb-yellow.is-style-blank-box-orange, .bb-yellow.is-style-sticky-gray, .bb-yellow.is-style-sticky-yellow, .bb-yellow.is-style-sticky-red, .bb-yellow.is-style-sticky-blue, .bb-yellow.is-style-sticky-green { border-color: #ffd900; } .blank-box.bb-brown, .bb-brown.is-style-blank-box-red, .bb-brown.is-style-blank-box-navy, .bb-brown.is-style-blank-box-blue, .bb-brown.is-style-blank-box-yellow, .bb-brown.is-style-blank-box-green, .bb-brown.is-style-blank-box-pink, .bb-brown.is-style-blank-box-orange, .bb-brown.is-style-sticky-gray, .bb-brown.is-style-sticky-yellow, .bb-brown.is-style-sticky-red, .bb-brown.is-style-sticky-blue, .bb-brown.is-style-sticky-green { border-color: #954e2a; } .blank-box.bb-grey, .bb-grey.is-style-blank-box-red, .bb-grey.is-style-blank-box-navy, .bb-grey.is-style-blank-box-blue, .bb-grey.is-style-blank-box-yellow, .bb-grey.is-style-blank-box-green, .bb-grey.is-style-blank-box-pink, .bb-grey.is-style-blank-box-orange, .bb-grey.is-style-sticky-gray, .bb-grey.is-style-sticky-yellow, .bb-grey.is-style-sticky-red, .bb-grey.is-style-sticky-blue, .bb-grey.is-style-sticky-green { border-color: #949495; } .blank-box.bb-black, .bb-black.is-style-blank-box-red, .bb-black.is-style-blank-box-navy, .bb-black.is-style-blank-box-blue, .bb-black.is-style-blank-box-yellow, .bb-black.is-style-blank-box-green, .bb-black.is-style-blank-box-pink, .bb-black.is-style-blank-box-orange, .bb-black.is-style-sticky-gray, .bb-black.is-style-sticky-yellow, .bb-black.is-style-sticky-red, .bb-black.is-style-sticky-blue, .bb-black.is-style-sticky-green { border-color: #333; } .blank-box.bb-deep, .bb-deep.is-style-blank-box-red, .bb-deep.is-style-blank-box-navy, .bb-deep.is-style-blank-box-blue, .bb-deep.is-style-blank-box-yellow, .bb-deep.is-style-blank-box-green, .bb-deep.is-style-blank-box-pink, .bb-deep.is-style-blank-box-orange, .bb-deep.is-style-sticky-gray, .bb-deep.is-style-sticky-yellow, .bb-deep.is-style-sticky-red, .bb-deep.is-style-sticky-blue, .bb-deep.is-style-sticky-green { border-color: #55295b; } .blank-box.bb-indigo, .bb-indigo.is-style-blank-box-red, .bb-indigo.is-style-blank-box-navy, .bb-indigo.is-style-blank-box-blue, .bb-indigo.is-style-blank-box-yellow, .bb-indigo.is-style-blank-box-green, .bb-indigo.is-style-blank-box-pink, .bb-indigo.is-style-blank-box-orange, .bb-indigo.is-style-sticky-gray, .bb-indigo.is-style-sticky-yellow, .bb-indigo.is-style-sticky-red, .bb-indigo.is-style-sticky-blue, .bb-indigo.is-style-sticky-green { border-color: #1e50a2; } .blank-box.bb-light-blue, .bb-light-blue.is-style-blank-box-red, .bb-light-blue.is-style-blank-box-navy, .bb-light-blue.is-style-blank-box-blue, .bb-light-blue.is-style-blank-box-yellow, .bb-light-blue.is-style-blank-box-green, .bb-light-blue.is-style-blank-box-pink, .bb-light-blue.is-style-blank-box-orange, .bb-light-blue.is-style-sticky-gray, .bb-light-blue.is-style-sticky-yellow, .bb-light-blue.is-style-sticky-red, .bb-light-blue.is-style-sticky-blue, .bb-light-blue.is-style-sticky-green { border-color: #2ca9e1; } .blank-box.bb-cyan, .bb-cyan.is-style-blank-box-red, .bb-cyan.is-style-blank-box-navy, .bb-cyan.is-style-blank-box-blue, .bb-cyan.is-style-blank-box-yellow, .bb-cyan.is-style-blank-box-green, .bb-cyan.is-style-blank-box-pink, .bb-cyan.is-style-blank-box-orange, .bb-cyan.is-style-sticky-gray, .bb-cyan.is-style-sticky-yellow, .bb-cyan.is-style-sticky-red, .bb-cyan.is-style-sticky-blue, .bb-cyan.is-style-sticky-green { border-color: #00a3af; } .blank-box.bb-teal, .bb-teal.is-style-blank-box-red, .bb-teal.is-style-blank-box-navy, .bb-teal.is-style-blank-box-blue, .bb-teal.is-style-blank-box-yellow, .bb-teal.is-style-blank-box-green, .bb-teal.is-style-blank-box-pink, .bb-teal.is-style-blank-box-orange, .bb-teal.is-style-sticky-gray, .bb-teal.is-style-sticky-yellow, .bb-teal.is-style-sticky-red, .bb-teal.is-style-sticky-blue, .bb-teal.is-style-sticky-green { border-color: #007b43; } .blank-box.bb-light-green, .bb-light-green.is-style-blank-box-red, .bb-light-green.is-style-blank-box-navy, .bb-light-green.is-style-blank-box-blue, .bb-light-green.is-style-blank-box-yellow, .bb-light-green.is-style-blank-box-green, .bb-light-green.is-style-blank-box-pink, .bb-light-green.is-style-blank-box-orange, .bb-light-green.is-style-sticky-gray, .bb-light-green.is-style-sticky-yellow, .bb-light-green.is-style-sticky-red, .bb-light-green.is-style-sticky-blue, .bb-light-green.is-style-sticky-green { border-color: #8bc34a; } .blank-box.bb-lime, .bb-lime.is-style-blank-box-red, .bb-lime.is-style-blank-box-navy, .bb-lime.is-style-blank-box-blue, .bb-lime.is-style-blank-box-yellow, .bb-lime.is-style-blank-box-green, .bb-lime.is-style-blank-box-pink, .bb-lime.is-style-blank-box-orange, .bb-lime.is-style-sticky-gray, .bb-lime.is-style-sticky-yellow, .bb-lime.is-style-sticky-red, .bb-lime.is-style-sticky-blue, .bb-lime.is-style-sticky-green { border-color: #c3d825; } .blank-box.bb-amber, .bb-amber.is-style-blank-box-red, .bb-amber.is-style-blank-box-navy, .bb-amber.is-style-blank-box-blue, .bb-amber.is-style-blank-box-yellow, .bb-amber.is-style-blank-box-green, .bb-amber.is-style-blank-box-pink, .bb-amber.is-style-blank-box-orange, .bb-amber.is-style-sticky-gray, .bb-amber.is-style-sticky-yellow, .bb-amber.is-style-sticky-red, .bb-amber.is-style-sticky-blue, .bb-amber.is-style-sticky-green { border-color: #ffc107; } .blank-box.bb-deep-orange, .bb-deep-orange.is-style-blank-box-red, .bb-deep-orange.is-style-blank-box-navy, .bb-deep-orange.is-style-blank-box-blue, .bb-deep-orange.is-style-blank-box-yellow, .bb-deep-orange.is-style-blank-box-green, .bb-deep-orange.is-style-blank-box-pink, .bb-deep-orange.is-style-blank-box-orange, .bb-deep-orange.is-style-sticky-gray, .bb-deep-orange.is-style-sticky-yellow, .bb-deep-orange.is-style-sticky-red, .bb-deep-orange.is-style-sticky-blue, .bb-deep-orange.is-style-sticky-green { border-color: #ea5506; } .blank-box.bb-white, .bb-white.is-style-blank-box-red, .bb-white.is-style-blank-box-navy, .bb-white.is-style-blank-box-blue, .bb-white.is-style-blank-box-yellow, .bb-white.is-style-blank-box-green, .bb-white.is-style-blank-box-pink, .bb-white.is-style-blank-box-orange, .bb-white.is-style-sticky-gray, .bb-white.is-style-sticky-yellow, .bb-white.is-style-sticky-red, .bb-white.is-style-sticky-blue, .bb-white.is-style-sticky-green { border-color: #fff; } .blank-box.bb-tab, .bb-tab.is-style-blank-box-red, .bb-tab.is-style-blank-box-navy, .bb-tab.is-style-blank-box-blue, .bb-tab.is-style-blank-box-yellow, .bb-tab.is-style-blank-box-green, .bb-tab.is-style-blank-box-pink, .bb-tab.is-style-blank-box-orange, .bb-tab.is-style-sticky-gray, .bb-tab.is-style-sticky-yellow, .bb-tab.is-style-sticky-red, .bb-tab.is-style-sticky-blue, .bb-tab.is-style-sticky-green { position: relative; margin-top: 2em; border-top-left-radius: 0; } .blank-box.bb-tab .bb-label, .bb-tab.is-style-blank-box-red .bb-label, .bb-tab.is-style-blank-box-navy .bb-label, .bb-tab.is-style-blank-box-blue .bb-label, .bb-tab.is-style-blank-box-yellow .bb-label, .bb-tab.is-style-blank-box-green .bb-label, .bb-tab.is-style-blank-box-pink .bb-label, .bb-tab.is-style-blank-box-orange .bb-label, .bb-tab.is-style-sticky-gray .bb-label, .bb-tab.is-style-sticky-yellow .bb-label, .bb-tab.is-style-sticky-red .bb-label, .bb-tab.is-style-sticky-blue .bb-label, .bb-tab.is-style-sticky-green .bb-label { background-color: #949495; font-family: Aharoni, "Arial Black", Impact, Arial, sans-serif; position: absolute; font-size: 13px; top: -1.8em; line-height: 1.8; color: #fff; left: -3px; border-radius: 6px 6px 0 0; padding: 0 1em 0 .8em; } .blank-box.bb-tab .bb-label .fa, .bb-tab.is-style-blank-box-red .bb-label .fa, .bb-tab.is-style-blank-box-navy .bb-label .fa, .bb-tab.is-style-blank-box-blue .bb-label .fa, .bb-tab.is-style-blank-box-yellow .bb-label .fa, .bb-tab.is-style-blank-box-green .bb-label .fa, .bb-tab.is-style-blank-box-pink .bb-label .fa, .bb-tab.is-style-blank-box-orange .bb-label .fa, .bb-tab.is-style-sticky-gray .bb-label .fa, .bb-tab.is-style-sticky-yellow .bb-label .fa, .bb-tab.is-style-sticky-red .bb-label .fa, .bb-tab.is-style-sticky-blue .bb-label .fa, .bb-tab.is-style-sticky-green .bb-label .fa { margin-right: 6px; } .blank-box.bb-tab.bb-red .bb-label, .bb-tab.bb-red.is-style-blank-box-red .bb-label, .bb-tab.bb-red.is-style-blank-box-navy .bb-label, .bb-tab.bb-red.is-style-blank-box-blue .bb-label, .bb-tab.bb-red.is-style-blank-box-yellow .bb-label, .bb-tab.bb-red.is-style-blank-box-green .bb-label, .bb-tab.bb-red.is-style-blank-box-pink .bb-label, .bb-tab.bb-red.is-style-blank-box-orange .bb-label, .bb-tab.bb-red.is-style-sticky-gray .bb-label, .bb-tab.bb-red.is-style-sticky-yellow .bb-label, .bb-tab.bb-red.is-style-sticky-red .bb-label, .bb-tab.bb-red.is-style-sticky-blue .bb-label, .bb-tab.bb-red.is-style-sticky-green .bb-label { background-color: #e60033; } .blank-box.bb-tab.bb-pink .bb-label, .bb-tab.bb-pink.is-style-blank-box-red .bb-label, .bb-tab.bb-pink.is-style-blank-box-navy .bb-label, .bb-tab.bb-pink.is-style-blank-box-blue .bb-label, .bb-tab.bb-pink.is-style-blank-box-yellow .bb-label, .bb-tab.bb-pink.is-style-blank-box-green .bb-label, .bb-tab.bb-pink.is-style-blank-box-pink .bb-label, .bb-tab.bb-pink.is-style-blank-box-orange .bb-label, .bb-tab.bb-pink.is-style-sticky-gray .bb-label, .bb-tab.bb-pink.is-style-sticky-yellow .bb-label, .bb-tab.bb-pink.is-style-sticky-red .bb-label, .bb-tab.bb-pink.is-style-sticky-blue .bb-label, .bb-tab.bb-pink.is-style-sticky-green .bb-label { background-color: #e95295; } .blank-box.bb-tab.bb-purple .bb-label, .bb-tab.bb-purple.is-style-blank-box-red .bb-label, .bb-tab.bb-purple.is-style-blank-box-navy .bb-label, .bb-tab.bb-purple.is-style-blank-box-blue .bb-label, .bb-tab.bb-purple.is-style-blank-box-yellow .bb-label, .bb-tab.bb-purple.is-style-blank-box-green .bb-label, .bb-tab.bb-purple.is-style-blank-box-pink .bb-label, .bb-tab.bb-purple.is-style-blank-box-orange .bb-label, .bb-tab.bb-purple.is-style-sticky-gray .bb-label, .bb-tab.bb-purple.is-style-sticky-yellow .bb-label, .bb-tab.bb-purple.is-style-sticky-red .bb-label, .bb-tab.bb-purple.is-style-sticky-blue .bb-label, .bb-tab.bb-purple.is-style-sticky-green .bb-label { background-color: #884898; } .blank-box.bb-tab.bb-blue .bb-label, .bb-tab.bb-blue.is-style-blank-box-red .bb-label, .bb-tab.bb-blue.is-style-blank-box-navy .bb-label, .bb-tab.bb-blue.is-style-blank-box-blue .bb-label, .bb-tab.bb-blue.is-style-blank-box-yellow .bb-label, .bb-tab.bb-blue.is-style-blank-box-green .bb-label, .bb-tab.bb-blue.is-style-blank-box-pink .bb-label, .bb-tab.bb-blue.is-style-blank-box-orange .bb-label, .bb-tab.bb-blue.is-style-sticky-gray .bb-label, .bb-tab.bb-blue.is-style-sticky-yellow .bb-label, .bb-tab.bb-blue.is-style-sticky-red .bb-label, .bb-tab.bb-blue.is-style-sticky-blue .bb-label, .bb-tab.bb-blue.is-style-sticky-green .bb-label { background-color: #0095d9; } .blank-box.bb-tab.bb-green .bb-label, .bb-tab.bb-green.is-style-blank-box-red .bb-label, .bb-tab.bb-green.is-style-blank-box-navy .bb-label, .bb-tab.bb-green.is-style-blank-box-blue .bb-label, .bb-tab.bb-green.is-style-blank-box-yellow .bb-label, .bb-tab.bb-green.is-style-blank-box-green .bb-label, .bb-tab.bb-green.is-style-blank-box-pink .bb-label, .bb-tab.bb-green.is-style-blank-box-orange .bb-label, .bb-tab.bb-green.is-style-sticky-gray .bb-label, .bb-tab.bb-green.is-style-sticky-yellow .bb-label, .bb-tab.bb-green.is-style-sticky-red .bb-label, .bb-tab.bb-green.is-style-sticky-blue .bb-label, .bb-tab.bb-green.is-style-sticky-green .bb-label { background-color: #3eb370; } .blank-box.bb-tab.bb-orange .bb-label, .bb-tab.bb-orange.is-style-blank-box-red .bb-label, .bb-tab.bb-orange.is-style-blank-box-navy .bb-label, .bb-tab.bb-orange.is-style-blank-box-blue .bb-label, .bb-tab.bb-orange.is-style-blank-box-yellow .bb-label, .bb-tab.bb-orange.is-style-blank-box-green .bb-label, .bb-tab.bb-orange.is-style-blank-box-pink .bb-label, .bb-tab.bb-orange.is-style-blank-box-orange .bb-label, .bb-tab.bb-orange.is-style-sticky-gray .bb-label, .bb-tab.bb-orange.is-style-sticky-yellow .bb-label, .bb-tab.bb-orange.is-style-sticky-red .bb-label, .bb-tab.bb-orange.is-style-sticky-blue .bb-label, .bb-tab.bb-orange.is-style-sticky-green .bb-label { background-color: #f39800; } .blank-box.bb-tab.bb-yellow .bb-label, .bb-tab.bb-yellow.is-style-blank-box-red .bb-label, .bb-tab.bb-yellow.is-style-blank-box-navy .bb-label, .bb-tab.bb-yellow.is-style-blank-box-blue .bb-label, .bb-tab.bb-yellow.is-style-blank-box-yellow .bb-label, .bb-tab.bb-yellow.is-style-blank-box-green .bb-label, .bb-tab.bb-yellow.is-style-blank-box-pink .bb-label, .bb-tab.bb-yellow.is-style-blank-box-orange .bb-label, .bb-tab.bb-yellow.is-style-sticky-gray .bb-label, .bb-tab.bb-yellow.is-style-sticky-yellow .bb-label, .bb-tab.bb-yellow.is-style-sticky-red .bb-label, .bb-tab.bb-yellow.is-style-sticky-blue .bb-label, .bb-tab.bb-yellow.is-style-sticky-green .bb-label { background-color: #ffd900; } .blank-box.bb-tab.bb-brown .bb-label, .bb-tab.bb-brown.is-style-blank-box-red .bb-label, .bb-tab.bb-brown.is-style-blank-box-navy .bb-label, .bb-tab.bb-brown.is-style-blank-box-blue .bb-label, .bb-tab.bb-brown.is-style-blank-box-yellow .bb-label, .bb-tab.bb-brown.is-style-blank-box-green .bb-label, .bb-tab.bb-brown.is-style-blank-box-pink .bb-label, .bb-tab.bb-brown.is-style-blank-box-orange .bb-label, .bb-tab.bb-brown.is-style-sticky-gray .bb-label, .bb-tab.bb-brown.is-style-sticky-yellow .bb-label, .bb-tab.bb-brown.is-style-sticky-red .bb-label, .bb-tab.bb-brown.is-style-sticky-blue .bb-label, .bb-tab.bb-brown.is-style-sticky-green .bb-label { background-color: #954e2a; } .blank-box.bb-tab.bb-grey .bb-label, .bb-tab.bb-grey.is-style-blank-box-red .bb-label, .bb-tab.bb-grey.is-style-blank-box-navy .bb-label, .bb-tab.bb-grey.is-style-blank-box-blue .bb-label, .bb-tab.bb-grey.is-style-blank-box-yellow .bb-label, .bb-tab.bb-grey.is-style-blank-box-green .bb-label, .bb-tab.bb-grey.is-style-blank-box-pink .bb-label, .bb-tab.bb-grey.is-style-blank-box-orange .bb-label, .bb-tab.bb-grey.is-style-sticky-gray .bb-label, .bb-tab.bb-grey.is-style-sticky-yellow .bb-label, .bb-tab.bb-grey.is-style-sticky-red .bb-label, .bb-tab.bb-grey.is-style-sticky-blue .bb-label, .bb-tab.bb-grey.is-style-sticky-green .bb-label { background-color: #949495; } .blank-box.bb-tab.bb-black .bb-label, .bb-tab.bb-black.is-style-blank-box-red .bb-label, .bb-tab.bb-black.is-style-blank-box-navy .bb-label, .bb-tab.bb-black.is-style-blank-box-blue .bb-label, .bb-tab.bb-black.is-style-blank-box-yellow .bb-label, .bb-tab.bb-black.is-style-blank-box-green .bb-label, .bb-tab.bb-black.is-style-blank-box-pink .bb-label, .bb-tab.bb-black.is-style-blank-box-orange .bb-label, .bb-tab.bb-black.is-style-sticky-gray .bb-label, .bb-tab.bb-black.is-style-sticky-yellow .bb-label, .bb-tab.bb-black.is-style-sticky-red .bb-label, .bb-tab.bb-black.is-style-sticky-blue .bb-label, .bb-tab.bb-black.is-style-sticky-green .bb-label { background-color: #333; } .blank-box.bb-tab.bb-deep .bb-label, .bb-tab.bb-deep.is-style-blank-box-red .bb-label, .bb-tab.bb-deep.is-style-blank-box-navy .bb-label, .bb-tab.bb-deep.is-style-blank-box-blue .bb-label, .bb-tab.bb-deep.is-style-blank-box-yellow .bb-label, .bb-tab.bb-deep.is-style-blank-box-green .bb-label, .bb-tab.bb-deep.is-style-blank-box-pink .bb-label, .bb-tab.bb-deep.is-style-blank-box-orange .bb-label, .bb-tab.bb-deep.is-style-sticky-gray .bb-label, .bb-tab.bb-deep.is-style-sticky-yellow .bb-label, .bb-tab.bb-deep.is-style-sticky-red .bb-label, .bb-tab.bb-deep.is-style-sticky-blue .bb-label, .bb-tab.bb-deep.is-style-sticky-green .bb-label { background-color: #55295b; } .blank-box.bb-tab.bb-indigo .bb-label, .bb-tab.bb-indigo.is-style-blank-box-red .bb-label, .bb-tab.bb-indigo.is-style-blank-box-navy .bb-label, .bb-tab.bb-indigo.is-style-blank-box-blue .bb-label, .bb-tab.bb-indigo.is-style-blank-box-yellow .bb-label, .bb-tab.bb-indigo.is-style-blank-box-green .bb-label, .bb-tab.bb-indigo.is-style-blank-box-pink .bb-label, .bb-tab.bb-indigo.is-style-blank-box-orange .bb-label, .bb-tab.bb-indigo.is-style-sticky-gray .bb-label, .bb-tab.bb-indigo.is-style-sticky-yellow .bb-label, .bb-tab.bb-indigo.is-style-sticky-red .bb-label, .bb-tab.bb-indigo.is-style-sticky-blue .bb-label, .bb-tab.bb-indigo.is-style-sticky-green .bb-label { background-color: #1e50a2; } .blank-box.bb-tab.bb-light-blue .bb-label, .bb-tab.bb-light-blue.is-style-blank-box-red .bb-label, .bb-tab.bb-light-blue.is-style-blank-box-navy .bb-label, .bb-tab.bb-light-blue.is-style-blank-box-blue .bb-label, .bb-tab.bb-light-blue.is-style-blank-box-yellow .bb-label, .bb-tab.bb-light-blue.is-style-blank-box-green .bb-label, .bb-tab.bb-light-blue.is-style-blank-box-pink .bb-label, .bb-tab.bb-light-blue.is-style-blank-box-orange .bb-label, .bb-tab.bb-light-blue.is-style-sticky-gray .bb-label, .bb-tab.bb-light-blue.is-style-sticky-yellow .bb-label, .bb-tab.bb-light-blue.is-style-sticky-red .bb-label, .bb-tab.bb-light-blue.is-style-sticky-blue .bb-label, .bb-tab.bb-light-blue.is-style-sticky-green .bb-label { background-color: #2ca9e1; } .blank-box.bb-tab.bb-cyan .bb-label, .bb-tab.bb-cyan.is-style-blank-box-red .bb-label, .bb-tab.bb-cyan.is-style-blank-box-navy .bb-label, .bb-tab.bb-cyan.is-style-blank-box-blue .bb-label, .bb-tab.bb-cyan.is-style-blank-box-yellow .bb-label, .bb-tab.bb-cyan.is-style-blank-box-green .bb-label, .bb-tab.bb-cyan.is-style-blank-box-pink .bb-label, .bb-tab.bb-cyan.is-style-blank-box-orange .bb-label, .bb-tab.bb-cyan.is-style-sticky-gray .bb-label, .bb-tab.bb-cyan.is-style-sticky-yellow .bb-label, .bb-tab.bb-cyan.is-style-sticky-red .bb-label, .bb-tab.bb-cyan.is-style-sticky-blue .bb-label, .bb-tab.bb-cyan.is-style-sticky-green .bb-label { background-color: #00a3af; } .blank-box.bb-tab.bb-teal .bb-label, .bb-tab.bb-teal.is-style-blank-box-red .bb-label, .bb-tab.bb-teal.is-style-blank-box-navy .bb-label, .bb-tab.bb-teal.is-style-blank-box-blue .bb-label, .bb-tab.bb-teal.is-style-blank-box-yellow .bb-label, .bb-tab.bb-teal.is-style-blank-box-green .bb-label, .bb-tab.bb-teal.is-style-blank-box-pink .bb-label, .bb-tab.bb-teal.is-style-blank-box-orange .bb-label, .bb-tab.bb-teal.is-style-sticky-gray .bb-label, .bb-tab.bb-teal.is-style-sticky-yellow .bb-label, .bb-tab.bb-teal.is-style-sticky-red .bb-label, .bb-tab.bb-teal.is-style-sticky-blue .bb-label, .bb-tab.bb-teal.is-style-sticky-green .bb-label { background-color: #007b43; } .blank-box.bb-tab.bb-light-green .bb-label, .bb-tab.bb-light-green.is-style-blank-box-red .bb-label, .bb-tab.bb-light-green.is-style-blank-box-navy .bb-label, .bb-tab.bb-light-green.is-style-blank-box-blue .bb-label, .bb-tab.bb-light-green.is-style-blank-box-yellow .bb-label, .bb-tab.bb-light-green.is-style-blank-box-green .bb-label, .bb-tab.bb-light-green.is-style-blank-box-pink .bb-label, .bb-tab.bb-light-green.is-style-blank-box-orange .bb-label, .bb-tab.bb-light-green.is-style-sticky-gray .bb-label, .bb-tab.bb-light-green.is-style-sticky-yellow .bb-label, .bb-tab.bb-light-green.is-style-sticky-red .bb-label, .bb-tab.bb-light-green.is-style-sticky-blue .bb-label, .bb-tab.bb-light-green.is-style-sticky-green .bb-label { background-color: #8bc34a; } .blank-box.bb-tab.bb-lime .bb-label, .bb-tab.bb-lime.is-style-blank-box-red .bb-label, .bb-tab.bb-lime.is-style-blank-box-navy .bb-label, .bb-tab.bb-lime.is-style-blank-box-blue .bb-label, .bb-tab.bb-lime.is-style-blank-box-yellow .bb-label, .bb-tab.bb-lime.is-style-blank-box-green .bb-label, .bb-tab.bb-lime.is-style-blank-box-pink .bb-label, .bb-tab.bb-lime.is-style-blank-box-orange .bb-label, .bb-tab.bb-lime.is-style-sticky-gray .bb-label, .bb-tab.bb-lime.is-style-sticky-yellow .bb-label, .bb-tab.bb-lime.is-style-sticky-red .bb-label, .bb-tab.bb-lime.is-style-sticky-blue .bb-label, .bb-tab.bb-lime.is-style-sticky-green .bb-label { background-color: #c3d825; } .blank-box.bb-tab.bb-amber .bb-label, .bb-tab.bb-amber.is-style-blank-box-red .bb-label, .bb-tab.bb-amber.is-style-blank-box-navy .bb-label, .bb-tab.bb-amber.is-style-blank-box-blue .bb-label, .bb-tab.bb-amber.is-style-blank-box-yellow .bb-label, .bb-tab.bb-amber.is-style-blank-box-green .bb-label, .bb-tab.bb-amber.is-style-blank-box-pink .bb-label, .bb-tab.bb-amber.is-style-blank-box-orange .bb-label, .bb-tab.bb-amber.is-style-sticky-gray .bb-label, .bb-tab.bb-amber.is-style-sticky-yellow .bb-label, .bb-tab.bb-amber.is-style-sticky-red .bb-label, .bb-tab.bb-amber.is-style-sticky-blue .bb-label, .bb-tab.bb-amber.is-style-sticky-green .bb-label { background-color: #ffc107; } .blank-box.bb-tab.bb-deep-orange .bb-label, .bb-tab.bb-deep-orange.is-style-blank-box-red .bb-label, .bb-tab.bb-deep-orange.is-style-blank-box-navy .bb-label, .bb-tab.bb-deep-orange.is-style-blank-box-blue .bb-label, .bb-tab.bb-deep-orange.is-style-blank-box-yellow .bb-label, .bb-tab.bb-deep-orange.is-style-blank-box-green .bb-label, .bb-tab.bb-deep-orange.is-style-blank-box-pink .bb-label, .bb-tab.bb-deep-orange.is-style-blank-box-orange .bb-label, .bb-tab.bb-deep-orange.is-style-sticky-gray .bb-label, .bb-tab.bb-deep-orange.is-style-sticky-yellow .bb-label, .bb-tab.bb-deep-orange.is-style-sticky-red .bb-label, .bb-tab.bb-deep-orange.is-style-sticky-blue .bb-label, .bb-tab.bb-deep-orange.is-style-sticky-green .bb-label { background-color: #ea5506; } .blank-box.bb-tab.bb-white .bb-label, .bb-tab.bb-white.is-style-blank-box-red .bb-label, .bb-tab.bb-white.is-style-blank-box-navy .bb-label, .bb-tab.bb-white.is-style-blank-box-blue .bb-label, .bb-tab.bb-white.is-style-blank-box-yellow .bb-label, .bb-tab.bb-white.is-style-blank-box-green .bb-label, .bb-tab.bb-white.is-style-blank-box-pink .bb-label, .bb-tab.bb-white.is-style-blank-box-orange .bb-label, .bb-tab.bb-white.is-style-sticky-gray .bb-label, .bb-tab.bb-white.is-style-sticky-yellow .bb-label, .bb-tab.bb-white.is-style-sticky-red .bb-label, .bb-tab.bb-white.is-style-sticky-blue .bb-label, .bb-tab.bb-white.is-style-sticky-green .bb-label { background-color: #fff; } .blank-box.sticky, .sticky.is-style-blank-box-red, .sticky.is-style-blank-box-navy, .sticky.is-style-blank-box-blue, .sticky.is-style-blank-box-yellow, .sticky.is-style-blank-box-green, .sticky.is-style-blank-box-pink, .sticky.is-style-blank-box-orange, .is-style-sticky-gray, .is-style-sticky-yellow, .is-style-sticky-red, .is-style-sticky-blue, .is-style-sticky-green { border-width: 0 0 0 6px; border-color: #777; background-color: #f5f6f7; } .blank-box.sticky.st-yellow, .sticky.st-yellow.is-style-blank-box-red, .sticky.st-yellow.is-style-blank-box-navy, .sticky.st-yellow.is-style-blank-box-blue, .sticky.st-yellow.is-style-blank-box-yellow, .sticky.st-yellow.is-style-blank-box-green, .sticky.st-yellow.is-style-blank-box-pink, .sticky.st-yellow.is-style-blank-box-orange, .st-yellow.is-style-sticky-gray, .st-yellow.is-style-sticky-yellow, .st-yellow.is-style-sticky-red, .st-yellow.is-style-sticky-blue, .st-yellow.is-style-sticky-green { border-color: #FFA103; background-color: #ffeac7; } .blank-box.sticky.st-red, .sticky.st-red.is-style-blank-box-red, .sticky.st-red.is-style-blank-box-navy, .sticky.st-red.is-style-blank-box-blue, .sticky.st-red.is-style-blank-box-yellow, .sticky.st-red.is-style-blank-box-green, .sticky.st-red.is-style-blank-box-pink, .sticky.st-red.is-style-blank-box-orange, .st-red.is-style-sticky-gray, .st-red.is-style-sticky-yellow, .st-red.is-style-sticky-red, .st-red.is-style-sticky-blue, .st-red.is-style-sticky-green { border-color: #CD3740; background-color: #F5DADC; } .blank-box.sticky.st-blue, .sticky.st-blue.is-style-blank-box-red, .sticky.st-blue.is-style-blank-box-navy, .sticky.st-blue.is-style-blank-box-blue, .sticky.st-blue.is-style-blank-box-yellow, .sticky.st-blue.is-style-blank-box-green, .sticky.st-blue.is-style-blank-box-pink, .sticky.st-blue.is-style-blank-box-orange, .st-blue.is-style-sticky-gray, .st-blue.is-style-sticky-yellow, .st-blue.is-style-sticky-red, .st-blue.is-style-sticky-blue, .st-blue.is-style-sticky-green { border-color: #0066cc; background-color: #E5F2FF; } .blank-box.sticky.st-green, .sticky.st-green.is-style-blank-box-red, .sticky.st-green.is-style-blank-box-navy, .sticky.st-green.is-style-blank-box-blue, .sticky.st-green.is-style-blank-box-yellow, .sticky.st-green.is-style-blank-box-green, .sticky.st-green.is-style-blank-box-pink, .sticky.st-green.is-style-blank-box-orange, .st-green.is-style-sticky-gray, .st-green.is-style-sticky-yellow, .st-green.is-style-sticky-red, .st-green.is-style-sticky-blue, .st-green.is-style-sticky-green { border-color: #028760; background-color: #CBEFE4; } .is-style-blank-box-red { border-color: #e60033; } .is-style-blank-box-pink { border-color: #e95295; } .is-style-blank-box-navy { border-color: #1e50a2; } .is-style-blank-box-blue { border-color: #0095d9; } .is-style-blank-box-yellow { border-color: #ffd900; } .is-style-blank-box-green { border-color: #3eb370; } .is-style-blank-box-orange { border-color: #f39800; } .is-style-sticky-yellow { border-color: #FFA103; background-color: #ffeac7; } .is-style-sticky-red { border-color: #CD3740; background-color: #F5DADC; } .is-style-sticky-blue { border-color: #0066cc; background-color: #E5F2FF; } .is-style-sticky-green { border-color: #028760; background-color: #CBEFE4; } .bb-check .bb-label .fa::before { content: ""; } .bb-check .bb-label::after { content: "CHECK"; } .bb-comment .bb-label .fa::before { content: ""; } .bb-comment .bb-label::after { content: "COMMENT"; } .bb-point .bb-label .fa::before { content: ""; } .bb-point .bb-label::after { content: "POINT"; } .bb-tips .bb-label .fa::before { content: ""; } .bb-tips .bb-label::after { content: "TIPS"; } .bb-hint .bb-label .fa::before { content: ""; } .bb-hint .bb-label::after { content: "HINT"; } .bb-pickup .bb-label .fa::before { content: ""; } .bb-pickup .bb-label::after { content: "PICKUP"; } .bb-bookmark .bb-label .fa::before { content: ""; } .bb-bookmark .bb-label::after { content: "BOOKMARK"; } .bb-memo .bb-label .fa::before { content: ""; } .bb-memo .bb-label::after { content: "MEMO"; } .bb-download .bb-label .fa::before { content: ""; } .bb-download .bb-label::after { content: "DOWNLOAD"; } .bb-break .bb-label .fa::before { content: ""; } .bb-break .bb-label::after { content: "BREAK"; } .bb-amazon .bb-label .fa::before { content: ""; } .bb-amazon .bb-label::after { content: "AMAZON"; } .bb-ok .bb-label .fa::before { content: ""; } .bb-ok .bb-label::after { content: "OK"; } .bb-ng .bb-label .fa::before { content: ""; } .bb-ng .bb-label::after { content: "NG"; } .bb-good .bb-label .fa::before { content: ""; } .bb-good .bb-label::after { content: "GOOD"; } .bb-bad .bb-label .fa::before { content: ""; } .bb-bad .bb-label::after { content: "BAD"; } .bb-profile .bb-label .fa::before { content: ""; } .bb-profile .bb-label::after { content: "PROFILE"; } /******************************* * 続きはWEBで的な検索ボックス ********************************/ div.search-form { margin: 3em 0; display: flex; max-width: 420px; } .search-form > div { border: 1px solid #555; border-radius: 2px; padding: 5px; margin-left: 10px; } .search-form div.sform { background-color: #fff; width: 100%; } .search-form div.sbtn { background-color: #1155EE; color: #fff; text-align: center; width: 140px; position: relative; } .search-form div.sbtn:before { content: "\f002"; font-family: FontAwesome; margin-right: 7px; } .search-form div.sbtn::after { content: "\f25a"; font-family: FontAwesome; color: #000; position: absolute; bottom: -1.5em; font-size: 25px; } @media screen and (max-width: 450px) { .search-form div { padding: 3px 5px; font-size: 75%; } .search-form div.sform { min-width: 180px; } .search-form div.sbtn { padding-left: 5px; padding-right: 10px; } .search-form div.sbtn::after { font-size: 20px; margin-left: -10px; } } .btn-wrap { min-height: 2em; } .btn-wrap img[width="1"] { position: absolute; bottom: 0; right: 0; } .btn, .ranking-item-link-buttons a, .btn-wrap > a, .wp-block-freeform .btn-wrap > a { color: #fff; background-color: #32373c; font-weight: bold; border-radius: 4px; display: inline-block; cursor: pointer; line-height: normal; padding: 7px 13px; text-decoration: none; text-align: center; font-size: 14px; border: 2px solid transparent; position: relative; } .btn amp-img, .ranking-item-link-buttons a amp-img, .btn-wrap > a amp-img, .wp-block-freeform .btn-wrap > a amp-img { position: absolute; } .btn:before, .ranking-item-link-buttons a:before, .btn:after, .ranking-item-link-buttons a:after, .btn-wrap > a:before, .btn-wrap > a:after { font-family: FontAwesome; margin-right: 12px; transition: all .2s ease; } .btn-m, .btn-wrap.btn-wrap-m > a { padding: 14px 45px; font-size: 16px; } .btn-l, .ranking-item-link-buttons a, .btn-wrap.btn-wrap-l > a { padding: 14px 20px; font-size: 18px; display: flex; justify-content: center; align-items: center; } .btn-l::after, .ranking-item-link-buttons a::after, .btn-wrap.btn-wrap-l > a::after { content: "\f105"; position: absolute; right: 0; font-size: 20px; } .btn:hover, .ranking-item-link-buttons a:hover, .btn-wrap > a:hover { opacity: 0.7; color: #fff; transition: all 0.3s ease-in-out; } .btn:hover::after, .ranking-item-link-buttons a:hover::after, .btn-wrap > a:hover::after { right: -4px; transition: all 0.3s ease-in-out; } .btn-l.btn-circle::after, .ranking-item-link-buttons a.btn-circle::after, .btn-wrap.btn-wrap-l.btn-wrap-circle > a::after { right: 8px; } .btn-l.btn-circle:hover::after, .ranking-item-link-buttons a.btn-circle:hover::after, .btn-wrap.btn-wrap-l.btn-wrap-circle > a:hover::after { right: 4px; } /* ボタンを光らせる */ .btn-shine, .btn-wrap-shine > a { overflow: hidden; } .btn-shine:before, .btn-wrap-shine > a:before { animation: shine 3s ease-in-out infinite; background-color: #fff; content: " "; height: 100%; left: 0; opacity: 0; position: absolute; top: -180px; transform: rotate(45deg); width: 30px; } .btn-circle, .btn-wrap-circle > a { border-radius: 99px; } .btn-white, .btn-wrap.btn-wrap-white > a { color: #333; background-color: #fff; } #container .btn-white:hover, #container .btn-wrap.btn-wrap-white > a:hover { color: #333; } .btn-red, .ranking-item-link a, .btn-wrap.btn-wrap-red > a { background-color: #e60033; } .btn-pink, .btn-wrap.btn-wrap-pink > a { background-color: #e95295; } .btn-purple, .btn-wrap.btn-wrap-purple > a { background-color: #884898; } .btn-deep, .btn-wrap.btn-wrap-deep > a { background-color: #55295b; } .btn-indigo, .btn-wrap.btn-wrap-indigo > a { background-color: #1e50a2; } .btn-blue, .ranking-item-detail a, .btn-wrap.btn-wrap-blue > a { background-color: #0095d9; } .btn-light-blue, .btn-wrap.btn-wrap-light-blue > a { background-color: #2ca9e1; } .btn-cyan, .btn-wrap.btn-wrap-cyan > a { background-color: #00a3af; } .btn-teal, .btn-wrap.btn-wrap-teal > a { background-color: #007b43; } .btn-green, .btn-wrap.btn-wrap-green > a { background-color: #3eb370; } .btn-light-green, .btn-wrap.btn-wrap-light-green > a { background-color: #8bc34a; } .btn-lime, .btn-wrap.btn-wrap-lime > a { background-color: #c3d825; } .btn-yellow, .btn-wrap.btn-wrap-yellow > a { background-color: #ffd900; } .btn-amber, .btn-wrap.btn-wrap-amber > a { background-color: #ffc107; } .btn-orange, .btn-wrap.btn-wrap-orange > a { background-color: #f39800; } .btn-deep-orange, .btn-wrap.btn-wrap-deep-orange > a { background-color: #ea5506; } .btn-brown, .btn-wrap.btn-wrap-brown > a { background-color: #954e2a; } .btn-grey, .btn-wrap.btn-wrap-grey > a { background-color: #949495; } .btn-blue-grey, .btn-wrap.btn-wrap-blue-grey > a { background-color: #607d8b; } .btn-black, .btn-wrap.btn-wrap-black > a { background-color: #333; } .btn-arrow-right:before, .btn-wrap.btn-wrap-arrow-right > a:before { content: "\f061"; } .btn-chevron-right:before, .btn-wrap.btn-wrap-chevron-circle-right > a:before { content: "\f054"; } .btn-angle-right:before, .btn-wrap.btn-wrap-angle-right > a:before { content: "\f105"; } .btn-caret-right:before, .btn-wrap.btn-wrap-caret-right > a:before { content: "\f0da"; } .btn-long-arrow-right:before, .btn-wrap.btn-wrap-long-arrow-right > a:before { content: "\f178"; } .btn-chevron-circle-right:before, .btn-wrap.btn-wrap-chevron-circle-right > a:before { content: "\f138"; } .btn-angle-double-right:before, .btn-wrap.btn-wrap-angle-double-right > a:before { content: "\f101"; } .btn-arrow-circle-right:before, .btn-wrap.btn-wrap-arrow-circle-right > a:before { content: "\f0a9"; } .btn-hand-o-right:before, .btn-wrap.btn-wrap-hand-o-right > a:before { content: "\f0a4"; } .btn-arrow-circle-o-right:before, .btn-wrap.btn-wrap-arrow-circle-o-right > a:before { content: "\f18e"; } .btn-caret-square-o-right:before, .btn-wrap.btn-wrap-caret-square-o-right > a:before { content: "\f152"; } .micro-copy.alignleft { float: none; margin-right: 0; text-align: left; } .micro-copy.alignright { float: none; margin-left: 0; text-align: right; } .micro-copy.aligncenter { text-align: center; } .micro-top { font-size: 0.8em; margin-bottom: 0.2em; } .micro-bottom { font-size: 0.8em; margin-top: -1.2em; } .micro-center { text-align: center; } .micro-right { text-align: right; } .micro-balloon { position: relative; background: #fff; border: 1px solid #999; border-radius: 4px; padding: 3px 12px; display: table; margin-bottom: 0.8em; font-size: 0.8em; } .micro-balloon.has-background { color: #fff; } .micro-balloon.aligncenter { margin-left: auto; margin-right: auto; } .micro-balloon.alignleft { margin-right: auto; } .micro-balloon.alignright { margin-left: auto; } .micro-balloon:after, .micro-balloon:before { top: calc(100% - 1px); left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .micro-balloon:after { border-top-color: #fff; border-width: 7px; margin-left: -7px; } .micro-balloon:before { border-top-color: #999; border-width: 8px; margin-left: -8px; } .micro-balloon-center { margin-left: auto; margin-right: auto; } .micro-balloon-right { margin-left: auto; } .micro-bottom.micro-balloon { margin-top: -.5em; } .micro-bottom.micro-balloon:after, .micro-bottom.micro-balloon:before { bottom: calc(100% - 1px); top: auto; } .micro-bottom.micro-balloon:after { border-bottom-color: #fff; border-top-color: transparent; } .micro-bottom.micro-balloon:before { border-bottom-color: #999; border-top-color: transparent; } .micro-icon { margin-right: 6px; } .micro-copy.alignleft, .micro-copy.alignright { float: none; } .micro-copy.alignright { margin-left: auto; } .mc-circle { border-radius: 2em; background-clip: padding-box; } .micro-balloon.mc-red { background-color: #e60033; color: #fff; border: none; } .micro-balloon.mc-red.micro-bottom::after { border-bottom-color: #e60033; border-top-color: transparent; } .micro-balloon.mc-red::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-red::after { border-top-color: #e60033; } .micro-balloon.mc-pink { background-color: #e95295; color: #fff; border: none; } .micro-balloon.mc-pink.micro-bottom::after { border-bottom-color: #e95295; border-top-color: transparent; } .micro-balloon.mc-pink::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-pink::after { border-top-color: #e95295; } .micro-balloon.mc-purple { background-color: #884898; color: #fff; border: none; } .micro-balloon.mc-purple.micro-bottom::after { border-bottom-color: #884898; border-top-color: transparent; } .micro-balloon.mc-purple::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-purple::after { border-top-color: #884898; } .micro-balloon.mc-blue { background-color: #0095d9; color: #fff; border: none; } .micro-balloon.mc-blue.micro-bottom::after { border-bottom-color: #0095d9; border-top-color: transparent; } .micro-balloon.mc-blue::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-blue::after { border-top-color: #0095d9; } .micro-balloon.mc-green { background-color: #3eb370; color: #fff; border: none; } .micro-balloon.mc-green.micro-bottom::after { border-bottom-color: #3eb370; border-top-color: transparent; } .micro-balloon.mc-green::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-green::after { border-top-color: #3eb370; } .micro-balloon.mc-orange { background-color: #f39800; color: #fff; border: none; } .micro-balloon.mc-orange.micro-bottom::after { border-bottom-color: #f39800; border-top-color: transparent; } .micro-balloon.mc-orange::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-orange::after { border-top-color: #f39800; } .micro-balloon.mc-yellow { background-color: #ffd900; color: #fff; border: none; } .micro-balloon.mc-yellow.micro-bottom::after { border-bottom-color: #ffd900; border-top-color: transparent; } .micro-balloon.mc-yellow::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-yellow::after { border-top-color: #ffd900; } .micro-balloon.mc-brown { background-color: #954e2a; color: #fff; border: none; } .micro-balloon.mc-brown.micro-bottom::after { border-bottom-color: #954e2a; border-top-color: transparent; } .micro-balloon.mc-brown::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-brown::after { border-top-color: #954e2a; } .micro-balloon.mc-grey { background-color: #949495; color: #fff; border: none; } .micro-balloon.mc-grey.micro-bottom::after { border-bottom-color: #949495; border-top-color: transparent; } .micro-balloon.mc-grey::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-grey::after { border-top-color: #949495; } .micro-balloon.mc-black { background-color: #333; color: #fff; border: none; } .micro-balloon.mc-black.micro-bottom::after { border-bottom-color: #333; border-top-color: transparent; } .micro-balloon.mc-black::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-black::after { border-top-color: #333; } .micro-balloon.mc-deep { background-color: #55295b; color: #fff; border: none; } .micro-balloon.mc-deep.micro-bottom::after { border-bottom-color: #55295b; border-top-color: transparent; } .micro-balloon.mc-deep::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-deep::after { border-top-color: #55295b; } .micro-balloon.mc-indigo { background-color: #1e50a2; color: #fff; border: none; } .micro-balloon.mc-indigo.micro-bottom::after { border-bottom-color: #1e50a2; border-top-color: transparent; } .micro-balloon.mc-indigo::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-indigo::after { border-top-color: #1e50a2; } .micro-balloon.mc-light-blue { background-color: #2ca9e1; color: #fff; border: none; } .micro-balloon.mc-light-blue.micro-bottom::after { border-bottom-color: #2ca9e1; border-top-color: transparent; } .micro-balloon.mc-light-blue::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-light-blue::after { border-top-color: #2ca9e1; } .micro-balloon.mc-cyan { background-color: #00a3af; color: #fff; border: none; } .micro-balloon.mc-cyan.micro-bottom::after { border-bottom-color: #00a3af; border-top-color: transparent; } .micro-balloon.mc-cyan::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-cyan::after { border-top-color: #00a3af; } .micro-balloon.mc-teal { background-color: #007b43; color: #fff; border: none; } .micro-balloon.mc-teal.micro-bottom::after { border-bottom-color: #007b43; border-top-color: transparent; } .micro-balloon.mc-teal::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-teal::after { border-top-color: #007b43; } .micro-balloon.mc-light-green { background-color: #8bc34a; color: #fff; border: none; } .micro-balloon.mc-light-green.micro-bottom::after { border-bottom-color: #8bc34a; border-top-color: transparent; } .micro-balloon.mc-light-green::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-light-green::after { border-top-color: #8bc34a; } .micro-balloon.mc-lime { background-color: #c3d825; color: #fff; border: none; } .micro-balloon.mc-lime.micro-bottom::after { border-bottom-color: #c3d825; border-top-color: transparent; } .micro-balloon.mc-lime::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-lime::after { border-top-color: #c3d825; } .micro-balloon.mc-amber { background-color: #ffc107; color: #fff; border: none; } .micro-balloon.mc-amber.micro-bottom::after { border-bottom-color: #ffc107; border-top-color: transparent; } .micro-balloon.mc-amber::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-amber::after { border-top-color: #ffc107; } .micro-balloon.mc-deep-orange { background-color: #ea5506; color: #fff; border: none; } .micro-balloon.mc-deep-orange.micro-bottom::after { border-bottom-color: #ea5506; border-top-color: transparent; } .micro-balloon.mc-deep-orange::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-deep-orange::after { border-top-color: #ea5506; } .micro-balloon.mc-white { background-color: #fff; color: #fff; border: none; } .micro-balloon.mc-white.micro-bottom::after { border-bottom-color: #fff; border-top-color: transparent; } .micro-balloon.mc-white::before { border-top-color: transparent; border-bottom-color: transparent; } .micro-balloon.mc-white::after { border-top-color: #fff; } .blogcard-label { position: absolute; top: -18px; left: 16px; font-size: 13px; padding: 3px 0.6em; background-color: #333; color: #fff; border-radius: 3px; letter-spacing: 0.7px; display: none; } .blogcard-label .fa::before { margin-right: 6px; } .blogcard-type .blogcard-label { display: block; } .bct-none .blogcard-label { display: none; } .bct-related .blogcard-label .fa::before { content: ""; } .bct-related .blogcard-label::after { content: "関連記事"; } .bct-reference .blogcard-label .fa::before { content: ""; } .bct-reference .blogcard-label::after { content: "参考記事"; } .bct-reference-link .blogcard-label .fa::before { content: ""; } .bct-reference-link .blogcard-label::after { content: "参考リンク"; } .bct-popular .blogcard-label .fa::before { content: ""; } .bct-popular .blogcard-label::after { content: "人気記事"; } .bct-pickup .blogcard-label .fa::before { content: ""; } .bct-pickup .blogcard-label::after { content: "ピックアップ"; } .bct-check .blogcard-label .fa::before { content: ""; } .bct-check .blogcard-label::after { content: "チェック"; } .bct-together .blogcard-label .fa::before { content: ""; } .bct-together .blogcard-label::after { content: "あわせて読みたい"; } .bct-detail .blogcard-label .fa::before { content: ""; } .bct-detail .blogcard-label::after { content: "詳細はこちら"; } .bct-official .blogcard-label .fa::before { content: ""; } .bct-official .blogcard-label::after { content: "公式サイト"; } .bct-dl .blogcard-label .fa::before { content: ""; } .bct-dl .blogcard-label::after { content: "ダウンロード"; } .button-block { float: none; } .button-block.alignleft { text-align: left; } .button-block.aligncenter { text-align: center; } .button-block.alignright { text-align: right; } /************************************ ** 汎用ボックス共通 ************************************/ .block-box-label { display: flex; } .block-box-label::before { margin-right: 0.3em; } /************************************ ** キャプションボックス ************************************/ .caption-box { border: 2px solid #eee; border-radius: 4px; } .caption-box.has-border-color .box-label { color: #fff; } .caption-box-label { padding: 0.2em 0.8em; background-color: #eee; } .caption-box-content { padding: 0.4em 0.8em; } .cb-red.caption-box { border-color: #e60033; } .cb-red .caption-box-label { background-color: #e60033; color: #fff; } .cb-pink.caption-box { border-color: #e95295; } .cb-pink .caption-box-label { background-color: #e95295; color: #fff; } .cb-purple.caption-box { border-color: #884898; } .cb-purple .caption-box-label { background-color: #884898; color: #fff; } .cb-blue.caption-box { border-color: #0095d9; } .cb-blue .caption-box-label { background-color: #0095d9; color: #fff; } .cb-green.caption-box { border-color: #3eb370; } .cb-green .caption-box-label { background-color: #3eb370; color: #fff; } .cb-orange.caption-box { border-color: #f39800; } .cb-orange .caption-box-label { background-color: #f39800; color: #fff; } .cb-yellow.caption-box { border-color: #ffd900; } .cb-yellow .caption-box-label { background-color: #ffd900; color: #fff; } .cb-brown.caption-box { border-color: #954e2a; } .cb-brown .caption-box-label { background-color: #954e2a; color: #fff; } .cb-grey.caption-box { border-color: #949495; } .cb-grey .caption-box-label { background-color: #949495; color: #fff; } .cb-black.caption-box { border-color: #333; } .cb-black .caption-box-label { background-color: #333; color: #fff; } .cb-deep.caption-box { border-color: #55295b; } .cb-deep .caption-box-label { background-color: #55295b; color: #fff; } .cb-indigo.caption-box { border-color: #1e50a2; } .cb-indigo .caption-box-label { background-color: #1e50a2; color: #fff; } .cb-light-blue.caption-box { border-color: #2ca9e1; } .cb-light-blue .caption-box-label { background-color: #2ca9e1; color: #fff; } .cb-cyan.caption-box { border-color: #00a3af; } .cb-cyan .caption-box-label { background-color: #00a3af; color: #fff; } .cb-teal.caption-box { border-color: #007b43; } .cb-teal .caption-box-label { background-color: #007b43; color: #fff; } .cb-light-green.caption-box { border-color: #8bc34a; } .cb-light-green .caption-box-label { background-color: #8bc34a; color: #fff; } .cb-lime.caption-box { border-color: #c3d825; } .cb-lime .caption-box-label { background-color: #c3d825; color: #fff; } .cb-amber.caption-box { border-color: #ffc107; } .cb-amber .caption-box-label { background-color: #ffc107; color: #fff; } .cb-deep-orange.caption-box { border-color: #ea5506; } .cb-deep-orange .caption-box-label { background-color: #ea5506; color: #fff; } .cb-white.caption-box { border-color: #fff; } .cb-white .caption-box-label { background-color: #fff; color: #fff; } /************************************ ** キャプションタブボックス ************************************/ .tab-caption-box.block-box.has-background { background-color: transparent; } .tab-caption-box.has-border-color .box-label { color: #fff; } .tab-caption-box-label { padding: 0 0.8em; font-size: 0.9em; background-color: #eee; display: inline-block; border-top-left-radius: 8px; border-top-right-radius: 8px; } .tab-caption-box-content { margin-top: -3px; border: 3px solid #eee; padding: 0.4em 0.8em; border-radius: 8px; border-top-left-radius: 0; } .tcb-red .tab-caption-box-label { background-color: #e60033; color: #fff; } .tcb-red .tab-caption-box-content { border-color: #e60033; } .tcb-pink .tab-caption-box-label { background-color: #e95295; color: #fff; } .tcb-pink .tab-caption-box-content { border-color: #e95295; } .tcb-purple .tab-caption-box-label { background-color: #884898; color: #fff; } .tcb-purple .tab-caption-box-content { border-color: #884898; } .tcb-blue .tab-caption-box-label { background-color: #0095d9; color: #fff; } .tcb-blue .tab-caption-box-content { border-color: #0095d9; } .tcb-green .tab-caption-box-label { background-color: #3eb370; color: #fff; } .tcb-green .tab-caption-box-content { border-color: #3eb370; } .tcb-orange .tab-caption-box-label { background-color: #f39800; color: #fff; } .tcb-orange .tab-caption-box-content { border-color: #f39800; } .tcb-yellow .tab-caption-box-label { background-color: #ffd900; color: #fff; } .tcb-yellow .tab-caption-box-content { border-color: #ffd900; } .tcb-brown .tab-caption-box-label { background-color: #954e2a; color: #fff; } .tcb-brown .tab-caption-box-content { border-color: #954e2a; } .tcb-grey .tab-caption-box-label { background-color: #949495; color: #fff; } .tcb-grey .tab-caption-box-content { border-color: #949495; } .tcb-black .tab-caption-box-label { background-color: #333; color: #fff; } .tcb-black .tab-caption-box-content { border-color: #333; } .tcb-deep .tab-caption-box-label { background-color: #55295b; color: #fff; } .tcb-deep .tab-caption-box-content { border-color: #55295b; } .tcb-indigo .tab-caption-box-label { background-color: #1e50a2; color: #fff; } .tcb-indigo .tab-caption-box-content { border-color: #1e50a2; } .tcb-light-blue .tab-caption-box-label { background-color: #2ca9e1; color: #fff; } .tcb-light-blue .tab-caption-box-content { border-color: #2ca9e1; } .tcb-cyan .tab-caption-box-label { background-color: #00a3af; color: #fff; } .tcb-cyan .tab-caption-box-content { border-color: #00a3af; } .tcb-teal .tab-caption-box-label { background-color: #007b43; color: #fff; } .tcb-teal .tab-caption-box-content { border-color: #007b43; } .tcb-light-green .tab-caption-box-label { background-color: #8bc34a; color: #fff; } .tcb-light-green .tab-caption-box-content { border-color: #8bc34a; } .tcb-lime .tab-caption-box-label { background-color: #c3d825; color: #fff; } .tcb-lime .tab-caption-box-content { border-color: #c3d825; } .tcb-amber .tab-caption-box-label { background-color: #ffc107; color: #fff; } .tcb-amber .tab-caption-box-content { border-color: #ffc107; } .tcb-deep-orange .tab-caption-box-label { background-color: #ea5506; color: #fff; } .tcb-deep-orange .tab-caption-box-content { border-color: #ea5506; } .tcb-white .tab-caption-box-label { background-color: #fff; color: #fff; } .tcb-white .tab-caption-box-content { border-color: #fff; } /************************************ ** ラベルボックス ************************************/ .label-box.block-box.has-background { background-color: transparent; } .label-box-label { margin-left: 1em; padding: 0 0.8em; font-size: 0.9em; font-weight: bold; text-shadow: #fff 3px 0px 0px, #fff 2px 1px 0px, #fff 2px 2px 0px, #fff 2px 3px 0px, #fff 1px 3px 0px, #fff 0px 3px 0px, #fff -1px 3px 0px, #fff -2px 2px 0px, #fff -3px 1px 0px, #fff -3px 0px 0px, #fff -3px -1px 0px, #fff -3px -2px 0px, #fff -2px -2px 0px, #fff -1px -3px 0px, #fff 0px -3px 0px, #fff 1px -3px 0px, #fff 2px -2px 0px, #fff 2px -2px 0px, #fff 3px -1px 0px; } .label-box-content { margin-top: -0.9em; border: 3px solid #888; padding: 1em 0.8em 0.4em; border-radius: 8px; } .lb-red .label-box-content { border-color: #e60033; } .lb-pink .label-box-content { border-color: #e95295; } .lb-purple .label-box-content { border-color: #884898; } .lb-blue .label-box-content { border-color: #0095d9; } .lb-green .label-box-content { border-color: #3eb370; } .lb-orange .label-box-content { border-color: #f39800; } .lb-yellow .label-box-content { border-color: #ffd900; } .lb-brown .label-box-content { border-color: #954e2a; } .lb-grey .label-box-content { border-color: #949495; } .lb-black .label-box-content { border-color: #333; } .lb-deep .label-box-content { border-color: #55295b; } .lb-indigo .label-box-content { border-color: #1e50a2; } .lb-light-blue .label-box-content { border-color: #2ca9e1; } .lb-cyan .label-box-content { border-color: #00a3af; } .lb-teal .label-box-content { border-color: #007b43; } .lb-light-green .label-box-content { border-color: #8bc34a; } .lb-lime .label-box-content { border-color: #c3d825; } .lb-amber .label-box-content { border-color: #ffc107; } .lb-deep-orange .label-box-content { border-color: #ea5506; } .lb-white .label-box-content { border-color: #fff; } /************************************ ** トグル表示ボタン ************************************/ .toggle-wrap { position: relative; } .toggle-wrap > p { margin: 0; } .toggle-wrap .toggle-content { display: block; visibility: hidden; opacity: 0; padding: 0 1em; height: 0; transition: all 0.3s ease-in-out; overflow: hidden; } .toggle-button { display: block; cursor: pointer; padding: 3px 10px; background-color: #f5f6f7; border: 2px solid #ccc; text-align: center; border-radius: 4px; position: relative; margin: 0; } .toggle-button::before { content: '\f067'; font-family: FontAwesome; margin-right: 0.4em; font-size: 0.8em; color: #999; } .toggle-button:hover { opacity: 0.7; } .toggle-checkbox { display: none; } .toggle-checkbox:checked ~ .toggle-button { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .toggle-checkbox:checked ~ .toggle-button::before { content: '\f068'; } .toggle-checkbox:checked ~ .toggle-content { visibility: visible; opacity: 1; height: 100%; transition: all 0.3s ease-in-out; padding: 1em; border: 2px solid #ccc; border-top-width: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .tb-red .toggle-button { border: 2px solid #e60033; background: #e60033; color: #fff; } .tb-red .toggle-button::before { color: #ddd; } .tb-red .toggle-checkbox:checked ~ .toggle-content { border-color: #e60033; } .tb-pink .toggle-button { border: 2px solid #e95295; background: #e95295; color: #fff; } .tb-pink .toggle-button::before { color: #ddd; } .tb-pink .toggle-checkbox:checked ~ .toggle-content { border-color: #e95295; } .tb-purple .toggle-button { border: 2px solid #884898; background: #884898; color: #fff; } .tb-purple .toggle-button::before { color: #ddd; } .tb-purple .toggle-checkbox:checked ~ .toggle-content { border-color: #884898; } .tb-blue .toggle-button { border: 2px solid #0095d9; background: #0095d9; color: #fff; } .tb-blue .toggle-button::before { color: #ddd; } .tb-blue .toggle-checkbox:checked ~ .toggle-content { border-color: #0095d9; } .tb-green .toggle-button { border: 2px solid #3eb370; background: #3eb370; color: #fff; } .tb-green .toggle-button::before { color: #ddd; } .tb-green .toggle-checkbox:checked ~ .toggle-content { border-color: #3eb370; } .tb-orange .toggle-button { border: 2px solid #f39800; background: #f39800; color: #fff; } .tb-orange .toggle-button::before { color: #ddd; } .tb-orange .toggle-checkbox:checked ~ .toggle-content { border-color: #f39800; } .tb-yellow .toggle-button { border: 2px solid #ffd900; background: #ffd900; color: #fff; } .tb-yellow .toggle-button::before { color: #ddd; } .tb-yellow .toggle-checkbox:checked ~ .toggle-content { border-color: #ffd900; } .tb-brown .toggle-button { border: 2px solid #954e2a; background: #954e2a; color: #fff; } .tb-brown .toggle-button::before { color: #ddd; } .tb-brown .toggle-checkbox:checked ~ .toggle-content { border-color: #954e2a; } .tb-grey .toggle-button { border: 2px solid #949495; background: #949495; color: #fff; } .tb-grey .toggle-button::before { color: #ddd; } .tb-grey .toggle-checkbox:checked ~ .toggle-content { border-color: #949495; } .tb-black .toggle-button { border: 2px solid #333; background: #333; color: #fff; } .tb-black .toggle-button::before { color: #ddd; } .tb-black .toggle-checkbox:checked ~ .toggle-content { border-color: #333; } .tb-deep .toggle-button { border: 2px solid #55295b; background: #55295b; color: #fff; } .tb-deep .toggle-button::before { color: #ddd; } .tb-deep .toggle-checkbox:checked ~ .toggle-content { border-color: #55295b; } .tb-indigo .toggle-button { border: 2px solid #1e50a2; background: #1e50a2; color: #fff; } .tb-indigo .toggle-button::before { color: #ddd; } .tb-indigo .toggle-checkbox:checked ~ .toggle-content { border-color: #1e50a2; } .tb-light-blue .toggle-button { border: 2px solid #2ca9e1; background: #2ca9e1; color: #fff; } .tb-light-blue .toggle-button::before { color: #ddd; } .tb-light-blue .toggle-checkbox:checked ~ .toggle-content { border-color: #2ca9e1; } .tb-cyan .toggle-button { border: 2px solid #00a3af; background: #00a3af; color: #fff; } .tb-cyan .toggle-button::before { color: #ddd; } .tb-cyan .toggle-checkbox:checked ~ .toggle-content { border-color: #00a3af; } .tb-teal .toggle-button { border: 2px solid #007b43; background: #007b43; color: #fff; } .tb-teal .toggle-button::before { color: #ddd; } .tb-teal .toggle-checkbox:checked ~ .toggle-content { border-color: #007b43; } .tb-light-green .toggle-button { border: 2px solid #8bc34a; background: #8bc34a; color: #fff; } .tb-light-green .toggle-button::before { color: #ddd; } .tb-light-green .toggle-checkbox:checked ~ .toggle-content { border-color: #8bc34a; } .tb-lime .toggle-button { border: 2px solid #c3d825; background: #c3d825; color: #fff; } .tb-lime .toggle-button::before { color: #ddd; } .tb-lime .toggle-checkbox:checked ~ .toggle-content { border-color: #c3d825; } .tb-amber .toggle-button { border: 2px solid #ffc107; background: #ffc107; color: #fff; } .tb-amber .toggle-button::before { color: #ddd; } .tb-amber .toggle-checkbox:checked ~ .toggle-content { border-color: #ffc107; } .tb-deep-orange .toggle-button { border: 2px solid #ea5506; background: #ea5506; color: #fff; } .tb-deep-orange .toggle-button::before { color: #ddd; } .tb-deep-orange .toggle-checkbox:checked ~ .toggle-content { border-color: #ea5506; } .tb-white .toggle-button { border: 2px solid #fff; background: #fff; color: #fff; } .tb-white .toggle-button::before { color: #ddd; } .tb-white .toggle-checkbox:checked ~ .toggle-content { border-color: #fff; } .iic-red li::before { color: #e60033; } .iic-pink li::before { color: #e95295; } .iic-purple li::before { color: #884898; } .iic-blue li::before { color: #0095d9; } .iic-green li::before { color: #3eb370; } .iic-orange li::before { color: #f39800; } .iic-yellow li::before { color: #ffd900; } .iic-brown li::before { color: #954e2a; } .iic-grey li::before { color: #949495; } .iic-black li::before { color: #333; } .iic-deep li::before { color: #55295b; } .iic-indigo li::before { color: #1e50a2; } .iic-light-blue li::before { color: #2ca9e1; } .iic-cyan li::before { color: #00a3af; } .iic-teal li::before { color: #007b43; } .iic-light-green li::before { color: #8bc34a; } .iic-lime li::before { color: #c3d825; } .iic-amber li::before { color: #ffc107; } .iic-deep-orange li::before { color: #ea5506; } .iic-white li::before { color: #fff; } figcaption { margin: 0; font-size: 0.7em; opacity: 0.8; padding: 0 6px; } .wp-block-separator.is-style-wide { border-bottom: solid 3px !important; } @media screen and (min-width: 600px) and (max-width: 781px) { .article .wp-block-columns :nth-child(odd):nth-last-child(2) { margin-bottom: 0; } } @media screen and (min-width: 600px) { .column-wrap > * { margin-bottom: 0 !important; } } .body .wp-block-gallery .blocks-gallery-item { margin-bottom: 1em; } .column-wrap { display: flex; justify-content: space-between; position: relative; margin: 0; } .column-wrap > div { width: 49.5%; margin: 0; } .column-wrap > div > *:first-child { margin-top: 0; } .column-wrap.column-3 > div { width: 32.5%; } .column-2-3-1-2 .column-left { width: 34%; } .column-2-3-1-2 .column-right { width: 65%; } .column-2-3-2-1 .column-left { width: 65%; } .column-2-3-2-1 .column-right { width: 34%; } .column-2-4-1-3 .column-left { width: 25%; } .column-2-4-1-3 .column-right { width: 74%; } .column-2-4-3-1 .column-left { width: 74%; } .column-2-4-3-1 .column-right { width: 25%; } @media (min-width: 600px) { .wp-block-columns { flex-wrap: nowrap; } } .wp-block-media-text__content { padding: 0 1em; } /************************************ ** SNSフォローボタン ************************************/ .sns-follow-buttons a { width: 100%; margin-right: 8px; margin-bottom: 8px; font-size: 30px; display: flex; align-items: center; align-content: center; justify-content: center; position: relative; } .sns-follow-buttons a:last-child { margin-right: 0; } .sns-follow-buttons a .follow-count { position: absolute; right: 3px; bottom: 3px; font-size: 12px; line-height: 1; } .fbc-hide .follow-count { display: none; } /************************************ ** 関連記事 ************************************/ .related-entry-card .cat-label { font-size: 9px; } /*関連エントリーカード*/ .related-entry-heading, .comment-title { margin: 22px 0; font-size: 24px; } .related-entry-card-content { margin-left: 170px; } /************************************ ** 関連記事表示タイプがミニカードの時 ************************************/ .rect-mini-card .related-list { display: flex; flex-wrap: wrap; justify-content: space-between; } .rect-mini-card .related-entry-card-wrap { width: 49.5%; padding: 7px; } .rect-mini-card .related-entry-card-thumb { width: 120px; } .rect-mini-card .related-entry-card-content { margin-left: 130px; } .rect-mini-card .related-entry-card-title { font-size: 16px; } .rect-mini-card .related-entry-card-snippet { display: none; } /************************************ ** 縦型カード ************************************/ .rect-vertical-card .related-list { display: flex; flex-wrap: wrap; justify-content: space-around; } .rect-vertical-card .related-entry-card-wrap { padding: 5px; } .rect-vertical-card .related-entry-card-thumb { float: none; width: 100%; } .rect-vertical-card .related-entry-card-thumb img { width: 100%; } .rect-vertical-card .related-entry-card-content { margin: 0; } .rect-vertical-card .related-entry-card-title { font-size: 16px; } .rect-vertical-card-3 .related-entry-card-wrap { width: 33%; } .rect-vertical-card-4 .related-entry-card-wrap { width: 24.5%; } /************************************ ** 関連記事ボーダー ************************************/ .recb-entry-border .related-entry-card-wrap { border: 1px solid #ccc; } /************************************ ** コメント ************************************/ .commets-list { padding: 0; margin: 0; list-style: none; } .commets-list .avatar { float: right; } .commets-list .reply { text-align: right; font-size: 0.8em; } .commets-list .comment-meta { font-size: 0.8em; } .commets-list .comment-body, .commets-list .st-comment-body { margin-bottom: 1em; } .commets-list .children { list-style: none; padding-left: 20px; } .st-comment-id { display: none; } .st-comment-edit { font-size: 0.8em; margin-left: 6px; } .st-comment-author .fn { font-weight: bold; } .comment-form .required { color: red; } .comment-form .logged-in-as { margin: 0.2em; font-size: 0.8em; } .comment-area.website-hide .comment-form-url { display: none; } .comment-edit-link { margin-left: 0.4em; } .comment-reply-link { font-size: 14px; } .comment-page-link { text-align: center; } .comment-page-link .page-numbers { width: auto; height: auto; padding: 6px 12px; line-height: normal; } .comment-page-link .current { background-color: #eee; } /************************************ ** ページネーション ************************************/ .pagination { margin: 24px 0; clear: both; text-align: center; display: inline-flex; justify-content: center; width: 100%; } .pagination .current { background-color: #eee; } .pagination a:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } .page-numbers { color: #333; text-decoration: none; display: inline-block; height: 46px; width: 46px; border: 1px solid #ddd; margin: 0 4px; line-height: 46px; text-align: center; border-radius: 4px; } .page-numbers span { line-height: inherit; } .page-numbers.dots { opacity: 0.6; background-color: #f5f6f7; } /************************************ ** 「次のページ」ページネーション ************************************/ .pagination-next-link, .comment-btn { background-color: #f9f9f9; border: 1px solid #ddd; color: #333; display: block; font-size: 1.2em; text-decoration: none; width: 100%; text-align: center; padding: 10px; display: block; } .pagination-next-link:hover, .comment-btn:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } /************************************ ** マルチページのページャーリンク ************************************/ .pager-links { margin: 24px 0; clear: both; text-align: center; } .pager-links .post-page-numbers { background-color: transparent; } .pager-links span { background-color: #eee; } .pager-links a { display: inline-block; } .pager-links a span { background-color: #fff; } .pager-links a:hover span { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } .pager-prev-next a { width: 30%; margin: 0 4px; } .pager-prev-next span { width: 100%; margin: 0; } /************************************ ** 投稿ナビ ************************************/ .pager-post-navi { margin: 38px 0; display: flex; flex-direction: column; } .pager-post-navi a { padding: 10px; margin: 0; display: inline-flex; align-items: center; line-height: 1.2; font-size: 0.8em; } .pager-post-navi a .iconfont { font-size: 1.8em; color: #ddd; padding: 8px; } .pager-post-navi a figure { min-width: 120px; max-width: 120px; } .pager-post-navi a.prev-post { flex-direction: row; padding-left: 5px; } .pager-post-navi a.prev-post .prev-post-title { margin-left: 10px; } .pager-post-navi a.next-post { flex-direction: row-reverse; padding-right: 5px; } .pager-post-navi a.next-post .next-post-title { margin-right: 10px; } .pager-post-navi a.prev-next-home { justify-content: center; font-size: 50px; text-align: center; color: #888; } .post-navi-square a { height: auto; } .post-navi-default.post-navi-border a { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .post-navi-default.post-navi-border .next-post { border-top-width: 0px; } .post-navi-default.post-navi-border .next-post:first-child { border-top-width: 1px; } .pager-post-navi.post-navi-square { flex-direction: row; } .pager-post-navi.post-navi-square a { width: 50%; } .post-navi-square.post-navi-border a { border: 1px solid #ccc; } .post-navi-square.post-navi-border a:last-child { border-left-width: 0px; } canvas, iframe, video, .fb_iframe_widget, .fb_iframe_widget span { max-width: 100%; } .overflow-container { overflow-y: scroll; } .aspect-ratio { height: 0; padding-top: 56.25%; position: relative; } .aspect-ratio--object { bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 100; } /*!動画の最大幅を指定する*/ .video-container, .instagram-container, .facebook-container { max-width: 640px; margin: 30px 0; } /*!動画の大きさを調整*/ .video-container .video { position: relative; padding-bottom: 56.25%; margin-top: 30px; height: 0; overflow: hidden; max-width: 100%; } /*!Instagramの大きさを調整*/ .instagram-container .instagram, .facebook-container .facebook { position: relative; padding-bottom: 120%; padding-top: 30px; height: 0; overflow: hidden; } /*!動画を囲んでいるdiv目一杯に広げる*/ .video iframe, .video object, .video embed, .instagram iframe, .instagram object, .instagram embed, .facebook iframe, .facebook object, .facebook embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*!Twitterビデオの最小幅を上書き変更*/ .twitter-video { min-width: 200px !important; } .instagram-media { position: static !important; min-width: 280px !important; } /************************************ ** プロフィールボックス ************************************/ .author-box { border: 1px solid #ccc; border-radius: 4px; line-height: 1.4; position: relative; padding: 1.6% 2.2% 2%; } .author-box p { margin-top: 0.3em; line-height: 1.3; } .author-box .sns-follow { margin: 0; } .author-box .sns-follow-message { display: none; } .author-box .sns-follow-buttons { flex-wrap: wrap; justify-content: flex-start; } .author-box .sns-follow-buttons a.follow-button { font-size: 18px; width: 24px; height: 24px; margin-bottom: 4px; margin-right: 4px; background-color: transparent; color: #777; border: 1px solid #ccc; border-radius: 2px; } .author-box .sns-follow-buttons a.follow-button:hover { background-color: #fafbfc; } .author-box .sns-follow-buttons a.follow-button .follow-count { display: none; } .author-box .author-name { font-size: 1.1em; font-weight: bold; margin-bottom: 0.4em; } .author-thumb { float: left; margin-top: 3px; width: 120px; } .author-content { margin-left: 130px; } .author-description { margin-bottom: 1em; } .nwa .author-box { text-align: center; padding: 20px; } .nwa .author-box .author-thumb { float: none; width: 100px; margin: 9px auto 0; } .nwa .author-box .author-content { margin: 0; padding: 1em; } .nwa .author-box .author-description { text-align: left; } .nwa .author-box .sns-follow-buttons { display: block; font-size: 1px; font-size: 0; } .nwa .author-box .sns-follow-buttons a { display: inline-block; margin: 2px; } /************************************ ** Call to Action ************************************/ .cta-box { background-color: #444; color: #fff; padding: 20px; } .cta-heading { font-size: 26px; padding: 12px; margin-bottom: 0.2em; font-weight: bold; } .cta-content { display: block; } .cta-left-and-right .cta-content, .cta-right-and-left .cta-content { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } .cta-left-and-right .cta-content div, .cta-right-and-left .cta-content div { width: 49%; } .cta-left-and-right .cta-content .cta-message p:first-child, .cta-right-and-left .cta-content .cta-message p:first-child { margin-top: 0; } .cta-right-and-left .cta-content { flex-direction: row-reverse; } .cta-thumb { text-align: center; } .cta-button { margin-top: 1em; } .sidebar .cta-box { font-size: 0.8em; } .sidebar .cta-heading { font-size: 20px; padding: 8px; } .sidebar .cta-left-and-right .cta-content, .sidebar .cta-right-and-left .cta-content { display: block; } .sidebar .cta-left-and-right .cta-content div, .sidebar .cta-right-and-left .cta-content div { width: 100%; } .sidebar .cta-message { margin-top: 1em; } .sidebar .cta-button .btn-l, .sidebar .cta-button .ranking-item-link-buttons a, .ranking-item-link-buttons .sidebar .cta-button a { padding: 1em; font-size: 16px; } .speech-wrap { display: flex; } .speech-person { width: 12%; min-width: 12%; } .speech-icon img, .speech-icon amp-img { border-radius: 50%; border: 2px solid #ccc; width: 100%; } .speech-name { text-align: center; font-size: 13px; } div.speech-balloon { height: 100%; position: relative; padding: 10px; background-color: #fff; border: 2px solid #ccc; border-radius: 6px; max-width: calc(100% - 14%); } div.speech-balloon p { margin: 0; } /* アイコンを左に表示 */ .speech-balloon::before { content: ''; position: absolute; display: block; width: 0; height: 0; left: -12px; top: 10px; border-right: 12px solid #ccc; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .speech-balloon::after { content: ''; position: absolute; display: block; width: 0; height: 0; left: -9px; top: 10px; border-right: 12px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .sbp-l { margin-right: 100px; } .sbp-l .speech-balloon { margin-left: 20px; } .sbp-r { flex-direction: row-reverse; margin-left: 100px; /* アイコンを右に表示 */ } .sbp-r .speech-balloon { margin-right: 20px; } .sbp-r .speech-balloon::before { right: -12px; left: auto; border-left: 12px solid #ccc; border-right: none; } .sbp-r .speech-balloon::after { right: -9px; left: auto; border-left: 12px solid #fff; border-right: none; } .sbis-sn .speech-icon-image { border-radius: 0; border-style: none; box-shadow: none; } .sbis-sb .speech-icon-image { border-radius: 0; } .sbis-cn .speech-icon-image { border-style: none; box-shadow: none; } .sbs-flat .speech-balloon { background-color: #f1f1f1; border-color: #f1f1f1; } .sbs-flat .speech-balloon::before, .sbs-flat .speech-balloon::after { border-right-color: #f1f1f1; border-left-color: #f1f1f1; } .sbs-line .speech-balloon { border-width: 1px; } .sbs-line .speech-balloon::after { left: -10px; } .sbs-line.sbp-r .speech-balloon { background-color: #85e249; border-color: #85e249; } .sbs-line.sbp-r .speech-balloon::after { left: auto; right: -10px; } .sbs-line.sbp-r .speech-balloon::before, .sbs-line.sbp-r .speech-balloon::after { border-right-color: #85e249; border-left-color: #85e249; } div.sbs-think.sbp-l { margin-right: 126px; } div.sbs-think.sbp-l .speech-balloon { margin-left: 46px; } div.sbs-think .speech-balloon::before { border: 2px solid #ccc; border-radius: 50%; left: -29px; top: 11px; width: 20px; height: 20px; } div.sbs-think .speech-balloon::after { border: 2px solid #ccc; border-radius: 50%; left: -44px; top: 25px; width: 10px; height: 10px; } .sbs-think.sbp-r { margin-left: 126px; } .sbs-think.sbp-r .speech-balloon { margin-right: 46px; } .sbs-think.sbp-r .speech-balloon::before { left: auto; right: -29px; } .sbs-think.sbp-r .speech-balloon::after { left: auto; right: -44px; } .booklink-box, .kaerebalink-box, .tomarebalink-box, .product-item-box { padding: 22px 25px; width: 96%; border: 3px solid #dfdfdf; box-sizing: border-box; position: relative; } .product-item-box { position: relative; } .product-item-box::after { content: '\ea87'; font-family: icomoon; position: absolute; bottom: 0; right: 6px; font-size: 24px; color: #ddd; } .product-item-box .image-thumb img { border: none; box-shadow: none; } .rakuten-item-box::after { content: '\e903'; font-family: icomoon; } .product-item-error.cf { display: block; line-height: 1.2; } .booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb { width: 160px; min-width: 160px; margin: 0 auto 1em !important; float: none !important; text-align: center; } .booklink-image *, .kaerebalink-image *, .tomarebalink-image *, .product-item-thumb * { display: block; } .booklink-image > a > img, .kaerebalink-image > a > img, .tomarebalink-image > a > img, .product-item-thumb > a > img { margin: 0 auto; } .image-content { visibility: hidden; position: absolute; z-index: 99; right: 0; top: 0; border: 1px solid #eee; background-color: #f5f6f7; border-radius: 2px; transition: all .3s ease; opacity: 0; max-width: calc(100% - 160px); } .image-content img { display: block; } .image-content amp-img { min-width: 500px; } .image-thumb:hover > .image-content { visibility: visible; opacity: 1; } .image-thumb:hover > .image-content:hover { display: none; } .swatchimages { display: flex; flex-wrap: wrap; margin-top: 3px; } .swatchimages > * { border: 1px solid #ddd; margin: 1px; display: flex; align-items: center; justify-content: center; } .swatchimages > *:hover { box-shadow: 0 0 4px #f79901; } .swatchimages > * > img { display: block; } .swatchimages:hover .si-thumb { display: flex; align-items: center; justify-content: center; } .pis-l .si-thumb { width: 30px; } .pis-m .si-thumb { width: 18%; } .pis-s .si-thumb { width: 30%; } @media screen and (max-width: 480px) { .pis-m .si-thumb { width: 30%; } } .booklink-info, .kaerebalink-info, .tomarebalink-info, .product-item-content { line-height: 125%; width: 100%; } .product-item-snippet { font-size: 0.8em; margin-top: 6px; } .booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date { font-size: 12px; } .booklink-detail, .kaerebalink-detail, .tomarebalink-address { color: #333; font-size: 12px; margin: 0 0 10px; } .kaerebalink-link1 > *, .booklink-link2 > *, .tomarebalink-link1 > *, .product-item-buttons > * { background: none !important; padding: 0 !important; display: block !important; } .kaerebalink-link1 a, .booklink-link2 a, .tomarebalink-link1 a, .product-item-buttons a { width: 90%; display: block; margin: 0px auto 8px; padding: 6px 12px; text-decoration: none; font-size: 13px; font-weight: bold; text-align: center; color: #fff; } .kaerebalink-link1 a:hover, .booklink-link2 a:hover, .tomarebalink-link1 a:hover, .product-item-buttons a:hover { opacity: 0.6; } .product-item-buttons { margin-top: 1em; } .product-item-image-only img { border: 0; box-shadow: none; } @media screen and (min-width: 769px) { .booklink-box, .kaerebalink-box, .tomarebalink-box, .product-item-box { text-align: left; display: flex; font-size: inherit !important; } .booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb { vertical-align: top; box-sizing: border-box; min-width: auto !important; } .booklink-info, .kaerebalink-info, .tomarebalink-info, .product-item-content { line-height: 125%; vertical-align: top; box-sizing: border-box; padding-left: 25px; width: 100%; } .booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date { margin: 6px 0 0; } .booklink-detail, .kaerebalink-detail { margin: 0 0 14px; } .booklink-link2, .kaerebalink-link1, .tomarebalink-link1, .product-item-buttons { display: flex; flex-wrap: wrap; } .booklink-link2 a, .kaerebalink-link1 a, .tomarebalink-link1 a, .product-item-buttons a { width: auto; text-align: center; border-radius: 3px; } .booklink-link2 a img, .kaerebalink-link1 a img, .tomarebalink-link1 a img, .product-item-buttons a img { position: absolute; bottom: 0; right: 0; } .booklink-link2 > *, .kaerebalink-link1 > *, .tomarebalink-link1 > *, .product-item-buttons > * { margin: 0.5%; box-sizing: border-box; } } .shoplinkbtn { position: relative; } .shoplinkbtn img { position: absolute; } .shoplinkbtn1 a { background: #192f60; } .shoplinkbtn2 a { background: #007b43; } .shoplinkbtn3 a { background: #522f60; } .shoplinkamazon a { background: #f79901; } .shoplinkrakuten a { background: #bf0000; } .shoplinkyahoo a { background: #e60033; position: relative; } .shoplinkdmm a { background: #00bcd4; } .shoplinkseven a { background: #008837; } .shoplinkbellemaison a { background: #80bd22; } .shoplinkcecile a { background: #8d124b; } .shoplinkkakakucom a { background: #051d93; } .shoplinkkindle a { background: #0074c1; } .shoplinkrakukobo a { background: #bf0000; } .shoplinkbk1 a { background: #0085cd; } .shoplinkehon a { background: #000066; } .shoplinkkino a { background: #004097; } .shoplinktoshokan a { background: #15b0e7; } .shoplinkjalan a { background: #ff5600; } .shoplinkjtb a { background: #C71628; } .shoplinkikyu a { background: #1C4678; } .shoplinkrurubu a { background: #000066; } .shoplinkwowma a { background: #FF6100; } .product-item-admin { position: absolute; bottom: 3px; left: 6px; } .product-item-admin > * { font-size: 10px; color: #777; margin: 6px; } .pis-s { padding: 1em; } .pis-s::after { font-size: 18px; } .pis-s .product-item-thumb { width: 90px; min-width: 90px; } .pis-l.product-item-box { display: block; } .pis-l figure.product-item-thumb { width: 100%; min-width: auto; } .item-price { color: #c9171e; } .acquired-date { font-size: 0.9em; } .nwa .booklink-box, .nwa .kaerebalink-box, .nwa .tomarebalink-box, .nwa .product-item-box { padding: 10px 10px 24px; display: block; } .nwa .booklink-image, .nwa .kaerebalink-image, .nwa .tomarebalink-image, .nwa .product-item-thumb { width: 120px; min-width: 120px; margin-right: 3% !important; float: left !important; height: 100% !important; } .nwa .booklink-link2, .nwa .kaerebalink-link1, .nwa .tomarebalink-link1, .nwa .product-item-buttons { display: flex; flex-wrap: wrap; } .nwa .booklink-link2 > *, .nwa .kaerebalink-link1 > *, .nwa .tomarebalink-link1 > *, .nwa .product-item-buttons > * { width: auto; margin: 0 .5% !important; } .nwa .booklink-link2 > * > a, .nwa .kaerebalink-link1 > * > a, .nwa .tomarebalink-link1 > * > a, .nwa .product-item-buttons > * > a { width: auto; font-size: 11px; } .nwa .product-item-box::after { font-size: 18px; } .nwa .booklink-image, .nwa .kaerebalink-image, .nwa .tomarebalink-image, .nwa .product-item-thumb { width: 80px; min-width: 80px; } .nwa .booklink-info, .nwa .kaerebalink-info, .nwa .tomarebalink-info, .nwa .product-item-content { width: auto !important; overflow: visible !important; text-align: center !important; padding: 0 !important; } .nwa .booklink-link2 > *, .nwa .kaerebalink-link1 > *, .nwa .tomarebalink-link1 > *, .nwa .product-item-buttons > * { width: 100%; margin: 0 .5% !important; } @media screen and (max-width: 834px) { .booklink-box, .kaerebalink-box, .tomarebalink-box, .product-item-box { padding: 10px 10px 24px; display: block; } .booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb { width: 120px; min-width: 120px; margin-right: 3% !important; float: left !important; height: 100% !important; } .booklink-link2, .kaerebalink-link1, .tomarebalink-link1, .product-item-buttons { display: flex; flex-wrap: wrap; } .booklink-link2 > *, .kaerebalink-link1 > *, .tomarebalink-link1 > *, .product-item-buttons > * { width: auto; margin: 0 .5% !important; } .booklink-link2 > * > a, .kaerebalink-link1 > * > a, .tomarebalink-link1 > * > a, .product-item-buttons > * > a { width: auto; font-size: 11px; } .product-item-box::after { font-size: 18px; } } @media screen and (max-width: 480px) { .booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb { width: 80px; min-width: 80px; } .booklink-info, .kaerebalink-info, .tomarebalink-info, .product-item-content { width: auto !important; overflow: visible !important; text-align: center !important; padding: 0 !important; } .booklink-link2 > *, .kaerebalink-link1 > *, .tomarebalink-link1 > *, .product-item-buttons > * { width: 100%; margin: 0 .5% !important; } } .fb-like-box { background-color: #444; color: #fff; display: flex; flex-wrap: nowrap; } .fb-like-box .fb-like-thumb, .fb-like-box .fb-like-content { width: 100%; } .fb-like-box img { display: block; width: 100%; height: 100%; } .fb-like-box .fb_reset { display: none; } .fb-like-content { display: flex; flex-direction: column; text-align: center; } .fb-like-content > div { padding-top: 8px; } .fb-like-message { color: #eee; font-size: 0.9em; } .fb-like-sub-message { color: #ccc; font-size: 0.7em; margin-bottom: 8px; } .fb-like-buttons { padding: 0; text-align: center; } .fb-like-buttons > div { margin: 8px; display: flex; justify-content: center; } .fb-like-buttons > div > * { height: 100%; } .fb-like-facebook { margin-bottom: -7px; } .sidebar .fb-like-box { max-width: 640px; flex-direction: column; } /************************************ ** Facebookページを「いいね!」するエリアのスタイル ************************************/ div.fb-like-mobile { display: none; } .fb-like-balloon { height: 100px; margin-top: 30px; margin-bottom: 30px; clear: both; } .fb-like-balloon-thumb { float: left; width: 100px; } .fb-like-balloon-thumb img { display: block; } .fb-like-balloon-body { margin-right: 140px; float: none; padding: 10px; font-size: 18px; line-height: 1.3em; height: 100px; overflow: hidden; color: #000; box-sizing: border-box; } .fb-like-balloon-body::after { content: '\f054'; position: absolute; right: 110px; top: 27px; color: #ccc; font-size: 50px; font-family: FontAwesome; line-height: 100%; } .fb-like-balloon-button { background-color: #f3f3f3; width: 100px; height: 100px; text-align: center; float: right; padding-top: 27px; box-sizing: border-box; /* display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;*/ } .fb-like-balloon-button iframe { background-color: #fff; } .fb-like-balloon-arrow-box { float: left; position: relative; border: 1px solid #bbb; margin-left: 12px; width: calc(100% - 114px); border-radius: 5px; background-color: #fff; } .fb-like-balloon-arrow-box-in { border-radius: 5px; overflow: hidden; } .fb-like-balloon-arrow-box:after, .fb-like-balloon-arrow-box:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .fb-like-balloon-arrow-box:after { border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 10px; margin-top: -10px; } .fb-like-balloon-arrow-box:before { border-color: rgba(221, 221, 221, 0); border-right-color: #bbb; border-width: 11px; margin-top: -11px; } /************************************ ** Facebookページを「いいね!」するエリアのスタイル(サイドバーの時) ************************************/ .sidebar .fb-like-balloon-body::after { display: none; } .sidebar .fb-like-balloon-body { font-size: 0.8em; padding: 5px; line-height: 1.1em; margin-right: 0; height: 70px; } .sidebar .fb-like-balloon-button { float: none; width: 100%; height: 30px; display: block; line-height: 24px; padding-top: 0; } .sidebar div.fb-like-mobile { display: block; } .sidebar div.fb-like-pc { display: none; } /************************************ ** Facebookページを「いいね!」するエリアのスタイル ************************************/ @media screen and (max-width: 639px) { .fb-like-balloon-body { margin-right: 100px; font-size: 1em; line-height: 1.2em; } .fb-like-balloon-body::after { display: none; } } @media screen and (max-width: 440px) { .fb-like-balloon-body { font-size: 0.8em; padding: 5px; line-height: 1.1em; margin-right: 0; height: 70px; } .fb-like-balloon-button { float: none; width: 100%; height: 30px; display: block; padding-top: 0; line-height: 24px; } div.fb-like-mobile { display: block; } div.fb-like-pc { display: none; } } .mobile-menu-buttons { background: #fff; box-shadow: 0 0 5px darkgrey; font-size: 19px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2; padding: 0; margin: 0; list-style: none; display: none; align-items: center; line-height: 1.4; min-height: 50px; transition: .3s; } .mobile-menu-buttons .menu-icon { text-align: center; width: 100%; display: block; } .mobile-menu-buttons .menu-caption { font-size: 9px; text-align: center; opacity: 0.8; display: block; } .mobile-menu-buttons .menu-button { position: relative; width: 100%; cursor: pointer; } .mobile-menu-buttons .menu-button > a { display: block; color: #333; text-decoration: none; } .mobile-menu-buttons .menu-button:hover .menu-button-in { opacity: 0.8; } .mobile-menu-buttons .ad-area { display: none; } .mobile-menu-buttons .menu-content { cursor: default; } .mobile-footer-menu-buttons { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .logo-menu-button { text-align: center; font-weight: 900; line-height: 50px; min-width: 200px; overflow: hidden; } .logo-menu-button img { max-height: 44px; display: block; margin: 0 auto; } .fa.menu-icon { font: inherit; } /*閉じる用の薄黒カバー*/ #navi-menu-close, #sidebar-menu-close, #search-menu-close, #share-menu-close, #follow-menu-close { display: none; /*はじめは隠しておく*/ position: fixed; z-index: 99; top: 0; /*全体に広がるように*/ left: 0; width: 100%; height: 100%; background: black; transition: .3s ease-in-out; } /*中身*/ .menu-content { overflow: auto; position: fixed; top: 0; z-index: 9999; /*最前面に*/ width: 100%; /*右側に隙間を作る(閉じるカバーを表示)*/ max-width: 400px; /*最大幅(調整してください)*/ height: 100%; background: #fff; /*背景色*/ transition: .3s ease-in-out; /*滑らかに表示*/ opacity: 1; overflow: scroll; -webkit-overflow-scrolling: touch; } .menu-content .menu-drawer { padding: 0 1em 30px; } .menu-content .sidebar { width: 100%; display: block; margin: 0; } .navi-menu-content { left: 0; -webkit-transform: translateX(-105%); transform: translateX(-105%); } .sidebar-menu-content { right: 0; -webkit-transform: translateX(105%); transform: translateX(105%); } #slide-in-sidebar { display: block; margin: 0; } .search-menu-content, .share-menu-content, .follow-menu-content { transition: .3s ease-in-out; position: fixed; top: 40%; z-index: 99; width: 90%; left: 5%; right: 5%; -webkit-transform: translateY(900%); transform: translateY(900%); opacity: 0; } .search-menu-content .search-edit, .share-menu-content .search-edit, .follow-menu-content .search-edit { width: 100%; } /*チェックが入ったらもろもろ表示*/ #navi-menu-input:checked ~ #navi-menu-close, #sidebar-menu-input:checked ~ #sidebar-menu-close, #search-menu-input:checked ~ #search-menu-close, #share-menu-input:checked ~ #share-menu-close, #follow-menu-input:checked ~ #follow-menu-close { display: block; /*カバーを表示*/ opacity: .5; } #navi-menu-input:checked ~ #navi-menu-content, #sidebar-menu-input:checked ~ #sidebar-menu-content, #search-menu-input:checked ~ #search-menu-content, #share-menu-input:checked ~ #share-menu-content, #follow-menu-input:checked ~ #follow-menu-content { transition: .3s ease-in-out; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } .menu-drawer ul { list-style: none; } .menu-drawer li { display: block; } .menu-drawer a { color: #333; text-decoration: none; padding: 6px; display: block; } .menu-drawer a:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } .menu-drawer .sub-menu { padding-left: 20px; } .menu-close-button { display: block; cursor: pointer; text-align: center; font-size: 2em; } .share-menu-content .sns-buttons { justify-content: space-around; } .share-menu-content .sns-buttons .share-count { color: #fff; } .share-menu-content .button-caption { display: none; } .follow-menu-content .sns-buttons { justify-content: space-around; } .follow-menu-content .sns-buttons a { width: 24%; } .follow-menu-content .sns-follow-message { display: none; } .ranking-items { line-height: 1.4; } .ranking-items p { font-size: 18px; margin-top: 0; } .ranking-item, .timeline-box { padding: 3%; border: 1px solid #ccc; border-radius: 4px; } .ranking-item img[width="1"], .timeline-box img[width="1"] { position: absolute; bottom: 0; right: 0; } .ranking-item-name-text { font-size: 24px; font-weight: bold; } .star::before, .star-half-o::before, .star-o::before { font-family: FontAwesome; } .star::before { content: '\f005'; } .star-half-o::before { content: '\f123'; } .star-o::before { content: '\f006'; } .ranking-item-name { padding: 3px 2px 6px; } .rating-star { color: #f5bc55; font-size: 1.2em; } .rating-number { color: #333; font-size: 0.9em; margin-left: 0.4em; } .ranking-item-img-desc, .ranking-item-link-buttons { display: flex; } .ranking-item-img-desc > div, .ranking-item-link-buttons > div { width: 100%; padding: 2px 0; } .ranking-item-img-desc { margin-top: 6px; } .ranking-item-name { display: flex; } .ranking-item-name-crown { margin-right: 10px; } .ranking-item-name-text { width: 100%; } .ranking-item-image-tag { max-width: 302px; margin-right: 1em; position: relative; align-items: flex-start; } .ranking-item-description { width: 100px; position: relative; } .ranking-item-link-buttons { margin-top: 6px; } .ranking-item-link-buttons > div { padding: 0 3px; position: relative; } .ranking-item-link-buttons a { margin: 0 0 8px; } .g-crown, .s-crown, .c-crown { width: 0; height: 0; border-bottom-style: solid; border-bottom-width: 35px; border-left: 20px solid transparent; border-right: 20px solid transparent; position: relative; } .g-crown:after, .s-crown:after, .c-crown:after { width: 0; height: 0; border-top: 15px solid transparent; content: ""; position: absolute; top: 0; left: -20px; } .g-crown-circle, .s-crown-circle, .c-crown-circle { border-radius: 50%; width: 5px; height: 5px; position: absolute; top: -5px; left: -21px; } .g-crown-circle:before, .s-crown-circle:before, .c-crown-circle:before { border-radius: 50%; width: 5px; height: 5px; content: ""; position: absolute; top: 0; left: 19px; } .g-crown-circle:after, .s-crown-circle:after, .c-crown-circle:after { border-radius: 50%; width: 5px; height: 5px; content: ""; position: absolute; top: 0; left: 38px; } .g-crown { border-bottom: 35px solid #bfa930; } .g-crown:after { border-bottom: 20px solid #ffe973; border-left: 20px solid #ffe973; border-right: 20px solid #ffd700; } .g-crown-circle { background-color: #a68c00; } .g-crown-circle:before { background-color: #a68c00; } .g-crown-circle:after { background-color: #a68c00; } .s-crown { border-bottom: 35px solid #909090; } .s-crown:after { border-bottom: 20px solid #e0e0e0; border-left: 20px solid #e0e0e0; border-right: 20px solid silver; } .s-crown-circle { background-color: #909090; } .s-crown-circle:before { background-color: #909090; } .s-crown-circle:after { background-color: #909090; } .c-crown { border-bottom: 35px solid #69433f; } .c-crown:after { border-bottom: 20px solid #8c4841; border-left: 20px solid #8c4841; border-right: 20px solid #5b1c15; } .c-crown-circle { background-color: #69433f; } .c-crown-circle:before { background-color: #69433f; } .c-crown-circle:after { background-color: #69433f; } .widget_item_ranking .main-widget-label { font-size: 23px; padding: 6px; margin: 28px 0 12px; font-weight: bold; } /************************************ ** フッター ************************************/ .footer { margin-top: 20px; padding: 8px; } .copyright { margin-top: 8px; } .footer-widgets, .footer-widgets-mobile { margin: 10px auto; display: flex; } .footer-left, .footer-center, .footer-right, .footer-mobile { padding: 10px 16px; } .footer-left, .footer-center, .footer-right { width: 33.33%; } .footer-widgets-mobile { display: none; } /************************************ ** フッターボトム ************************************/ .footer-bottom { margin-top: 24px; padding: 8px; position: relative; font-size: 14px; } .footer-bottom.fdt-left-and-right .footer-bottom-logo { display: none; } .footer-bottom.fdt-left-and-right .footer-bottom-content { float: none; display: flex; justify-content: space-between; align-items: baseline; } .footer-bottom.fdt-up-and-down .footer-bottom-logo { display: none; } .footer-bottom.fdt-up-and-down .footer-bottom-content { float: none; display: block; text-align: center; } .footer-bottom.fdt-up-and-down .footer-bottom-content .navi-footer-in > ul { justify-content: center; } .footer-bottom.fnm-text-width .menu-footer li { width: auto; } .footer-bottom.fnm-text-width .menu-footer li a { padding: 0 10px; } .footer-bottom-logo { float: left; bottom: 0; position: absolute; } .footer-bottom-logo .logo-text { padding: 0; } .footer-bottom-logo .site-name-text { font-size: 18px; } .footer-bottom-logo .logo-image { padding: 0; } .footer-bottom-logo img { height: 50px; width: auto; } .footer-bottom-content { float: right; text-align: right; } /************************************ ** トップへ戻るボタン ************************************/ .go-to-top { position: fixed; display: none; right: 10px; bottom: 10px; z-index: 99999; } .go-to-top-button { background-color: #eee; color: #333; text-decoration: none; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; cursor: pointer; text-align: center; line-height: 1; border-radius: 5px; font-size: 22px; } .go-to-top-button:hover { color: #333; } .go-to-top-button-image { background-color: transparent; padding: 0; max-width: 120px; } #wpforo-wrap .anchor-icon, .gallery .anchor-icon, .amazonjs_item .anchor-icon, .kaerebalink-box .anchor-icon, .booklink-box .anchor-icon, .tomarebalink-box .anchor-icon, .wpf-sbtn-wrap .anchor-icon, .btn .anchor-icon, .ranking-item-link-buttons a .anchor-icon, .btn-wrap a .anchor-icon, .no-icon .anchor-icon { display: none !important; } .gallery { margin: auto; } .gallery .gallery-item { float: left; margin-top: 10px; text-align: center; height: auto; } .gallery-columns-1 .gallery-item { width: 100%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { width: 20%; } .gallery-columns-6 .gallery-item { width: 16%; } .gallery-columns-7 .gallery-item { width: 14%; } .gallery-columns-8 .gallery-item { width: 12%; } .gallery-columns-9 .gallery-item { width: 11%; } .gallery amp-img { border: 2px solid #cfcfcf; } .gallery br { clear: both; } .gallery .gallery-item dd { margin: 0; } /*検索フォーム*/ .search-box { margin: 1em 0 2em; position: relative; } .search-edit { font-family: inherit; } #search-menu-content .search-edit { font-size: 16px; } .search-submit { position: absolute; right: 3px; top: calc(50% - 12px); font-size: 20px; cursor: pointer; border: none; color: #ddd; padding: 0 8px; background-color: rgba(255, 255, 255, 0); } .timeline-box { padding: 16px 5px; } .timeline-box .timeline { list-style: none; padding: 0; margin: 0; } .timeline-title { font-weight: bold; font-size: 1.1em; text-align: center; } .timeline > li { margin-bottom: 60px; } ul.timeline ul { list-style-type: disc; } ul.timeline ul ul { list-style-type: circle; } ul.timeline ul ul ul { list-style-type: square; } /* for Desktop */ .timeline > li.timeline-item { overflow: hidden; margin: 0; position: relative; } .timeline-item-label { width: 110px; float: left; padding-top: 18px; text-align: right; padding-right: 1em; font-size: 14px; } .timeline-item-title { font-weight: bold; } .timeline-item-content { width: calc(100% - 110px); float: left; padding: .8em 1.4em; border-left: 3px #e5e5d1 solid; } .timeline-item:before { content: ''; width: 12px; height: 12px; background: #6fc173; position: absolute; left: 105px; top: 24px; border-radius: 100%; } /* for Smartphone */ @media screen and (max-width: 480px) { .timeline-box .timeline { padding-left: 10px; } .timeline > li.timeline-item { overflow: visible; border-left: 3px #e5e5d1 solid; } .timeline-item-label { width: auto; float: none; text-align: left; padding-left: 16px; } .timeline-item-content { width: auto; padding: 8px; float: none; border: none; } .timeline-item::before { left: -12px; top: 19px; width: 21px; height: 21px; } } /*Cocoon用記事ボックス*/ /* .navi-card-wrap { background-color: $white; &.a-wrap { position: relative; padding: 5px 3px; line-height: 1.3; margin-top: 0px; margin-bottom: 10px; } } .navi-card-box { //background-color: $white; padding: 0; position: relative; } .navi-card-wrap { &:after { display: block; content: ''; position: absolute; top: 50%; bottom: 0; right: 20px; width: 6px; height: 6px; border-top: solid 2px #697b91; border-right: solid 2px #697b91; transform: rotate(45deg); margin-top: -3px; } .navi-card-thumb { float: left; margin: 6px 10px; width: 120px; } .navi-card-content{ margin: 0 24px 0 140px; } .navi-card-title { margin: 2px 0 6px; font-size: 0.9em; color: $text_color; font-weight: 700; } .navi-card-snippet { margin: 0px 0 2px; font-size: 0.7em; color: $pallid_text_color; } } */ /* リボン部分 */ /* リボンCSSはnxworld様のページの斜めリボンを改変して利用。 多くのカスタマイズを公開していらっしゃるので 「リボン css nxworld」などgoogle検索すると便利。 Copyright (c) https://www.nxworld.net/tips/pure-css-corner-ribbon.html https://codepen.io/nxworld/pen/oLdoWb */ .ribbon { width: 80px; height: 80px; overflow: hidden; position: absolute; z-index: 1; } .ribbon:before, .ribbon:after { position: absolute; z-index: 0; content: ''; display: block; border: 4px solid #224963; } .ribbon span { position: absolute; display: block; width: 185px; padding: 5px 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); color: #fff; font: 700 11px/1 'Lato',sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); text-transform: uppercase; text-align: center; } .ribbon-color-1 span { background-color: #ea7e7e; } .ribbon-color-2 span { background-color: #7e95ea; } .ribbon-color-3 span { background-color: #f7c114; } .ribbon-color-4 span { background-color: #dc669b; } .ribbon-color-5 span { background-color: #e9546b; } /* top left*/ .ribbon-top-left { top: -3px; left: -9px; } .ribbon-top-left::before, .ribbon-top-left::after { border-top-color: transparent; border-left-color: transparent; } .ribbon-top-left:before { top: -1px; right: 4px; } .ribbon-top-left::after { bottom: 4px; left: 1px; } .ribbon-top-left span { right: -45px; top: 18px; transform: rotate(-45deg); } .border-square .ribbon-top-left { top: -13px; left: -13px; } .card-large-image .ribbon-top-left { top: -7px; left: -9px; } [class*="fab-"]::before { font-family: FontAwesome; } .fab-info-circle::before { content: '\f05a'; } .fab-question-circle::before { content: '\f059'; } .fab-exclamation-circle::before { content: '\f06a'; } .fab-pencil::before { content: '\f040'; } .fab-edit::before { content: '\f044'; } .fab-comment::before { content: '\f075'; } .fab-ok::before { content: '\f10c'; } .fab-bad::before { content: '\f00d'; } .fab-lightbulb::before { content: '\f0eb'; } .fab-graduation-cap::before { content: '\f19d'; } .fab-book::before { content: '\f02d'; } .fab-amazon::before { content: '\f270'; } .fab-envelope::before { content: '\f0e0'; } .fab-flag::before { content: '\f024'; } .fab-ban::before { content: '\f05e'; } .fab-bolt::before { content: '\f0e7'; } .fab-calendar::before { content: '\f073'; } .fab-clock::before { content: '\f017'; } .fab-cutlery::before { content: '\f0f5'; } .fab-heart::before, .list-heart li::before { content: '\f004'; } .fab-camera::before { content: '\f030'; } .fab-search::before { content: '\f002'; } .fab-folder::before { content: '\f07b'; } .fab-tag::before { content: '\f02b'; } .fab-trophy::before { content: '\f091'; } .fab-car::before { content: '\f1b9'; } .fab-truck::before { content: '\f0d1'; } .fab-bicycle::before { content: '\f206'; } .fab-motorcycle::before { content: '\f21c'; } .fab-bus::before { content: '\f207'; } .fab-plane::before { content: '\f072'; } .fab-train::before { content: '\f238'; } .fab-subway::before { content: '\f239'; } .fab-taxi::before { content: '\f1ba'; } .fab-file-text::before { content: '\f15c'; } .fab-jpy::before { content: '\f157'; } .fab-usd::before { content: '\f155'; } .fab-eur::before { content: '\f153'; } .fab-btc::before { content: '\f15a'; } .fab-apple::before { content: '\f179'; } .fab-android::before { content: '\f17b'; } .fab-ship::before { content: '\f21a'; } .fab-wordpress::before { content: '\f19a'; } .fab-thumbs-up::before { content: '\f164'; } .fab-thumbs-down::before { content: '\f165'; } .fab-check::before, .list-check li::before { content: '\f00c'; } .fab-bell::before { content: '\f0f3'; } .fab-star::before, .list-star li::before { content: '\f005'; } .fab-bookmark::before { content: '\f02e'; } .fab-download::before { content: '\f019'; } .fab-coffee::before { content: '\f0f4'; } .fab-user::before { content: '\f007'; } .iconlist-box { border-color: transparent; } .iconlist-box ul { list-style: none; } .iconlist-box ol li::before { display: none; } .iconlist-box.list-none ul { list-style: disc; } .iconlist-box.list-none ol { list-style: decimal; } .iconlist-box li::before { font-family: FontAwesome; margin-right: 0.4em; margin-left: -1em; } .iconlist-title { font-weight: 700; text-align: center; } .fab-check-circle::before, .list-check-circle li::before { content: '\f058'; } .fab-check-circle-o::before, .list-check-circle-o li::before { content: '\f05d'; } .fab-check-square::before, .list-check-square li::before { content: '\f14a'; } .fab-check-square-o::before, .list-check-square-o li::before { content: '\f046'; } .fab-caret-right::before, .list-caret-right li::before { content: '\f0da'; } .fab-caret-square-o-right::before, .list-caret-square-o-right li::before { content: '\f152'; } .fab-arrow-right::before, .list-arrow-right li::before { content: '\f061'; } .fab-angle-right::before, .list-angle-right li::before { content: '\f105'; } .fab-angle-double-right::before, .list-angle-double-right li::before { content: '\f101'; } .fab-arrow-circle-right::before, .list-arrow-circle-right li::before { content: '\f0a9'; } .fab-arrow-circle-o-right::before, .list-arrow-circle-o-right li::before { content: '\f18e'; } .fab-play-circle::before, .list-play-circle li::before { content: '\f144'; } .fab-play-circle-o::before, .list-play-circle-o li::before { content: '\f01d'; } .fab-chevron-right::before, .list-chevron-right li::before { content: '\f054'; } .fab-chevron-circle-right::before, .list-chevron-circle-right li::before { content: '\f138'; } .fab-hand-o-right::before, .list-hand-o-right li::before { content: '\f0a4'; } .fab-star-o::before, .list-star-o li::before { content: '\f006'; } .fab-heart-o::before, .list-heart-o li::before { content: '\f08a'; } .fab-square::before, .list-square li::before { content: '\f0c8'; } .fab-square-o::before, .list-square-o li::before { content: '\f096'; } .fab-circle::before, .list-circle li::before { content: '\f111'; } .fab-circle-o::before, .list-circle-o li::before { content: '\f10c'; } .fab-dot-circle-o::before, .list-dot-circle-o li::before { content: '\f192'; } .fab-plus::before, .list-plus li::before { content: '\f067'; } .fab-plus-circle::before, .list-plus-circle li::before { content: '\f055'; } .fab-plus-square::before, .list-plus-square li::before { content: '\f0fe'; } .fab-plus-square-o::before, .list-plus-square-o li::before { content: '\f196'; } .fab-minus::before, .list-minus li::before { content: '\f068'; } .fab-minus-circle::before, .list-minus-circle li::before { content: '\f056'; } .fab-minus-square::before, .list-minus-square li::before { content: '\f146'; } .fab-minus-square-o::before, .list-minus-square-o li::before { content: '\f147'; } .fab-times::before, .list-times li::before { content: '\f00d'; } .fab-times-circle::before, .list-times-circle li::before { content: '\f057'; } .fab-times-circle-o::before, .list-times-circle-o li::before { content: '\f05c'; } .fab-window-close::before, .list-window-close li::before { content: '\f2d3'; } .fab-window-close-o::before, .list-window-close-o li::before { content: '\f2d4'; } .fab-paw::before, .list-paw li::before { content: '\f1b0'; } /************************************ ** おすすめカード ************************************/ .recommended { margin: 1em 0; } .recommended .navi-entry-cards { display: flex; justify-content: center; } .recommended .navi-entry-cards a { padding: 0; margin: 0; border-radius: 0; } .recommended figure { margin: 0; } .recommended img { vertical-align: bottom; } .recommended .card-content { font-size: 0.8em; text-align: center; } .recommended .card-snippet { display: none; } .recommended.rcs-image-only .card-content { display: none; } .recommended.rcs-center-title .card-content { left: 0; top: 0; right: 0; bottom: 0; text-align: center; opacity: 1; font-size: 1em; max-height: none; display: flex; justify-content: center; align-items: center; height: 100%; } .recommended.rcs-center-title .a-wrap:hover .card-content { opacity: 1; } .recommended.rcs-center-white-title .card-content { background: none; background-color: rgba(51, 51, 51, 0.3); transition: all .7s; } .recommended.rcs-center-white-title .a-wrap:hover .card-content { transition: all .7s; opacity: 0; } .recommended.rcs-center-label-title .card-content { padding: 0; background: transparent; } .recommended.rcs-center-label-title .card-content .card-title { color: #333; padding: 6px 1.2em; background-color: rgba(255, 255, 255, 0.8); transition: all .3s; border-radius: 99px; font-size: 0.9em; } .recommended.rcs-center-label-title .card-content:hover .card-title { transition: all .5s; opacity: 0; } .recommended.rcs-card-margin a { margin: 1% 0.5%; } .recommended.rcs-card-margin a:first-child { margin-left: 1%; } .recommended.rcs-card-margin a:last-child { margin-right: 1%; } .recommended .ribbon { display: none; } .nwa .recommended .navi-entry-cards { flex-wrap: wrap; } .nwa .recommended .navi-entry-cards a { width: 50%; } .nwa .recommended.rcs-card-margin a { margin: 1%; width: 48%; } .nwa .recommended.rcs-card-margin a:last-child { margin-right: 1%; } .box-menus { display: flex; justify-content: center; flex-wrap: wrap; } .box-menus * { line-height: 1.6; margin: 0; } .box-menu { display: block; padding: 0.5em 1em; text-decoration: none; width: 100%; text-align: center; min-height: 100px; cursor: pointer; background: #fff; width: calc(100%/4); color: #777; box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1; transition: none; } .box-menu:last-child { margin-right: auto; } .box-menu:hover { color: #777; z-index: 2; } .box-menu-icon { font-size: 40px; display: flex; justify-content: center; align-items: center; } .box-menu-icon * { margin: 10px 0; max-width: 60px; max-height: 60px; height: auto; display: inline-block; } .box-menu-icon img { font-size: 16px; border: none; box-shadow: none; } .box-menu-label { font-size: 14px; font-weight: 600; } .box-menu-description { font-size: 10px; opacity: 0.8; } .nwa .box-menu { width: calc(100%/2); } .wwa .box-menu { width: 16.66%; } .no-border { border: none; } .no-after::after { display: none; } .display-block { display: block; } .display-none { display: none; } .notice-area-link { display: block; text-decoration: none; } .notice-area-link:hover { opacity: 0.8; } .notice-area { color: #fff; text-align: center; background-color: #4cae4c; padding: 0.6em; font-size: 0.8em; } .nt-warning { background-color: #f7ab00; } .nt-danger { background-color: #ff6666; } /************************************ ** アピールエリア ************************************/ .no-appeal-area .appeal { display: none; } .appeal-in { display: flex; min-height: 300px; padding: 3% 5%; } .appeal-content { max-width: 740px; background-color: rgba(255, 255, 255, 0.85); margin: auto; padding: 2em; text-align: center; border-radius: 4px; display: block; } .appeal-title { font-size: 1.1em; font-weight: bold; } .appeal-message { margin-bottom: 1em; } .appeal-button { color: #fff; text-decoration: none; background-color: #c9171e; font-weight: bold; text-align: center; display: inline-block; padding: 9px 42px; border-radius: 4px; } .appeal-button:hover { color: #fff; opacity: 0.7; } /************************************ ** 入力フォーム ************************************/ input[type="search"] { width: auto; flex-grow: 1; } .wp-block-search__button { width: 60px; border-radius: 4px; border: 1px solid #ccc; cursor: pointer; } textarea { min-height: 260px; } option { padding: 12px; } input[type='submit'], #bbp_reply_submit, .bp-login-widget-register-link a { padding: 11px; width: 100%; margin: 0; cursor: pointer; } input[type='submit'] { -webkit-appearance: none; border: 1px solid #ddd; background-color: #f5f8fa; } .bp-login-widget-register-link { display: block; margin-top: 10px; } .bp-login-widget-register-link a { color: #333; text-decoration: none; display: block; text-align: center; border: 1px solid #777; padding: 6px; border-radius: 2px; } .bp-login-widget-register-link a:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } .widget.buddypress #bp-login-widget-form input#bp-login-widget-submit { margin: 0; } #wp-comment-cookies-consent { margin-right: 5px; } /************************************ ** カルーセル ************************************/ .carousel { margin-top: 10px; line-height: 1.1; } .carousel .slick-arrow:before { color: #ddd; } .carousel-in { background-color: #fff; padding: 2px 0; } .carousel-content { margin: 0 30px; padding-bottom: 4px; } .carousel-content a { float: left; width: 10%; } .carousel-content .slick-track { display: flex; } .carousel-content .slick-slide { height: auto; } .carousel-content .a-wrap { margin: 0 3px 3px; } .carousel-entry-card-thumb { float: none; display: inline-block; } .carousel-entry-card-title { font-size: 16px; margin-top: 4px; max-height: 3.2em; overflow: hidden; } /************************************ ** カルーセルの非表示設定 ************************************/ .no-carousel .carousel { display: none; } .carousel { opacity: 0; transition: all 1s ease-out; } .carousel .a-wrap { padding: 0.2em 0.3em; } .carousel.loaded { opacity: 1; } .ccb-carousel-border .a-wrap { border: 1px solid #ccc; } .index-tab-buttons { margin: 1em 0 1.4em; display: flex; } .index-tab-buttons .index-tab-button { padding: 12px 16px; font-size: 14px; margin: 2px; border-radius: 4px; background-color: #fff; border: 1px solid #eee; width: 100%; text-align: center; } #index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"], #index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"], #index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"], #index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] { background: none #404453; border: 1px solid #404453; color: #fff; font-weight: 700; } .tab-cont, input[name="tab_item"] { display: none; } @keyframes tab-index-show { 0% { opacity: 0; padding-top: 100px; } 20% { padding-top: 20px; } 80% { opacity: 0.5; } 100% { opacity: 1; padding-top: 0; } } #index-tab-1:checked ~ .tab-cont.tb1, #index-tab-2:checked ~ .tab-cont.tb2, #index-tab-3:checked ~ .tab-cont.tb3, #index-tab-4:checked ~ .tab-cont.tb4 { display: block; animation: tab-index-show .3s ease-in; } /* Cocoonのリンクボタンカスタマイズ */ .btn-wrap-circle > a { background: #999; } /* スマホ用 */ @media screen and (max-width: 834px) { .index-tab-buttons { flex-wrap: wrap; } .index-tab-buttons .index-tab-button { width: calc(98% / 2); margin: .5%; } .list-columns { flex-direction: column; } .list-columns .list-column { width: 100%; } } .list-title { text-align: center; font-size: 18px; margin-top: 2em; margin-bottom: 1em; } .list-title-in { position: relative; display: inline-block; padding: 0 75px; } .list-title-in:before, .list-title-in:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 55px; height: 1px; background-color: black; } .list-title-in:before { left: 0; margin-right: 10px; } .list-title-in:after { right: 0; margin-left: 10px; } .list-more-button-wrap { text-align: center; } .list-more-button { display: inline-block; padding: 0.3em 2em; text-decoration: none; color: #333; border: solid 2px #ccc; border-radius: 3px; transition: .4s; margin: 1em 0 2em; font-size: 16px; border-radius: 99px; } .list-more-button:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333; } .admin-panel { background-color: #333; color: #fff; opacity: 0.8; padding: 10px; font-size: 16px; position: fixed; bottom: 0; left: 0; right: 0; display: flex; flex-direction: row; flex-wrap: wrap; transition: .3s; z-index: 9999; } .admin-panel a { color: #fff; } .admin-pv, .admin-edit, .admin-amp, .admin-checks, .admin-cresponsive { border-radius: 3px; padding: 0 10px; border: 1px solid #ccc; margin: 6px 4px; } .admin-pv > span, .admin-edit > span, .admin-amp > span, .admin-checks > span, .admin-cresponsive > span { padding: 0 4px; } .admin-amp a, .admin-checks a, .admin-cresponsive a { margin: 0 4px; font-size: 0.8em; } .admin-pv { position: relative; } .admin-pv .admin-pv-by { position: absolute; bottom: -1em; right: 0.4em; font-size: 0.6em; background-color: #333; padding: 0 5px; } .apdt-pc-only { display: flex; } .apdt-mobile-only { display: none; } @media screen and (max-width: 1023px) { .admin-bar .mobile-header-menu-buttons { margin-top: 32px; } .admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons { margin-top: 32px; } } @media screen and (max-width: 1023px) and (max-width: 782px) { .admin-bar .mobile-header-menu-buttons { margin-top: 0; } .admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons { margin-top: 0; } } .entry-card .admin-pv { margin: 0.4em 0 1.4em; padding: 0; border-width: 0; font-size: 0.9em; } .entry-card .admin-pv > span { padding: 0 7px 0 0; } .entry-card .admin-pv > span:nth-of-type(2) { padding: 0; } .entry-card .admin-pv .admin-pv-by { background-color: transparent; bottom: 0; display: none; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .carousel .slick-dotted.slick-slider { margin-bottom: 0; } /* Mobile Menu Core Style */ .slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; } .slicknav_menu .slicknav_menutxt { display: block; line-height: 1.188em; float: left; } .slicknav_menu .slicknav_icon { float: left; margin: 0.188em 0 0 0.438em; } .slicknav_menu .slicknav_no-text { margin: 0; } .slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em; } .slicknav_nav { clear: both; } .slicknav_nav ul, .slicknav_nav li { display: block; } .slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; } .slicknav_nav .slicknav_item { cursor: pointer; } .slicknav_nav .slicknav_row { display: block; } .slicknav_nav a { display: block; } .slicknav_nav .slicknav_item a, .slicknav_nav .slicknav_parent-link a { display: inline; } .slicknav_brand { float: left; } .slicknav_menu:before, .slicknav_menu:after { content: " "; display: table; } .slicknav_menu:after { clear: both; } /* IE6/7 support */ .slicknav_menu { *zoom: 1; } /* User Default Style Change the following styles to modify the appearance of the menu. */ .slicknav_menu { font-size: 16px; box-sizing: border-box; } /* Button */ .slicknav_btn { margin: 5px 5px 6px; text-decoration: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); border-radius: 4px; background-color: #222222; } /* Button Text */ .slicknav_menu .slicknav_menutxt { color: #FFF; font-weight: bold; text-shadow: 0 1px 3px #000; } /* Button Lines */ .slicknav_menu .slicknav_icon-bar { background-color: #f5f5f5; } .slicknav_menu { background: #4c4c4c; padding: 5px; } .slicknav_nav { color: #fff; margin: 0; padding: 0; font-size: 0.875em; } .slicknav_nav, .slicknav_nav ul { list-style: none; overflow: hidden; } .slicknav_nav ul { padding: 0; margin: 0 0 0 20px; } .slicknav_nav .slicknav_row { padding: 5px 10px; margin: 2px 5px; } .slicknav_nav a { padding: 5px 10px; margin: 2px 5px; text-decoration: none; color: #fff; } .slicknav_nav .slicknav_item a, .slicknav_nav .slicknav_parent-link a { padding: 0; margin: 0; } .slicknav_nav .slicknav_row:hover { border-radius: 6px; background: #ccc; color: #fff; } .slicknav_nav a:hover { border-radius: 6px; background: #ccc; color: #222; } .slicknav_nav .slicknav_txtnode { margin-left: 15px; } .slicknav_brand { color: #fff; font-size: 18px; line-height: 30px; padding: 7px 12px; height: 44px; } .slicknav_nav .caption-wrap, .slicknav_nav .item-label, .slicknav_nav .item-description { display: inline; } .slicknav_nav .item-description { margin-left: 1em; } .slicknav_menu { display: none; } /*bbPressのスタイルを整える*/ .bbp-breadcrumb-home, .bbp-breadcrumb-home + .bbp-breadcrumb-sep, .topic .post-date, .topic .post-update, .topic .footer-post-meta, .post-0 .post-date, .post-0 .post-update, .post-0 .footer-post-meta, .forum .post-date, .forum .post-update, .forum .footer-post-meta { display: none; } #bbp_search { font-size: 17px; height: 28px; } .post-0 .post-meta { height: 27px; } .bbp-reply-content { font-size: 16px; line-height: 170%; } .bbp-forum-title { font-size: 16px; } .bbp-topic-permalink { font-size: 14px; } div#bbpress-forums { font-size: 16px; } div#bbpress-forums .bbp-topic-permalink { font-size: 16px; } div#bbpress-forums #bbp-user-wrapper { margin-top: 1.6em; } div#bbpress-forums .entry-title { background-color: transparent; color: #333; padding-left: 0; } div#bbpress-forums #bbp_topic_submit { padding: 12px 24px; } div#bbpress-forums input[type=text] { width: 100%; } div#bbpress-forums div.odd, div#bbpress-forums ul.odd { background-color: #fefefe; } div#bbpress-forums span.bbp-admin-links a, div#bbpress-forums .status-closed, div#bbpress-forums .status-closed a { color: #555; } div#bbpress-forums a.bbp-topic-permalink { text-decoration: none; } div#bbpress-forums a.bbp-topic-permalink:before { content: " \f096"; font-family: FontAwesome; margin-right: 3px; } div#bbpress-forums .status-closed a.bbp-topic-permalink:before { content: " \f046"; font-family: FontAwesome; } div#bbpress-forums .status-closed .bbp-reply-content:before { content: " \f046\00A0 Closed"; font-family: FontAwesome,"Lucida Grande","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; } #bbp_search_submit { padding: 4px; width: auto; } @media screen and (max-width: 480px) { div#bbpress-forums div.bbp-reply-author img.avatar { position: static; } div#bbpress-forums .bbp-body div.bbp-reply-author { padding-left: 0; width: 80px; text-align: center; } div#bbpress-forums .bbp-body div.bbp-reply-content { clear: none; margin: 0; } div#bbpress-forums .bbp-body div.bbp-reply-content p { margin-top: 0; } } #buddypress h2 { background-color: transparent; color: #333; padding: 0; } #buddypress #members-friends { margin-left: 6px; } #buddypress #members-friends select, #buddypress #members-friends option { padding: 3px; font-size: 16px; } #buddypress div.item-list-tabs ul li.last select { min-width: 210px; } div#wpforo-wrap { padding: 10px; } div#wpforo-wrap .wpfl-1 .wpforo-forum-description, div#wpforo-wrap .wpfl-1 .wpforo-last-post-title, div#wpforo-wrap .wpforo-post-head { font-size: 16px; } div#wpforo-wrap .wpfl-1 .head-title, div#wpforo-wrap .wpforo-topic-title a { font-size: 20px; } div#wpforo-wrap .wpforo-post .wpf-right .wpforo-post-content, div#wpforo-wrap .wpforo-recent-wrap .wpforo-recent-content td.wpf-spost-title .wpf-spost-title-link, div#wpforo-wrap .wpf-htr td { font-size: 18px; } div#wpforo-wrap .wpfl-1 .wpforo-post, div#wpforo-wrap #wpforo-stat-body { background-color: transparent; } div#wpforo-wrap pre, div#wpforo-wrap .wpforo-post .wpf-right code { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; font-size: 17px; } div#wpforo-wrap .wpforo-post .wpf-right ol, div#wpforo-wrap .wpforo-post .wpf-right ul { margin: 2em 1em; } .wpforo-list-item p { margin: 0; } div#wpforo-wrap .wpforo-post .wpf-right .wpforo-post-content p { line-height: 1.8; } .bleft { font-weight: bold; } #wpf-form-wrapper .mce-edit-area iframe { min-height: 400px; } .mce-wpf-emoji-extra-wrap { min-width: 300px !important; min-height: 300px !important; } .wpf-emoji-wrap .wpf-emoji { font-size: 24px; } .wpforo-attached-file { word-break: break-all; } #wpforo-wrap h3 { background-color: transparent; } #wpforo-wrap h3::after { display: none; } #wpforo-wrap h3.wpforo-forum-title::before, #wpforo-wrap h3.wpforo-forum-title::after { display: none; } div#wpforo-wrap .wpforo-post .wpforo-attached-file { display: block; } div#wpforo-wrap .widget-title, div.wpforo-widget-wrap .widget-title { padding: 12px; border-bottom: none; } .wpforo-recent-content.wpfr-posts table { width: 100%; table-layout: fixed; word-break: break-word; word-wrap: break-word; } .wpforo-recent-content.wpfr-posts table td { word-break: break-word !important; } div#bbpress-forums fieldset.bbp-form input[type="text"], div#bbpress-forums fieldset.bbp-form select { height: 46px; line-height: 46px; } .body #wpforo #wpforo-wrap .wpforo-post .wpforo-post-content p { line-height: 1.4; } #wpforo #wpforo-wrap .wpforo-post .wpforo-post-content hr { margin-bottom: 1em; } .live-writer .main { max-width: 860px; width: 860px; min-width: 860px; } .live-writer .article { width: 800px; } .live-writer blockquote, .live-writer .information-box, .live-writer .question-box, .live-writer .alert-box { padding: 10px; } .live-writer blockquote::before, .live-writer blockquote::after, .live-writer .information-box::before, .live-writer .information-box::after, .live-writer .question-box::before, .live-writer .question-box::after, .live-writer .alert-box::before, .live-writer .alert-box::after { display: none; } .gsc-search-box table { margin-bottom: 0; } .gsc-search-box table th, .gsc-search-box table td { border: 0; } #cse-search-box input[name="q"] { line-height: 34px; width: calc(100% - 60px); float: left; } #cse-search-box input[name="sa"] { width: 60px; padding: 0; line-height: 34px; } twitter-widget { overflow: hidden; } /** * Cocoon WordPress Theme * @author: yhira * @link: https://wp-cocoon.com/ * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later * * Cocoon WordPress Theme incorporates code from "Youtube SpeedLoad" WordPress Plugin, Copyright 2017 Alexufo[http://habrahabr.ru/users/alexufo/] "Youtube SpeedLoad" WordPress Plugin is distributed under the terms of the GNU GPL v2 */ .video-click { cursor: pointer; } .video-click:hover .video-play { background: url("images/youtube-play.png") no-repeat scroll -101px -13px rgba(0, 0, 0, 0); } .video-play { background: url("images/youtube-play.png") no-repeat scroll 2px -13px rgba(0, 0, 0, 0); height: 62px; left: 50%; margin-left: -45px; margin-top: -33px; position: absolute; top: 50%; width: 100px; opacity: 0.8; } .video-title-grad { position: absolute; top: 0; left: 0; right: 0; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABiCAQAAAA7fHH2AAAAQUlEQVQYV22KQQoAIAzDyv7/Et/oVlGZVCfkkIYamsENXESyi8vc0u/PKZ6o8+7fZ0h8ShRYnD+BFKToRJkHFpkM2hZSxuyWpEYAAAAASUVORK5CYII="); background-position: center top; } .video-title-text { color: #eeeeee; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 17px; overflow: hidden; padding: 12px 16px 4px; text-overflow: ellipsis; white-space: nowrap; } #main .wp-block-embed__wrapper::before { display: none; } .entry-content .wp-block-gallery .blocks-gallery-item { display: list-item; } /* 検索フォーム風スタイルのボタンを装飾 */ .search-form div.sbtn { transition: 0.3s; /* 変化をなめらかにする */ } /* ボタンにカーソルを合わせた時のスタイル */ .search-form div.sbtn:hover { color: #333; /* 文字色 */ background: #fff; /* 背景色 */ border-color: #333; /* ボーダーの色 */ cursor: pointer; /* カーソルをポインターに */ } .main { z-index: 0; } .ad-index-bottom { position: relative; z-index: -1; } /************************************ ** Googleカスタム検索結果のページネーション ************************************/ .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-current-page, .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { font-size: 15px; border-width: 1px; border-style: solid; padding: 2px 10px; display: inline-block; margin-bottom: 8px; } .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-current-page { background-color: #1A73E8; color: #fff; } .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { border-color: #ccc; } .lozad { min-height: 1px; min-width: 1px; } .is-header-fixed .header-container { z-index: 3; } .is-header-fixed .header-container .logo { transition: .3s; } .fixed-header { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25); } .fixed-header .header .header-in { min-height: auto; } .fixed-header .has-sub, .fixed-header .navi-in .sub-menu { display: none; } .fixed-header .site-logo-image { height: auto; width: auto; } .click-prevention { pointer-events: none; } _:-ms-lang(x), .mc-circle { background-clip: border-box; } .blogcard, .ecb-entry-border .entry-card-wrap, .page-numbers, .pagination-next-link, .comment-btn, .index-tab-buttons .index-tab-button, .border-square a, .author-box { border-color: #e3e3e3 #cecece #b4b4b4 #d6d6d6; } @media screen and (max-width: 1023px) { .navi-footer { float: none; margin: 0; width: 100%; } .copyright { width: 100%; } .navi-footer-in > ul { justify-content: center; padding: 1em; } .footer-widgets { display: block; } .footer-widgets > div { width: 100%; } .content-in { display: block; } main.main, div.sidebar { display: block; margin: 10px; width: auto; } .footer-bottom-logo, .footer-bottom-content { float: none; } .footer-bottom-logo { line-height: 1; } .footer-bottom-content { text-align: center; } .fb-like-message { font-size: 0.8em; line-height: 1.4; } .sidebar-scroll { position: static; } .ba-fixed.header, .ba-fixed.appeal { background-attachment: scroll; } .header, .appeal { background-size: cover; } .footer-bottom-logo { position: relative; bottom: auto; } .logo-footer { margin: 8px auto; } .mobile-menu-buttons { display: flex; align-items: stretch; } .mobile-menu-buttons > li { padding-top: 3px; } .mobile-header-menu-buttons { top: 0; bottom: auto; justify-content: space-around; min-width: 46px; z-index: 3; box-shadow: 0 0 5px darkgrey; } .has-logo-button .menu-button { width: 70px; } .has-logo-button .logo-menu-button { flex-grow: 99; } .no-mobile-sidebar .sidebar, .mobile-button-fmb .go-to-top-button, .no-mobile-header-logo #header .logo-header { display: none; } .mblt-header-mobile-buttons { margin-top: 46px; } .mblt-footer-mobile-buttons { margin-bottom: 50px; } .mblt-header-and-footer-mobile-buttons { margin-top: 46px; margin-bottom: 50px; } .scrollable-mobile-buttons { margin-bottom: 0; } .navi-footer-in > .menu-footer { justify-content: center; } .footer-bottom.fdt-left-and-right .footer-bottom-content { flex-direction: column; } .mblt-footer-mobile-buttons .go-to-top-button, .mblt-header-and-footer-mobile-buttons .go-to-top-button { display: none; } .mblt-header-mobile-buttons .menu-pc { display: none; } } @media screen and (max-width: 834px) { .navi-in > .menu-header { display: none; } #navi .navi-in > .menu-mobile { display: flex; } #navi .navi-in > .menu-mobile > .menu-item-has-description > a > .caption-wrap { height: 40px; line-height: 16px; } #navi .navi-in > .menu-mobile li { width: 50%; height: 40px; line-height: 40px; } #navi .navi-in > .menu-mobile li a { font-size: 14px; } #navi .navi-in > .menu-mobile li a:after { display: none; } main.main, div.sidebar { padding: 16px 20px; margin: 10px 0; border-width: 0; } .article ul, .article ol { padding-left: 26px; } .entry-card-title, .related-entry-card-title { font-size: 17px; } .entry-card-snippet, .related-entry-card-snippet { font-size: 14px; } table th, table td { padding: 3px; font-size: 0.8em; } .blogcard-wrap { width: 100%; } .blogcard-thumbnail { width: 120px; } .blogcard-title { font-size: 0.9em; margin-bottom: 0; } .blogcard-snippet { font-size: 12px; } .blogcard-content { margin-left: 130px; margin-right: 0; max-height: 120px; min-height: 70px; font-size: 0.9em; line-height: 1.2; } .blogcard-footer { font-size: 14px; } .ib-right .blogcard-content, .eb-right .blogcard-content { margin-right: 31.6%; margin-left: 0; } .ss-top .sns-share-buttons a, .ss-bottom .sns-share-buttons a { font-size: 14px; } .ss-top .sns-share-buttons a .button-caption, .ss-bottom .sns-share-buttons a .button-caption { font-size: 14px; margin-left: 4px; } .sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a { width: 32%; } .sns-follow-buttons { flex-wrap: wrap; justify-content: space-around; } .sns-follow-buttons a { margin-right: 0; width: 48%; } /************************************ ** 関連記事 ************************************/ .rect-vertical-card .related-entry-card-wrap { width: 49%; } .rect-mini-card .related-entry-card-wrap { margin-bottom: 10px; } .rect-mini-card .cat-label { font-size: 8px; } .rect-mini-card .related-entry-card-thumb { width: 30%; } .rect-mini-card .related-entry-card-content { margin-left: 32%; } .header-container-in.hlt-top-menu { flex-direction: column; } .ect-vertical-card .entry-card-wrap { width: 49%; } .header div.header-in, .appeal div.appeal-in { min-height: auto; } .footer-widgets { display: none; } .footer-widgets-mobile { display: block; } .widget_pc_text, .widget_pc_ad, .widget_pc_double_ads { display: none; } .widget_mobile_text, .widget_mobile_ad { display: block; } .slicknav_menu { display: block; } .fb-like-box { max-width: none; flex-direction: column; } .cta-box { font-size: 0.8em; } .cta-heading { font-size: 20px; padding: 8px; } .cta-left-and-right .cta-content, .cta-right-and-left .cta-content { display: block; } .cta-left-and-right .cta-content div, .cta-right-and-left .cta-content div { width: 100%; } .cta-message { margin-top: 1em; } .cta-button .btn-l, .cta-button .ranking-item-link-buttons a, .ranking-item-link-buttons .cta-button a { padding: 1em; font-size: 16px; } .sbp-l { margin-right: auto; } .sbp-r { margin-left: auto; } .speech-wrap.sbs-think.sbp-l { margin-right: 0; } .speech-wrap.sbs-think.sbp-r { margin-left: 0; } .admin-panel { padding: 5px; font-size: 14px; line-height: 1.4; } .admin-panel > div { margin: 3px; } .apdt-pc-only { display: none; } .apdt-mobile-only { display: flex; } .ranking-item-image-tag { max-width: 30%; } #header .site-name-text { font-size: 22px; } .header-container-in.hlt-top-menu { display: block; } .header-container-in.hlt-top-menu .header .header-in, .header-container-in.hlt-top-menu .header .logo-text { display: block; height: 100%; } .header-container-in.hlt-top-menu .site-name-text { white-space: normal; } .header-container-in.hlt-top-menu .logo-header { max-height: none; } .eye-catch .cat-label { font-size: 10px; padding: 2px 4px; } textarea { min-height: 160px; } .navi-footer-in > .menu-footer li.menu-item { width: 32%; border: 0; margin: 2px; display: flex; flex: 1 1 auto; text-align: center; } .navi-footer-in > .menu-footer li.menu-item a { padding: 0; width: 100%; } .footer-bottom.fdt-left-and-right .footer-bottom-content { flex-direction: column; } #wpf-form-wrapper .mce-edit-area iframe { min-height: 200px; } .content { margin-top: 10px; } .product-item-thumb-l, .swatchimages { display: none; } .image-content amp-img { min-width: 360px; max-width: 360px; } .btn-l, .ranking-item-link-buttons a, .btn-wrap.btn-wrap-l > a { font-size: 14px; } .slick-dots { display: none !important; } .carousel-entry-card-title { font-size: 0.7em; } .header-container-in.hlt-top-menu.hlt-tm-small .logo-header { height: auto; } .recommended .navi-entry-cards { flex-wrap: wrap; } .recommended .navi-entry-cards a { width: 50%; } .recommended.rcs-card-margin a { margin: 1%; width: 48%; } .recommended.rcs-card-margin a:last-child { margin-right: 1%; } } @media screen and (max-width: 599px) { .container .column-wrap { flex-direction: column; } .container .column-wrap > div { width: 100%; } .box-menus .box-menu { width: calc(100%/2); } .wwa .box-menus { margin-left: 10px; margin-right: 10px; } } @media screen and (max-width: 480px) { h2, h3 { font-size: 20px; } .related-entry-heading, .comment-title { margin: 1.2em 0 1em; } .entry-card, .related-entry-card, .e-card-title { line-height: 1.3; } .e-card-title { font-size: 16px; } .e-card-snippet { font-size: 13px; } .cat-label { font-size: 10px; padding: 1px 3px; } .page-numbers { width: 34px; height: 34px; line-height: 34px; } .pagination-next-link, .comment-btn { font-size: 1em; } .related-entry-card-thumb { width: 38%; } .related-entry-card-content { margin-left: 40%; font-size: 0.9em; } /*本文の見出し*/ .entry-title, .article h2, .article h3, .article h4, .article h5, .article h6 { padding: 0.6em; margin: 1.2em 0 0.8em; } .entry-title, .article h2 { font-size: 20px; padding: 0.6em 0.8em; } .article h3 { font-size: 18px; } .article h4, .article h5, .article h6 { font-size: 16px; } .entry-title { margin: 0; margin-bottom: 6px; } body { font-size: 16px; } .pager-post-navi a figure { min-width: 30%; max-width: 30%; } .pager-post-navi a.prev-post .prev-post-title { margin-left: 1.6%; } .pager-post-navi a.next-post .next-post-title { margin-right: 1.6%; } .pager-post-navi a::before { font-size: 16px; } .rect-mini-card .related-entry-card-wrap { width: 100%; } .pager-post-navi.post-navi-square { flex-direction: column; } .pager-post-navi.post-navi-square a { width: 100%; padding: 7px; } .pager-post-navi.post-navi-square a:last-child { border-top-width: 0; border-left-width: 1px; } .author-box { font-size: 0.9em; line-height: 1.3; } .author-box .author-thumb { width: 24%; } .author-box .author-content { margin-left: 26%; } .speech-person { width: 16%; min-width: 16%; } .speech-name { font-size: 10px; } .speech-wrap .speech-balloon { padding: 7px; max-width: calc(100% - 16%); } .speech-wrap .speech-balloon::before, .speech-wrap .speech-balloon::after { border-bottom-width: 7px; border-right-width: 7px; border-top-width: 7px; } .speech-wrap .speech-balloon::before { left: -7px; } .speech-wrap .speech-balloon::after { left: -5px; } .speech-wrap.sbp-l .speech-balloon { margin-left: 10px; } .speech-wrap.sbp-r .speech-balloon { margin-right: 10px; } .speech-wrap.sbp-r .speech-balloon::before { right: -7px; left: auto; border-left-width: 7px; } .speech-wrap.sbp-r .speech-balloon::after { border-left-width: 7px; right: -5px; left: auto; } .speech-wrap.sbs-think.sbp-l .speech-balloon { margin-left: 28px; } .speech-wrap.sbs-think .speech-balloon::before { top: 4px; left: -19px; width: 12px; height: 12px; } .speech-wrap.sbs-think .speech-balloon::after { top: 16px; width: 6px; height: 6px; left: -27px; } .speech-wrap.sbs-think.sbp-r .speech-balloon { margin-right: 28px; } .speech-wrap.sbs-think.sbp-r .speech-balloon::before { border: 2px solid #ccc; left: auto; right: -19px; } .speech-wrap.sbs-think.sbp-r .speech-balloon::after { border: 2px solid #ccc; left: auto; right: -27px; } .admin-panel > div { margin-bottom: 0.6em; padding: 2px; } .menu-content { max-width: 84%; } .ranking-item-img-desc, .ranking-item-link-buttons { display: block; } .ranking-item-image-tag { max-width: 100%; text-align: center; display: flex; justify-content: center; } .ranking-item-name-text, .widget_item_ranking .main-widget-label { font-size: 20px; } a.facebook-follow-button { top: 3px; } #header .site-name-text { font-size: 18px; } .tagline { font-size: 12px; } .navi-footer-in > .menu-footer li.menu-item { width: 46%; } .blogcard-content { font-size: 0.84em; } .blogcard-snippet { font-size: 0.74em; } .ect-vertical-card .entry-card-wrap { margin-bottom: 8px; } .ect-vertical-card.sp-entry-card-1-column .entry-card-wrap { display: block; } .ect-vertical-card.sp-entry-card-1-column > * { width: 100%; } #bbpress-forums .form-allowed-tags code { width: 100% !important; } .no-sp-snippet .entry-card-snippet { display: none; } .no-sp-snippet-related .related-entry-card-snippet { display: none; } .e-card-meta { margin-top: 2px; } .ect-entry-card .card-thumb, .rect-entry-card .card-thumb, .ect-big-card-first .card-thumb { margin-bottom: 6px; } .ect-entry-card .card-content, .rect-entry-card .card-content, .ect-big-card-first .card-content { margin: 0; } .ect-entry-card .card-snippet, .rect-entry-card .card-snippet, .ect-big-card-first .card-snippet { margin-bottom: 0; clear: both; } .ect-entry-card .card-meta, .rect-entry-card .card-meta, .ect-big-card-first .card-meta { clear: both; } .list .ect-vertical-card > * { width: 48%; padding: 0.5% !important; margin: 0.5% 0.5% 1.5% !important; } .sp-display-none { display: none !important; } .image-content amp-img { min-width: 200px; max-width: 200px; } .blogcard { padding-top: 3%; } } @media screen and (max-width: 356px) { .ect-vertical-card .entry-card-wrap, .rect-vertical-card .related-entry-card-wrap, .ect-2-columns > *, .ect-3-columns > * { width: 100% !important; } } @media print { /************************************ ** 印刷用スタイル ************************************/ #container { font-size: 11pt; } #container .header-container, #container .ad-area, #container .pager-links, #container .under-entry-content, #container .breadcrumb-category, #container .entry-footer, #container .sidebar, #container .footer, #container #admin-panel, #container #go-to-top, #container .go-to-top-button, #container #fb-root, #container .mobile-menu-buttons, #container .toc, #container .sns-share, #container .widget, #container #notice-area-wrap, #container #notice-area, #container #appeal, #container #recommended, #container #carousel, #container #go-to-top { display: none !important; } #container .content-in { display: block; } #container .main, #container .content, #container .wrap { width: auto; margin: 0; float: none; padding: 0; border: none; overflow-wrap: normal; } #container .main { width: 100% !important; } #container h1, #container h2, #container h3, #container h4, #container h5, #container h6 { background-color: transparent; border-width: 0; padding: 0; margin: 10px 0; color: #333; } #container h1 { font-size: 21.5pt; } #container h2 { font-size: 18.5pt; } #container h3 { font-size: 16pt; } #container h4, #container h5, #container .article h6 { font-size: 14pt; } #wpadminbar, #go-to-top, #admin-panel { display: none !important; } body { background-image: none !important; background-break: transparent; } } /************************************ ** ソースコード ************************************/ pre { background-color: #f5f6f7; border: 1px solid #ddd; overflow: auto; padding: 10px; } .is-code-row-number-enable pre, .is-code-row-number-enable pre * { line-height: 1.6 !important; } .is-code-row-number-enable pre, .is-code-row-number-enable pre#highlight-demo { border: none; position: relative; padding: 0.4em 1em 0.4em 3em; } .is-code-row-number-enable pre::before { overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; display: block; width: 3em; box-sizing: border-box; color: #777; text-align: center; padding: 0.4em 0; }