@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.7.2.7 Requires at least: 5.7.0 Requires PHP: 7.4.0 Tags: two-columns, left-sidebar, right-sidebar License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl-2.0.html */ :root { --cocoon-twitter-color: #000000; --cocoon-mastodon-color: #6364FF; --cocoon-bluesky-color: #0085ff; --cocoon-misskey-color: #96d04a; --cocoon-facebook-color: #3b5998; --cocoon-hatebu-color: #2c6ebd; --cocoon-google-plus-color: #dd4b39; --cocoon-pocket-color: #ef4056; --cocoon-line-color: #00c300; --cocoon-linkedin-color: #0077b5; --cocoon-website-color: #002561; --cocoon-instagram-color: #405de6; --cocoon-pinterest-color: #bd081c; --cocoon-youtube-color: #cd201f; --cocoon-tiktok-color: #000000; --cocoon-note-color: #41c9b4; --cocoon-soundcloud-color: #ff8800; --cocoon-flickr-color: #111; --cocoon-amazon-color: #ff9900; --cocoon-twitch-color: #6441a4; --cocoon-rakuten-color: #bf0000; --cocoon-rakuten-room-color: #c61e79; --cocoon-slack-color: #e01563; --cocoon-github-color: #4078c0; --cocoon-codepen-color: #333; --cocoon-feedly-color: #2bb24c; --cocoon-rss-color: #f26522; --cocoon-red-color: #e60033; --cocoon-pink-color: #e95295; --cocoon-purple-color: #884898; --cocoon-deep-color: #55295b; --cocoon-indigo-color: #1e50a2; --cocoon-blue-color: #0095d9; --cocoon-light-blue-color: #2ca9e1; --cocoon-cyan-color: #00a3af; --cocoon-teal-color: #007b43; --cocoon-green-color: #3eb370; --cocoon-light-green-color: #8bc34a; --cocoon-lime-color: #c3d825; --cocoon-yellow-color: #ffd900; --cocoon-amber-color: #ffc107; --cocoon-orange-color: #f39800; --cocoon-deep-orange-color: #ea5506; --cocoon-brown-color: #954e2a; --cocoon-grey-color: #949495; --cocoon-blue-gray-color: #607d8b; --cocoon-black-color: #333333; --cocoon-white-color: #ffffff; --cocoon-watery-blue-color: #f3fafe; --cocoon-watery-yellow-color: #fff7cc; --cocoon-watery-red-color: #fdf2f2; --cocoon-watery-green-color: #ebf8f4; --cocoon-custom-background-color: inherit; --cocoon-custom-text-color: inherit; --cocoon-custom-border-color: #ccc; --cocoon-default-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --cocoon-text-color: #333; --cocoon-pallid-text-color: #777; --cocoon-x-pallid-text-color: #999; --cocoon-default-text-size: 18px; --cocoon-text-size-s: 0.8em; --cocoon-basic-border-color: #ccc; --cocoon-three-d-border-colors: #e3e3e3 #cecece #b4b4b4 #d6d6d6; --cocoon-middle-thickness-color: #888; --cocoon-thin-color: #ddd; --cocoon-x-thin-color: #eee; --cocoon-xx-thin-color: #f5f6f7; --cocoon-xxx-thin-color: #fafbfc; --cocoon-current-background-color: #eee; --cocoon-select-background-color: #d8eaf2; --cocoon-basic-border-radius: 4px; --cocoon-badge-border-radius: 2px; --cocoon-middle-border-radius: 8px; --cocoon-box-padding: 1em 1.5em; --cocoon-list-padding: min(1%, 8px) min(2%, 16px) min(1%, 8px) min(3%, 24px); --cocoon-list-wide-padding: min(3%, 24px) min(5%, 40px) min(3%, 24px) min(7%, 56px); --cocoon-box-border-color: #47585c; --cocoon-sns-color: var(--cocoon-text-color); --card-ratio: 16/9; } .faw::before { font-family: FontAwesome; padding-right: 4px; } .related-entry-card, .entry-card { position: relative; height: 100%; } .carousel-entry-card-thumb, .related-entry-card-thumb, .widget-entry-card-thumb, .entry-card-thumb { float: left; margin-top: 3px; position: relative; } .related-entry-card-content, .entry-card-content { padding-bottom: 1.2em; } .related-entry-card-title, .entry-card-title { font-size: 18px; margin: 0 0 5px 0; line-height: 1.6; font-weight: bold; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .related-entry-card-snippet, .entry-card-snippet { font-size: var(--cocoon-text-size-s); line-height: 1.3; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .related-entry-card-meta, .entry-card-meta { bottom: 0; position: absolute; right: 0; text-align: right; line-height: 1; } .entry-categories-tags { margin-bottom: 18px; } .sns-follow-message, .sns-share-message { text-align: center; margin-bottom: 3px; } .appeal, .header, body { /* 画像を常に左右の中央に配置 */ background-position: top center; /* 画像をタイル状に繰り返し表示しない */ background-repeat: no-repeat; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: 100% auto; } .ba-fixed.appeal, .ba-fixed.header, body.ba-fixed { /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; } .post-date, .post-update, .post-author, .amp-back, .entry-category { padding: 2px; display: inline; font-size: 0.7em; } 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, .search-edit { padding: 11px; border: 1px solid var(--cocoon-basic-border-color); border-radius: var(--cocoon-basic-border-radius); font-size: inherit; width: 100%; } .fz-12px { font-size: 12px; } .wp-admin-fz-12px .editor-styles-wrapper { font-size: 12px; } .fz-13px { font-size: 13px; } .wp-admin-fz-13px .editor-styles-wrapper { font-size: 13px; } .fz-14px { font-size: 14px; } .wp-admin-fz-14px .editor-styles-wrapper { font-size: 14px; } .fz-15px { font-size: 15px; } .wp-admin-fz-15px .editor-styles-wrapper { font-size: 15px; } .fz-16px { font-size: 16px; } .wp-admin-fz-16px .editor-styles-wrapper { font-size: 16px; } .fz-17px { font-size: 17px; } .wp-admin-fz-17px .editor-styles-wrapper { font-size: 17px; } .fz-18px { font-size: 18px; } .wp-admin-fz-18px .editor-styles-wrapper { font-size: 18px; } .fz-19px { font-size: 19px; } .wp-admin-fz-19px .editor-styles-wrapper { font-size: 19px; } .fz-20px { font-size: 20px; } .wp-admin-fz-20px .editor-styles-wrapper { font-size: 20px; } .fz-21px { font-size: 21px; } .wp-admin-fz-21px .editor-styles-wrapper { font-size: 21px; } .fz-22px { font-size: 22px; } .wp-admin-fz-22px .editor-styles-wrapper { font-size: 22px; } .fz-24px { font-size: 24px; } .wp-admin-fz-24px .editor-styles-wrapper { font-size: 24px; } .fz-28px { font-size: 28px; } .wp-admin-fz-28px .editor-styles-wrapper { font-size: 28px; } .fz-32px { font-size: 32px; } .wp-admin-fz-32px .editor-styles-wrapper { font-size: 32px; } .fz-36px { font-size: 36px; } .wp-admin-fz-36px .editor-styles-wrapper { font-size: 36px; } .fz-40px { font-size: 40px; } .wp-admin-fz-40px .editor-styles-wrapper { font-size: 40px; } .fz-44px { font-size: 44px; } .wp-admin-fz-44px .editor-styles-wrapper { font-size: 44px; } .fz-48px { font-size: 48px; } .wp-admin-fz-48px .editor-styles-wrapper { font-size: 48px; } .fw-100 { font-weight: 100; } .wp-admin-fw-100 .editor-styles-wrapper { font-weight: 100; } .fw-200 { font-weight: 200; } .wp-admin-fw-200 .editor-styles-wrapper { font-weight: 200; } .fw-300 { font-weight: 300; } .wp-admin-fw-300 .editor-styles-wrapper { font-weight: 300; } .fw-400 { font-weight: 400; } .wp-admin-fw-400 .editor-styles-wrapper { font-weight: 400; } .fw-500 { font-weight: 500; } .wp-admin-fw-500 .editor-styles-wrapper { font-weight: 500; } .fw-600 { font-weight: 600; } .wp-admin-fw-600 .editor-styles-wrapper { font-weight: 600; } .fw-700 { font-weight: 700; } .wp-admin-fw-700 .editor-styles-wrapper { font-weight: 700; } .fw-800 { font-weight: 800; } .wp-admin-fw-800 .editor-styles-wrapper { font-weight: 800; } .fw-900 { font-weight: 900; } .wp-admin-fw-900 .editor-styles-wrapper { font-weight: 900; } .ff-meiryo, .wf-loading body, .wp-admin-ff-meiryo .editor-styles-wrapper { font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; } .ff-yu-gothic, .wp-admin-ff-yu-gothic .editor-styles-wrapper { font-family: YuGothic, "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; } .ff-ms-pgothic, .wp-admin-ff-ms-pgothic .editor-styles-wrapper { font-family: "MS PGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; } .ff-noto-sans-jp, .wf-active .ff-noto-sans-jp, .wp-admin-ff-noto-sans-jp .editor-styles-wrapper { font-family: "Noto Sans JP", sans-serif; } .ff-noto-serif-jp, .wf-active .ff-noto-serif-jp, .wp-admin-ff-noto-serif-jp .editor-styles-wrapper { font-family: "Noto Serif JP", sans-serif; } .ff-mplus-1p, .wf-active .ff-mplus-1p, .wp-admin-ff-mplus-1p .editor-styles-wrapper { font-family: "M PLUS 1p", sans-serif; } .ff-rounded-mplus-1c, .wf-active .ff-rounded-mplus-1c, .wp-admin-ff-rounded-mplus-1c .editor-styles-wrapper { font-family: "M PLUS Rounded 1c", sans-serif; } .ff-kosugi, .wf-active .ff-kosugi, .wp-admin-ff-kosugi .editor-styles-wrapper { font-family: "Kosugi", sans-serif; } .ff-kosugi-maru, .wf-active .ff-kosugi-maru, .wp-admin-ff-kosugi-maru .editor-styles-wrapper { font-family: "Kosugi Maru", sans-serif; } .ff-sawarabi-gothic, .wf-active .ff-sawarabi-gothic, .wp-admin-ff-sawarabi-gothic .editor-styles-wrapper { font-family: "Sawarabi Gothic", sans-serif; } .ff-sawarabi-mincho, .wf-active .ff-sawarabi-mincho, .wp-admin-ff-sawarabi-mincho .editor-styles-wrapper { font-family: "Sawarabi Mincho", sans-serif; } .sub-caption { font-family: Tunga, "Trebuchet MS", Tahoma, Verdana, "Segoe UI", var(--cocoon-default-font); font-weight: 400; font-size: 0.75em; opacity: 0.5; } span.sub-caption { opacity: 0.8; } html[lang=en] .ribbon-top-left span { font-size: 7px; } html[lang=en] .ribbon-top-left::before { right: 8px; } html[lang=en] .ribbon-top-left::after { bottom: 10px; } /************************************ ** 基本表示 ************************************/ /*初期化*/ * { 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: var(--cocoon-default-font); /* フォントのサイズ */ font-size: var(--cocoon-default-text-size); /* フォントの色 */ color: var(--cocoon-text-color); /* カーニングの設定 */ /* 行間の設定 */ 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; } .has-text-color a { color: inherit; } ol, ul { padding-left: 40px; } ul { list-style-type: disc; } hr { color: var(--cocoon-current-background-color); } /* クリアフィックス */ .cf::after { clear: both; content: ""; display: block; } .header-container, .main, .sidebar, .footer { background-color: var(--cocoon-white-color); } /* インナーを囲む */ .wrap { width: 1256px; margin: 0 auto; } /************************************ ** 本文部分 ************************************/ .content-in { display: flex; justify-content: space-between; flex-wrap: wrap; } .main { width: 860px; padding: 36px 29px; border: 1px solid transparent; border-radius: var(--cocoon-basic-border-radius); position: relative; z-index: 0; } .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: 25px; } .alignright { float: right; margin-left: 25px; } .wp-caption { padding-top: 4px; border: 1px solid var(--cocoon-x-thin-color); border-radius: 3px; background-color: var(--cocoon-xx-thin-color); 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; } p.has-background { padding: 12px; } :where(.wp-block-columns.is-layout-flex) { gap: 1em; } /************************************ ** 画像関係のスタイル ************************************/ figure { margin: 0; } img { max-width: 100%; height: auto; } .circle-image img { border-radius: 50%; } /************************************ ** 画像の囲み効果 ************************************/ /*ボーダー*/ .iwe-border img, .iwe-border amp-img { border: 1px solid var(--cocoon-basic-border-color); } /*ボーダー(太線)*/ .iwe-border-bold img, .iwe-border-bold amp-img { border: 4px solid var(--cocoon-current-background-color); } /*シャドー*/ .iwe-shadow img, .iwe-shadow amp-img { box-shadow: 5px 5px 15px var(--cocoon-x-thin-color); } /*シャドーペーパー*/ .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; flex-shrink: 0; } .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 .e-card-meta .e-card-categorys { display: inline; } .no-thumbnail .e-card-meta .e-card-categorys > span { margin-left: 0.6em; } img.emoji { display: inline; width: 1em; height: auto; vertical-align: text-bottom; margin-right: 0.1em; } .wp-block-image .aligncenter { text-align: center; } .wp-block-image img { display: block; } .wp-block-image figcaption { margin: 0; word-break: break-all; } /* サムネイルアスペクト比 */ .thumb-wide { --card-ratio: 16 / 9; } .thumb-golden-ratio { --card-ratio: 8 / 5; } .thumb-postcard { --card-ratio: 3 / 2; } .thumb-silver-ratio { --card-ratio: 7 / 5; } .thumb-standard { --card-ratio: 4 / 3; } .thumb-square, .post-navi-square { --card-ratio: 1 / 1; } .ect-tile-card, .ect-big-card, .ec-big-card-first { --card-ratio: auto; } .blogcard-thumbnail img, .card-thumb img { aspect-ratio: var(--card-ratio); object-fit: cover; } /************************************ ** ヘッダー ************************************/ .header { height: 100%; flex-shrink: 0; } .header-in { display: flex; flex-direction: column; justify-content: center; } .tagline { text-align: center; font-size: 14px; margin: 0.6em 1em; } .logo { text-align: center; } .logo-image span, .logo-image a { display: inline-block; max-width: 100%; } .site-name-text-link { color: var(--cocoon-text-color); text-decoration: none; font-weight: normal; padding: 0 1em; } .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; } .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; } .hlt-tm-small .navi-in > ul li, .cl-slim .navi-in > ul li { height: 40px; line-height: 40px; } .hlt-tm-small .navi-in > ul li .sub-menu ul, .cl-slim .navi-in > ul li .sub-menu ul { top: -40px; } .hlt-tm-small .navi-in > ul li.menu-item-has-description > a > .caption-wrap, .cl-slim .navi-in > ul li.menu-item-has-description > a > .caption-wrap { height: 40px; line-height: 16px; } /************************************ ** グローバルメニュー ************************************/ .navi { background-color: var(--cocoon-white-color); } .navi .item-label, .navi .item-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .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; width: 240px; list-style: none; padding: 0; background-color: var(--cocoon-xxx-thin-color); 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 { position: relative; color: var(--cocoon-text-color); 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: var(--cocoon-text-color); } /************************************ ** モバイルメニュー ************************************/ .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; } .navi-footer-in > .menu-footer li { width: 120px; border-left: 1px solid var(--cocoon-thin-color); } .navi-footer-in > .menu-footer li:last-child { border-right: 1px solid var(--cocoon-thin-color); } .navi-footer-in a { color: var(--cocoon-text-color); 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: var(--cocoon-text-color); } /************************************ ** エントリーカードの設定 ************************************/ .a-wrap { text-decoration: none; display: block; color: var(--cocoon-text-color); padding: 1.5%; transition: all 0.3s ease-in-out; } .a-wrap:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: var(--cocoon-text-color); } .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: var(--cocoon-white-color); background-color: rgba(51, 51, 51, 0.7); padding: 1px 5px; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pr-label-s { position: absolute; top: 3px; left: 3px; border: 1px solid rgba(51, 51, 51, 0.7); font-size: 12px; color: var(--cocoon-text-color); background-color: rgba(255, 255, 255, 0.9); padding: 2px 12px; border-radius: var(--cocoon-badge-border-radius); } .pr-label-l { border: 1px solid rgba(51, 51, 51, 0.7); font-size: 0.8em; color: var(--cocoon-text-color); background-color: rgba(255, 255, 255, 0.9); padding: 1em; text-align: center; border-radius: var(--cocoon-badge-border-radius); margin-top: 1em; margin-bottom: 1em; } .entry-card-content { margin-left: 330px; } .entry-card-info > * { font-size: 0.7em; padding: 2px; } .e-card-meta .e-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; } .fpt-columns { display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: 0.5%; } .post-comment-count .comment-icon { margin-right: 3px; } /************************************ ** エントリーカードタイプ ************************************/ .list { display: flex; flex-direction: column; row-gap: 1em; } #list, .list-wrap { margin-bottom: 3em; } .ect-vertical-card { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; column-gap: 1%; } .ect-vertical-card .entry-card-wrap { width: 49.5%; display: inline-block; } .ect-vertical-card .entry-card-wrap .entry-card { display: flex; flex-direction: column; } .ect-vertical-card .entry-card-wrap .entry-card-thumb { width: 100%; float: none; } .ect-vertical-card .entry-card-wrap .entry-card-content { margin: 0; display: flex; flex-direction: column; height: 100%; padding-bottom: 0; } .ect-vertical-card .entry-card-wrap .entry-card-meta { margin-top: auto; padding-top: 5px; position: unset; } .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 .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% 0; } .ect-2-columns > *, .fpt-2-columns > * { width: 49.5%; display: inline-block; } .ect-3-columns { column-gap: 0.5%; } .ect-3-columns .entry-card-wrap { width: 33%; padding: 7px; } .ect-3-columns .entry-card-snippet { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .ect-3-columns > *, .fpt-3-columns > * { width: 33%; display: inline-block; } .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; } .body .list .widget-entry-cards { margin-bottom: 0; } /************************************ ** 日付関係のスタイル ************************************/ .entry-date { margin-left: 3px; } .date-tags { line-height: 0.8; text-align: right; margin-bottom: 1em; } .post-date, .post-update, .post-author, .amp-back { margin-right: 8px; } /************************************ ** パンくずリスト ************************************/ .breadcrumb { margin: 1em 0.4em; color: var(--cocoon-x-pallid-text-color); font-size: 13px; } .breadcrumb div { display: inline; } .breadcrumb .sp { margin: 0 10px; } .breadcrumb a { text-decoration: none; color: var(--cocoon-x-pallid-text-color); } .breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before { background-color: var(--cocoon-white-color); margin: 12px auto 0; padding: 0.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; flex-wrap: wrap; align-content: center; justify-content: center; row-gap: 10px; column-gap: 6px; margin-top: 0.3em; margin-bottom: 2em; } .sns-buttons a { align-content: center; align-items: center; background-color: var(--cocoon-sns-color); border-radius: var(--cocoon-basic-border-radius); display: inline-flex; font-size: 18px; justify-content: center; height: 45px; position: relative; text-align: center; width: 32%; transition: all 0.3s ease-in-out; cursor: pointer; margin: 0 !important; color: var(--cocoon-white-color); text-decoration: none; } .sns-buttons a:hover { opacity: 0.7; } .bc-brand-color-white a { background-color: var(--cocoon-white-color); border: 1px solid var(--cocoon-sns-color); color: var(--cocoon-sns-color); font-weight: 500; } .bc-brand-color-white a:hover { opacity: 0.5; } [class*=bc-brand-color] .x-corp-button { --cocoon-sns-color: var(--cocoon-twitter-color); } [class*=bc-brand-color] .mastodon-button { --cocoon-sns-color: var(--cocoon-mastodon-color); } [class*=bc-brand-color] .bluesky-button { --cocoon-sns-color: var(--cocoon-bluesky-color); } [class*=bc-brand-color] .misskey-button { --cocoon-sns-color: var(--cocoon-misskey-color); } [class*=bc-brand-color] .facebook-button { --cocoon-sns-color: var(--cocoon-facebook-color); } [class*=bc-brand-color] .hatebu-button { --cocoon-sns-color: var(--cocoon-hatebu-color); } [class*=bc-brand-color] .google-plus-button { --cocoon-sns-color: var(--cocoon-google-plus-color); } [class*=bc-brand-color] .pocket-button { --cocoon-sns-color: var(--cocoon-pocket-color); } [class*=bc-brand-color] .line-button { --cocoon-sns-color: var(--cocoon-line-color); } [class*=bc-brand-color] .website-button { --cocoon-sns-color: var(--cocoon-website-color); } [class*=bc-brand-color] .instagram-button { --cocoon-sns-color: var(--cocoon-instagram-color); } [class*=bc-brand-color] .pinterest-button { --cocoon-sns-color: var(--cocoon-pinterest-color); } [class*=bc-brand-color] .youtube-button { --cocoon-sns-color: var(--cocoon-youtube-color); } [class*=bc-brand-color] .tiktok-button { --cocoon-sns-color: var(--cocoon-tiktok-color); } [class*=bc-brand-color] .linkedin-button { --cocoon-sns-color: var(--cocoon-linkedin-color); } [class*=bc-brand-color] .note-button { --cocoon-sns-color: var(--cocoon-note-color); } [class*=bc-brand-color] .soundcloud-button { --cocoon-sns-color: var(--cocoon-soundcloud-color); } [class*=bc-brand-color] .flickr-button { --cocoon-sns-color: var(--cocoon-flickr-color); } [class*=bc-brand-color] .amazon-button { --cocoon-sns-color: var(--cocoon-amazon-color); } [class*=bc-brand-color] .twitch-button { --cocoon-sns-color: var(--cocoon-twitch-color); } [class*=bc-brand-color] .rakuten-room-button { --cocoon-sns-color: var(--cocoon-rakuten-room-color); } [class*=bc-brand-color] .slack-button { --cocoon-sns-color: var(--cocoon-slack-color); } [class*=bc-brand-color] .github-button { --cocoon-sns-color: var(--cocoon-github-color); } [class*=bc-brand-color] .codepen-button { --cocoon-sns-color: var(--cocoon-codepen-color); } [class*=bc-brand-color] .feedly-button { --cocoon-sns-color: var(--cocoon-feedly-color); } [class*=bc-brand-color] .rss-button { --cocoon-sns-color: var(--cocoon-rss-color); } .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 .sns-buttons { column-gap: 1%; } .sns-share.ss-col-2 a { width: 49.5%; } .sns-share.ss-col-3 .sns-buttons { column-gap: 0.75%; } .sns-share.ss-col-3 a { width: 32.5%; } .sns-share.ss-col-4 .sns-buttons { column-gap: 1.3333333333%; } .sns-share.ss-col-4 a { width: 24%; } .sns-share.ss-col-5 .sns-buttons { column-gap: 1.25%; } .sns-share.ss-col-5 a { width: 19%; } .sns-share.ss-col-6 .sns-buttons { column-gap: 0.8%; } .sns-share.ss-col-6 a { width: 16%; } .sns-share.ss-high-and-low-cl a, .sns-share.ss-high-and-low-lc a { display: flex; align-content: center; line-height: 16px; } .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .button-caption, .sns-share.ss-high-and-low-lc a .button-caption { display: block; font-size: 16px; margin: 0; } .sns-share.ss-high-and-low-cl a .social-icon.button-caption, .sns-share.ss-high-and-low-lc a .social-icon.button-caption { font-size: 12px; } .sns-share.ss-high-and-low-cl a .button-caption.button-caption, .sns-share.ss-high-and-low-lc 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 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: var(--cocoon-text-color); opacity: 0.8; box-shadow: 0 4px 8px var(--cocoon-x-pallid-text-color); z-index: 2; } .article-header .sns-share:not(:has(.sns-button)), .article-footer .sns-share:not(:has(.sns-button)) { display: none; } /************************************ ** 内容 ************************************/ .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 { line-height: 1.6; word-wrap: normal; } /*本文下カテゴリーとタグ*/ .entry-categories-tags > div { margin-bottom: 0.5em; } .entry-categories-tags .tax-icon { margin-right: 0.4em; } .ctdt-one-row > div { display: inline; } .ctdt-category-only .entry-tags { display: none; } .ctdt-tag-only .entry-categories { display: none; } .ctdt-none { display: none; } /*本文下カテゴリ*/ .cat-link { color: var(--cocoon-white-color); text-decoration: none; display: inline-block; margin-right: 5px; padding: 2px 6px; font-size: 12px; background-color: var(--cocoon-text-color); border-radius: var(--cocoon-badge-border-radius); word-break: break-all; } .cat-link:hover { opacity: 0.5; color: var(--cocoon-white-color); } /*本文下タグ*/ .tag-link, .comment-reply-link { color: var(--cocoon-text-color); text-decoration: none; display: inline-block; margin-right: 5px; padding: 1px 5px; font-size: 12px; border: 1px solid var(--cocoon-x-pallid-text-color); border-radius: var(--cocoon-badge-border-radius); word-break: break-all; } .tag-link:hover, .comment-reply-link:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: var(--cocoon-text-color); } /************************************ ** 投稿・固定ページで使うHTML要素 ************************************/ table { margin-bottom: 20px; max-width: 100%; width: 100%; border-collapse: collapse; border-spacing: 0; } table th, table td { position: relative; padding: 0.5em; } table th { background-color: var(--cocoon-xx-thin-color); } table tr:nth-of-type(2n+1) { background-color: var(--cocoon-xxx-thin-color); } table:not(.has-border-color) :where(th, td) { border: 1px solid var(--cocoon-x-thin-color); } table :is(th, td):has(.s-circle, .d-circle, .triangle, .cross) { height: 60px; } .s-circle:before, .d-circle:before, .triangle:before, .cross:before { content: ""; display: block; height: 40px; left: 50%; opacity: 0.3; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 40px; } .s-circle:before { background-color: #00bcd4; -webkit-mask-image: url('data:image/svg+xml;utf8,'); } .d-circle:before { background-color: #8bc34a; -webkit-mask-image: url('data:image/svg+xml;utf8,'); } .triangle:before { background-color: #ffc107; -webkit-mask-image: url('data:image/svg+xml;utf8,'); } .cross:before { background-color: #f44336; -webkit-mask-image: url('data:image/svg+xml;utf8,'); } .scrollable-table { -webkit-overflow-scrolling: touch; margin: 0; } .scrollable-table.stfc-sticky table:not(.wp-calendar-table) tr > *:first-child { background-color: #e9eff2; color: var(--cocoon-text-color); 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 { white-space: nowrap; } .scrollable-table .has-fixed-layout th, .scrollable-table .has-fixed-layout td { white-space: normal; } .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.aligncenter figcaption { text-align: center; } figure.wp-block-table.alignright table { margin-left: 0; } .scroll-hint-icon-wrap { overflow: hidden; } .article { margin-bottom: 2em; } .article dd { margin-left: 40px; } .article ul li, .article ol li { margin: 0.2em; } .article ul ul, .article ul ol, .article ol ul, .article ol ol { margin: 0; padding-top: 0; padding-bottom: 0; padding-right: 0; } .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: var(--cocoon-xx-thin-color); border-radius: var(--cocoon-badge-border-radius); } .article h3 { border-left: 7px solid var(--cocoon-middle-thickness-color); border-right: 1px solid var(--cocoon-thin-color); border-top: 1px solid var(--cocoon-thin-color); border-bottom: 1px solid var(--cocoon-thin-color); font-size: 22px; padding: 12px 20px; } .article h4 { border-top: 2px solid var(--cocoon-thin-color); border-bottom: 2px solid var(--cocoon-thin-color); } .article h5 { border-bottom: 2px solid var(--cocoon-thin-color); } .article h6 { border-bottom: 1px solid var(--cocoon-thin-color); } .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: var(--cocoon-xxx-thin-color); border: 1px solid var(--cocoon-thin-color); padding: 1.4em 1.8em; 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: var(--cocoon-xxx-thin-color); border: 1px solid var(--cocoon-basic-border-color); } .no-post-date .article-header .post-date, .no-post-update .article-header .post-update, .no-post-author .author-info { display: none; } .read-time { text-align: center; font-size: 0.7em; border-top: 4px double var(--cocoon-x-thin-color); border-bottom: 4px double var(--cocoon-x-thin-color); margin: 0 3%; margin-bottom: 1em; } .read-time .hourglass-half-icon { margin-right: 3px; } .eye-catch-wrap { display: flex; } .eye-catch { position: relative; margin-bottom: 0.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: var(--cocoon-white-color); 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; } .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; } .blogcard-wrap { margin-left: auto; margin-right: auto; padding: 0; width: 90%; background-color: var(--cocoon-white-color); } .blogcard { padding: 1.6% 2.2% 2%; border-radius: var(--cocoon-basic-border-radius); 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%; margin-right: 0; } .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; } .blogcard-type br { display: none; } /************************************ ** 目次 ************************************/ .toc { border: 1px solid var(--cocoon-basic-border-color); 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: var(--cocoon-text-color); text-decoration: none; } .toc a:hover { text-decoration: underline; } .toc-title { font-size: 1.1em; text-align: center; display: block; padding: 2px 16px; } .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: var(--cocoon-basic-border-radius); background-color: var(--cocoon-white-color); } .sidebar h2, .sidebar h3 { background-color: var(--cocoon-xx-thin-color); padding: 12px; margin: 16px 0; border-radius: var(--cocoon-badge-border-radius); } .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 { font-size: 20px; } .nwa .ranking-item-description { margin-top: 1em; font-size: 0.8em; } .nwa .blogcard-wrap { width: auto; } .no-sidebar .content-in { display: block; } .body:has(#navi-menu-input:checked, #sidebar-menu-input:checked) { overflow: hidden; } /************************************ ** ウィジェット ************************************/ label.screen-reader-text { display: none; } /*タグクラウド*/ .tagcloud { display: flex; flex-wrap: wrap; } .tagcloud a { border: 1px solid var(--cocoon-x-thin-color); border-radius: 2px; color: var(--cocoon-text-color); 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: var(--cocoon-text-color); } .tagcloud a .tag-caption { word-break: break-all; } .tagcloud a .tag-caption .tax-icon { margin-right: 0.4em; } .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, .widget_block 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, .widget_block 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, .widget_block ul li a { color: var(--cocoon-text-color); 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, .widget_block ul li a:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: var(--cocoon-text-color); } .widget_categories ul li a .post-count, .widget_archive ul li a .post-count { display: block; float: right; } .widget_recent_comments li { padding: 10px 0; } /*カレンダー*/ .calendar_wrap { margin: 20px 0; } .wp-calendar-table { border-collapse: collapse; border-top-width: 1px; border-right-width: 1px; border-top-style: solid; border-right-style: solid; border-top-color: var(--cocoon-x-thin-color); border-right-color: var(--cocoon-x-thin-color); width: 100%; max-width: 400px; text-align: center; } .wp-calendar-table caption { font-weight: bold; text-align: center; } .wp-calendar-table [id$=today] { background-color: #ffe6b2; } .wp-calendar-table [id$=today] a { background-color: #ffe6b2; } .wp-calendar-table [id$=today] a:hover { background-color: #ffd67e; } .wp-calendar-table tr:nth-of-type(2n+1) { background-color: transparent; } .wp-calendar-table td { padding: 0px; } .wp-calendar-table td a { color: var(--cocoon-text-color); display: block; background-color: #ffface; } .wp-calendar-table 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-wrap { border-bottom: 2px dotted var(--cocoon-x-thin-color); } .border-partition .a-wrap:first-of-type { border-top: 2px dotted var(--cocoon-x-thin-color); } .border-partition.is-list-horizontal .a-wrap { border: 0; } .border-square .a-wrap { border-radius: var(--cocoon-basic-border-radius); border: 1px solid var(--cocoon-thin-color); } .card-title-bold .card-title { font-weight: 700; } .card-arrow .a-wrap { position: relative; } .card-arrow .a-wrap::after { content: "\f105"; font-family: "FontAwesome"; font-size: 16px; font-weight: 900; line-height: 1; margin-top: -8px; position: absolute; right: 20px; top: 50%; } .card-arrow .card-content { margin-right: 22px; } .font-awesome-5 .card-arrow .a-wrap::after { font-family: "Font Awesome 5 Free"; } /************************************ ** 新着記事・人気記事・ナビカードウィジェット(タイトルを重ねた大きなサムネイル以外) ************************************/ .widget-entry-cards:not(.large-thumb-on) .card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .widget-entry-cards:not(.large-thumb-on) .card-snippet { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } /************************************ ** 新着記事ウィジェット(大きなサムネイル) ************************************/ .widget-entry-cards.card-large-image .a-wrap { max-width: 400px; } .widget-entry-cards.card-large-image .e-card { font-size: var(--cocoon-default-text-size); } .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-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .widget-entry-cards.large-thumb-on .card-content { margin: 0; position: absolute; width: 100%; bottom: 0; padding: 0.6em; background: linear-gradient(180deg, transparent, #555); color: var(--cocoon-white-color); transition: all 0.5s; } .widget-entry-cards.large-thumb-on .card-snippet { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /************************************ ** 人気記事ウィジェットランキング表示 ************************************/ .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 .a-wrap { 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: var(--cocoon-white-color); border: 1px solid var(--cocoon-thin-color); 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: var(--cocoon-white-color); border-width: 6px; margin-left: -6px; } .recent-comment-content::before { border-color: rgba(221, 221, 221, 0); border-bottom-color: var(--cocoon-thin-color); border-width: 9px; margin-left: -9px; } /************************************ ** フォーローボタウィジェット ************************************/ .nwa .author-box .sns-follow-buttons { justify-content: center; } .nwa .sns-follow-buttons { column-gap: 1%; } .nwa .sns-follow-buttons a { width: 48%; } .widget_mobile_text, .widget_mobile_ad { display: none; } .widget h2 { font-size: 20px; } .entry-content .main-widget-label { display: none; } .widget_recent_comments ul { padding-left: 0; } .widget_recent_comments ul li { list-style: none; } .wp-block-latest-comments { padding-left: 0; } .widget_search .wp-block-search__button { padding: 0.375em 0.1em; font-size: 14px; } .widget_search .wp-block-search__input { line-height: normal; } .has-box-style { padding: var(--cocoon-box-padding); } .has-box-style.has-background { padding: var(--cocoon-box-padding); } .has-border { padding: var(--cocoon-box-padding); } .has-border.has-background { padding: var(--cocoon-box-padding); } .has-list-style { padding: var(--cocoon-list-padding); } .has-list-style.has-background { padding: var(--cocoon-list-wide-padding); } .body :is(ul, ol).has-border { padding: var(--cocoon-list-wide-padding); } .body :is(ul, ol).has-border.has-background { padding: var(--cocoon-list-wide-padding); } /*拡張クラスを追加するスタイルシート*/ .badge-grey, .badge-brown, .badge-yellow, .badge-green, .badge-blue, .badge-purple, .badge-pink, .badge-red, .badge, .ref, .reffer, .sankou { color: var(--cocoon-white-color); padding: 1px 5px 0; border-radius: 2px; font-size: 12px; } .badge, .ref, .reffer, .sankou { background-color: var(--cocoon-orange-color); } .badge-red { background-color: var(--cocoon-red-color); } .badge-pink { background-color: var(--cocoon-pink-color); } .badge-purple { background-color: var(--cocoon-purple-color); } .badge-blue { background-color: var(--cocoon-blue-color); } .badge-green { background-color: var(--cocoon-green-color); } .badge-yellow { background-color: var(--cocoon-yellow-color); } .badge-brown { background-color: var(--cocoon-brown-color); } .badge-grey { background-color: var(--cocoon-grey-color); } /*太字*/ .bold { font-weight: bold; } /*赤色*/ .red { color: var(--cocoon-red-color); } /*太字で赤色*/ .bold-red { font-weight: bold; color: var(--cocoon-red-color); } /*青色*/ .blue { color: var(--cocoon-blue-color); } /*太字で青色*/ .bold-blue { font-weight: bold; color: var(--cocoon-blue-color); } /*緑色*/ .green { color: var(--cocoon-green-color); } /*太字で緑色*/ .bold-green { font-weight: bold; color: var(--cocoon-green-color); } /*赤のアンダーライン*/ .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 var(--cocoon-middle-thickness-color); 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; } .is-style-information-box.has-background, .is-style-question-box.has-background, .is-style-alert-box.has-background, .is-style-memo-box.has-background, .is-style-comment-box.has-background, .is-style-ok-box.has-background, .is-style-ng-box.has-background, .is-style-good-box.has-background, .is-style-bad-box.has-background, .is-style-profile-box.has-background, .information-box.has-background, .question-box.has-background, .alert-box.has-background, .information.has-background, .question.has-background, .alert.has-background, .memo-box.has-background, .comment-box.has-background, .common-icon-box.has-background { padding: 20px 20px 20px 72px; } .body blockquote :last-child, .body .wp-block-media-text__content :last-child, .body .wp-block-columns :last-child, .body .column-left :last-child, .body .column-center :last-child, .body .column-right :last-child, .body .timeline-box :last-child, .body .wp-block-cover :last-child, .body .blogcard-type :last-child, .body .btn-wrap :last-child, .body .wp-block-group:not(.is-content-justification-left, .is-content-justification-center, .is-content-justification-right, .is-content-justification-space-between) :last-child, .body .wp-block-gallery :last-child, .body .block-box :last-child, .body .blank-box :last-child, .body .common-icon-box :last-child, .body .info-box :last-child, .body .primary-box :last-child, .body .success-box :last-child, .body .warning-box :last-child, .body .danger-box :last-child, .body .secondary-box :last-child, .body .light-box :last-child, .body .dark-box :last-child, .body .toc :last-child { margin-bottom: 0; } .body div.scrollable-table table, .body .wp-block-table table { margin-bottom: 0; } .body .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: 0.15em; line-height: 1em; top: 50%; margin-top: -0.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; } .blank-box { --cocoon-custom-border-color: var(--cocoon-grey-color); padding: var(--cocoon-box-padding); border-radius: var(--cocoon-basic-border-radius); background-color: var(--cocoon-custom-background-color); color: var(--cocoon-custom-text-color); border-style: solid; border-width: 3px; border-color: var(--cocoon-custom-border-color); } .blank-box ol, .blank-box ul { margin: 0; } .blank-box.bb-red { border-color: var(--cocoon-red-color); } .blank-box.bb-pink { border-color: var(--cocoon-pink-color); } .blank-box.bb-purple { border-color: var(--cocoon-purple-color); } .blank-box.bb-blue { border-color: var(--cocoon-blue-color); } .blank-box.bb-green { border-color: var(--cocoon-green-color); } .blank-box.bb-orange { border-color: var(--cocoon-orange-color); } .blank-box.bb-yellow { border-color: var(--cocoon-yellow-color); } .blank-box.bb-brown { border-color: var(--cocoon-brown-color); } .blank-box.bb-grey { border-color: var(--cocoon-grey-color); } .blank-box.bb-black { border-color: var(--cocoon-black-color); } .blank-box.bb-deep { border-color: var(--cocoon-deep-color); } .blank-box.bb-indigo { border-color: var(--cocoon-indigo-color); } .blank-box.bb-light-blue { border-color: var(--cocoon-light-blue-color); } .blank-box.bb-cyan { border-color: var(--cocoon-cyan-color); } .blank-box.bb-teal { border-color: var(--cocoon-teal-color); } .blank-box.bb-light-green { border-color: var(--cocoon-light-green-color); } .blank-box.bb-lime { border-color: var(--cocoon-lime-color); } .blank-box.bb-amber { border-color: var(--cocoon-amber-color); } .blank-box.bb-deep-orange { border-color: var(--cocoon-deep-orange-color); } .blank-box.bb-white { border-color: var(--cocoon-white-color); } .blank-box.bb-tab { position: relative; margin-top: 2em; border-top-left-radius: 0; } .blank-box.bb-tab .bb-label { background-color: var(--cocoon-custom-border-color); font-family: Aharoni, "Arial Black", Impact, Arial, sans-serif; position: absolute; font-size: 13px; top: -1.8em; line-height: 1.8; color: var(--cocoon-white-color); left: -3px; border-radius: 6px 6px 0 0; padding: 0 1em 0 0.8em; } .blank-box.bb-tab .bb-label .fa { margin-right: 6px; } .blank-box.bb-tab.bb-red .bb-label { background-color: var(--cocoon-red-color); } .blank-box.bb-tab.bb-pink .bb-label { background-color: var(--cocoon-pink-color); } .blank-box.bb-tab.bb-purple .bb-label { background-color: var(--cocoon-purple-color); } .blank-box.bb-tab.bb-blue .bb-label { background-color: var(--cocoon-blue-color); } .blank-box.bb-tab.bb-green .bb-label { background-color: var(--cocoon-green-color); } .blank-box.bb-tab.bb-orange .bb-label { background-color: var(--cocoon-orange-color); } .blank-box.bb-tab.bb-yellow .bb-label { background-color: var(--cocoon-yellow-color); } .blank-box.bb-tab.bb-brown .bb-label { background-color: var(--cocoon-brown-color); } .blank-box.bb-tab.bb-grey .bb-label { background-color: var(--cocoon-grey-color); } .blank-box.bb-tab.bb-black .bb-label { background-color: var(--cocoon-black-color); } .blank-box.bb-tab.bb-deep .bb-label { background-color: var(--cocoon-deep-color); } .blank-box.bb-tab.bb-indigo .bb-label { background-color: var(--cocoon-indigo-color); } .blank-box.bb-tab.bb-light-blue .bb-label { background-color: var(--cocoon-light-blue-color); } .blank-box.bb-tab.bb-cyan .bb-label { background-color: var(--cocoon-cyan-color); } .blank-box.bb-tab.bb-teal .bb-label { background-color: var(--cocoon-teal-color); } .blank-box.bb-tab.bb-light-green .bb-label { background-color: var(--cocoon-light-green-color); } .blank-box.bb-tab.bb-lime .bb-label { background-color: var(--cocoon-lime-color); } .blank-box.bb-tab.bb-amber .bb-label { background-color: var(--cocoon-amber-color); } .blank-box.bb-tab.bb-deep-orange .bb-label { background-color: var(--cocoon-deep-orange-color); } .blank-box.bb-tab.bb-white .bb-label { background-color: var(--cocoon-white-color); } .blank-box.sticky { border-width: 0 0 0 6px; border-color: var(--cocoon-x-pallid-text-color); background-color: var(--cocoon-xx-thin-color); } .blank-box.sticky.st-yellow { border-color: #FFA103; background-color: #ffeac7; } .blank-box.sticky.st-red { border-color: #CD3740; background-color: #F5DADC; } .blank-box.sticky.st-blue { border-color: #0066cc; background-color: #E5F2FF; } .blank-box.sticky.st-green { border-color: #028760; background-color: #CBEFE4; } [class*=is-style-blank-box-] { --cocoon-custom-border-color: var(--cocoon-grey-color); padding: var(--cocoon-box-padding); border-radius: var(--cocoon-basic-border-radius); background-color: var(--cocoon-custom-background-color); color: var(--cocoon-custom-text-color); border-style: solid; border-width: 3px; border-color: var(--cocoon-custom-border-color); } [class*=is-style-blank-box-] ol, [class*=is-style-blank-box-] ul { margin: 0; } .is-style-blank-box-red { border-color: var(--cocoon-red-color); } .is-style-blank-box-pink { border-color: var(--cocoon-pink-color); } .is-style-blank-box-navy { border-color: var(--cocoon-indigo-color); } .is-style-blank-box-blue { border-color: var(--cocoon-blue-color); } .is-style-blank-box-purple { border-color: var(--cocoon-purple-color); } .is-style-blank-box-yellow { border-color: var(--cocoon-yellow-color); } .is-style-blank-box-green { border-color: var(--cocoon-green-color); } .is-style-blank-box-orange { border-color: var(--cocoon-orange-color); } [class*=is-style-sticky-] { --cocoon-custom-border-color: var(--cocoon-grey-color); padding: var(--cocoon-box-padding); border-radius: var(--cocoon-basic-border-radius); background-color: var(--cocoon-custom-background-color); color: var(--cocoon-custom-text-color); border-style: solid; border-width: 0 0 0 6px; border-color: var(--cocoon-x-pallid-text-color); background-color: var(--cocoon-xx-thin-color); } [class*=is-style-sticky-] ol, [class*=is-style-sticky-] ul { margin: 0; } .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: "\f00c"; } .bb-check .bb-label::after { content: "CHECK"; } .bb-comment .bb-label .fa::before { content: "\f075"; } .bb-comment .bb-label::after { content: "COMMENT"; } .bb-point .bb-label .fa::before { content: "\f0eb"; } .bb-point .bb-label::after { content: "POINT"; } .bb-tips .bb-label .fa::before { content: "\f19d"; } .bb-tips .bb-label::after { content: "TIPS"; } .bb-hint .bb-label .fa::before { content: "\f0f3"; } .bb-hint .bb-label::after { content: "HINT"; } .bb-pickup .bb-label .fa::before { content: "\f005"; } .bb-pickup .bb-label::after { content: "PICKUP"; } .bb-bookmark .bb-label .fa::before { content: "\f02e"; } .bb-bookmark .bb-label::after { content: "BOOKMARK"; } .bb-memo .bb-label .fa::before { content: "\f249"; } .bb-memo .bb-label::after { content: "MEMO"; } .bb-download .bb-label .fa::before { content: "\f019"; } .bb-download .bb-label::after { content: "DOWNLOAD"; } .bb-break .bb-label .fa::before { content: "\f0f4"; } .bb-break .bb-label::after { content: "BREAK"; } .bb-amazon .bb-label .fa::before { content: "\f270"; } .bb-amazon .bb-label::after { content: "AMAZON"; } .bb-ok .bb-label .fa::before { content: "\f10c"; } .bb-ok .bb-label::after { content: "OK"; } .bb-ng .bb-label .fa::before { content: "\f00d"; } .bb-ng .bb-label::after { content: "NG"; } .bb-good .bb-label .fa::before { content: "\f164"; } .bb-good .bb-label::after { content: "GOOD"; } .bb-bad .bb-label .fa::before { content: "\f165"; } .bb-bad .bb-label::after { content: "BAD"; } .bb-profile .bb-label .fa::before { content: "\f007"; } .bb-profile .bb-label::after { content: "PROFILE"; } /******************************* * 続きはWEBで的な検索ボックス ********************************/ div.search-form { margin: 3em auto; 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: var(--cocoon-white-color); 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-modal-content .search-form { margin: 0 !important; display: block !important; box-shadow: none !important; border-radius: 0 !important; border: none !important; } .btn-wrap { float: none !important; min-height: 2em; } .btn-wrap img[width="1"] { position: absolute; bottom: 0; right: 0; } .button-block, .btn-wrap { --cocoon-custom-background-color: var(--cocoon-black-color); --cocoon-custom-text-color: var(--cocoon-white-color); --cocoon-custom-border-color: transparent; } .btn[class*=btn-], .ranking-item-link-buttons a[class*=btn-] { --cocoon-custom-border-color: transparent; } .btn, .ranking-item-link-buttons a, .btn-wrap > a, .wp-block-freeform .btn-wrap > a, [class*=inline-button-] { border-width: 2px; border-style: solid; color: var(--cocoon-custom-text-color, #fff); background-color: var(--cocoon-custom-background-color, #333); border-color: var(--cocoon-custom-border-color); 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; position: relative; transition: all 0.3s ease-in-out; } .btn amp-img, .ranking-item-link-buttons a amp-img, .btn-wrap > a amp-img, .wp-block-freeform .btn-wrap > a amp-img, [class*=inline-button-] amp-img { position: absolute; } [class*=inline-button-]:hover { opacity: 0.7; } [class*=inline-button-] a { color: inherit; text-decoration: none; } .inline-button-black { border-color: var(--cocoon-black-color); background-color: var(--cocoon-black-color); } .inline-button-red { border-color: var(--cocoon-red-color); background-color: var(--cocoon-red-color); } .inline-button-blue { border-color: var(--cocoon-blue-color); background-color: var(--cocoon-blue-color); } .inline-button-green { border-color: var(--cocoon-teal-color); background-color: var(--cocoon-teal-color); } [class*=inline-button-white-] { background-color: transparent; border-width: 1px; } [class*=inline-button-white-]:hover { opacity: 0.3; } .inline-button-white-black { color: var(--cocoon-black-color); border-color: var(--cocoon-black-color); } .inline-button-white-red { color: var(--cocoon-red-color); border-color: var(--cocoon-red-color); } .inline-button-white-blue { color: var(--cocoon-blue-color); border-color: var(--cocoon-blue-color); } .inline-button-white-green { color: var(--cocoon-teal-color); border-color: var(--cocoon-teal-color); } .mce-content-body .btn-wrap a[data-mce-selected] { padding: 7px 13px; } .btn, .ranking-item-link-buttons a { margin: 0; } .btn.cocoon-block-button__width-25, .ranking-item-link-buttons a.cocoon-block-button__width-25 { width: 25%; } .btn.cocoon-block-button__width-50, .ranking-item-link-buttons a.cocoon-block-button__width-50 { width: 50%; } .btn.cocoon-block-button__width-75, .ranking-item-link-buttons a.cocoon-block-button__width-75 { width: 75%; } .btn.cocoon-block-button__width-100, .ranking-item-link-buttons a.cocoon-block-button__width-100 { width: 100%; } .btn-wrap { margin: 0; } .btn-wrap.cocoon-block-button__width-25 a { width: 25%; } .btn-wrap.cocoon-block-button__width-50 a { width: 50%; } .btn-wrap.cocoon-block-button__width-75 a { width: 75%; } .btn-wrap.cocoon-block-button__width-100 a { width: 100%; } .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 0.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; } .alignleft .btn-l.has-custom-width, .alignleft .ranking-item-link-buttons a.has-custom-width, .ranking-item-link-buttons .alignleft a.has-custom-width, .alignleft.btn-wrap-l.has-custom-width a { margin-right: auto; } .aligncenter .btn-l.has-custom-width, .aligncenter .ranking-item-link-buttons a.has-custom-width, .ranking-item-link-buttons .aligncenter a.has-custom-width, .aligncenter.btn-wrap-l.has-custom-width a { margin-left: auto; margin-right: auto; } .alignright .btn-l.has-custom-width, .alignright .ranking-item-link-buttons a.has-custom-width, .ranking-item-link-buttons .alignright a.has-custom-width, .alignright.btn-wrap-l.has-custom-width a { margin-left: auto; } .btn:hover, .ranking-item-link-buttons a:hover, .btn-wrap > a:hover { opacity: 0.7; color: var(--cocoon-white-color); } .btn:hover::after, .ranking-item-link-buttons a:hover::after, .btn-wrap > a:hover::after { right: -4px; } .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: var(--cocoon-text-color); background-color: var(--cocoon-white-color); } #container .btn-white:hover, #container .btn-wrap.btn-wrap-white > a:hover { color: var(--cocoon-text-color); } .btn-black, .btn-wrap.btn-wrap-black > a { background-color: var(--cocoon-black-color); } .btn-red, .ranking-item-link a, .btn-wrap.btn-wrap-red > a { background-color: var(--cocoon-red-color); } .btn-pink, .btn-wrap.btn-wrap-pink > a { background-color: var(--cocoon-pink-color); } .btn-purple, .btn-wrap.btn-wrap-purple > a { background-color: var(--cocoon-purple-color); } .btn-deep, .btn-wrap.btn-wrap-deep > a { background-color: var(--cocoon-deep-color); } .btn-indigo, .btn-wrap.btn-wrap-indigo > a { background-color: var(--cocoon-indigo-color); } .btn-blue, .ranking-item-detail a, .btn-wrap.btn-wrap-blue > a { background-color: var(--cocoon-blue-color); } .btn-light-blue, .btn-wrap.btn-wrap-light-blue > a { background-color: var(--cocoon-light-blue-color); } .btn-cyan, .btn-wrap.btn-wrap-cyan > a { background-color: var(--cocoon-cyan-color); } .btn-teal, .btn-wrap.btn-wrap-teal > a { background-color: var(--cocoon-teal-color); } .btn-green, .btn-wrap.btn-wrap-green > a { background-color: var(--cocoon-green-color); } .btn-light-green, .btn-wrap.btn-wrap-light-green > a { background-color: var(--cocoon-light-green-color); } .btn-lime, .btn-wrap.btn-wrap-lime > a { background-color: var(--cocoon-lime-color); } .btn-yellow, .btn-wrap.btn-wrap-yellow > a { background-color: var(--cocoon-yellow-color); } .btn-amber, .btn-wrap.btn-wrap-amber > a { background-color: var(--cocoon-amber-color); } .btn-orange, .btn-wrap.btn-wrap-orange > a { background-color: var(--cocoon-orange-color); } .btn-deep-orange, .btn-wrap.btn-wrap-deep-orange > a { background-color: var(--cocoon-deep-orange-color); } .btn-brown, .btn-wrap.btn-wrap-brown > a { background-color: var(--cocoon-brown-color); } .btn-grey, .btn-wrap.btn-wrap-grey > a { background-color: var(--cocoon-grey-color); } .btn-blue-grey, .btn-wrap.btn-wrap-blue-grey > a { background-color: var(--cocoon-blue-gray-color); } .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-text { --cocoon-custom-text-color: var(--cocoon-text-color); color: var(--cocoon-custom-text-color); } .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 { --cocoon-custom-border-color: var(--cocoon-x-pallid-text-color); --cocoon-custom-background-color: var(--cocoon-white-color); --cocoon-custom-text-color: var(--cocoon-text-color); position: relative; background: var(--cocoon-custom-background-color); border-width: 1px; border-style: solid; border-color: var(--cocoon-custom-border-color); border-radius: 4px; padding: 3px 12px; display: table; margin-bottom: 0.8em; font-size: 0.8em; } .micro-balloon.has-background { color: var(--cocoon-white-color); } .micro-balloon.has-text-color { color: var(--cocoon-custom-text-color); } .micro-balloon.aligncenter { margin-left: auto; margin-right: auto; display: table; } .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-style: solid; border-color: transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .micro-balloon:after { border-top-color: var(--cocoon-custom-background-color); border-width: 7px; margin-left: -7px; } .micro-balloon:before { border-top-color: var(--cocoon-custom-border-color); 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: -0.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: var(--cocoon-custom-background-color); border-top-color: transparent; } .micro-bottom.micro-balloon:before { border-bottom-color: var(--cocoon-custom-border-color); 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: var(--cocoon-red-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-red.micro-bottom::after { border-bottom-color: var(--cocoon-red-color); 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: var(--cocoon-red-color); } .micro-balloon.mc-pink { background-color: var(--cocoon-pink-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-pink.micro-bottom::after { border-bottom-color: var(--cocoon-pink-color); 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: var(--cocoon-pink-color); } .micro-balloon.mc-purple { background-color: var(--cocoon-purple-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-purple.micro-bottom::after { border-bottom-color: var(--cocoon-purple-color); 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: var(--cocoon-purple-color); } .micro-balloon.mc-blue { background-color: var(--cocoon-blue-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-blue.micro-bottom::after { border-bottom-color: var(--cocoon-blue-color); 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: var(--cocoon-blue-color); } .micro-balloon.mc-green { background-color: var(--cocoon-green-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-green.micro-bottom::after { border-bottom-color: var(--cocoon-green-color); 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: var(--cocoon-green-color); } .micro-balloon.mc-orange { background-color: var(--cocoon-orange-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-orange.micro-bottom::after { border-bottom-color: var(--cocoon-orange-color); 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: var(--cocoon-orange-color); } .micro-balloon.mc-yellow { background-color: var(--cocoon-yellow-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-yellow.micro-bottom::after { border-bottom-color: var(--cocoon-yellow-color); 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: var(--cocoon-yellow-color); } .micro-balloon.mc-brown { background-color: var(--cocoon-brown-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-brown.micro-bottom::after { border-bottom-color: var(--cocoon-brown-color); 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: var(--cocoon-brown-color); } .micro-balloon.mc-grey { background-color: var(--cocoon-grey-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-grey.micro-bottom::after { border-bottom-color: var(--cocoon-grey-color); 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: var(--cocoon-grey-color); } .micro-balloon.mc-black { background-color: var(--cocoon-black-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-black.micro-bottom::after { border-bottom-color: var(--cocoon-black-color); 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: var(--cocoon-black-color); } .micro-balloon.mc-deep { background-color: var(--cocoon-deep-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-deep.micro-bottom::after { border-bottom-color: var(--cocoon-deep-color); 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: var(--cocoon-deep-color); } .micro-balloon.mc-indigo { background-color: var(--cocoon-indigo-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-indigo.micro-bottom::after { border-bottom-color: var(--cocoon-indigo-color); 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: var(--cocoon-indigo-color); } .micro-balloon.mc-light-blue { background-color: var(--cocoon-light-blue-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-light-blue.micro-bottom::after { border-bottom-color: var(--cocoon-light-blue-color); 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: var(--cocoon-light-blue-color); } .micro-balloon.mc-cyan { background-color: var(--cocoon-cyan-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-cyan.micro-bottom::after { border-bottom-color: var(--cocoon-cyan-color); 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: var(--cocoon-cyan-color); } .micro-balloon.mc-teal { background-color: var(--cocoon-teal-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-teal.micro-bottom::after { border-bottom-color: var(--cocoon-teal-color); 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: var(--cocoon-teal-color); } .micro-balloon.mc-light-green { background-color: var(--cocoon-light-green-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-light-green.micro-bottom::after { border-bottom-color: var(--cocoon-light-green-color); 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: var(--cocoon-light-green-color); } .micro-balloon.mc-lime { background-color: var(--cocoon-lime-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-lime.micro-bottom::after { border-bottom-color: var(--cocoon-lime-color); 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: var(--cocoon-lime-color); } .micro-balloon.mc-amber { background-color: var(--cocoon-amber-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-amber.micro-bottom::after { border-bottom-color: var(--cocoon-amber-color); 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: var(--cocoon-amber-color); } .micro-balloon.mc-deep-orange { background-color: var(--cocoon-deep-orange-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-deep-orange.micro-bottom::after { border-bottom-color: var(--cocoon-deep-orange-color); 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: var(--cocoon-deep-orange-color); } .micro-balloon.mc-white { background-color: var(--cocoon-white-color); color: var(--cocoon-white-color); border: none; } .micro-balloon.mc-white.micro-bottom::after { border-bottom-color: var(--cocoon-white-color); 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: var(--cocoon-white-color); } .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: "\f15c"; } .bct-related .blogcard-label::after { content: "関連記事"; } .bct-reference .blogcard-label .fa::before { content: "\f19d"; } .bct-reference .blogcard-label::after { content: "参考記事"; } .bct-reference-link .blogcard-label .fa::before { content: "\f19d"; } .bct-reference-link .blogcard-label::after { content: "参考リンク"; } .bct-popular .blogcard-label .fa::before { content: "\f005"; } .bct-popular .blogcard-label::after { content: "人気記事"; } .bct-pickup .blogcard-label .fa::before { content: "\f005"; } .bct-pickup .blogcard-label::after { content: "ピックアップ"; } .bct-check .blogcard-label .fa::before { content: "\f00c"; } .bct-check .blogcard-label::after { content: "チェック"; } .bct-together .blogcard-label .fa::before { content: "\f02d"; } .bct-together .blogcard-label::after { content: "あわせて読みたい"; } .bct-detail .blogcard-label .fa::before { content: "\f15c"; } .bct-detail .blogcard-label::after { content: "詳細はこちら"; } .bct-official .blogcard-label .fa::before { content: "\f024"; } .bct-official .blogcard-label::after { content: "公式サイト"; } .bct-dl .blogcard-label .fa::before { content: "\f019"; } .bct-dl .blogcard-label::after { content: "ダウンロード"; } .bct-prev .blogcard-label .fa::before { content: "\f137"; } .bct-prev .blogcard-label::after { content: "前回の記事"; } .bct-next .blogcard-label .fa::before { content: "\f138"; } .bct-next .blogcard-label::after { content: "続きの記事"; } .button-block { float: none; margin: 0; } .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 { --cocoon-custom-border-color: var(--cocoon-current-background-color); --cocoon-custom-background-color: transparent; --cocoon-custom-text-color: var(--cocoon-text-color); border-width: 2px; border-style: solid; border-color: var(--cocoon-custom-border-color); border-radius: var(--cocoon-basic-border-radius); background-color: var(--cocoon-custom-background-color); color: var(--cocoon-custom-text-color); } .caption-box.has-border-color:not(.not-nested-style) .box-label { color: var(--cocoon-white-color); } .caption-box-label { padding: 0.2em 0.8em; background-color: var(--cocoon-custom-border-color); } .caption-box-content { padding: 0.4em 0.8em; } .cb-red.caption-box { border-color: var(--cocoon-red-color); } .cb-red .caption-box-label { background-color: var(--cocoon-red-color); color: var(--cocoon-white-color); } .cb-pink.caption-box { border-color: var(--cocoon-pink-color); } .cb-pink .caption-box-label { background-color: var(--cocoon-pink-color); color: var(--cocoon-white-color); } .cb-purple.caption-box { border-color: var(--cocoon-purple-color); } .cb-purple .caption-box-label { background-color: var(--cocoon-purple-color); color: var(--cocoon-white-color); } .cb-blue.caption-box { border-color: var(--cocoon-blue-color); } .cb-blue .caption-box-label { background-color: var(--cocoon-blue-color); color: var(--cocoon-white-color); } .cb-green.caption-box { border-color: var(--cocoon-green-color); } .cb-green .caption-box-label { background-color: var(--cocoon-green-color); color: var(--cocoon-white-color); } .cb-orange.caption-box { border-color: var(--cocoon-orange-color); } .cb-orange .caption-box-label { background-color: var(--cocoon-orange-color); color: var(--cocoon-white-color); } .cb-yellow.caption-box { border-color: var(--cocoon-yellow-color); } .cb-yellow .caption-box-label { background-color: var(--cocoon-yellow-color); color: var(--cocoon-white-color); } .cb-brown.caption-box { border-color: var(--cocoon-brown-color); } .cb-brown .caption-box-label { background-color: var(--cocoon-brown-color); color: var(--cocoon-white-color); } .cb-grey.caption-box { border-color: var(--cocoon-grey-color); } .cb-grey .caption-box-label { background-color: var(--cocoon-grey-color); color: var(--cocoon-white-color); } .cb-black.caption-box { border-color: var(--cocoon-black-color); } .cb-black .caption-box-label { background-color: var(--cocoon-black-color); color: var(--cocoon-white-color); } .cb-deep.caption-box { border-color: var(--cocoon-deep-color); } .cb-deep .caption-box-label { background-color: var(--cocoon-deep-color); color: var(--cocoon-white-color); } .cb-indigo.caption-box { border-color: var(--cocoon-indigo-color); } .cb-indigo .caption-box-label { background-color: var(--cocoon-indigo-color); color: var(--cocoon-white-color); } .cb-light-blue.caption-box { border-color: var(--cocoon-light-blue-color); } .cb-light-blue .caption-box-label { background-color: var(--cocoon-light-blue-color); color: var(--cocoon-white-color); } .cb-cyan.caption-box { border-color: var(--cocoon-cyan-color); } .cb-cyan .caption-box-label { background-color: var(--cocoon-cyan-color); color: var(--cocoon-white-color); } .cb-teal.caption-box { border-color: var(--cocoon-teal-color); } .cb-teal .caption-box-label { background-color: var(--cocoon-teal-color); color: var(--cocoon-white-color); } .cb-light-green.caption-box { border-color: var(--cocoon-light-green-color); } .cb-light-green .caption-box-label { background-color: var(--cocoon-light-green-color); color: var(--cocoon-white-color); } .cb-lime.caption-box { border-color: var(--cocoon-lime-color); } .cb-lime .caption-box-label { background-color: var(--cocoon-lime-color); color: var(--cocoon-white-color); } .cb-amber.caption-box { border-color: var(--cocoon-amber-color); } .cb-amber .caption-box-label { background-color: var(--cocoon-amber-color); color: var(--cocoon-white-color); } .cb-deep-orange.caption-box { border-color: var(--cocoon-deep-orange-color); } .cb-deep-orange .caption-box-label { background-color: var(--cocoon-deep-orange-color); color: var(--cocoon-white-color); } .cb-white.caption-box { border-color: var(--cocoon-white-color); } .cb-white .caption-box-label { background-color: var(--cocoon-white-color); color: var(--cocoon-white-color); } /************************************ ** キャプションタブボックス ************************************/ .tab-caption-box { --cocoon-custom-border-color: var(--cocoon-current-background-color); --cocoon-custom-background-color: transparent; --cocoon-custom-text-color: var(--cocoon-text-color); border-width: 0; } .tab-caption-box.block-box.has-background { background-color: transparent !important; } .tab-caption-box.has-border-color:not(.not-nested-style) .box-label { color: var(--cocoon-white-color); } .tab-caption-box-label { padding: 0 0.8em; font-size: 0.9em; background-color: var(--cocoon-custom-border-color); display: inline-block; border-top-left-radius: var(--cocoon-middle-border-radius); border-top-right-radius: var(--cocoon-middle-border-radius); color: var(--cocoon-text-color); } .tab-caption-box-content { margin-top: -3px; border-width: 3px; border-style: solid; border-color: var(--cocoon-custom-border-color); background-color: var(--cocoon-custom-background-color); color: var(--cocoon-custom-text-color); padding: 0.4em 0.8em; border-radius: var(--cocoon-middle-border-radius); border-top-left-radius: 0; } .has-border-color > .tab-caption-box-label { background-color: var(--cocoon-custom-border-color); } .has-border-color > .tab-caption-box-content { border-color: var(--cocoon-custom-border-color); } .tcb-red .tab-caption-box-label { background-color: var(--cocoon-red-color); color: var(--cocoon-white-color); } .tcb-red .tab-caption-box-content { border-color: var(--cocoon-red-color); } .tcb-pink .tab-caption-box-label { background-color: var(--cocoon-pink-color); color: var(--cocoon-white-color); } .tcb-pink .tab-caption-box-content { border-color: var(--cocoon-pink-color); } .tcb-purple .tab-caption-box-label { background-color: var(--cocoon-purple-color); color: var(--cocoon-white-color); } .tcb-purple .tab-caption-box-content { border-color: var(--cocoon-purple-color); } .tcb-blue .tab-caption-box-label { background-color: var(--cocoon-blue-color); color: var(--cocoon-white-color); } .tcb-blue .tab-caption-box-content { border-color: var(--cocoon-blue-color); } .tcb-green .tab-caption-box-label { background-color: var(--cocoon-green-color); color: var(--cocoon-white-color); } .tcb-green .tab-caption-box-content { border-color: var(--cocoon-green-color); } .tcb-orange .tab-caption-box-label { background-color: var(--cocoon-orange-color); color: var(--cocoon-white-color); } .tcb-orange .tab-caption-box-content { border-color: var(--cocoon-orange-color); } .tcb-yellow .tab-caption-box-label { background-color: var(--cocoon-yellow-color); color: var(--cocoon-white-color); } .tcb-yellow .tab-caption-box-content { border-color: var(--cocoon-yellow-color); } .tcb-brown .tab-caption-box-label { background-color: var(--cocoon-brown-color); color: var(--cocoon-white-color); } .tcb-brown .tab-caption-box-content { border-color: var(--cocoon-brown-color); } .tcb-grey .tab-caption-box-label { background-color: var(--cocoon-grey-color); color: var(--cocoon-white-color); } .tcb-grey .tab-caption-box-content { border-color: var(--cocoon-grey-color); } .tcb-black .tab-caption-box-label { background-color: var(--cocoon-black-color); color: var(--cocoon-white-color); } .tcb-black .tab-caption-box-content { border-color: var(--cocoon-black-color); } .tcb-deep .tab-caption-box-label { background-color: var(--cocoon-deep-color); color: var(--cocoon-white-color); } .tcb-deep .tab-caption-box-content { border-color: var(--cocoon-deep-color); } .tcb-indigo .tab-caption-box-label { background-color: var(--cocoon-indigo-color); color: var(--cocoon-white-color); } .tcb-indigo .tab-caption-box-content { border-color: var(--cocoon-indigo-color); } .tcb-light-blue .tab-caption-box-label { background-color: var(--cocoon-light-blue-color); color: var(--cocoon-white-color); } .tcb-light-blue .tab-caption-box-content { border-color: var(--cocoon-light-blue-color); } .tcb-cyan .tab-caption-box-label { background-color: var(--cocoon-cyan-color); color: var(--cocoon-white-color); } .tcb-cyan .tab-caption-box-content { border-color: var(--cocoon-cyan-color); } .tcb-teal .tab-caption-box-label { background-color: var(--cocoon-teal-color); color: var(--cocoon-white-color); } .tcb-teal .tab-caption-box-content { border-color: var(--cocoon-teal-color); } .tcb-light-green .tab-caption-box-label { background-color: var(--cocoon-light-green-color); color: var(--cocoon-white-color); } .tcb-light-green .tab-caption-box-content { border-color: var(--cocoon-light-green-color); } .tcb-lime .tab-caption-box-label { background-color: var(--cocoon-lime-color); color: var(--cocoon-white-color); } .tcb-lime .tab-caption-box-content { border-color: var(--cocoon-lime-color); } .tcb-amber .tab-caption-box-label { background-color: var(--cocoon-amber-color); color: var(--cocoon-white-color); } .tcb-amber .tab-caption-box-content { border-color: var(--cocoon-amber-color); } .tcb-deep-orange .tab-caption-box-label { background-color: var(--cocoon-deep-orange-color); color: var(--cocoon-white-color); } .tcb-deep-orange .tab-caption-box-content { border-color: var(--cocoon-deep-orange-color); } .tcb-white .tab-caption-box-label { background-color: var(--cocoon-white-color); color: var(--cocoon-white-color); } .tcb-white .tab-caption-box-content { border-color: var(--cocoon-white-color); } html .body .tab-caption-box.has-white-background-color .box-content { background-color: #fff; } /************************************ ** ラベルボックス ************************************/ .label-box { --cocoon-custom-border-color: var(--cocoon-middle-thickness-color); --cocoon-custom-background-color: transparent; --cocoon-custom-text-color: var(--cocoon-text-color); border-width: 0; color: var(--cocoon-custom-text-color); } .label-box.block-box.has-background { background-color: transparent !important; } .label-box-label { margin-left: 1em; padding: 0 0.8em; font-size: 0.9em; font-weight: bold; text-shadow: var(--cocoon-white-color) 3px 0px 0px, var(--cocoon-white-color) 2px 1px 0px, var(--cocoon-white-color) 2px 2px 0px, var(--cocoon-white-color) 2px 3px 0px, var(--cocoon-white-color) 1px 3px 0px, var(--cocoon-white-color) 0px 3px 0px, var(--cocoon-white-color) -1px 3px 0px, var(--cocoon-white-color) -2px 2px 0px, var(--cocoon-white-color) -3px 1px 0px, var(--cocoon-white-color) -3px 0px 0px, var(--cocoon-white-color) -3px -1px 0px, var(--cocoon-white-color) -3px -2px 0px, var(--cocoon-white-color) -2px -2px 0px, var(--cocoon-white-color) -1px -3px 0px, var(--cocoon-white-color) 0px -3px 0px, var(--cocoon-white-color) 1px -3px 0px, var(--cocoon-white-color) 2px -2px 0px, var(--cocoon-white-color) 2px -2px 0px, var(--cocoon-white-color) 3px -1px 0px; } .label-box-content { margin-top: -0.9em; border-width: 3px; border-style: solid; border-color: var(--cocoon-custom-border-color); background-color: var(--cocoon-custom-background-color); padding: 1em 0.8em 0.4em; border-radius: var(--cocoon-middle-border-radius); } .lb-red .label-box-content { border-color: var(--cocoon-red-color); } .lb-pink .label-box-content { border-color: var(--cocoon-pink-color); } .lb-purple .label-box-content { border-color: var(--cocoon-purple-color); } .lb-blue .label-box-content { border-color: var(--cocoon-blue-color); } .lb-green .label-box-content { border-color: var(--cocoon-green-color); } .lb-orange .label-box-content { border-color: var(--cocoon-orange-color); } .lb-yellow .label-box-content { border-color: var(--cocoon-yellow-color); } .lb-brown .label-box-content { border-color: var(--cocoon-brown-color); } .lb-grey .label-box-content { border-color: var(--cocoon-grey-color); } .lb-black .label-box-content { border-color: var(--cocoon-black-color); } .lb-deep .label-box-content { border-color: var(--cocoon-deep-color); } .lb-indigo .label-box-content { border-color: var(--cocoon-indigo-color); } .lb-light-blue .label-box-content { border-color: var(--cocoon-light-blue-color); } .lb-cyan .label-box-content { border-color: var(--cocoon-cyan-color); } .lb-teal .label-box-content { border-color: var(--cocoon-teal-color); } .lb-light-green .label-box-content { border-color: var(--cocoon-light-green-color); } .lb-lime .label-box-content { border-color: var(--cocoon-lime-color); } .lb-amber .label-box-content { border-color: var(--cocoon-amber-color); } .lb-deep-orange .label-box-content { border-color: var(--cocoon-deep-orange-color); } .lb-white .label-box-content { border-color: var(--cocoon-white-color); } html .body .label-box.has-white-background-color .box-content { background-color: var(--wp--preset--color--white) !important; } /************************************ ** トグル表示ボタン ************************************/ .toggle-wrap { position: relative; border-width: 0; } .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-box { --cocoon-custom-background-color: transparent; --cocoon-custom-border-color: var(--cocoon-basic-border-color); --cocoon-custom-text-color: var(--cocoon-text-color); } .has-border-color:not(.not-nested-style) > .toggle-button { color: var(--cocoon-white-color); background-color: var(--cocoon-custom-border-color); } .has-border-color:not(.not-nested-style) > .toggle-button::before { color: var(--cocoon-white-color); } .has-border-color > .toggle-button { border-color: var(--cocoon-custom-border-color); } .toggle-button { display: block; cursor: pointer; padding: 3px 10px; background-color: var(--cocoon-xx-thin-color); border-width: 2px; border-style: solid; border-color: var(--cocoon-custom-border-color); text-align: center; border-radius: var(--cocoon-basic-border-radius); position: relative; margin: 0; color: var(--cocoon-text-color); } .toggle-button::before { content: "\f067"; font-family: FontAwesome; margin-right: 0.8em; font-size: 0.8em; color: var(--cocoon-x-pallid-text-color); opacity: 0.3; } .has-border-color .toggle-button::before { opacity: 0.6; } .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; color: var(--cocoon-custom-text-color); background-color: var(--cocoon-custom-background-color); border-width: 2px; border-style: solid; border-color: var(--cocoon-custom-border-color); border-top-width: 0; border-bottom-left-radius: var(--cocoon-basic-border-radius); border-bottom-right-radius: var(--cocoon-basic-border-radius); } .tb-red .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-red-color); background: var(--cocoon-red-color); color: var(--cocoon-white-color); } .tb-red .toggle-button::before { color: var(--cocoon-red-color); } .tb-red .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-red-color); } .tb-pink .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-pink-color); background: var(--cocoon-pink-color); color: var(--cocoon-white-color); } .tb-pink .toggle-button::before { color: var(--cocoon-pink-color); } .tb-pink .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-pink-color); } .tb-purple .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-purple-color); background: var(--cocoon-purple-color); color: var(--cocoon-white-color); } .tb-purple .toggle-button::before { color: var(--cocoon-purple-color); } .tb-purple .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-purple-color); } .tb-blue .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-blue-color); background: var(--cocoon-blue-color); color: var(--cocoon-white-color); } .tb-blue .toggle-button::before { color: var(--cocoon-blue-color); } .tb-blue .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-blue-color); } .tb-green .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-green-color); background: var(--cocoon-green-color); color: var(--cocoon-white-color); } .tb-green .toggle-button::before { color: var(--cocoon-green-color); } .tb-green .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-green-color); } .tb-orange .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-orange-color); background: var(--cocoon-orange-color); color: var(--cocoon-white-color); } .tb-orange .toggle-button::before { color: var(--cocoon-orange-color); } .tb-orange .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-orange-color); } .tb-yellow .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-yellow-color); background: var(--cocoon-yellow-color); color: var(--cocoon-white-color); } .tb-yellow .toggle-button::before { color: var(--cocoon-yellow-color); } .tb-yellow .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-yellow-color); } .tb-brown .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-brown-color); background: var(--cocoon-brown-color); color: var(--cocoon-white-color); } .tb-brown .toggle-button::before { color: var(--cocoon-brown-color); } .tb-brown .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-brown-color); } .tb-grey .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-grey-color); background: var(--cocoon-grey-color); color: var(--cocoon-white-color); } .tb-grey .toggle-button::before { color: var(--cocoon-grey-color); } .tb-grey .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-grey-color); } .tb-black .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-black-color); background: var(--cocoon-black-color); color: var(--cocoon-white-color); } .tb-black .toggle-button::before { color: var(--cocoon-black-color); } .tb-black .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-black-color); } .tb-deep .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-deep-color); background: var(--cocoon-deep-color); color: var(--cocoon-white-color); } .tb-deep .toggle-button::before { color: var(--cocoon-deep-color); } .tb-deep .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-deep-color); } .tb-indigo .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-indigo-color); background: var(--cocoon-indigo-color); color: var(--cocoon-white-color); } .tb-indigo .toggle-button::before { color: var(--cocoon-indigo-color); } .tb-indigo .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-indigo-color); } .tb-light-blue .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-light-blue-color); background: var(--cocoon-light-blue-color); color: var(--cocoon-white-color); } .tb-light-blue .toggle-button::before { color: var(--cocoon-light-blue-color); } .tb-light-blue .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-light-blue-color); } .tb-cyan .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-cyan-color); background: var(--cocoon-cyan-color); color: var(--cocoon-white-color); } .tb-cyan .toggle-button::before { color: var(--cocoon-cyan-color); } .tb-cyan .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-cyan-color); } .tb-teal .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-teal-color); background: var(--cocoon-teal-color); color: var(--cocoon-white-color); } .tb-teal .toggle-button::before { color: var(--cocoon-teal-color); } .tb-teal .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-teal-color); } .tb-light-green .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-light-green-color); background: var(--cocoon-light-green-color); color: var(--cocoon-white-color); } .tb-light-green .toggle-button::before { color: var(--cocoon-light-green-color); } .tb-light-green .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-light-green-color); } .tb-lime .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-lime-color); background: var(--cocoon-lime-color); color: var(--cocoon-white-color); } .tb-lime .toggle-button::before { color: var(--cocoon-lime-color); } .tb-lime .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-lime-color); } .tb-amber .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-amber-color); background: var(--cocoon-amber-color); color: var(--cocoon-white-color); } .tb-amber .toggle-button::before { color: var(--cocoon-amber-color); } .tb-amber .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-amber-color); } .tb-deep-orange .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-deep-orange-color); background: var(--cocoon-deep-orange-color); color: var(--cocoon-white-color); } .tb-deep-orange .toggle-button::before { color: var(--cocoon-deep-orange-color); } .tb-deep-orange .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-deep-orange-color); } .tb-white .toggle-button { border-width: 2px; border-style: solid; border-color: var(--cocoon-white-color); background: var(--cocoon-white-color); color: var(--cocoon-white-color); } .tb-white .toggle-button::before { color: var(--cocoon-white-color); } .tb-white .toggle-checkbox:checked ~ .toggle-content { border-color: var(--cocoon-white-color); } .iic-red li::before { color: var(--cocoon-red-color); } .iic-pink li::before { color: var(--cocoon-pink-color); } .iic-purple li::before { color: var(--cocoon-purple-color); } .iic-blue li::before { color: var(--cocoon-blue-color); } .iic-green li::before { color: var(--cocoon-green-color); } .iic-orange li::before { color: var(--cocoon-orange-color); } .iic-yellow li::before { color: var(--cocoon-yellow-color); } .iic-brown li::before { color: var(--cocoon-brown-color); } .iic-grey li::before { color: var(--cocoon-grey-color); } .iic-black li::before { color: var(--cocoon-black-color); } .iic-deep li::before { color: var(--cocoon-deep-color); } .iic-indigo li::before { color: var(--cocoon-indigo-color); } .iic-light-blue li::before { color: var(--cocoon-light-blue-color); } .iic-cyan li::before { color: var(--cocoon-cyan-color); } .iic-teal li::before { color: var(--cocoon-teal-color); } .iic-light-green li::before { color: var(--cocoon-light-green-color); } .iic-lime li::before { color: var(--cocoon-lime-color); } .iic-amber li::before { color: var(--cocoon-amber-color); } .iic-deep-orange li::before { color: var(--cocoon-deep-orange-color); } .iic-white li::before { color: var(--cocoon-white-color); } figcaption { margin: 0; font-size: 0.7em; opacity: 0.8; padding: 0 6px; } .wp-block-separator.is-style-wide { border-bottom: solid 3px !important; } .body .wp-block-gallery .blocks-gallery-item { margin-bottom: 0.6em; } .is-style-accordion { padding: 0; } .is-style-accordion:not(.not-nested-style) .faq-question { padding: 0.5em; margin: 0; cursor: pointer; position: relative; background-color: #e8ecef; border-color: var(--cocoon-three-d-border-colors); } .is-style-accordion:not(.not-nested-style) .faq-question::before { content: "+"; position: absolute; right: 1em; opacity: 0.5; } .is-style-accordion:not(.not-nested-style) .faq-question.active::before { content: "-"; } .is-style-accordion:not(.not-nested-style) .faq-answer { padding: 1em 0.5em; } .is-style-accordion:not(.not-nested-style).has-border-color .faq-question, .is-style-accordion:not(.not-nested-style).has-border-color .faq-question-label { color: var(--cocoon-white-color); border: none; } .is-style-filter-clarendon img { filter: sepia(0.15) contrast(1.25) brightness(1.25) hue-rotate(5deg); } .is-style-filter-clarendon img::before { background: rgba(127, 187, 227, 0.4); content: ""; mix-blend-mode: overlay; } .is-style-filter-gingham img { filter: contrast(1.1) brightness(1.1); } .is-style-filter-gingham img::before { background: rgb(230, 230, 230); content: ""; mix-blend-mode: soft-light; } .is-style-filter-moon img { filter: brightness(1.4) contrast(0.95) saturate(0) sepia(0.35); } .is-style-filter-lark img { filter: sepia(0.25) contrast(1.2) brightness(1.3) saturate(1.25); } .is-style-filter-reyes img { filter: sepia(0.75) contrast(0.75) brightness(1.25) saturate(1.4); } .is-style-filter-juno img { filter: sepia(0.35) contrast(1.15) brightness(1.15) saturate(1.8); } .is-style-filter-juno img::before { background: rgba(127, 187, 227, 0.2); content: ""; mix-blend-mode: overlay; } .is-style-filter-slumber img { filter: sepia(0.35) contrast(1.25) saturate(1.25); } .is-style-filter-slumber img::before { background: rgba(125, 105, 24, 0.2); content: ""; mix-blend-mode: darken; } .is-style-filter-crema img { filter: sepia(0.5) contrast(1.25) brightness(1.15) saturate(0.9) hue-rotate(-2deg); } .is-style-filter-crema img::before { background: rgba(125, 105, 24, 0.2); content: ""; mix-blend-mode: multiply; } .is-style-filter-ludwig img { filter: sepia(0.25) contrast(1.05) brightness(1.05) saturate(2); } .is-style-filter-ludwig img::before { background: rgba(125, 105, 24, 0.1); content: ""; mix-blend-mode: overlay; } .is-style-filter-aden img { filter: sepia(0.2) brightness(1.15) saturate(1.4); } .is-style-filter-aden img::before { background: rgba(125, 105, 24, 0.1); content: ""; mix-blend-mode: multiply; } .is-style-filter-perpetua img { filter: contrast(1.1) brightness(1.25) saturate(1.1); } .is-style-filter-perpetua img::before { background: linear-gradient(to bottom, rgba(0, 91, 154, 0.25), rgba(230, 193, 61, 0.25)); content: ""; mix-blend-mode: multiply; } .is-style-filter-monochrome img { filter: grayscale(100%); } .wp-block-button__link { color: #fff; background-color: #333631; border-radius: 0px; box-shadow: none; cursor: pointer; display: inline-block; font-size: 1.125em; padding: calc(0.667em + 2px) calc(1.333em + 2px); text-align: center; text-decoration: none; word-break: break-word; box-sizing: border-box; } .is-layout-flex { gap: 1.5rem; } .is-layout-flex > * { margin: 0; } .is-style-solid-line { padding: 0.7em 2.5em; border: solid 1px #323232; color: #323232; } .is-style-gray-back { padding: 0.7em 2.5em; color: #323232; background: rgba(50, 50, 50, 0.07); } .is-style-solid-back { padding: 0.7em 2.5em; color: #323232; border: solid 2px #323232; background: rgba(50, 50, 50, 0.07); } .is-style-solid-back { padding: 0.7em 2.5em; color: #323232; border: solid 2px #323232; background: rgba(50, 50, 50, 0.07); } .is-style-solid-cross { position: relative; margin: 15px auto; padding: 1.5em 3.2em; color: #323232; border-top: solid 2px #323232; border-bottom: solid 2px #323232; } .is-style-solid-cross::before, .is-style-solid-cross::after { content: ""; position: absolute; top: -10px; width: 2px; height: -webkit-calc(100% + 20px); height: calc(100% + 20px); background-color: #323232; } .is-style-solid-cross::before { left: 10px; } .is-style-solid-cross::after { right: 10px; } .wp-block-button.alignright { margin-left: auto !important; } .wp-block-pullquote.has-background blockquote { background-color: transparent; border-color: transparent; } .has-bottom-margin.is-style-bottom-margin-0em { margin-bottom: 0em !important; } .has-bottom-margin.is-style-bottom-margin-1em { margin-bottom: 1em !important; } .has-bottom-margin.is-style-bottom-margin-2em { margin-bottom: 2em !important; } .has-bottom-margin.is-style-bottom-margin-3em { margin-bottom: 3em !important; } .has-bottom-margin.is-style-bottom-margin-4em { margin-bottom: 4em !important; } .has-bottom-margin.is-style-bottom-margin-5em { margin-bottom: 5em !important; } .has-bottom-margin.is-style-bottom-margin-6em { margin-bottom: 6em !important; } .has-bottom-margin.is-style-bottom-margin-7em { margin-bottom: 7em !important; } .has-bottom-margin.is-style-bottom-margin-8em { margin-bottom: 8em !important; } .has-bottom-margin.is-style-bottom-margin-9em { margin-bottom: 9em !important; } .has-bottom-margin.is-style-bottom-margin-10em { margin-bottom: 10em !important; } .has-bottom-margin.is-style-bottom-margin-11em { margin-bottom: 11em !important; } .has-bottom-margin.is-style-bottom-margin-12em { margin-bottom: 12em !important; } .has-bottom-margin.is-style-bottom-margin-13em { margin-bottom: 13em !important; } .has-bottom-margin.is-style-bottom-margin-14em { margin-bottom: 14em !important; } .has-bottom-margin.is-style-bottom-margin-15em { margin-bottom: 15em !important; } .has-bottom-margin.is-style-bottom-margin-16em { margin-bottom: 16em !important; } .has-bottom-margin.is-style-bottom-margin-17em { margin-bottom: 17em !important; } .has-bottom-margin.is-style-bottom-margin-18em { margin-bottom: 18em !important; } .has-bottom-margin.is-style-bottom-margin-19em { margin-bottom: 19em !important; } .has-bottom-margin.is-style-bottom-margin-20em { margin-bottom: 20em !important; } .wp-block-code code { white-space: pre; } .column-wrap { display: flex; justify-content: space-between; position: relative; margin: 0; gap: 1%; } .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: 40px; height: 40px; 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-list { display: flex; flex-direction: column; row-gap: 0.8em; margin-bottom: 2em; } .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; } .related-entry-card-snippet { -webkit-line-clamp: 3; } /************************************ ** 関連記事表示タイプがミニカードの時 ************************************/ .rect-mini-card .related-list { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 1%; } .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 { flex-direction: row; flex-wrap: wrap; column-gap: 1%; } .rect-vertical-card .related-entry-card { display: flex; flex-direction: column; } .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; display: flex; flex-direction: column; height: 100%; padding-bottom: 0; } .rect-vertical-card .related-entry-card-title { font-size: 16px; } .rect-vertical-card .related-entry-card-meta { margin-top: auto; padding-top: 5px; position: unset; } .rect-vertical-card-3 .related-list { column-gap: 0.5%; } .rect-vertical-card-3 .related-entry-card-wrap { width: 33%; } .rect-vertical-card-4 .related-list { column-gap: 0.6666666667%; } .rect-vertical-card-4 .related-entry-card-wrap { width: 24.5%; } /************************************ ** 関連記事ボーダー ************************************/ .recb-entry-border .related-entry-card-wrap { border: 1px solid var(--cocoon-basic-border-color); } /************************************ ** コメント ************************************/ .commets-list { padding: 0; margin: 0; list-style: none; } .commets-list .avatar { float: right; } .commets-list .reply { text-align: right; font-size: var(--cocoon-text-size-s); } .commets-list .comment-meta { font-size: var(--cocoon-text-size-s); } .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-form .submit { margin: 1em 0; } .comment-area.website-hide .comment-form-url { display: none; } .comment-edit-link { margin-left: 0.4em; } .comment-reply-link { font-size: 14px; display: inline; padding: 5px 8px; } .comment-reply-link .comment-icon { margin-right: 3px; } .comment-page-link { text-align: center; margin: 24px 0; } .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: var(--cocoon-current-background-color); } .pagination a:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: var(--cocoon-text-color); } .page-numbers { color: var(--cocoon-text-color); text-decoration: none; display: inline-block; height: 46px; width: 46px; border: 1px solid var(--cocoon-thin-color); margin: 0 4px; line-height: 46px; text-align: center; border-radius: var(--cocoon-basic-border-radius); } .page-numbers span { line-height: inherit; } .page-numbers.dots { opacity: 0.6; background-color: var(--cocoon-xx-thin-color); } /************************************ ** 「次のページ」ページネーション ************************************/ .pagination-next { margin-top: 24px; } .pagination-next-link, .comment-btn { background-color: #f9f9f9; border: 1px solid var(--cocoon-thin-color); color: var(--cocoon-text-color); 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: var(--cocoon-text-color); } /************************************ ** マルチページのページャーリンク ************************************/ .pager-links { margin: 24px 0; clear: both; text-align: center; } .pager-links .post-page-numbers { background-color: transparent; } .pager-links span { background-color: var(--cocoon-current-background-color); } .pager-links a { display: inline-block; } .pager-links a span { background-color: var(--cocoon-white-color); } .pager-links a:hover span { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: var(--cocoon-text-color); } .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: var(--cocoon-thin-color); 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: var(--cocoon-middle-thickness-color); } .prev-post-title, .next-post-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .post-navi-square a { height: auto; } .post-navi-default.post-navi-border a { border-top: 1px solid var(--cocoon-basic-border-color); border-bottom: 1px solid var(--cocoon-basic-border-color); } .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 var(--cocoon-basic-border-color); } .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-radius: var(--cocoon-basic-border-radius); 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 { margin-bottom: 0; justify-content: initial; } .author-box .sns-follow-buttons a.follow-button { font-size: 18px; width: 26px; height: 26px; background-color: transparent; color: var(--cocoon-x-pallid-text-color); border: 1px solid var(--cocoon-basic-border-color); border-radius: 2px; } .author-box .sns-follow-buttons a.follow-button:hover { opacity: 0.6; } .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; } /************************************ ** 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; --cocoon-custom-border-color: transparent; } .nwa .cta-heading { font-size: 20px; padding: 8px; } .nwa .cta-left-and-right .cta-content, .nwa .cta-right-and-left .cta-content { display: block; } .nwa .cta-left-and-right .cta-content div, .nwa .cta-right-and-left .cta-content div { width: 100%; } .nwa .cta-message { margin-top: 1em; } .nwa .cta-button .btn-l, .nwa .cta-button .ranking-item-link-buttons a, .ranking-item-link-buttons .nwa .cta-button a { padding: 1em; font-size: 16px; } .nwa .cta-box { font-size: 0.8em; } .speech-wrap { --cocoon-custom-background-color: var(--cocoon-white-color); --cocoon-custom-text-color: var(--cocoon-text-color); --cocoon-custom-border-color: var(--cocoon-basic-border-color); display: flex; } .speech-person { width: 12%; min-width: 12%; } .speech-icon img, .speech-icon amp-img { border-radius: 50%; border: 2px solid var(--cocoon-basic-border-color); width: 100%; } .speech-name { text-align: center; font-size: 13px; } .speech-name:empty { display: none; } div.speech-balloon { height: 100%; position: relative; padding: 10px; background-color: var(--cocoon-custom-background-color); border-width: 2px; border-style: solid; border-color: var(--cocoon-custom-border-color); color: var(--cocoon-custom-text-color); border-radius: 6px; max-width: 86%; } div.speech-balloon p { margin: 0; } /* アイコンを左に表示 */ .speech-balloon::before { content: ""; position: absolute; display: block; width: 0; height: 0; left: -12px; top: 10px; border-right-width: 12px; border-right-style: solid; border-right-color: var(--cocoon-custom-border-color); 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-width: 12px; border-right-style: solid; border-right-color: var(--cocoon-custom-background-color); border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .sbp-l:not(.not-nested-style) .speech-balloon { margin-left: 20px; } .sbp-r { flex-direction: row-reverse; } .sbp-r:not(.not-nested-style) { /* アイコンを右に表示 */ } .sbp-r:not(.not-nested-style) .speech-balloon { margin-right: 20px; } .sbp-r:not(.not-nested-style) .speech-balloon::before { right: -12px; left: auto; border-left-width: 12px; border-left-style: solid; border-left-color: var(--cocoon-custom-border-color); border-right: none; } .sbp-r:not(.not-nested-style) .speech-balloon::after { right: -9px; left: auto; border-left-width: 12px; border-left-style: solid; border-left-color: var(--cocoon-custom-background-color); border-right: none; } .sbis-sn:not(.not-nested-style) .speech-icon-image { border-radius: 0; border-style: none; box-shadow: none; } .sbis-sb:not(.not-nested-style) .speech-icon-image { border-radius: 0; } .sbis-cn:not(.not-nested-style) .speech-icon-image { border-style: none; box-shadow: none; } .sbs-flat { --cocoon-custom-background-color: #f1f1f1; --cocoon-custom-border-color: #f1f1f1; --cocoon-custom-text-color: var(--cocoon-text-color); } .sbs-flat:not(.not-nested-style) .speech-balloon { background-color: var(--cocoon-custom-background-color); border-color: var(--cocoon-custom-border-color); color: var(--cocoon-custom-text-color); } .sbs-flat:not(.not-nested-style) .speech-balloon::before { border-right-color: var(--cocoon-custom-border-color); } .sbs-flat:not(.not-nested-style) .speech-balloon::after { border-right-color: var(--cocoon-custom-background-color); } .sbs-line { --cocoon-custom-background-color: var(--cocoon-white-color); --cocoon-custom-border-color: var(--cocoon-basic-border-color); --cocoon-custom-text-color: var(--cocoon-text-color); } .sbs-line:not(.not-nested-style) .speech-balloon { border-width: 1px; background-color: var(--cocoon-custom-background-color); border-color: var(--cocoon-custom-border-color); color: var(--cocoon-custom-text-color); } .sbs-line:not(.not-nested-style) .speech-balloon::after { left: -10px; } .sbs-line:not(.not-nested-style) .speech-balloon::before { border-right-color: var(--cocoon-custom-border-color); } .sbs-line:not(.not-nested-style) .speech-balloon::after { border-right-color: var(--cocoon-custom-background-color); } .sbs-line.sbp-r { --cocoon-custom-background-color: #85e249; --cocoon-custom-border-color: #85e249; } .sbs-line.sbp-r:not(.not-nested-style) .speech-balloon { background-color: var(--cocoon-custom-background-color); border-color: var(--cocoon-custom-border-color); color: var(--cocoon-custom-text-color); } .sbs-line.sbp-r:not(.not-nested-style) .speech-balloon::after { left: auto; right: -10px; } .sbs-line.sbp-r:not(.not-nested-style) .speech-balloon::before { border-left-color: var(--cocoon-custom-border-color); } .sbs-line.sbp-r:not(.not-nested-style) .speech-balloon::after { border-left-color: var(--cocoon-custom-background-color); } div.sbs-think.sbp-l:not(.not-nested-style) .speech-balloon { margin-left: 46px; } div.sbs-think:not(.not-nested-style) .speech-balloon::before { border-width: 2px; border-style: solid; border-color: var(--cocoon-custom-border-color); background-color: var(--cocoon-custom-background-color); border-radius: 50%; left: -29px; top: 11px; width: 20px; height: 20px; } div.sbs-think:not(.not-nested-style) .speech-balloon::after { border-width: 2px; border-style: solid; border-color: var(--cocoon-custom-border-color); background-color: var(--cocoon-custom-background-color); border-radius: 50%; left: -44px; top: 25px; width: 10px; height: 10px; } .sbs-think.sbp-r:not(.not-nested-style) .speech-balloon { margin-right: 46px; } .sbs-think.sbp-r:not(.not-nested-style) .speech-balloon::before { left: auto; right: -29px; } .sbs-think.sbp-r:not(.not-nested-style) .speech-balloon::after { left: auto; right: -44px; } .cocoon-block-balloon.not-nested-style.sbis-sn > .speech-person .speech-icon-image { border-radius: 0; border-style: none; box-shadow: none; } .cocoon-block-balloon.not-nested-style.sbis-sb > .speech-person .speech-icon-image { border-radius: 0; } .cocoon-block-balloon.not-nested-style.sbis-cn > .speech-person .speech-icon-image { border-style: none; box-shadow: none; } .cocoon-block-balloon.not-nested-style.sbp-l > .speech-balloon { margin-left: 20px; } .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon { margin-right: 20px; } .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::before, .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after { left: auto; border-left-width: 12px; border-left-style: solid; border-right: none; } .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::before { right: -12px; border-left-color: var(--cocoon-custom-border-color); } .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after { right: -9px; border-left-color: var(--cocoon-custom-background-color); } .cocoon-block-balloon.not-nested-style.sbs-flat > .speech-balloon::before { border-right-color: var(--cocoon-custom-border-color); } .cocoon-block-balloon.not-nested-style.sbs-flat > .speech-balloon::after { border-right-color: var(--cocoon-custom-background-color); } .cocoon-block-balloon.not-nested-style.sbs-line > .speech-balloon { border-width: 1px; } .cocoon-block-balloon.not-nested-style.sbs-line > .speech-balloon::before { border-right-color: var(--cocoon-custom-border-color); } .cocoon-block-balloon.not-nested-style.sbs-line > .speech-balloon::after { left: -10px; border-right-color: var(--cocoon-custom-background-color); } .cocoon-block-balloon.not-nested-style.sbs-line.sbp-r > .speech-balloon::before { border-left-color: var(--cocoon-custom-border-color); } .cocoon-block-balloon.not-nested-style.sbs-line.sbp-r > .speech-balloon::after { left: auto; right: -10px; border-left-color: var(--cocoon-custom-background-color); } .cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::before, .cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::after { border-width: 2px; border-style: solid; border-color: var(--cocoon-custom-border-color); background-color: var(--cocoon-custom-background-color); border-radius: 50%; } .cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::before { left: -29px; top: 11px; width: 20px; height: 20px; } .cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::after { left: -44px; top: 25px; width: 10px; height: 10px; } .cocoon-block-balloon.not-nested-style.sbs-think.sbp-l > .speech-balloon { margin-left: 46px; } .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r > .speech-balloon { margin-right: 46px; } .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r > .speech-balloon::before { left: auto; right: -29px; } .cocoon-block-balloon.not-nested-style.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: var(--cocoon-thin-color); } .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 var(--cocoon-x-thin-color); background-color: var(--cocoon-xx-thin-color); border-radius: var(--cocoon-badge-border-radius); transition: all 0.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 var(--cocoon-thin-color); 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%; } .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: var(--cocoon-rakuten-color); } .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: var(--cocoon-rakuten-color); } .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 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 0.5% !important; } .fb-like-box { background-color: #444; color: var(--cocoon-white-color); 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%; } .font-awesome-5 .fb-like-balloon-body::after { font-family: "Font Awesome 5 Free"; font-weight: bold; } .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: var(--cocoon-white-color); } .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; } .mobile-menu-buttons { color: var(--cocoon-black-color); background: var(--cocoon-white-color); box-shadow: 0 0 5px darkgrey; position: fixed; bottom: 0; left: 0; right: 0; z-index: 3; padding: 0; margin: 0; list-style: none; display: none; justify-content: space-between; align-items: center; line-height: 1.4; min-height: 50px; transition: 0.3s; } .mobile-menu-buttons .menu-icon { text-align: center; width: 100%; display: block; font-size: 19px; } .mobile-menu-buttons .menu-caption { font-size: 9px; text-align: center; opacity: 0.8; display: block; } .mobile-menu-buttons .menu-button { position: relative; width: 70px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mobile-menu-buttons .menu-button > a { display: block; color: var(--cocoon-black-color); text-decoration: none; } .mobile-menu-buttons .menu-button:hover .menu-button-in { opacity: 0.8; } .mobile-menu-buttons .widget:has(.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); } .mobile-footer-menu-buttons .menu-button { width: 100%; } .logo-menu-button { text-align: center; font-weight: 900; line-height: 50px; min-width: 200px; overflow: hidden; } .logo-menu-button img { max-height: 50px; 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: 0.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: 0.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: 0.3s ease-in-out; position: fixed; top: 40%; z-index: 99; width: 90%; left: 5%; right: 5%; -webkit-transform: translateY(1500%); transform: translateY(1500%); 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: 0.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: 0.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: var(--cocoon-text-color); text-decoration: none; padding: 6px; display: block; } .menu-drawer a:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: var(--cocoon-text-color); } .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 .share-count { color: var(--cocoon-white-color); } .share-menu-content .button-caption { display: none; } .share-menu-content .comment-button { display: none; } .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 { margin-top: 0; } .ranking-item, .timeline-box { padding: 3%; border: 1px solid var(--cocoon-basic-border-color); border-radius: var(--cocoon-basic-border-radius); } .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 { --cocoon-custom-border-color: transparent; margin-top: 6px; } .ranking-item-link-buttons > div { padding: 0 3px; position: relative; } .ranking-item-link-buttons a { margin: 0 0 8px; } .c-crown, .s-crown, .g-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; } .c-crown:after, .s-crown:after, .g-crown:after { width: 0; height: 0; border-top: 15px solid transparent; content: ""; position: absolute; top: 0; left: -20px; } .c-crown-circle, .s-crown-circle, .g-crown-circle { border-radius: 50%; width: 5px; height: 5px; position: absolute; top: -5px; left: -21px; } .c-crown-circle:before, .s-crown-circle:before, .g-crown-circle:before { border-radius: 50%; width: 5px; height: 5px; content: ""; position: absolute; top: 0; left: 19px; } .c-crown-circle:after, .s-crown-circle:after, .g-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-mobile, .footer-left, .footer-center, .footer-right { 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 { border-width: 0; 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; } #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: var(--cocoon-thin-color); padding: 0 8px; background-color: rgba(255, 255, 255, 0); } .timeline-box { padding: 16px 5px; overflow: auto; --cocoon-custom-point-color:#6fc173; --cocoon-custom-background-color: transparent; --cocoon-custom-text-color: var(--cocoon-text-color); --cocoon-custom-border-color: var(--cocoon-basic-border-color); background-color: var(--cocoon-custom-background-color); color: var(--cocoon-custom-text-color); border-color: var(--cocoon-custom-border-color); } .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; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .timeline-item-title { font-weight: bold; } .timeline-item-content { width: calc(100% - 110px); float: left; padding: 0.8em 1.4em; border-left: 3px #e5e5d1 solid; } .timeline-item:before { content: ""; width: 12px; height: 12px; background: var(--cocoon-custom-point-color); position: absolute; left: 105px; top: 24px; border-radius: 100%; } .has-point-color > .timeline > .timeline-item:before { background: var(--cocoon-custom-point-color); } .iconlist-box { --cocoon-custom-icon-color: var(--cocoon-text-color); --cocoon-custom-border-color: transparent; --cocoon-custom-background-color: transparent; --cocoon-custom-text-color: var(--cocoon-text-color); border-color: var(--cocoon-custom-border-color); background-color: var(--cocoon-custom-background-color); color: var(--cocoon-custom-text-color); } .iconlist-box.has-border-color li::before { color: var(--cocoon-custom-icon-color); } .iconlist-box ul { list-style: none; } .iconlist-box ul li::before { display: initial; } .iconlist-box ol:not(.has-list-style) > 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: -1.4em; position: absolute; } .iconlist-title { font-weight: 700; text-align: center; } .iconlist-title:empty { display: none; } .faq-wrap { --cocoon-custom-question-color:#b7282e; --cocoon-custom-answer-color:#007bbb; --cocoon-custom-border-color: transparent; --cocoon-custom-background-color: transparent; --cocoon-custom-text-color: var(--cocoon-text-color); border-color: var(--cocoon-custom-border-color); background-color: var(--cocoon-custom-background-color); color: var(--cocoon-custom-text-color); } .faq-item { display: flex; } .faq-item-label { font-size: 24px; margin-right: 0.6em; } .is-style-square:not(.not-nested-style) .faq-item-label { color: #fff !important; background-color: var(--cocoon-custom-question-color); font-size: 20px; padding: 5px 8px; height: 100%; } .is-style-square:not(.not-nested-style) .faq-answer-label { background-color: var(--cocoon-custom-answer-color); } .faq-item-content { flex: 1 1 auto; width: 60%; } .faq-question { margin-bottom: 1.8em; } .faq-question-label { color: var(--cocoon-custom-question-color); } .faq-question-content { font-weight: 700; } .faq .faq-answer { margin-left: 0; } .faq-answer-label { color: var(--cocoon-custom-answer-color); } /*Cocoon用記事ボックス*/ /* リボン部分 */ /* リボン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: var(--cocoon-white-color); 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: 5px; 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"; } .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-white-title .card-content { background: none; background-color: rgba(51, 51, 51, 0.3); transition: all 0.7s; } .recommended.rcs-center-white-title .a-wrap:hover .card-content { opacity: 0; } .recommended.rcs-center-label-title .card-content { padding: 0; background: transparent; } .recommended.rcs-center-label-title .card-content .card-title { color: var(--cocoon-text-color); padding: 6px 1.2em; background-color: rgba(255, 255, 255, 0.8); transition: all 0.5s; border-radius: 99px; font-size: 0.9em; } .recommended.rcs-center-label-title .card-content:hover .card-title { 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; flex-wrap: wrap; } .box-menus * { line-height: 1.6; margin: 0; } .box-menu { display: block; padding: 0.5em 1em; text-decoration: none; text-align: center; min-height: 100px; cursor: pointer; background: #fff; width: 25%; color: var(--cocoon-x-pallid-text-color); box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1; transition: none; } .box-menu:hover { color: var(--cocoon-x-pallid-text-color); 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: 50%; } .wwa .box-menu { width: 16.66%; } :root { --easing: cubic-bezier(.2, 1, .2, 1); --transition: .8s var(--easing); --box-shadow: 0 0 30px #fff; } .swiper-wrapper { margin-top: 8px; margin-left: 1px; } /* 新着カードを横並びにする */ /* はみ出した分を横スクロール */ .is-list-horizontal { display: flex; flex-direction: row; /* カードのサムネイル幅200px */ } .is-list-horizontal .widget-entry-card-link { flex-shrink: 0; max-width: 320px; } .is-list-horizontal .card-title { font-size: 16px; } .is-list-horizontal .card-title, .is-list-horizontal .card-snippet { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .is-list-horizontal.large-thumb .widget-entry-card-link, .is-list-horizontal.large-thumb-on .widget-entry-card-link { max-width: 220px; } .is-list-horizontal.large-thumb .card-title, .is-list-horizontal.large-thumb-on .card-title { -webkit-line-clamp: 2; height: 2.6em; } .is-list-horizontal.large-thumb-on .card-content { overflow: hidden; } .is-list-horizontal.large-thumb-on .card-title { font-size: 14px; } .is-list-horizontal .swiper-wrapper { height: initial; } .is-list-horizontal .swiper-button-next, .is-list-horizontal .swiper-button-prev { background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; top: 0; bottom: 0; margin: auto; position: absolute; height: 50px; width: 50px; z-index: 1; transition: var(--transition); -webkit-transition: var(--transition); box-shadow: var(--box-shadow); -webkit-box-shadow: var(--box-shadow); } .is-list-horizontal .swiper-button-next { left: calc(100% - 62px); } .is-list-horizontal .swiper-button-next:hover { left: calc(100% - 66px); width: 60px; height: 60px; } .is-list-horizontal .swiper-button-next::after { border-color: #ffffff; margin-right: 0.4rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 12px; height: 12px; content: ""; border: solid rgba(255, 255, 255, 0.7); border-width: 2px 2px 0 0; } .is-list-horizontal .swiper-button-prev { left: 22px; display: none; } .is-list-horizontal .swiper-button-prev:hover { left: 17px; width: 60px; height: 60px; } .is-list-horizontal .swiper-button-prev::after { border-color: #ffffff; margin-left: 0.4rem; transform: rotate(45deg); width: 12px; height: 12px; content: ""; border: solid rgba(255, 255, 255, 0.7); border-width: 0 0 2px 2px; } .info-list { padding: 20px; } .info-list.is-style-frame-border { border: 1px solid; border-color: var(--cocoon-three-d-border-colors); border-radius: var(--cocoon-basic-border-radius); } .info-list-caption { text-align: center; } .info-list-item { padding: 14px 0; font-size: 16px; line-height: 1.6; } .info-list-item-content { margin-bottom: 8px; } .is-style-divider-line .info-list-item { border-bottom: 1px dashed var(--cocoon-basic-border-color); } .is-style-divider-line .info-list-item:last-child { border-bottom-style: none; } .info-list-item-meta { font-size: 12px; opacity: 0.6; line-height: 20px; } .info-list-item-date { margin-right: 18px; } .info-list-item-categorys .entry-category { padding: 1px 18px; margin-right: 8px; border: 1px solid #999; height: 20px; line-height: 17px; display: inline-block; border-radius: 2px; } .info-list-item-content-link { color: var(--cocoon-text-color); text-decoration: none; } .info-list-item-content-link:hover { text-decoration: underline; } .is-style-border-solid { border: solid 2px var(--cocoon-box-border-color); } .is-style-border-double { border: double 4px var(--cocoon-box-border-color); } .is-style-border-dashed { border: dashed 2px var(--cocoon-box-border-color); } .is-style-border-dotted { border: dotted 4px var(--cocoon-box-border-color); } .is-style-border-thin-and-thick { border: 8px solid #eee; } .is-style-border-convex { border-color: var(--cocoon-three-d-border-colors); border-width: 1px; border-style: solid; } .is-style-border-radius-s-solid { border: solid 2px var(--cocoon-box-border-color); border-radius: 6px; } .is-style-border-radius-s-double { border: double 4px var(--cocoon-box-border-color); border-radius: 6px; } .is-style-border-radius-s-dashed { border: dashed 2px var(--cocoon-box-border-color); border-radius: 6px; } .is-style-border-radius-s-dotted { border: dotted 4px var(--cocoon-box-border-color); border-radius: 6px; } .is-style-border-radius-s-thin-and-thick { border: 8px solid #eee; border-radius: 6px; } .is-style-border-radius-s-convex { border-color: var(--cocoon-three-d-border-colors); border-width: 1px; border-style: solid; border-radius: 6px; } .is-style-border-radius-l-solid { border: solid 2px var(--cocoon-box-border-color); border-radius: 1em; } .is-style-border-radius-l-double { border: double 4px var(--cocoon-box-border-color); border-radius: 1em; } .is-style-border-radius-l-dashed { border: dashed 2px var(--cocoon-box-border-color); border-radius: 1em; } .is-style-border-radius-l-dotted { border: dotted 4px var(--cocoon-box-border-color); border-radius: 1em; } .is-style-border-radius-l-thin-and-thick { border: 8px solid #eee; border-radius: 1em; } .is-style-border-radius-l-convex { border-color: var(--cocoon-three-d-border-colors); border-width: 1px; border-style: solid; border-radius: 1em; } .is-style-light-background-box { background-color: #f8f9f8; } .is-style-stripe-box { background-image: repeating-linear-gradient(-45deg, #f2f3f7 0, #f2f3f7 3px, transparent 3px, transparent 6px); } .is-style-section-paper-box { background-image: linear-gradient(0deg, transparent 19px, #eae5e3 20px), linear-gradient(90deg, transparent 19px, #eae5e3 20px); background-size: 20px 20px; } .is-style-checkered-box { background-image: linear-gradient(90deg, rgba(232, 238, 236, 0.5) 50%, transparent 50%), linear-gradient(rgba(234, 236, 238, 0.5) 50%, transparent 50%); background-size: 15px 15px; } .is-style-stitch-box { background: #fbfaf5; box-shadow: 0px 0px 0px 10px #fbfaf5; border: dashed 2px var(--cocoon-box-border-color); } .is-style-square-brackets-box { position: relative; } .is-style-square-brackets-box::before, .is-style-square-brackets-box::after { content: ""; width: 20px; height: 30px; position: absolute; display: inline-block; } .is-style-square-brackets-box::before { border-left: solid 1px var(--cocoon-box-border-color); border-top: solid 1px var(--cocoon-box-border-color); top: 0; left: 0; } .is-style-square-brackets-box::after { border-right: solid 1px var(--cocoon-box-border-color); border-bottom: solid 1px var(--cocoon-box-border-color); bottom: 0; right: 0; } .is-style-parenthetic-box { position: relative; } .is-style-parenthetic-box::after, .is-style-parenthetic-box::before { border: 1px solid var(--cocoon-box-border-color); content: ""; height: 100%; position: absolute; width: 0.7em; } .is-style-parenthetic-box::before { border-right-width: 0; bottom: 0; left: 0; } .is-style-parenthetic-box::after { border-left-width: 0; bottom: 0; right: 0; } .is-style-cross-line { position: relative; border-top: solid 2px var(--cocoon-box-border-color); border-bottom: solid 2px var(--cocoon-box-border-color); } .is-style-cross-line::before, .is-style-cross-line::after { content: ""; position: absolute; top: -10px; width: 2px; height: -webkit-calc(100% + 20px); height: calc(100% + 20px); background-color: var(--cocoon-box-border-color); } .is-style-cross-line::before { left: 10px; } .is-style-cross-line::after { right: 10px; } .is-style-p-style-08 { border: 1px solid var(--cocoon-box-border-color); position: relative; } .is-style-p-style-08::after { border: 1px solid var(--cocoon-box-border-color); content: ""; position: absolute; top: 3px; left: 3px; width: 100%; height: 100%; } .is-style-triangle-box { position: relative; border: 1px solid var(--cocoon-box-border-color); } .is-style-triangle-box::before { border-bottom: 30px solid transparent; border-left: 30px solid var(--cocoon-box-border-color); content: ""; display: block; position: absolute; top: 0px; left: 0px; } .is-style-triangle-box::after { border-left: 30px solid transparent; border-bottom: 30px solid var(--cocoon-box-border-color); content: ""; display: block; position: absolute; bottom: 0px; right: 0px; } .is-style-clip-box { background-color: var(--cocoon-white-color); position: relative; border: 1px solid #ccc; box-shadow: 1px 1px 2px #ccc; } .is-style-clip-box::before { position: absolute; content: ""; top: -15px; right: 10px; height: 55px; width: 15px; border: 3px solid var(--cocoon-box-border-color); background: none; border-radius: 12px; box-shadow: 1px 1px 2px #999; transform: rotate(10deg); z-index: 1; } .is-style-clip-box::after { position: absolute; content: ""; top: 0px; width: 10px; right: 20px; border: 5px solid transparent; background: inherit; z-index: 2; } .is-style-stapler-box { position: relative; padding: 35px 20px 15px; border: 1px solid #ccc; box-shadow: 1px 1px 2px #ccc; } .is-style-stapler-box::before, .is-style-stapler-box::after { position: absolute; content: ""; top: 15px; width: 30px; border: 1.5px solid #C0C0C0; border-radius: 20px; box-shadow: 0 -1px 2px #555; } .is-style-stapler-box::before { left: 20%; } .is-style-stapler-box::after { right: 20%; } .is-style-stapler-top-left-box { position: relative; padding: 20px 20px 20px 35px; border: 1px solid #ccc; box-shadow: 1px 1px 2px #ccc; } .is-style-stapler-top-left-box::before { position: absolute; content: ""; top: 5px; left: 20px; height: 25px; border: 1.5px solid #ccc; border-radius: 12px; box-shadow: 1px 1px 1px #333; transform: rotate(45deg); } .is-style-hole-punch-box { position: relative; padding: 40px 20px 15px; border: 1px solid #ccc; box-shadow: 1px 1px 2px #ccc; } .is-style-hole-punch-box::before, .is-style-hole-punch-box::after { position: absolute; content: ""; top: 10px; width: 18px; height: 18px; box-shadow: -1px -1px 8px #ccc inset; border: 1px solid #ccc; border-radius: 50%; } .is-style-hole-punch-box::before { left: 30%; } .is-style-hole-punch-box::after { right: 30%; } .is-style-handwritten-box { border-radius: 30px 60px/60px 30px; border: solid 8px #c0c6c9; } .is-style-border-top-box { border-top: solid 3px var(--cocoon-box-border-color); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); } .is-style-border-left-box { border-left: solid 3px var(--cocoon-box-border-color); box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); } [class^=is-style-balloon-], [class*=" is-style-balloon-"] { position: relative; background: var(--cocoon-white-color); border: 1px solid var(--cocoon-box-border-color); border-radius: 4px; } [class^=is-style-balloon-]::before, [class^=is-style-balloon-]::after, [class*=" is-style-balloon-"]::before, [class*=" is-style-balloon-"]::after { border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .is-style-balloon-left-box::after, .is-style-balloon-left-box::before { right: 100%; top: 50%; } .is-style-balloon-left-box::after { border-right-color: var(--cocoon-white-color); border-width: 9px; margin-top: -9px; } .is-style-balloon-left-box::before { border-right-color: inherit; border-width: 10px; margin-top: -10px; } .is-style-balloon-right-box::after, .is-style-balloon-right-box::before { left: 100%; top: 50%; } .is-style-balloon-right-box::after { border-left-color: var(--cocoon-white-color); border-width: 9px; margin-top: -9px; } .is-style-balloon-right-box::before { border-left-color: inherit; border-width: 10px; margin-top: -10px; } .is-style-balloon-top-box::after, .is-style-balloon-top-box::before { bottom: 100%; left: 50%; } .is-style-balloon-top-box::after { border-bottom-color: var(--cocoon-white-color); border-width: 9px; margin-left: -9px; } .is-style-balloon-top-box::before { border-bottom-color: inherit; border-width: 10px; margin-left: -10px; } .is-style-balloon-bottom-box::after, .is-style-balloon-bottom-box::before { top: 100%; left: 50%; } .is-style-balloon-bottom-box::after { border-top-color: var(--cocoon-white-color); border-width: 9px; margin-left: -9px; } .is-style-balloon-bottom-box::before { border-top-color: inherit; border-width: 10px; margin-left: -10px; } [class*=is-style-numeric-list-] { counter-reset: list; list-style-type: none !important; } [class*=is-style-numeric-list-] > li { position: relative; margin: 0.4em 0; line-height: 1.6; padding-left: 1.8em; } [class*=is-style-numeric-list-] > li::before { counter-increment: list; content: counter(list); font-size: 14px; font-family: "arial narrow", sans-serif !important; font-weight: normal !important; width: 1.6em; height: 1.6em; left: 0; position: absolute; top: 0; text-align: center; line-height: 1.6; border-radius: 50%; } .iconlist-box [class*=is-style-numeric-list-] > li::before, .iconlist-box [class*=is-style-icon-list-] > li::before { margin-left: 0; } .is-style-numeric-list-enclosed > li:before { color: var(--cocoon-white-color) !important; background-color: var(--cocoon-box-border-color); } .is-style-numeric-list-rank > li:before { background-color: var(--cocoon-white-color); border: 1px solid var(--cocoon-box-border-color); border-radius: 50%; } .is-style-numeric-list-rank > li:nth-of-type(1):before { background-color: #ffd700; border-color: #daa520; color: #8b4513 !important; } .is-style-numeric-list-rank > li:nth-of-type(2):before { background-color: #dcdcdc; border-color: #696969; color: #444 !important; } .is-style-numeric-list-rank > li:nth-of-type(3):before { background-color: #eb9b6f; border-color: #ad3528; color: #583822 !important; } .is-style-numeric-list-step > li { margin: 1em 0; } .is-style-numeric-list-step > li:before { background-color: var(--cocoon-white-color); border: 2px solid var(--cocoon-box-border-color); z-index: 100; } .is-style-numeric-list-step > li::after { position: absolute; top: 0; bottom: -1em; z-index: 90; left: 0.7em; border-left: 2px solid var(--cocoon-box-border-color); content: ""; } .is-style-numeric-list-step > li:last-of-type::after { display: none; } [class*=is-style-icon-list-] { list-style: none !important; } [class*=is-style-icon-list-] > li { padding-left: 1.6em; position: relative; } [class*=is-style-icon-list-] > li::before { color: var(--cocoon-box-border-color); display: block; font-family: icomoon !important; font-weight: normal !important; height: auto; left: 0; position: absolute; top: 0; width: 1em; } .is-style-icon-list-check > li::before { content: "\e90a" !important; } .is-style-icon-list-check-valid > li::before { content: "\e908" !important; } .is-style-icon-list-check-disabled > li::before { content: "\e909" !important; } .is-style-icon-list-circle > li::before { content: "\e90b" !important; color: #9ccc65 !important; } .is-style-icon-list-triangle > li::before { content: "\e91b" !important; color: #ffca28 !important; } .is-style-icon-list-cross > li::before { content: "\e922" !important; color: #ff7043 !important; } .is-style-icon-list-info > li::before { content: "\e910" !important; color: #4fc3f7 !important; } .is-style-icon-list-question > li::before { content: "\e90f" !important; color: #ffca28 !important; } .is-style-icon-list-warning > li::before { content: "\e921" !important; color: #ff7043 !important; } .is-style-icon-list-paw > li::before { content: "\e907" !important; color: #946243 !important; } .is-style-icon-list-thumb-up > li::before { content: "\e918" !important; color: #4db6ac !important; } .is-style-icon-list-thumb-down > li::before { content: "\e91a" !important; color: #ee6e73 !important; } .is-style-icon-list-ban > li::before { content: "\e90d" !important; color: #ff7043 !important; } .is-style-icon-list-user-man > li::before { content: "\e91d" !important; color: #7986cb !important; } .is-style-icon-list-user-woman > li::before { content: "\e91e" !important; color: #ee6e73 !important; } .is-style-icon-list-comment > li::before { content: "\e911" !important; } .is-style-icon-list-heart > li::before { content: "\e9da" !important; color: #ef5350 !important; } .is-style-icon-list-heart-broken > li::before { content: "\e9db" !important; color: #ef5350 !important; } .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: var(--cocoon-white-color); 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: var(--cocoon-basic-border-radius); display: block; } .appeal-title { font-size: 1.1em; font-weight: bold; } .appeal-message { margin-bottom: 1em; } .appeal-button { color: var(--cocoon-white-color); text-decoration: none; background-color: #c9171e; font-weight: bold; text-align: center; display: inline-block; padding: 9px 42px; margin: 0 8px; border-radius: var(--cocoon-basic-border-radius); } .appeal-button:hover { color: var(--cocoon-white-color); opacity: 0.7; } /************************************ ** 入力フォーム ************************************/ input[type=search] { width: auto; flex-grow: 1; } .wp-block-search__button { width: 60px; border-radius: var(--cocoon-basic-border-radius); border: 1px solid var(--cocoon-basic-border-color); cursor: pointer; } 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 var(--cocoon-thin-color); background-color: #f5f8fa; color: #333; } .bp-login-widget-register-link { display: block; margin-top: 10px; } .bp-login-widget-register-link a { color: var(--cocoon-text-color); text-decoration: none; display: block; text-align: center; border: 1px solid #777; padding: 6px; border-radius: var(--cocoon-badge-border-radius); } .bp-login-widget-register-link a:hover { background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: var(--cocoon-text-color); } .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; opacity: 0; transition: all 1s ease-out; } .carousel .slick-arrow:before { color: var(--cocoon-thin-color); } .carousel .a-wrap { padding: 0.2em 0.3em; } .carousel-in { background-color: var(--cocoon-white-color); padding: 2px 0; } .carousel-content { margin: 0 30px; padding-bottom: 4px; } .carousel-content a { float: left; width: 10%; } .carousel-content .slick-track { display: flex; padding: 10px 0; } .carousel-content .slick-slide { height: auto; } .carousel-content .a-wrap { margin: 0 6px 3px; } .carousel-content .a-wrap:first-child { margin-left: 4px; } .carousel-entry-card-thumb { float: none; display: inline-block; } .carousel-entry-card-title { margin-bottom: 0.6em; font-size: 16px; margin-top: 4px; height: 3.2em; overflow: hidden; } /************************************ ** カルーセルの非表示設定 ************************************/ .no-carousel .carousel { display: none; } .carousel.loaded { opacity: 1; } .ccb-carousel-border .a-wrap { border: 1px solid var(--cocoon-basic-border-color); } .carousel-entry-card-title, .blogcard-snippet { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .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: var(--cocoon-white-color); 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 0.3s ease-in; } .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; white-space: nowrap; } .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 var(--cocoon-basic-border-color); transition: 0.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: var(--cocoon-text-color); } .admin-panel { background-color: var(--cocoon-text-color); color: var(--cocoon-white-color); 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: 0.3s; z-index: 9999; } .admin-panel a { color: var(--cocoon-white-color); } .admin-pv, .admin-edit, .admin-amp, .admin-checks, .admin-cresponsive { border-radius: 3px; padding: 0 10px; border: 1px solid var(--cocoon-basic-border-color); 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: var(--cocoon-text-color); padding: 0 5px; } .apdt-pc-only { display: flex; } .apdt-mobile-only { display: none; } .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 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_arrow { display: inline-block; font-size: 0.8em; text-align: center; width: 44px; } .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; } .slicknav_nav .has-sub { 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 Closed"; font-family: FontAwesome, "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } #bbp_search_submit { padding: 4px; width: auto; } #buddypress h2 { background-color: transparent; color: var(--cocoon-text-color); 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; } div#wpforo #wpforo-wrap { padding: 10px 0; } .body div#wpforo #wpforo-wrap .wpforo-post .wpforo-post-content p { line-height: 1.6; 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; } .gsc-input-box input.gsc-input { color: var(--cocoon-black-color); } #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; } .scroll-hint-icon-wrap { z-index: 3; } body:has(#spotlight.show) .header { background-image: none; } .grecaptcha-badge { bottom: 60px !important; } /** * 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; } .is-layout-flex { display: flex; flex-wrap: wrap; } /* 検索フォーム風スタイルのボタンを装飾 */ .search-form div.sbtn { transition: 0.3s; /* 変化をなめらかにする */ } /* ボタンにカーソルを合わせた時のスタイル */ .search-form div.sbtn:hover { color: #333; /* 文字色 */ background: #fff; /* 背景色 */ border-color: #333; /* ボーダーの色 */ cursor: pointer; /* カーソルをポインターに */ } .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: var(--cocoon-white-color); } .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { border-color: var(--cocoon-basic-border-color); } .lozad { min-height: 1px; min-width: 1px; } .is-header-fixed .header-container { z-index: 3; } .is-header-fixed .header-container .logo { transition: 0.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-wrap, .author-box { border-color: var(--cocoon-three-d-border-colors); border-width: 1px; border-style: solid; } @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 { background-position: top center; } .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-header-menu-buttons { top: 0; bottom: auto; min-width: 46px; box-shadow: 0 0 5px darkgrey; } .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-footer-mobile-buttons, .mblt-header-and-footer-mobile-buttons { 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; } .navi-in .menu-pc { display: none; } .no-mobile-header-logo .header .header-in { min-height: auto; } #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; } .slicknav_menu { display: block; } /* モバイルヘッダー高さ分、余白を設ける */ body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) { margin-top: 50px; } /* adminバーがある場合、その余白分を除いた余白とする */ .admin-bar:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) { margin-top: calc(50px - var(--wp-admin--admin-bar--height)); } } @media screen and (max-width: 834px) { .navi-in > .menu-header { display: none; } main.main, div.sidebar { padding: 32px 16px; margin: 12px 0; border-width: 0; } .pr-label-s { left: 6px; padding: 1px 8px; } .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: var(--cocoon-text-size-s); } .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 .sns-buttons, .sns-share.ss-bottom.ss-col-6 .sns-buttons { column-gap: 0.75%; } .sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a { width: 32.5%; } .sns-follow-buttons { column-gap: 1%; } .sns-follow-buttons a { margin-right: 0; width: 49.5%; } /************************************ ** 関連記事 ************************************/ .rect-vertical-card .related-list { column-gap: 1%; } .rect-vertical-card .related-entry-card-wrap { width: 49.5%; } .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 { 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; } .fb-like-box { max-width: none; flex-direction: column; } .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 .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%; } .container .column-wrap { flex-direction: column; } .container .column-wrap > div { width: 100%; } .box-menus .box-menu { width: 50%; } .wwa .box-menus { margin-left: 10px; margin-right: 10px; } /************************************ ** Facebookページを「いいね!」するエリアのスタイル ************************************/ .fb-like-balloon-body { margin-right: 100px; font-size: 1em; line-height: 1.2em; } .fb-like-balloon-body::after { display: none; } .index-tab-buttons { flex-wrap: wrap; } .index-tab-buttons .index-tab-button { width: 49%; margin: 0.5%; } .list-columns { flex-direction: column; } .list-columns .list-column { width: 100%; } .sidebar .ad-vertical .ad-usual { display: none; } .sidebar .ad-vertical .ad-additional-vertical { display: block; } .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 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) { 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; } .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: 84%; } .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:not(.not-nested-style).sbp-l .speech-balloon { margin-left: 10px; } .speech-wrap:not(.not-nested-style).sbp-r .speech-balloon { margin-right: 10px; } .speech-wrap:not(.not-nested-style).sbp-r .speech-balloon::before { right: -7px; left: auto; border-left-width: 7px; } .speech-wrap:not(.not-nested-style).sbp-r .speech-balloon::after { border-left-width: 7px; right: -5px; left: auto; } .speech-wrap.sbs-think:not(.not-nested-style).sbp-l .speech-balloon { margin-left: 28px; } .speech-wrap.sbs-think:not(.not-nested-style) .speech-balloon::before { top: 4px; left: -19px; width: 12px; height: 12px; } .speech-wrap.sbs-think:not(.not-nested-style) .speech-balloon::after { top: 16px; width: 6px; height: 6px; left: -27px; } .speech-wrap.sbs-think.sbp-r:not(.not-nested-style) .speech-balloon { margin-right: 28px; } .speech-wrap.sbs-think.sbp-r:not(.not-nested-style) .speech-balloon::before { border: 2px solid var(--cocoon-basic-border-color); left: auto; right: -19px; } .speech-wrap.sbs-think.sbp-r:not(.not-nested-style) .speech-balloon::after { border: 2px solid var(--cocoon-basic-border-color); left: auto; right: -27px; } .cocoon-block-balloon.not-nested-style.sbs-line > .speech-balloon::after { left: -5px; } .cocoon-block-balloon.not-nested-style.sbp-l > .speech-balloon { margin-left: 10px; } .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon, .cocoon-block-balloon.not-nested-style.sbp-r.sbs-line > .speech-balloon { margin-right: 10px; } .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::before, .cocoon-block-balloon.not-nested-style.sbp-r.sbs-line > .speech-balloon::before { right: -7px; left: auto; border-left-width: 7px; } .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after, .cocoon-block-balloon.not-nested-style.sbp-r.sbs-line > .speech-balloon::after { border-left-width: 7px; right: -5px; left: auto; } .cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::before { top: 4px; left: -19px; width: 12px; height: 12px; } .cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::after { top: 16px; width: 6px; height: 6px; left: -27px; } .cocoon-block-balloon.not-nested-style.sbs-think.sbp-l > .speech-balloon { margin-left: 28px; } .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r > .speech-balloon { margin-right: 28px; } .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r > .speech-balloon::before, .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r > .speech-balloon::after { border-width: 2px; left: auto; } .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r > .speech-balloon::before { right: -19px; } .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r > .speech-balloon::after { right: -27px; } .admin-panel > div { margin-bottom: 0.6em; padding: 2px; } .menu-content { max-width: 84%; } .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; } .ranking-item-description { margin-top: 1em; } .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.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; } .entry-card-snippet { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .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%; } .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: 28px 12px 12px; } .is-style-information-box.has-background, .is-style-question-box.has-background, .is-style-alert-box.has-background, .is-style-memo-box.has-background, .is-style-comment-box.has-background, .is-style-ok-box.has-background, .is-style-ng-box.has-background, .is-style-good-box.has-background, .is-style-bad-box.has-background, .is-style-profile-box.has-background, .information-box.has-background, .question-box.has-background, .alert-box.has-background, .information.has-background, .question.has-background, .alert.has-background, .memo-box.has-background, .comment-box.has-background, .common-icon-box.has-background { padding: 28px 12px 12px; } .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 { margin-left: 0; margin-right: 0; } .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; } .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; } .pis-m .si-thumb { width: 30%; } .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; } 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; } .appeal .appeal-in { min-height: 200px; } .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 0.5% !important; } } @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 > *, .fpt-2-columns > *, .fpt-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; } } /************************************ ** ソースコード ************************************/ pre { background-color: var(--cocoon-xx-thin-color); border: 1px solid var(--cocoon-thin-color); overflow: auto; padding: 10px; } .is-code-row-number-enable pre.hljs, .is-code-row-number-enable pre.hljs * { line-height: 1.6 !important; } .is-code-row-number-enable pre.hljs, .is-code-row-number-enable pre.hljs#highlight-demo { border: none; position: relative; padding: 0.4em 1em 0.4em 3em; } .is-code-row-number-enable pre.hljs::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; }