/*
Skin Name: Myskin
Description: 自作
Skin URI: https://turicco.com/
Author: はるみ
Author URI: https://turicco.com/
Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png
Version: 1.0.2
Priority: 9900000
*/
/*以下にスタイルシートを記入してください*/
/************************************
子テーマ用のスタイルを書く
************************************/
:root {
--main-color: #7c776d;
--main-sub-color: #dfdbd5;
--main-light-color: #F6F5F3;
--second-color: #8ba0a6;
--second-sub-color: #dbeced;
--accent-color: #daa390;
--cocoon-red-color: #bc5731;
--cocoon-blue-color: #677593;
--cocoon-text-color: #333;
--shadow-color: rgb(0 0 0 / .2);
--cocoon-tab-label-active-color: var(--main-color);
--box-padding: 2em;
}
/* 480px以下 */
@media screen and (max-width: 480px) {
:root {
--box-padding: 1.5em;
}
}
/* codoc表示調整---------------------------------------------- */
/* 外枠のスタイル */
body .codoc-support,
body .codoc-buy,
body .codoc-subscription-list,
body .codoc-subscription-list li,
body .codoc-bottom,
body .codoc-copyright {
max-width: 100%;
border-radius: 0;
}
/* 背景色 */
body .codoc-buy,
body .codoc-support,
body .codoc-bottom {
background: var(--second-sub-color);
}
/* サブスク背景色 */
body .codoc-subscription-list li {
background: var(--main-light-color);
}
/* 内側余白 */
body .codoc-buy,
body .codoc-subscription-list li {
padding: 2em !important;
}
/* サブスク親要素リセット */
body .codoc-subscription-list li {
font-size: 1em;
}
/* 記事を購入ボタン */
body .codoc-support .codoc-btn,
body .codoc-buy .codoc-btn,
body .codoc-subscription-list .codoc-btn,
body .codoc-subscription-list .codoc-btn:hover {
max-width: 100%;
font-size: 0.9em;
color: var(--cocoon-white-color) !important; /* 必須 */
transition-duration: 0.5s;
}
body .codoc-entry .codoc-btn:before {
display: none;
}
body .codoc-support .codoc-btn,
body .codoc-buy .codoc-btn {
background: var(--second-color) !important; /* 必須 */
}
body .codoc-subscription-list .codoc-btn,
body .codoc-subscription-list .codoc-btn:hover {
background: var(--main-color) !important; /* 必須 */
}
body .codoc-support .codoc-btn:hover,
body .codoc-buy .codoc-btn:hover,
body .codoc-subscription-list .codoc-btn:hover,
body .codoc-entry .codoc-btn:hover {
opacity: 0.7;
color: var(--cocoon-white-color) !important; /* 必須 */
}
body .codoc-buy-icon,
body .codoc-subscription-icon {
margin: 0 .5em 0 0;
}
body .codoc-subscription-icon img {
width: 140px; /* サブスク画像幅 */
}
/* タイトル文字サイズ（PC） */
body .codoc-buy-info,
body .codoc-buy-title,
body .codoc-subscription-title {
font-size: 1em;
margin-bottom: .5em;
}
/* サブスク適用 */
body .codoc-subscription-description {
font-size: .9em;
color: var(--cocoon-text-color);
}
/* 金額 */
body .codoc-buy-price,
body .codoc-subscription-price,
body .codoc-subscription-price span {
font-size: unset;
font-weight: normal;
}
/* サポート */
body .codoc-support .codoc-support-title {
font-size: .8em;
}
/* 834px以下 */
@media screen and (max-width: 834px) {
body .codoc-buy-info,
body .codoc-buy-title,
body .codoc-subscription-title {
font-size: 0.9em;
}
}
/* サポート：ボタンテキスト前にアイコン追加 */
body .codoc-support .codoc-btn span:before {
font-family: "Font Awesome 5 Free"; /* アイコンのフォント */
content: "\f118"; /* チェックマークアイコンのUnicode */
margin-right: 5px; /* アイコンと文字の間隔 */
font-weight: normal;
}
/* サイドバー被り対策（必要な場合のみ） */
#main {
z-index: 1;
}
#sidebar {
z-index: 0;
}
/* 目次現在位置をハイライト */
.toc-widget-box .toc-content a.active {
color: var(--cocoon-red-color); /* 好みの強調色 */
background: #eee;
font-weight: bold;
padding-left: 5px;
transition: all 0.2s ease;
}
/* 斜体リセット---------------------------------------------- */
cite {
font-style: unset;
}
/* リキャプチャロゴ */
.grecaptcha-badge { visibility: hidden; }
/* 全体設定---------------------------------------------- */
html,
body {
overflow-x: clip;
scroll-behavior: smooth;
scroll-padding-top: 100px; /* 位置調整 */
}
@media screen and (max-width: 834px) {
body.public-page {
background-color: #fff !important;
}
html,
body {
scroll-padding-top: 60px; /* スマホヘッダーの高さに調整 */
}
main.main {
padding-top: 1em;
}
}
/* 1pxの余白を消す */
.main {
border: none;
}
/* 中央寄せ ---------------------------------------------- */
.text-center {
text-align: center;
}
/* リンクカラー変更---------------------------------------------- */
a,
.has-text-color a {
color:var(--cocoon-blue-color);
}
/* 広告表記---------------------------------------------- */
.pr-label-l {
background: initial;
border-radius: 0;
border-left: 0;
border-right: 0;
padding: .7em 0;
}
.pr-label-l:before {
font-family: "Font Awesome 5 Free";
content: "\f05a";
font-weight: bold;
margin-right: 5px;
color: var(--main-color);
}
/* フルワイド幅---------------------------------------------- */
body .full-wide {
margin: 0 calc(50% - 50vw);
padding: 0 calc(50vw - 50%);
}
/*---------------------------------
ハンバーガーメニュー（PCのみ）
---------------------------------*/
.hbg-menu_content {
opacity: 0;
background: rgba(0, 0, 0, 0.7); /* 背景を半透明に */
position: fixed;
top: 0;
right: 0;
width: 30%;
height: 100vh;
z-index: -1;
transition: opacity 0.3s, z-index 0s 0.3s;
}
/* メニュー表示時 */
.hbg-menu:has(#hbg-toggle:checked) .hbg-menu_content {
opacity: 1;
z-index: 999; /* 最前面へ */
transition-delay: 0s;
}
/* ナビリスト */
.hbg-menu_content ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
list-style: none;
opacity: 0;
z-index: 999;
}
/* ナビ項目 */
.hbg-menu_item {
display: block;
text-align: center;
font-size: 1.7em;
}
.hbg-menu_item:not(:last-child) {
margin-bottom: 1rem;
}
.hbg-menu_item a {
color: #fff;
text-decoration: none;
padding-bottom: 0.5em;
}
/* フェードインアニメーション */
@keyframes fade-in {
to { opacity: 1; }
}
.hbg-menu:has(#hbg-toggle:checked) .hbg-menu_content ul {
animation: fade-in 0.5s ease-in forwards;
}
/*---------------------------------
ハンバーガーボタン
---------------------------------*/
#hbg-toggle {
display: none;
}
.hbg-menu_button {
position: fixed;
top: 50px;
right: 30px;
width: 60px;
height: 50px;
cursor: pointer;
z-index: 9999;
}
.front-top-page .hbg-menu_button {
top: 20px;
}
.hbg-menu_line {
position: absolute;
left: 14px;
width: 50%;
height: 2px;
background-color: #111;
border-radius: 2px;
transition: background-color 0.3s, top 0.3s, left 0.3s, transform 0.3s, opacity 0.3s;
}
/* ボタンオフ状態 */
.hbg-menu_line:nth-of-type(1) { top: 13px; }
.hbg-menu_line:nth-of-type(2) { top: 21px; }
.hbg-menu_line:nth-of-type(3) { top: 29px; }
/* ボタンオン状態 */
.hbg-menu:has(#hbg-toggle:checked) .hbg-menu_line {
background-color: #fff;
}
.hbg-menu:has(#hbg-toggle:checked) .hbg-menu_line:nth-of-type(1) {
left: 16px;
top: 18px;
transform: translateY(6px) rotate(-45deg);
}
.hbg-menu:has(#hbg-toggle:checked) .hbg-menu_line:nth-of-type(2) {
opacity: 0;
}
.hbg-menu:has(#hbg-toggle:checked) .hbg-menu_line:nth-of-type(3) {
left: 16px;
top: 30px;
transform: translateY(-6px) rotate(45deg);
}
/*---------------------------------
レスポンシブ対応
---------------------------------*/
@media (max-width: 1023px) {
.hbg-menu {
display: none; /* モバイルで非表示 */
}
}
/* トップページ自作スライダー---------------------------------------------- */
.custom-slider {
position: relative;
width: 100%;
height: 100svh;
display: grid;
place-items: center;
overflow: hidden;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(1.1); /* 初期状態で少し拡大 */
transition: opacity 2s ease-in-out,
transform 4.5s ease-in-out .5s;
background-size: cover;
}
.slide.active {
opacity: 1;
transform: scale(1); /* 表示時に通常サイズ */
}
/* スライドごとの背景画像 */
.slide1 {
background-image: url('https://turicco.com/wp-content/uploads/2024/01/flower-13.jpg');
background-position: 40%;
}
.slide2 {
background-image: url('https://turicco.com/wp-content/uploads/2024/09/img91.jpg');
background-position: 60%;
}
.slide3 {
background-image: url('https://turicco.com/wp-content/uploads/2024/06/pencil.jpg');
background-position: 70%;
}
.slide4 {
background-image: url('https://turicco.com/wp-content/uploads/2024/01/appeal-img-2.jpg');
background-position: 40%;
}
.slide5 {
background-image: url('https://turicco.com/wp-content/uploads/2022/09/img-green.jpg');
background-position: 35%;
}
.top-content-wrap {
z-index: 1;
padding: 1em;
width: 100%;
}
/* 新着情報リストのスタイル ---------------------------------------------- */
.info-list-item {
display: flex;
flex-direction: column;
}
.info-list-item-content {
margin-bottom: 0;
}
.info-list-item-meta {
order: -1; /* 日付やメタ情報を上に表示 */
padding-bottom: .5em;
opacity: 1;
}
.info-list-item-categorys .entry-category {
margin-right: 0;
}
/* 新着情報リスト（スライド） ---------------------------------------------- */
.home .info-list {
position: relative;
overflow: hidden;
height: 3em;
}
.home .info-list-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translateY(100%); /* 下からスライドイン */
transition: opacity .5s ease, transform 2s ease;
padding: 5px 0;
}
.home .info-list-item.active {
opacity: 1;
transform: translateY(0);
z-index: 1;
}
/* スマホ用：高さを2行分に調整 */
@media screen and (max-width: 768px) {
.home .info-list {
height: 5em; /* 2行分表示 */
}
}
/* 新着情報メタ：日付とカテゴリを自然に横並びに */
.info-list-item-meta {
line-height: 12px;
}
/* カテゴリラベル：高さをテキストに合わせる */
.info-list-item-categorys {
display: inline-flex;
height: unset;
}
.info-list-item-categorys .entry-category {
height: unset;
line-height: 12px;
}
/* 記事ヘッダー順序変更 ---------------------------------------------- */
.article-header {
display: flex;
flex-direction: column;
}
.entry-title {
order: -3;
}
.entry-categories-tags {
order: -2;
margin-bottom: .5em;
}
.date-tags {
order: -1;
}
/* webフォント ---------------------------------------------- */
.web-font,
.toc-title,
.toc-list > li::before,
.ect-vertical-card::before,
.header-container,
.scrollLabel,
.sidebar h3,
.menu-caption,
.top-heading,
.blank-box.bb-tab .bb-label,
.blogcard::after,
pre::after,
:where(.prev-post-title, .next-post-title)::before,
.author-widget-name,
.related-entry-main-heading,
.comment-title,
.widget-title,
.article h2::before,
.pagination-next-link {
font-family: "Caveat", cursive;
letter-spacing: .06em;
}
/* アニメーション（タイピング風） ---------------------------- */
.typing span {
display: table-cell;
opacity: 0; /* 初期は非表示 */
animation: typing 1s forwards;
animation-delay: calc(var(--i) * 0.1s); /* 各文字に遅延 */
}
@keyframes typing {
to {
opacity: 1;
}
}
/* 文字列後ろのカーソル */
.typing span:last-child::after {
content: "|";
animation: typing-cursor .8s ease infinite;
}
@keyframes typing-cursor {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* フェードイン ---------------------------------------------- */
.fade-in,
.content,
.logo-header {
opacity: 0;
animation: fade-in 2s ease .5s forwards;
}
@keyframes fade-in {
to {
opacity: 1;
}
}
/* 遅延用ユーティリティ */
.delay-01 {
animation-delay: 2.5s;
}
/* スクロールアニメーション---------------------------------------------- */
/* ----------------------------
フェードイン
----------------------------*/
.scroll_in,
.footer-title {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.scroll_in.on,
.footer-title.on {
opacity: 1;
}
.scroll_in.on {
transition-delay: calc(var(--i) * 0.1s);
}
.footer-title.on {
transition-delay: 0.3s;
}
/* ----------------------------
下から上へ出現
----------------------------*/
.scroll_up {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
.scroll_up.on {
opacity: 1;
transform: translateY(0);
transition-delay: calc(var(--i) * 0.1s);
}
/* ----------------------------
左右から出現
----------------------------*/
.scroll_left,
.scroll_right {
opacity: 0;
transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.scroll_left { transform: translateX(-20px); }
.scroll_right { transform: translateX(20px); }
.scroll_left.on,
.scroll_right.on {
opacity: 1;
transform: translateX(0);
transition-delay: calc(var(--i) * 0.1s);
}
/* ----------------------------
ポップアップ
----------------------------*/
.scroll_popup {
opacity: 0;
transform: scale(0.85);
transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
.scroll_popup.on {
transform: scale(1);
opacity: 1;
transition-delay: calc(var(--i) * 0.1s);
}
/* ----------------------------
下線スライド
----------------------------*/
.scroll_underline {
position: relative;
display: block;
}
.scroll_underline::after {
display: block;
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: var(--main-color);
transition: width 1.5s ease-in;
}
.scroll_underline.on::after {
width: 100%;
}
/* ホバー時の変化 ---------------------------------------------- */
.a-wrap:hover {
background-color: transparent;
}
.entry-card-wrap.a-wrap .entry-card-thumb img,
.related-entry-card-wrap.a-wrap .related-entry-card-thumb img,
.widget-entry-card-link.a-wrap .widget-entry-card-thumb img {
transition-duration: .5s;
}
.entry-card-wrap.a-wrap:hover .entry-card-thumb img,
.related-entry-card-wrap.a-wrap:hover .related-entry-card-thumb img,
.widget-entry-card-link.a-wrap:hover .widget-entry-card-thumb img {
filter: brightness(80%);
}
/* マスク／フィルタードット -------------------------------------- */
.img-mask-b,
.img-mask-w {
position: relative;
}
/* 黒ドット */
.mask-b::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
display: block;
background-image: url(https://turicco.com/wp-content/uploads/2024/06/dot.png);
background-size: 2px;
opacity: .5;
}
/* 白ドット */
.mask-w::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
display: block;
background-image:
linear-gradient(-90deg, transparent 50%, #000 50%),
linear-gradient(transparent 50%, #000 50%);
background-color: #fff;
background-size: 2px 2px;
mix-blend-mode: screen;
opacity: .5;
}
/* 通知エリア ---------------------------------------------- */
.front-top-page .notice-area {
display: none;
}
.notice-area {
position: relative;
margin-bottom: 1em;
overflow: hidden; /* はみ出た部分を隠す */
white-space: nowrap; /* 折り返さず1行表示 */
color: var(--cocoon-white-color);
background-color: var(--main-color);
}
.notice-area::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: repeating-linear-gradient(
-45deg,
#fff 0 6px,
transparent 6px 12px
);
opacity: .1;
}
.notice-area span {
font-weight: bold;
}
.notice-btn {
margin-left: .5em;
padding: 2px 1em;
font-size: .9em;
text-decoration: none;
color: var(--cocoon-white-color)!important;
background-color: var(--accent-color);
border-radius: 30px;
box-shadow: 0 1px 2px var(--shadow-color);
}
/* 流れる通知メッセージ */
.notice-area-message {
display: inline-block;
padding-left: 100%; /* 右端からスタート */
animation: slideMessage 12s linear infinite;
}
/* スライドアニメーション */
@keyframes slideMessage {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/* PC表示時は少しゆっくり */
@media screen and (min-width: 1024px) {
.notice-area-message {
animation-duration: 20s;
}
}
/* トップへ戻るボタン---------------------------------------------- */
.go-to-top {
right: 2em;
bottom: 2em;
}
/* トップへ戻るボタン画像の表示調整 */
.go-to-top-button {
width: 60px; /* ボタン画像の表示幅 */
height: auto; /* ボタン画像の高さは自動調整 */
opacity: 0.7;
transition: transform 0.3s ease-in-out;
}
.go-to-top-button:hover {
transform: translateY(-30px);
}
/* ヘッダー（グローバルナビ）---------------------------------------------- */
.navi-in a {
text-transform: uppercase; /* 大文字表記 */
}
.header-container,
.navi,
.navi-in a:hover {
background-color: transparent;
}
/* トップページのヘッダー固定 */
.front-top-page .header-container {
position: fixed;
z-index: 9;
width: 100%;
}
.front-top-page .header-container-in.hlt-top-menu .logo {
display: none;
}
.header-container-in.hlt-top-menu .logo-header {
line-height: 1.1;
}
a.site-name-text-link {
font-size: 3.5em;
}
#header .site-name-text {
font-size: unset;
}
a.site-name-text-link::after {
content: "Blog & Design";
display: block;
font-size: 13px;
letter-spacing: 0.15em;
}
/* トップページのロゴ */
.top-logo-wrapper {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 2em;
}
.top-logo-wrapper .top-logo {
display: inline-block;
font-size: 5em;
line-height: 1.1;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.top-logo-wrapper .top-logo:hover {
color: inherit;
opacity: .8;
}
.top-logo-wrapper .top-logo span {
display: block;
font-size: 0.2em;
font-weight: normal;
letter-spacing: 0.1em;
margin-top: -0.1em;
line-height: 1.2;
padding-right: 10px;
}
@media screen and (max-width: 768px) {
.top-logo-wrapper {
transform: scale(0.8);
}
}
/* ロゴ背景画像（ハート） */
.top-logo-wrapper .top-logo,
a.site-name-text-link {
position: relative;
padding: 0;
}
.top-logo-wrapper .top-logo::before,
a.site-name-text-link::before {
content: "";
position: absolute;
z-index: -1;
right: -0.9em;
top: 0;
width: 1em;
height: 100%;
background-image: url("https://turicco.com/wp-content/uploads/2024/01/logo-4.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
animation: fade-in 2s ease both;
}
.top-logo-wrapper .top-logo::before {
animation-delay: 3s;
}
a.site-name-text-link::before {
animation-delay: 1.5s;
}
/* ナビにホバーで下線を引く（左から右に伸びる） */
.hbg-menu_content li a {
position: relative;
}
.hbg-menu_content li a::after,
.navi-in a::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: var(--main-color);
transform: scaleX(0);
transform-origin: center top;
transition: transform 0.3s;
}
/* ホバーで下線表示 */
.hbg-menu_content li:hover a::after,
.navi-in a:hover::after {
transform: scaleX(1);
}
/* 色調整 */
.hbg-menu_content li a::after {
background: var(--cocoon-white-color);
}
.navi-in a:hover {
color: var(--main-color);
}
/* フッター設定 ---------------------------------------------- */
.footer {
background: var(--main-color);
padding: 3em 1em 0;
}
.footer a:hover {
color: var(--accent-color)!important;
background-color: transparent;
}
.navi-footer-in > .menu-footer li {
width: max-content;
padding: 0 1em;
}
/* スマホでもウィジェットを表示 */
@media screen and (max-width: 768px) {
.footer-widgets {
display: block;
}
}
@media screen and (max-width: 480px) {
.navi-footer-in > .menu-footer li.menu-item {
width: auto;
}
}
/* パンくずリスト ---------------------------------------------- */
.breadcrumb {
margin: 0;
color: var(--main-color);
position: relative;
font-size: 11px;
}
.breadcrumb a {
padding: 3px;
border-radius: 1px;
color: var(--main-color);
}
/* 「ホーム」を消す */
.breadcrumb .breadcrumb-home a span {
font-size: 0;
}
/* 「Home」を挿入 */
.breadcrumb .breadcrumb-home a span::before {
content: "Home";
font-size: 13px;
}
/* パンくずリストアイコン非表示 */
.breadcrumb :where(.fa-folder, .fa-file-o) {
display: none;
}
/* 区切り（>）まわりの余白 */
.breadcrumb .sp {
margin: 0 3px;
}
/* 装飾（ドット） */
.breadcrumb::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow:
10px 0 0 var(--main-color),
25px 0 0 var(--second-color),
40px 0 0 var(--accent-color);
}
/* サークル----------------------------------------------*/
.circle-container,
.circle-block {
display: grid;
place-items: center;
}
.circle-container {
padding: 2em;
}
.circle-block {
width: min(220px, 60vw);
height: min(220px, 60vw);
position: relative; /* z-indexの基準として必要 */
}
.circle-img {
grid-area: 1 / 1; /* グリッドの同じセルに配置 */
z-index: 1; /* 画像をSVGの上に */
width: 105%; /* サイズを維持 */
max-width: 100%; /* はみ出し防止 */
}
.circle-img img {
width: 100%;
height: 100%;
object-fit: contain;
aspect-ratio: 1/1; /* 正方形を維持 */
}
.circleText {
grid-area: 1 / 1; /* 画像と同じセルに配置 */
transform: translateZ(0); /* GPUアクセラレーション */
overflow: visible;
animation: rotation 18s linear infinite;
}
.circleText_path {
fill: none;
}
.circleText_text {
fill: var(--main-color);
font-size: 12px;
letter-spacing: 0.05em;
}
.circleText_text tspan {
fill: var(--accent-color);
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* WAVEの設定------------------------------------------------------ */
/* waveを描画するエリア設定（うねうね） */
#wrapper{
position: relative;
}
canvas{
position: absolute;
bottom: 0;
left:0;
width: 100%;
z-index:1;
}
/* セクション------------------------------------------------------ */
.section,
.top-profile-box {
position: relative;
}
.section {
padding: 3em 1.5em 8em;
}
.color-area {
background: var(--main-light-color);
}
/* 波の共通スタイル ------------------------------------------------------ */
.svg-wave svg {
display: block;
position: absolute;
z-index: 9;
width: 100%;
}
/* 配置（上下）*/
.svg-wave.top svg {
top: 0;
}
.svg-wave.bottom svg {
bottom: 0;
}
/* 色バリエーション */
.svg-wave.color-1 svg {
fill: var(--main-light-color);
}
.svg-wave.color-2 svg {
fill: var(--cocoon-white-color);
}
/* 特定ボックス用の上書き */
.top-profile-box .svg-wave.bottom svg {
fill: var(--main-color);
margin-bottom: -1px;
}
/* 記事カード設定 ---------------------------------------------- */
.related-entry-card-snippet,
.entry-card-snippet,
.widget-entry-cards:not(.large-thumb-on) .card-snippet {
-webkit-line-clamp: 2; /* スニペット表示 */
}
.card-thumb img,
.eye-catch img {
border-radius: 7px;
}
.e-card-title,
.widget-entry-cards.card-large-image .e-card {
font-size: 1.05em;
}
@media screen and (max-width: 600px) {
.e-card-title {
font-size: 14px!important;
}
}
/* 1024px以上 */
@media screen and (min-width: 1024px) {
.related-entry-card-title,
.entry-card-title {
-webkit-line-clamp: 2;
}
}
/* ウィジェット設定 ---------------------------------------------- */
/* 三点リーダー省略 */
.widget-entry-cards:not(.large-thumb-on) .card-title {
-webkit-line-clamp: 2;
}
/* 記事タイトル */
.widget-entry-cards:not(.is-list-horizontal) .a-wrap {
padding: 5px;
line-height: 1.6;
}
.widget-entry-card-title {
font-weight: bold;
}
/* スマホで文字の大きさ調整（600px以下） */
@media screen and (max-width: 600px) {
.widget-entry-card-title {
font-size: 14px;
}
}
.widget-entry-card-snippet {
font-size: 13px;
}
.widget-entry-cards.card-large-image .a-wrap {
margin-inline: auto;
}
/* ウィジェットカード設定（Grid） ---------------------------------------------- */
/* 各カラム数に応じたグリッド表示 */
[class*="is-style-column-2"] .widget-entry-cards,
[class*="is-style-column-3"] .widget-entry-cards,
[class*="is-style-column-4"] .widget-entry-cards {
display: grid;
}
/* 2カラム表示 */
[class*="is-style-column-2"] .widget-entry-cards {
grid-template-columns: repeat(2, 1fr);
}
/* 3カラム表示 */
[class*="is-style-column-3"] .widget-entry-cards {
grid-template-columns: repeat(3, 1fr);
}
/* 4カラム表示 */
[class*="is-style-column-4"] .widget-entry-cards {
grid-template-columns: repeat(4, 1fr);
}
/* モバイル用レスポンシブ設定 */
@media (max-width: 768px) {
/* column-x-1系：モバイルでは1列 */
:is(.is-style-column-2-1,
.is-style-column-3-1,
.is-style-column-4-1) .widget-entry-cards {
grid-template-columns: 1fr;
}
/* column-x-2系：モバイルでは2列 */
:is(.is-style-column-3-2,
.is-style-column-4-2) .widget-entry-cards {
grid-template-columns: repeat(2, 1fr);
}
}
/* 見出しデザイン ---------------------------------------------- */
/* トップページの大見出し */
.top-heading {
display: table; /* spanの余白対策 */
text-align: center;
margin: 0 auto 1em;
color: var(--main-color);
font-size: 4em;
line-height: 1.5;
}
/* 480px以下 */
@media screen and (max-width: 480px) {
.top-heading {
font-size: 3em;
}
}
/* 見出し（2行目のスタイル） */
.top-sub-heading,
.related-entry-sub-heading,
.comment-sub-heading,
.footer-sub-heading {
display: table; /* spanの余白対策 */
margin: auto;
font-size: .8rem;
letter-spacing: .05rem;
font-weight: initial;
font-family: initial;
}
/* 中見出し */
.second-heading {
position: relative;
color: var(--main-color);
font-size: 1.2em;
font-weight: bold;
line-height: 1.5;
padding-bottom: .5rem;
margin-bottom: 2em!important;
}
/* 目次タイトル・関連記事・コメント・フッター見出し */
.about-title,
.author-widget-name,
.related-entry-heading,
.comment-title,
.footer-title > div {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.4;
font-weight: normal;
}
.toc-title,
.about-title,
.author-widget-name,
.related-entry-heading,
.comment-title {
color: var(--main-color);
}
.about-title,
.toc-title,
.author-widget-name,
.related-entry-heading,
.comment-title,
.footer-title > div {
font-size: 3em;
line-height: 1.4;
}
.about-title {
margin-bottom: 1rem!important;
}
/* 短い下線を引く */
.page .entry-title,
.archive-title,
.top-heading,
.related-entry-heading,
.comment-title,
.author-widget-name,
.footer-title,
.iconlist-title {
position: relative;
padding-bottom: 1rem;
margin-bottom: 1.4em;
}
:where(
.page .entry-title,
.archive-title,
.top-heading,
.related-entry-heading,
.comment-title,
.author-widget-name,
.footer-title,
.iconlist-title
)::after {
background-color: var(--main-color);
position: absolute;
bottom: 0;
left: calc(50% - 1.25rem);
display: block;
width: 2.5rem;
height: 1px;
border-radius: 10px;
content: "";
}
.footer-title::after {
background-color: var(--cocoon-white-color);
}
/* アーカイブページ見出しのアイコンを消す */
.archive-title .fas {
display: none;
}
/* 固定ページ・アーカイブページのタイトル */
.page .entry-title,
.archive-title {
text-align: center;
}
/* 480px以下 */
@media screen and (max-width: 480px) {
.entry-title {
padding: 0.6em 0;
}
}
/* 固定ページの日付を非表示 */
.page .date-tags {
display: none;
}
/* サイドバー見出し ---------------------------------------------- */
.sidebar h3 {
margin: 0 0 1rem 0;
padding: 0;
overflow: hidden;
position: relative;
background: transparent;
font-size: 3em;
color: var(--main-color);
font-weight: normal;
}
.sidebar h3::after {
content: "";
position: absolute;
top: 55%;
width: 8px;
height: 8px;
margin-left: 15px;
border-radius: 50%;
background-color: var(--main-color);
box-shadow:
20px 0 0 var(--second-color),
40px 0 0 var(--accent-color),
60px 0 0 var(--main-color),
80px 0 0 var(--second-color),
100px 0 0 var(--accent-color),
120px 0 0 var(--main-color),
140px 0 0 var(--second-color),
160px 0 0 var(--accent-color),
180px 0 0 var(--main-color),
200px 0 0 var(--second-color);
}
/* 記事内見出しのデザイン */
.article :is(h1, h2, h3, h4) {
border: none;
background-color: transparent;
border-radius: 0;
}
/* h2 */
.article h2:not(.step-label) {
margin-top: 10rem;
counter-increment: heading-counter;
position: relative;
padding: 0 .5em;
background-color: transparent;
color: var(--main-color);
font-size: 1.4em;
line-height: 1.4;
}
.article h2:not(.step-label)::before {
content: counter(heading-counter, decimal-leading-zero);
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
font-style: italic;
line-height: 1;
font-size: 6rem;
color: var(--main-sub-color);
}
.article h2:not(.step-label)::after {
--stripe-color: var(--main-sub-color);
content: "";
position: absolute;
left: 0;
bottom: -.5em;
width: 100%;
height: .5em;
background:
linear-gradient(
135deg,
transparent 25%,
var(--stripe-color) 25%,
var(--stripe-color) 50%,
transparent 50%,
transparent 75%,
var(--stripe-color) 75%,
var(--stripe-color)
);
background-size: 4px 4px;
}
/* h3 */
.article h3:not(.step-label) {
margin-top: 5em;
padding: .7em 1em;
color: var(--main-color);
font-size: 1.2em;
border-left: 3px solid var(--main-color);
background:
linear-gradient(
-45deg,
transparent 25%,
var(--main-light-color) 25%,
var(--main-light-color) 50%,
transparent 50%,
transparent 75%,
var(--main-light-color) 75%,
var(--main-light-color)
);
background-size: 4px 4px;
}
/* h4 */
.article h4 {
margin-top: 4em;
padding: .1em .6em;
border-left: 3px solid var(--main-color);
color: var(--main-color);
font-size: 1.1em;
line-height: 1.3;
}
/* h5：先頭に四角のアクセント */
.article h5 {
position: relative;
background: none;
font-size: 1em;
padding: .5em .5em .5em 2em;
border-color: var(--main-sub-color);
color: var(--main-color);
}
.article h5::before {
content: "";
position: absolute;
top: .6em;
left: .2em;
z-index: 2;
width: 1em;
height: 1em;
background: var(--main-color);
opacity: .7;
}
/* STEPラベルのスタイル---------------------------------------------- */
body .step-label {
display: block; /* ブロック要素として動作 */
position: relative;
color: var(--main-color);
padding-left: 60px; /* ステップ番号分のスペース */
border:none;
}
/* 共通プロパティをまとめた部分 */
.step-label:before,
.step-label:after {
position: absolute;
left: 0;
top: 50%; /* 円を縦中央に配置 */
transform: translateY(-50%); /* 円を中央に固定 */
width: 46px;
border-radius: 50%; /* 完全な円 */
text-align: center; /* 横中央寄せ */
color: #fff; /* 文字色 */
display: flex; /* 内部要素の配置用 */
flex-direction: column; /* 縦に並べる */
align-items: center; /* 横中央寄せ */
}
/* "STEP" 用のスタイル */
.step-label:before {
content: "STEP"; /* "STEP" を表示 */
height: 37px;
background-color: var(--main-color); /* 灰色背景 */
font-size: 10px; /* "STEP" を小さく */
justify-content: flex-start; /* 上寄せベース */
line-height: 12px; /* "STEP" の高さ調整 */
padding-top: 9px; /* 上部の微調整 */
}
/* 番号用のスタイル */
.step-label:after {
content: counter(step-counter); /* カウンターを表示 */
counter-increment: step-counter; /* カウンターを増加 */
height: 46px;
font-size: 18px; /* 番号のサイズ */
justify-content: flex-end; /* 下寄せベース */
line-height: 20px; /* 番号の高さ調整 */
padding-bottom: 9px; /* 下部の微調整 */
}
/* カウンターをリセット */
body {
counter-reset: step-counter;
}
/* ボタンのスタイル---------------------------------------------- */
/* cocoonボタン */
.btn {
background-color: var(--main-color);
border-width: 1px;
}
.btn-m,
.btn-wrap.btn-wrap-m > a,
.btn-l,
.btn-wrap.btn-wrap-l > a {
font-size: 1em;
padding-right: 40px;
}
/* 囲みボタン */
body .block-box .btn-wrap a {
margin-bottom: 0;
}
@media screen and (max-width: 480px) {
.btn-m,
.btn-wrap.btn-wrap-m > a,
.btn-l,
.btn-wrap.btn-wrap-l > a {
font-size: 0.9rem;
}
}
/* moreボタン---------------------------------------------- */
.more-btn {
text-align: right;
margin-right: 1em;
}
.more-btn a {
position: relative;
padding: 0 2em .5em .5em;
color: var(--cocoon-text-color);
text-decoration: none;
}
.more-btn a::before {
content: '';
border-bottom: 1px solid var(--cocoon-text-color);
border-right: 1px solid var(--cocoon-text-color);
height: 12px;
position: absolute;
bottom: 0;
left: 0;
transform: skewX(50deg);
width: 100%;
transition: left 0.3s ease;
}
.more-btn a:hover::before {
left: 10px;
}
/* カスタムボタン---------------------------------------------- */
.custom-btn a,
.custom-shopping-btn a {
display: inline-flex;
width: 100%;
text-align: center;
text-decoration: none;
color: var(--cocoon-text-color);
font-weight: 600;
border: 1px solid var(--cocoon-text-color);
border-radius: 99px;
white-space: nowrap; /* 改行を防止 */
overflow: hidden; /* はみ出した部分を非表示 */
text-overflow: ellipsis; /* 省略して表示 */
position: relative;
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.custom-btn a {
justify-content: center;
align-items: center;
gap: .5em;
padding: 1em;
}
.custom-btn a svg {
transform: translateY(-0.1em);
}
.custom-shopping-btn a {
flex-direction: column;
padding: .5em 1em;
}
.custom-shopping-btn a,
.custom-shopping-btn i {
line-height: 1.4;
}
.custom-shopping-btn i {
font-size: 1.3em;
}
.custom-btn a:hover,
.custom-shopping-btn a:hover {
background-color: var(--main-color);
border-color: var(--main-color);
color: var(--cocoon-white-color);
}
/* 480px以下 */
@media screen and (max-width: 781px) {
.custom-btn a,
.custom-shopping-btn a {
font-size: .9em;
}
}
/* 矢印追加（arrow-right） */
.custom-btn.arrow-right a:after {
content: ''; /* 矢印の描写 */
border-bottom: 1px solid var(--cocoon-text-color); /* 下矢印の太さ、種類、色 */
border-right: 1px solid var(--cocoon-text-color); /* 右矢印の太さ、種類、色 */
width: .9em; /* 矢印の幅 */
height: .2em; /* 矢印の高さ */
transform: skewX(45deg); /* 矢印の角度 */
position: absolute; /* 矢印の位置 */
right: 1.2em; /* 右からの位置 */
bottom: 50%; /* 下からの位置 */
transition: border-color 0.3s, right 0.3s;
}
/* マウスオーバー時の変化 */
.custom-btn.arrow-right a {
padding-right: 2em;
}
.custom-btn.arrow-right a:hover:after {
border-color: #fff;
right: 1em;
}
/* サイドバーの設定---------------------------------------------- */
.sidebar {
font-size: .9em;
}
.sidebar aside {
padding: 1em 1.5em;
}
:where(.widget_nav_menu, .tagcloud) ul li {
line-height: 1; /* 変えない */
}
/* サイドメニュー */
.widget_nav_menu ul li a,
.sub-menu li {
display: flex;
align-items: center;
}
.widget_nav_menu ul li a {
gap: 0.5em;
}
.sub-menu li {
gap: 0.1em;
}
.widget_nav_menu ul li a:hover,
.tagcloud a:hover {
background-color: unset;
text-decoration: underline;
}
/* 検索ボックス ---------------------------------------------- */
.search-box input:focus {
outline: 0; /* フォーカス枠なし */
}
/* 全体 */
.search-box {
max-width: 300px;
margin: 1em auto;
}
/* 入力欄 */
.search-box .search-edit {
border-radius: 1px;
color: var(--cocoon-text-color);
background: rgb(255 255 255 / .7);
font-size: .9em;
}
.sidebar .search-box .search-edit {
border: none;
background: var(--main-light-color);
}
/* ボタン */
.search-box .search-submit {
color: var(--main-color);
right: 5px;
}
/* ヘッダーナビの検索ボタン ---------------------------------------------- */
/* 検索ボタンのアイコン */
#search-menu-open-pc .search-menu-icon {
display: grid;
place-content: center;
height: 100%;
width: 100px;
}
/* 検索ボタンがチェックされたときにカバーを表示 */
#search-menu-input-pc:checked ~ #search-menu-close-pc {
opacity: 0.5;
visibility: visible;
}
/* 閉じる用の薄黒カバー */
#search-menu-close-pc {
position: fixed;
z-index: 99; /* フォームより上に配置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s, visibility 0.5s;
}
/* 検索ボタンがチェックされたときに検索フォームを表示 */
#search-menu-input-pc:checked ~ #search-menu-content-pc {
opacity: 1;
visibility: visible;
top: 45%;
}
/* 検索フォーム本体 */
#search-menu-content-pc {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 中央配置 */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, top 0.3s ease, visibility 0.3s ease;
}
#search-menu-content-pc .search-box {
max-width: 500px;
}
/* 閉じるボタン */
.close-btn {
position: absolute;
bottom: -1em; /* フォームの下部に配置 */
left: 50%;
transform: translateX(-50%);
background: none;
border: none;
font-size: 16px;
color: var(--cocoon-white-color);
cursor: pointer;
transition: color 0.3s ease;
}
.close-btn:hover {
color: var(--accent-color); /* ホバー時の色 */
}
/* モバイルボタン---------------------------------------------- */
/*1023px以下*/
@media screen and (max-width: 1023px) {
.mobile-menu-buttons {
box-shadow: none;
align-items: center;
background: transparent;
}
/* アイコン、文字色 */
.mobile-footer-menu-buttons :is(.menu-button >a, .menu-button label):not(.display-none, .menu-close-button) {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
margin: auto;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--main-color);
border-radius: 99px;
box-shadow: inset 0 0 25px #fff;
}
.mobile-menu-buttons .menu-icon {
font-size: .9em;
}
/* ロゴを左端に寄せる */
.mobile-header-menu-buttons .logo-menu-button {
justify-content: flex-start;
padding-left: 5px;
}
/* ホバー */
.mobile-menu-buttons :is(.menu-button >a, .menu-button label):not(.display-none, .menu-close-button):hover {
animation: fuwafuwa 1s;
}
@keyframes fuwafuwa {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
}
/* モバイルボタンアイコン---------------------------------------------- */
.custom-menu-icon .fas {
height: 1em;
width: 1em;
}
.custom-menu-icon .fa-th-large {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* モバイルサイドバー---------------------------------------------- */
/* 開くときのアニメーション */
#sidebar-menu-input:checked ~ #sidebar-menu-content,
#search-menu-input:checked ~ #search-menu-content {
transition: 0.5s ease-in-out;
}
/* 閉じるときのアニメーション */
.menu-content {
transition: .5s ease-out;
}
/* モバイルサイドバーの幅 */
@media screen and (max-width: 480px) {
.menu-content {
max-width: 90%;
}
}
/* モバイルサイドバーのCLOSEボタン---------------------------------------------- */
.menu-close-button {
position: sticky !important; /* スクロール追従 */
z-index: 9; /* 最前面に指定 */
top: 0px; /* 表示位置 */
display: flex;
flex-direction: column;
backdrop-filter: blur(2px);
}
.menu-close-button::after {
content: "CLOSE";
font-size: 10px;
}
/* この記事を書いた人（横並び）--------------------------------------------- */
.flex-box .micro-balloon {
padding: .5em .8em;
font-size: .9em;
}
.flex-box .wp-block-image img {
max-width: 140px;
margin: auto;
}
/* 配置 */
.flex-box {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
gap: 2em;
}
.flex-box-icon {
flex-basis: 35%;
}
.flex-box-content {
flex-grow: 1;
}
/* 480px以下 */
@media screen and (max-width: 480px) {
.flex-box {
gap: 1em;
flex-direction: column;
align-items: center;
}
.flex-box .wp-block-image img {
max-width: 80px;
}
.flex-box-content {
font-size: .9em;
}
}
/* カバーブロック（カスタム）---------------------------------------------- */
.wp-block-cover.cstm-parallax .wp-block-cover__image-background {
height: 110%; /* 上下の余白防止 */
object-position: center bottom;
transform-origin: bottom;
transform: translateY(0) scale(1.1);
transition: transform 0.2s ease-out;
will-change: transform; /* GPU最適化 */
object-position: 60% center; /* 右から40%の位置を表示 */
}
/* プロフィールボックス---------------------------------------------- */
.author-box {
display: flex;
justify-content: center;
border: none;
margin-bottom: 0 !important;
}
.author-thumb {
float: none;
width: 30%;
}
.author-name a {
text-decoration: none;
color: var(--main-color);
}
.author-box p {
line-height: 1.8;
margin-bottom: 1em;
}
.author-content {
margin-left: 2em;
}
.home .author-content p {
margin-bottom: .5em;
}
/* 768px以下 */
@media screen and (max-width: 768px) {
.author-box {
flex-direction: column;
}
.author-thumb {
margin: 0 auto; /* 中央揃え */
}
.author-box .author-thumb {
width: 100px;
}
.author-box .author-content {
margin-left: 0;
margin-top: 1em;
}
.author-box .author-name {
text-align: center;
}
}
/* サイドバーのプロフィールボックス */
.nwa .author-box {
flex-direction: column;
padding: 1em 0;
}
.nwa .author-box .author-content {
margin-top: 1em;
padding: 0;
}
/* プロフィールボックスのSNSフォローボタン */
.author-box .sns-follow-buttons a.follow-button {
border-color: var(--main-color);
color: var(--main-color);
border-radius: 0;
}
/* 次ページリンク ---------------------------------------------- */
.pagination-next-link {
background-color: transparent;
border: none;
color: var(--main-color);
font-size: 1em;
display: inline-flex; /* テキストと矢印を横に並べる */
align-items: center; /* 垂直中央揃え */
justify-content: center;
}
/* ホバー時のリセット */
.pagination-next-link:hover {
background-color: transparent; /* テーマの背景色をリセット */
color:var(--main-color);
}
/* 矢印 */
.pagination-next-link:after {
content: ''; /* 矢印の描写 */
display: inline-block; /* インライン要素として配置 */
border-bottom: 1px solid var(--main-color); /* 矢印の底辺 */
border-right: 1px solid var(--main-color); /* 矢印の右辺 */
width: 60px; /* 矢印の幅 */
height: 3px; /* 矢印の高さ */
transform: skewX(45deg); /* 矢印の角度 */
margin-left: 8px; /* テキストとの間隔 */
transition: transform 0.3s ease; /* スムーズな移動 */
}
/* ホバー時の矢印移動 */
.pagination-next-link:hover:after {
transform: skewX(45deg) translateX(15px); /* 右に10px移動 */
}
/* ページネーション（番号）---------------------------------------------- */
.page-numbers {
color: var(--main-color);
height: 40px;
width: 40px;
border: none;
box-shadow: 0 1px 1px var(--shadow-color);
line-height: 40px;
border-radius: 0;
font-size: 16px;
}
.pagination a:hover {
background-color: var(--main-color);
color: var(--cocoon-white-color);
transform: translateY(-5px);
box-shadow: 0 5px 5px var(--shadow-color);
}
/* 現在のページ */
.pagination .current {
background-color: var(--main-color);
color: var(--cocoon-white-color);
}
/* 関連記事下ページ送り---------------------------------------------- */
/* 835px以上 */
@media screen and (min-width: 835px) {
.pager-post-navi {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
.prev-post-title,
.next-post-title {
line-height: 1.5;
font-size: 12px;
}
:where(.prev-post-title, .next-post-title):before {
display: block;
font-size: 16px; /* 文字サイズ */
color: var(--main-color);
}
.next-post-title:before {
content: 'Next';
text-align: right;
}
.prev-post-title:before {
content: 'Prev';
}
.pager-post-navi a .iconfont {
color: var(--main-color); /* アイコン */
}
.pager-post-navi a:hover {
background-color: var(--main-light-color);
}
/* カテゴリーラベル---------------------------------------------- */
.cat-label {
position: initial;
background-color: initial;
color: unset;
border: none;
padding: 0;
}
.cat-label:before {
content: "－";
margin-right: 8px;
}
.eye-catch .cat-label {
display: none;
}
/* カテゴリー、タグリンク--------------------------------------------- */
:is(.cat-link, .tag-link) {
padding: .1em .6em 0;
font-size: 11px;
border-radius: 7px;
border: 1px solid var(--main-color);
}
.cat-link {
background-color: var(--main-color);
}
.tag-link {
color: var(--main-color);
}
.tag-link:hover {
color: var(--main-color);
background-color: var(--main-light-color);
}
.tag-link .fa-tag::before {
position: relative;
top: .2em;
}
.entry-tags .tax-icon {
margin-right: 0;
}
/* タグクラウド---------------------------------------------- */
.tagcloud {
gap: 5px;
}
.tagcloud a {
border: none;
border-radius: 0;
font-size: 1em;
padding-left: 0;
}
.tagcloud a .tag-caption {
display: flex;
align-items: center;
}
.tagcloud a .tag-caption .tax-icon {
margin-right: 0.2em;
}
/* ワードプレスのタグクラウド（ブロック）---------------------------------------------- */
.wp-block-tag-cloud a {
display: flex;
font-size: .9em !important; /* 文字のサイズ */
line-height: 1;
margin-right: 0; /* リセット */
padding: .7em .9em;
border-radius: 2px; /* 角を丸くする */
border: none;
color: var(--main-color); /* 文字色 */
background: var(--main-light-color); /* 背景色 */
transition: ease-out .3s; /* アニメーションの指定 */
flex: 1 1 auto;
gap: 3px;
}
/* マウスホバー時の設定 */
.wp-block-tag-cloud a:hover {
background: var(--main-color); /* 背景色 */
color: #fff; /* 文字色 */
}
/* サイトマップ：ハッシュタグ風に「#」を追記 */
.page-id-40131 .wp-block-tag-cloud a:before {
content: "#";
}
/* 404ページ対応 */
.wp-block-tag-cloud span {
margin-left: 0;
display: inline-flex;
gap: 3px;
}
/* SNSシェア・フォローボタン---------------------------------------------- */
.sns-buttons {
justify-content: center;
margin-bottom: 0;
}
.main .sns-buttons a {
width: 30px !important;
height: 30px !important;
margin: 2px;
border-radius: 7px;
opacity: .7;
}
.sns-share-message,
.sns-follow-message {
font-size: .9em;
}
.ss-bottom {
margin-bottom: 200px;
}
/* SNSアイコンサイズ調整(上)---------------------------------------------- */
.sns-share-buttons a .button-caption {
display: none !important;
}
/* ホバー */
.sns-buttons a {
transition: transform 0.3s;
}
.sns-buttons a:hover {
transform: translateY(-4px);
}
/* SNSボタン画面左に固定（トップのみ）*/
/*1023px以上*/
@media screen and (min-width: 1023px) {
.ss-top .sns-share-buttons {
flex-direction: column;
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 1em;
z-index: 999;
}
.ss-top .sns-share-buttons:before {
content: 'SHARE';
font-size: 11px;
}
}
/*834px以下*/
@media screen and (max-width: 834px) {
.ss-top .sns-buttons a {
border: none;
}
}
/* 記事下コメント欄 --------------------------------------------- */
.recent-comments {
padding: 0;
}
/* コメントメタ（日付など） */
.comment-meta a {
font-size: .8em;
text-decoration: none;
}
/* 先頭以外のコメントに区切り線と余白を適用 */
.commets-list > li:not(:first-child) {
border-top: 2px dashed var(--main-sub-color);
margin: 2em 0;
padding-top: 2em;
}
/* 返信スレッド */
.commets-list .children {
border-left: 2px solid var(--main-sub-color); /* 返信ツリーのガイド線 */
padding-left: 1em !important; /* 返信コメントのインデント */
}
/* コメントアバター */
.commets-list .avatar {
float: left; /* 左に回り込み */
border-radius: 50%;
margin-right: 10px;
}
/* コメント吹き出し本体 */
.comment-content {
background-color: var(--main-light-color); /* 吹き出し背景色 */
padding: 1.5em; /* 内側の余白 */
margin: 20px 0 6px; /* 外側の余白（上/左右/下） */
border-radius: 10px; /* 角丸 */
position: relative;
font-size: .9em !important; /* コメント文字サイズ */
}
/* 吹き出しの三角 */
.comment-content::before {
content: "";
position: absolute;
top: -14px; /* 吹き出し本体からの縦位置 */
left: 50px; /* 横位置 */
border-style: solid;
border-color: transparent transparent var(--main-light-color) transparent;
border-width: 0 20px 20px 0; /* 三角サイズ */
}
/* 吹き出し内の段落リセット */
.comment-content p {
margin: 0 !important; /* 余白を削除 */
}
/* コメント返信ボタンの装飾 */
.comment-reply-link {
color: var(--main-color);
background-color: transparent;
padding: 0.4em 1em;
font-size: 0.9em;
border-radius: 7px;
transition: background-color 0.5s, color 0.5s;
}
.comment-reply-link:hover {
background-color: var(--main-light-color);
color: var(--main-color);
}
/* コメント送信ボタン */
input[type=submit] {
background-color: var(--main-color);
border-color: var(--main-color);
color: var(--cocoon-white-color);
border-radius: 30px;
transition: background-color 0.5s, border-color 0.5s, color 0.5s, opacity 0.5s;
}
input[type=submit]:hover {
opacity: 0.6;
}
/* 最近のコメントウィジェット --------------------------------------------- */
/* 全体 */
.recent-comments {
padding: 0;
}
/* アバター */
.recent-comment-avatar .avatar {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 0;
}
/* コメント情報（名前・記事リンク・メタ） */
.recent-comment-author {
line-height: 30px;
}
.recent-comment-info,
.recent-comment-article {
font-size: 1em;
color: var(--main-color);
}
/* 日付 */
.recent-comment-date {
text-align: right;
font-size: 0.75em;
color: #999;
}
/* 記事名（下部リンク）※個別の見た目維持 */
.recent-comment-article {
font-size: 0.8em;
margin-top: 1em;
}
/* 最近のコメント吹き出し */
.recent-comment-content {
padding: 1em;
position: relative;
}
/* 擬似要素 共通（position / border-style / content のみ） */
.recent-comment-content::before,
.recent-comment-content::after {
content: "";
position: absolute;
border-style: solid;
}
/* 外側の三角（枠） */
.recent-comment-content::before {
top: -14px;
left: 32px;
border-color: transparent transparent var(--cocoon-basic-border-color) transparent;
border-width: 0 14px 14px 0;
}
/* 内側の三角（背景） */
.recent-comment-content::after {
top: -12px;
left: 30px;
border-color: transparent transparent var(--cocoon-white-color) transparent;
border-width: 0 20px 20px 0;
}
/* 比較表 ---------------------------------------------- */
.article .compare-box :where(ul, ol, p) {
margin-bottom: 0;
}
/* 比較表全体 */
.compare-box {
display: flex; /* 配置 */
margin: 3em auto;
box-shadow: 0 1px 2px var(--shadow-color);
border-radius: 3px; /* 全体の角丸 */
overflow: hidden; /* 子要素の角丸を綺麗に見せる */
}
/* 左のボックス、右のボックス */
.compare-box :where(.compare-left-wrap, .compare-right-wrap) {
flex: 1 1 50%; /* grow, shrink, basis */
box-sizing: content-box;
}
.compare-box .compare-left-wrap {
border-right: 1px solid #eee;
}
/* 左のタイトル、右のタイトル */
.compare-box :where(.compare-left-head, .compare-right-head) {
display: grid;
place-items: center;
height: 50px; /* 縦幅 */
color: var(--cocoon-white-color); /* 文字色 */
font-weight: bold; /* 文字太さ */
}
/* 左のタイトル */
.compare-box .compare-left-head {
background-color: var(--accent-color); /* 背景色 */
}
/* 右のタイトル */
.compare-box .compare-right-head {
background-color: var(--second-color); /* 背景色 */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box :where(.compare-left, .compare-right) {
padding: 1em 1.5em; /* 余白 */
}
/* スマホで見たとき */
@media screen and (max-width: 600px) {
/* 左のタイトル、右のタイトル */
.compare-box :where(.compare-left-head, .compare-right-head) {
height: 40px; /* 高さ */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box :where(.compare-left, .compare-right) {
padding: 1em; /* 余白 */
font-size: .85em;
}
}
/************************************
箇条書きリスト
************************************/
/* 箇条書き余白調整 --------------------------------------------- */
ul { padding-left: 1.2em; }
ol { padding-left: 1.7em; }
@media screen and (max-width: 834px) {
.article ul,
.article ol:not(.ol-list) {
padding-left: 1.2em;
}
}
ul.has-list-style {
padding: 0; /* アイコンリスト */
}
.article ul li,
.article ol li {
margin: 0; /* 0.2emの余白を消す */
}
/* 1段目ネスト：マーカーあり */
.article ul:not(.timeline) ul,
.article ol ul {
list-style: disc;
}
/* 2段目ネスト：少しインデント、黒丸マーカー */
.article ul ul ul,
.article ol ul ul {
padding-left: 1em;
list-style: disc;
}
/*---------------------------------
リストの行間・余白調整
---------------------------------*/
/* 通常リストのアイテム間スペース（最後のアイテム以外） */
.comment-area ul li:not(:last-of-type),
.article ul:not(.timeline):not(.tab-label-group):not(.mobile-menu-buttons) li:not(:last-of-type),
.article ol li:not(:last-of-type),
.toc ol li:not(:last-of-type) {
padding-bottom: 0.25em;
margin-bottom: 0.25em;
}
/* list-tallクラス適用時、brありは余白を広く */
.article ul.list-tall:not(.timeline):not(.tab-label-group) li:not(:last-of-type),
.article ul:not(.timeline):not(.tab-label-group) li:has(br):not(:last-of-type),
.article ol.list-tall li:not(:last-of-type),
.article ol li:has(br):not(:last-of-type) {
padding-bottom: 0.5em;
margin-bottom: 0.5em;
}
/* ネストされたリスト内の余白（上部） */
.comment-area ul li > ul,
.article li > ul,
.article li > ol,
.toc .toc-list ol {
padding-top: 0.25em;
margin-top: 0.25em;
}
/* timeline内はネストリストの上余白なし */
.timeline .block-box li > ul,
.timeline .block-box li > ol {
padding-top: 0;
margin-top: 0;
}
/*---------------------------------
下線付きリスト（under-lineクラス）
---------------------------------*/
/* 下線（最後の要素も含む） */
.article ul.under-line > li,
.article ol.under-line > li {
border-bottom: 1px dashed var(--cocoon-basic-border-color);
padding-bottom: 1em !important;
margin-bottom: 1em !important;
}
/* block-box内は最後の要素の下線を消す */
.block-box ul.under-line > li:last-of-type,
.block-box ol.under-line > li:last-of-type {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.article .under-line a {
text-decoration: none;
}
/* デフォルトのリストマーカー */
ul > li::marker {
color: var(--accent-color);
}
/* リストマーカー色をボーダー色に合わせる（汎用ボックス） ----------------------------------- */
:where(
[class*="is-style-cstm-label"],
[class*="is-style-cstm-caption"],
[class*="is-style-tab-caption"] ) ul > li::marker {
color: var(--cocoon-custom-border-color);
}
.has-red-border-color ul > li::marker {
color: var(--wp--preset--color--red);
}
.has-pink-border-color ul > li::marker {
color: var(--wp--preset--color--pink); /* ピンク */
}
.has-yellow-border-color ul > li::marker {
color: var(--wp--preset--color--yellow);
}
.has-luminous-vivid-amber-border-color ul > li::marker {
color: var(--wp--preset--color--luminous-vivid-amber); /* 黄色 1 */
}
.has-amber-border-color ul > li::marker {
color: var(--wp--preset--color--amber); /* 黄色 2 */
}
.has-teal-border-color ul > li::marker {
color: var(--wp--preset--color--teal); /* グリーン */
}
.has-green-border-color ul > li::marker {
color: var(--wp--preset--color--green); /* グリーン */
}
.has-dark-grey-border-color ul > li::marker {
color: var(--wp--preset--color--dark-grey); /* グレー */
}
.has-cocoon-white-border-color ul > li::marker {
color: var(--wp--preset--color--cocoon-white); /* 白 */
}
.has-ex-a-border-color ul > li::marker {
color: var(--wp--preset--color--ex-a); /* カスタム1 */
}
.has-ex-b-border-color ul > li::marker {
color: var(--wp--preset--color--ex-b); /* カスタム2 */
}
/* リストスタイル ---------------------------------------------- */
/* アイコンリスト：丸・三角 */
.is-style-icon-list-circle > li::before {
color: var(--accent-color)!important; /* ○ */
}
.is-style-icon-list-triangle > li::before {
color: var(--second-color)!important; /* △ */
}
/* 箇条書きリストを横並びに---------------------------------------------- */
.list-flex {
display: flex;
flex-wrap: wrap;
gap: 0 1.5em;
}
.list-flex a {
text-decoration: none;
border-bottom: 1px dashed var(--cocoon-basic-border-color);
}
/* 箇条書き(番号)---------------------------------------------- */
.toc-list,
.ol-list {
counter-reset: number; /* 番号リセット */
list-style: none; /* 行頭番号削除 */
}
/* 番号リストの行 */
.ol-list > li,
.toc-list > li {
position: relative; /* 配置 */
}
/* 行頭番号 */
.toc-list > li:before,
.ol-list > li:before {
counter-increment: number; /* 番号 */
position: absolute; /* 配置 */
}
.ol-list > li:before {
content: counter(number);
position: absolute;
top: 0.4em;
left: -2em;
width: 1.5em;
height: 1.5em;
line-height: 1.6em;
text-align: center;
font-size: .8em;
font-weight: bold;
border-radius: 50%;
background-color: var(--main-color);
color: var(--cocoon-white-color);
}
/* 四角 ---------------------------------------------- */
.square li:before {
border-radius: 0!important;
}
/* 目次設定---------------------------------------------- */
.main .toc {
padding: 2em 3em 2em;
border: none;
border-top: 4px double var(--main-sub-color);
border-bottom: 4px double var(--main-sub-color);
background: linear-gradient(-45deg, transparent 25%, var(--main-light-color) 25%, var(--main-light-color) 50%, transparent 50%, transparent 75%, var(--main-light-color) 75%, var(--main-light-color));
background-size: 4px 4px;
background-clip: padding-box;
}
/* 480px以下（スマホのみ） */
@media screen and (max-width: 480px) {
.main .toc {
padding: 1.5em 2em 2em;
}
}
/* 目次の番号 */
.toc-list > li:before {
content: counter(number, decimal-leading-zero); /* 入れ子なし、0付加表記 */
top: -.3em; /* 上からの距離 */
left: -1.5em; /* 左からの距離 */
font-size: 1.4em;
color: var(--main-color); /* 番号色 */
}
/* 480px以下 */
@media screen and (max-width: 480px) {
.toc-list > li:before {
top: -.3em; /* 上からの距離 */
}
}
/* セレクタ優先のパディング */
.article .toc .toc-list {
padding-left: 2em;
}
.toc .toc-list ol {
padding-left: 1.2em;
}
/* toc-list 直下の点を消す */
.toc-list > li::marker {
content: none;
}
/* .toc-list 直下の li だけ太字に */
.toc-list > li > a {
font-weight: bold;
color: var(--main-color);
}
/* ネストした番号の色 */
.toc-list ol > li::marker {
color: var(--accent-color);
}
/* ネストリストがある場合の余白調整 */
.toc .toc-list > li:has(> ol, > ul) {
margin-bottom: 1em;
padding-bottom: 0;
}
/* 目次のスタイル設定（番号リスト） */
.toc-list ol {
position: relative;
}
/* 目次の線（左側） */
.toc-list ol:before {
content: "";
height: 100%;
width: 1px;
left: -1.3em;
position: absolute;
background-color: var(--main-color);
opacity: .5;
}
/* サイドバー目次追従---------------------------------------------- */
.toc-widget-box {
overflow-y: auto; /* 縦方向スクロールを設置 */
max-height: calc(100vh - 300px); /* 目次の高さ上限 */
line-height: 1.8;
}
/* サイドバー目次タイトル非表示 */
.widget .toc .toc-title {
display: none;
}
/* 目次の「続きを読む」ボタンのスタイル */
.toc .fold-link {
display: block;
margin: 0 auto;
padding: .3em 1em;
text-align: center;
color: var(--main-color);
border: 1px solid var(--main-sub-color);
border-radius: 40px;
background: var(--main-light-color);
width: 10em;
transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
.toc .fold-link:hover {
color: var(--cocoon-white-color);
background-color: var(--main-color);
border-color: var(--main-color);
text-decoration: none;
}
/************************************
Cocoonボックス
************************************/
/* 表｜テーブルスタイル調整 ---------------------------------------------- */
.wp-block-flexible-table-block-table {
overflow-x: auto;
}
@media screen and (min-width: 835px) {
table th,
table td {
font-size: 0.9em;
}
}
table a {
text-decoration: none;
}
.table-bold table td:first-child {
font-weight: bold; /* 一列目太字 */
}
.table-center table td,
.table-center.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table tr td,
table th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table tr th {
text-align: center; /* 中央寄せ */
}
/* セルのスタイル */
.wp-block-table td,
.wp-block-table th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table tr th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table tr td {
padding: 0.8em 1em;
white-space: normal !important; /* 改行あり */
min-width: 100px !important;
}
/* 枠線の色 */
table:not(.has-border-color) :where(th, td),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table tr th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table tr td {
border-color: var(--cocoon-basic-border-color);
}
/* 見出し */
.scrollable-table th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table tr th {
background-color: var(--main-sub-color);
color: var(--main-color);
}
/* スタイル｜ストライプ ---------------------------------------------- */
:is(.wp-block-table, .wp-block-flexible-table-block-table):is(.is-style-stripes, .is-style-table-no-vertical, .is-style-table-no-side-border).wp-block-flexible-table-block-table table :where(th, td) {
border: none; /* 全ボーダー削除 */
}
table tr:nth-of-type(2n+1),
.wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(odd) td {
background-color: var(--cocoon-white-color); /* 奇数行の背景 */
}
.wp-block-table.is-style-stripes tbody tr:nth-child(even),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(even) td {
background-color: var(--main-light-color); /* 偶数行の背景 */
}
/* スタイル｜縦線なし ---------------------------------------------- */
:is(.wp-block-table, .wp-block-flexible-table-block-table).is-style-table-no-vertical.wp-block-flexible-table-block-table table td {
border-bottom: 1px solid var(--cocoon-basic-border-color); /* 下線のみ追加 */
}
/* thead が *ない* テーブルに上線を追加 */
:is(.wp-block-table, .wp-block-flexible-table-block-table).is-style-table-no-vertical:not(:has(thead)) table tr:first-child td {
border-top: 1px solid var(--cocoon-basic-border-color);
}
/* スタイル｜左右縦線なし ---------------------------------------------- */
:is(.wp-block-table, .wp-block-flexible-table-block-table).is-style-table-no-side-border.wp-block-flexible-table-block-table table :where(th, td):not(:last-child) {
border-right: 1px solid var(--cocoon-basic-border-color);
}
:is(.wp-block-table, .wp-block-flexible-table-block-table).is-style-table-no-side-border.wp-block-flexible-table-block-table table :where(th, td) {
border-bottom: 1px solid var(--cocoon-basic-border-color);
}
/* テーブル記号 ---------------------------------------------- */
.s-circle:before,
.d-circle:before,
.triangle:before,
.cross:before,
.b-check:before,
.b-question:before,
.b-none:before {
height: 2.5em;
width: 2.5em;
opacity: 0.4;
}
.s-circle:before {
background-color: var(--cocoon-red-color);
} /* 〇 */
.cross:before {
background-color: var(--cocoon-blue-color);
} /* × */
/* インラインボタンサイズ調整 ---------------------------------------------- */
@media screen and (max-width: 834px) {
[class*="inline-button-"] {
font-size: 1em;
}
}
/* テーブル内のリスト ---------------------------------------------- */
table ol > li,
table ul > li {
padding-bottom: 0 !important;
}
/* スクロールヒント（表） ---------------------------------------------- */
.entry-content .is-scrollable:before {
content: 'スクロールできます→';
display: block;
top: 0;
left: 0;
margin: 0;
position: sticky;
text-align: right;
font-size: 0.8em;
animation: scroll-right 1s infinite alternate ease-in-out;
}
.scroll-hint-icon-wrap {
display: none;
}
@keyframes scroll-right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-5px);
}
}
/* 一列目固定（特定表のみ） */
.table-fixed th:first-child,
.table-fixed td:first-child {
position: sticky;
left: 0;
z-index: 2;
font-weight: bold;
}
/* tbodyのtdだけ背景白 */
.table-fixed tbody td:first-child {
background-color: var(--cocoon-white-color);
}
/*--------------------------------------
白抜きボックス共通設定
----------------------------------------*/
/* 全スタイル共通：余白 */
.blank-box[class*="is-style-cstm-blank-"] {
padding:2em;
}
/*--------------------------------------
共通の角丸設定
----------------------------------------*/
/* 角丸なし（直角）スタイル */
.blank-box:is(
.is-style-cstm-blank-double,
.is-style-cstm-blank-solid-thin,
.is-style-cstm-blank-solid-bold,
.is-style-cstm-blank-dashed-thin,
.is-style-cstm-blank-dashed-bold,
.is-style-cstm-blank-shadow,
.is-style-cstm-blank-stitch,
.is-style-cstm-blank-stitch-white,
.is-style-cstm-blank-dotted-bold,
.is-style-cstm-blank-sticky-top,
.is-style-cstm-blank-sticky-left,
.is-style-cstm-blank-stripe,
.is-style-cstm-blank-grid,
.is-style-cstm-blank-paper,
.is-style-cstm-blank-note
) {
border-radius: 0;
}
/*--------------------------------------
各スタイル定義
----------------------------------------*/
/* 二重線（太枠） */
.blank-box.is-style-cstm-blank-double {
border: 4px double;
}
/* 実線（細線） */
.blank-box.is-style-cstm-blank-solid-thin {
border-width: 1px;
}
/* 実線（太線） */
.blank-box.is-style-cstm-blank-solid-bold {
border-width: 4px;
}
/* 破線（細線） */
.blank-box.is-style-cstm-blank-dashed-thin {
border: 1px dashed;
}
/* 破線（太線） */
.blank-box.is-style-cstm-blank-dashed-bold {
border: 2px dashed;
}
/* 影の枠 */
.is-style-cstm-blank-shadow {
border:none;
box-shadow:1px 1px 3px rgb(0 0 0 / .3);
}
/* ドット線（細線・角丸あり） */
.blank-box.is-style-cstm-blank-dotted-thin {
border: 1px dotted;
border-radius: 20px;
}
/* 付箋風（上枠のみ・背景色あり） */
.blank-box.is-style-cstm-blank-sticky-top {
border-width: 3px 0 0 0;
background-color: #fafafa;
}
/* 付箋風（左枠のみ・背景色あり） */
.blank-box.is-style-cstm-blank-sticky-left {
border-width: 0 0 0 4px;
background-color: #fafafa;
}
/* ストライプ背景 */
.blank-box.is-style-cstm-blank-stripe {
border: 0;
background: repeating-linear-gradient(
-45deg,
#f8f8f8 0,
#f8f8f8 3px,
transparent 3px,
transparent 6px
);
}
/* 方眼（チェック柄）背景 */
.blank-box.is-style-cstm-blank-grid {
border: 0;
background:
linear-gradient(0deg, transparent 19px, #ddd 20px),
linear-gradient(90deg, transparent 19px, #ddd 20px);
background-size: 20px 20px;
}
/* 紙風（右上折り返し効果・背景色あり） */
.blank-box.is-style-cstm-blank-paper {
border: 0;
position: relative;
background-color: #fafafa;
padding: 2em;
}
.blank-box.is-style-cstm-blank-paper::after {
content: '';
position: absolute;
top: 0;
right: 0;
border: solid;
border-width: 0 20px 20px 0;
border-color: #ccc #fff #ccc;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
/* ノート風（背景色＋ドット線） */
.blank-box.is-style-cstm-blank-note {
border: 0;
position: relative;
background: #efeeed; /* 淡いグレー背景 */
padding: 2.5em 2.5em 2em;
}
/* 擬似要素：ドット線 */
.blank-box.is-style-cstm-blank-note::before {
content: '';
position: absolute;
inset: 0.5em 0 0 0; /* 上から0.5em */
margin: 0 auto;
width: 95%;
border-top: dotted 10px #fff; /* 太めの白ドット線 */
pointer-events: none;
}
/* ステッチ */
.blank-box[class*="is-style-cstm-blank-stitch"] {
border:none;
position:relative;
}
.blank-box[class*="is-style-cstm-blank-stitch"]:before {
border-radius: 6px;
content: "";
display: block;
position: absolute;
height: calc(100% - 10px);
left: 5px;
top: 5px;
width: calc(100% - 10px);
pointer-events: none;
box-sizing: border-box;
}
.blank-box.is-style-cstm-blank-stitch {
background-color: #f7f7f7;
}
.blank-box.is-style-cstm-blank-stitch:before{
border: 1px dashed #ccc;
}
.blank-box.is-style-cstm-blank-stitch-white {
background-color: #efeeed;
}
.blank-box.is-style-cstm-blank-stitch-white:before {
border: 1px dashed #fff;
}
/* 480px以下 */
@media screen and (max-width: 480px) {
.blank-box.is-style-cstm-blank-note {
padding: 2.5em 2em 2em;
}
}
/*--------------------------------------
アイコンボックスカスタマイズ
----------------------------------------*/
/* アイコン変更：メモアイコン */
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-"].memo-box::before {
content: "\f304"; /* FontAwesomeメモアイコン */
}
/* 四角スタイル（枠あり・枠なし・背景透明） */
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-"]:not([class*="circle"]) {
border-radius: 0;
padding: 1.2em 1.5em 1.2em 4em;
}
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-"]:not([class*="circle"])::before {
font-size: 1em;
padding: 0;
left:5px;
}
/* 枠あり・背景透明 */
body .wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-outline,
body .wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-circle-outline {
border-width: 1px;
background-color: transparent;
}
/* 枠なし */
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-borderless,
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-circle-bg {
border-width: 0;
box-shadow: 1px 1px 1px rgb(0 0 0 / 0.1);
}
/* 部分枠スタイル */
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-top-border,
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-left-border {
border-width: 4px;
}
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-top-border {
border-right: none;
border-left: none;
border-bottom: none;
}
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-left-border {
border-top: none;
border-right: none;
border-bottom: none;
}
/* 丸アイコンスタイル */
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-circle-"] {
padding: 2em;
}
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-circle-"]::before {
display: grid;
place-content: center;
margin: 0;
padding: 0;
width: 2em;
height: 2em;
border-radius: 50%;
font-size: 0.9em;
color: #fff;
box-shadow: 0 0 0 2px #fff;
top: -1em;
left: 0.75em;
}
/* アイコン背景色（種類別） */
.information-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #87cefa; }
.question-box[class*="is-style-cstm-icon-circle-"]::before { background-color: gold; }
.alert-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #f3aca9; }
.memo-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #7ad0b6; }
.comment-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #999; }
.ok-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #3cb2cc; }
.ng-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #dd5454; }
.good-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #98e093; }
.bad-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #eb6980; }
.profile-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #999; }
/* コメント・プロフィール共通背景 */
.comment-box[class*="is-style-cstm-icon-"],
.profile-box[class*="is-style-cstm-icon-"] {
background-color: #f8f8f8;
border-color: #aaa;
}
/* モバイル対応（480px以下） */
@media screen and (max-width: 480px) {
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-"]:not([class*="circle"]) {
padding: 1em 1.5em 1em 3.5em;
}
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-top-border,
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-left-border {
padding: 1em 1.5em 1em 3em;
}
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-"]:not([class*="circle"])::before {
top: 50%;
width: 35px;
margin-left: 0;
}
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-outline::before,
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-borderless::before,
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-bordered::before {
border-right: 1px solid;
}
}
/* 見出しボックス ---------------------------------------------- */
/* 共通 */
[class*="is-style-cstm-caption"] .caption-box-label {
justify-content: center; /* 中央寄せ */
font-weight:bold;
padding:0.5em;
}
[class*="is-style-cstm-caption"] .caption-box-content {
padding: 2em; /* 内側余白 */
}
.caption-box[class*="is-style-cstm-caption"][class*="-square"] {
border-radius:0; /* 四角 */
}
.caption-box[class*="is-style-cstm-caption"][class*="-rounded"] {
border-radius: var(--cocoon-middle-border-radius); /* 角丸 */
overflow: hidden; /* 子要素のはみ出しを防ぐ */
}
[class*="is-style-cstm-caption"][class*="-rounded"] .caption-box-label {
border-radius: 0; /* 子要素側では角丸をリセット */
}
/* シンプルスタイル */
.caption-box[class*="is-style-cstm-caption-simple"] {
border-width:1px;
}
/* 影付きスタイル */
.caption-box[class*="is-style-cstm-caption-shadow"] {
border: none;
box-shadow: 0 0px 2px rgba(0,0,0,0.2),0 2px 3px rgba(0,0,0,0.1);
}
/* テープ風（影付きベース） */
.caption-box[class*="is-style-cstm-caption-shadow"][class*="-tape"] {
position: relative;
margin-top: 4em;
}
.caption-box[class*="is-style-cstm-caption-shadow"][class*="-tape"] .caption-box-label {
position: absolute;
top: -1.4em;
left: 50%;
transform: translateX(-50%);
width: 85%;
padding: 0.5em 1em;
z-index: 2; /* ← コンテンツより前面に */
overflow: hidden; /* はみ出しを隠す */
}
.caption-box[class*="is-style-cstm-caption-shadow"][class*="-tape"] .caption-box-label-text {
display: inline-block; /* インライン要素をブロック扱いに */
max-width: 100%; /* 親の幅に収まるように */
white-space: nowrap; /* 折り返さない */
overflow: hidden; /* はみ出しを隠す */
text-overflow: ellipsis; /* はみ出し時に「…」を表示 */
vertical-align: bottom; /* 見た目を安定させる */
}
.caption-box[class*="is-style-cstm-caption-shadow"][class*="-tape"] .caption-box-content {
position: relative; /* 重なり順制御のために追加 */
z-index: 1; /* ← 背景より前、ラベルより後 */
padding-top: 3.5em;
}
/* マスキングテープ風 */
.caption-box[class*="is-style-cstm-caption-shadow"][class*="-tapestripe"]
.caption-box-label::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(-45deg, #fff 0 6px, transparent 6px 12px);
opacity: 0.1;
z-index: 0; /* 背景層 */
pointer-events: none; /* ←クリックや選択をブロックしない */
}
/*480px以下*/
@media screen and (max-width: 480px){
[class*="is-style-cstm-caption"] .caption-box-content {
padding: 2em 1.5em; /* 内側余白 */
}
}
/* コメント欄の見出しボックス */
.comment-area .caption-box {
border-radius:0;
border-width:1px;
}
.comment-area .caption-box-label {
justify-content: center; /* 中央寄せ */
font-weight:bold;
padding:0.5em;
}
.comment-area .caption-box-content {
padding: 1.5em; /* 内側余白 */
}
/*--------------------------------------
ラベルボックス 共通設定
----------------------------------------*/
/* 共通スタイル */
.label-box[class*="is-style-cstm-label"] {
position: relative; /* 子要素を配置する際の基準点 */
}
/* ラベル */
.label-box[class*="is-style-cstm-label"] .label-box-label {
text-shadow: none;
display: flex; /* 横並び */
overflow: hidden; /* はみ出し隠す */
max-width: 85%;
}
.label-box[class*="is-style-cstm-label"] .label-box-label-text {
flex: 1; /* 残り幅を使用 */
min-width: 0; /* 省略条件に必要 */
white-space: nowrap; /* 改行なし */
overflow: hidden; /* はみ出しを隠す */
text-overflow: ellipsis; /* 省略記号 (…) 表示 */
}
.label-box[class*="is-style-cstm-label"] .label-box-content {
margin-top: 0; /* 上の余白をリセット */
border-width: 1px; /* 枠線の幅を設定 */
color: var(--cocoon-text-color) !important; /* テキストの色を設定 */
}
/* 角型ラベルの丸み */
.is-style-cstm-label-out-square .label-box-content,
.is-style-cstm-label-in-square .label-box-content,
.is-style-cstm-label-icon-square .label-box-content {
border-radius: 0;
}
/*--------------------------------------
ラベルアウト
----------------------------------------*/
.is-style-cstm-label-out-square .label-box-label,
.is-style-cstm-label-out-round .label-box-label {
position: absolute;
top: -0.8em;
padding: 0 0.5em;
background-color: var(--cocoon-white-color);
}
.is-style-cstm-label-out-square .label-box-content,
.is-style-cstm-label-out-round .label-box-content {
padding: 2em;
background-color: var(--cocoon-white-color)!important;
}
/* 834px以下 */
@media screen and (max-width: 834px){
.is-style-cstm-label-out-square .label-box-content,
.is-style-cstm-label-out-round .label-box-content { padding:1.5em;}
}
/*--------------------------------------
ラベルイン
----------------------------------------*/
.is-style-cstm-label-in-square .label-box-label,
.is-style-cstm-label-in-round .label-box-label {
position: absolute;
top: 1.5em;
left: 2em;
padding: 0;
margin: 0;
font-size:1em;
}
.is-style-cstm-label-in-square .label-box-content,
.is-style-cstm-label-in-round .label-box-content {
padding: 3.5em 2em 1.5em;
}
/*--------------------------------------
アイコンラベル
----------------------------------------*/
.is-style-cstm-label-icon-square .label-box-label,
.is-style-cstm-label-icon-round .label-box-label {
display: grid;
place-content: center;
height: 100%;
position: absolute;
top: 0;
margin: 0;
padding: 0 0.5em;
font-size: 1em;
}
.is-style-cstm-label-icon-square .label-box-label:before,
.is-style-cstm-label-icon-round .label-box-label:before {
border-right: 1px solid var(--cocoon-custom-border-color);
color: var(--cocoon-custom-border-color);
line-height: 1em;
text-align: center;
width: 2.5em;
margin: 0;
}
.is-style-cstm-label-icon-square .label-box-label-text,
.is-style-cstm-label-icon-round .label-box-label-text {
display: none;
}
.is-style-cstm-label-icon-square .label-box-content,
.is-style-cstm-label-icon-round .label-box-content {
padding: 1.5em 1.5em 1.5em 4em;
}
/* SVGアイコン用修正コード-------------------------------------------------------- */
[class*="-cstm-label-icon"] .label-box-label {
display: inline-flex;
}
/*アイコン右側に線を追加*/
[class*="-cstm-label-icon"] .label-box-label::after {
content: '';
display: inline-block;
width: 1px;
height: 1em;
background-color: var(--cocoon-custom-border-color);
}
[class*="-cstm-label-icon"] .label-box-label:before {
margin:-1px; /* 外側余白（0→調整） */
}
/* ---------------------------------------------------------
タブ見出しボックスのスタイル
--------------------------------------------------------- */
/* 共通：position基準 */
[class*="is-style-tab-caption-inside"].tab-caption-box,
[class*="is-style-tab-caption-overlap"].tab-caption-box,
[class*="is-style-tab-caption-icon"].tab-caption-box {
position: relative;
}
[class*="is-style-tab-caption-inside"] .tab-caption-box-label,
[class*="is-style-tab-caption-overlap"] .tab-caption-box-label,
[class*="is-style-tab-caption-icon"] .tab-caption-box-label {
position: absolute;
}
/* 共通：box-content */
[class*="is-style-tab-caption"] .tab-caption-box-content {
border-width: 1px;
}
/* 共通：ラベル太字 */
[class*="is-style-tab-caption"] .tab-caption-box-label {
font-weight: bold;
}
/* ---------------------------------------------------------
枠外
--------------------------------------------------------- */
.is-style-tab-caption-outside .tab-caption-box-content {
padding: 1.5em 2em;
margin-top: -1px;
border-radius: 0;
}
.is-style-tab-caption-outside .tab-caption-box-label {
padding: 0 1em;
border-radius: 2px 2px 0 0;
}
/* ---------------------------------------------------------
枠内
--------------------------------------------------------- */
.is-style-tab-caption-inside .tab-caption-box-content {
padding: 2.5em 2em 1.5em;
border-radius: 0;
}
.is-style-tab-caption-inside .tab-caption-box-label {
padding: 0 1em;
border-radius: 0 0 1px 0;
top: 0;
left: 0;
}
/* ---------------------------------------------------------
枠上（重ね / 丸吹き出し）
--------------------------------------------------------- */
[class*="is-style-tab-caption-overlap"] .tab-caption-box-label {
top: -0.8em;
left: 1em;
}
.is-style-tab-caption-overlap .tab-caption-box-content {
padding: 2em 2.5em;
border-radius: 3px;
}
.is-style-tab-caption-overlap .tab-caption-box-label {
padding: 0 1em;
border-radius: 3px;
}
/* 丸吹き出し */
.is-style-tab-caption-overlap-round .tab-caption-box-content {
padding: 3em;
border-radius: 3px;
}
.is-style-tab-caption-overlap-round .tab-caption-box-label {
padding: 0.1em 1.2em;
border-radius: 30px;
}
/* 吹き出しの三角形 */
.is-style-tab-caption-overlap-round .tab-caption-box-label:after {
background-color: var(--cocoon-custom-border-color);
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
position: absolute;
top: calc(100% - 1px);
left: 50%;
transform: translateX(-50%);
height: 8px;
width: 14px;
}
/* ---------------------------------------------------------
テープ風
--------------------------------------------------------- */
.is-style-tab-caption-overlap-tape .tab-caption-box-content {
padding: 2em;
border-radius: 0;
border-width: 0;
box-shadow: 0 0px 2px rgba(0,0,0,0.2), 0 2px 3px rgba(0,0,0,0.1);
}
.is-style-tab-caption-overlap-tape .tab-caption-box-label {
padding: 0 1em;
border-radius: 1px;
z-index:1;
}
.is-style-tab-caption-overlap-tape .tab-caption-box-label::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(-45deg, #fff 0 4px, transparent 4px 8px);
opacity: 0.1;
z-index: 0; /* 背景層 */
pointer-events: none; /* クリックや選択をブロックしない */
}
/* ---------------------------------------------------------
幅広
--------------------------------------------------------- */
.is-style-tab-caption-wide .tab-caption-box-content {
padding: 1.5em 2em 1.5em;
border-radius: 0;
}
.is-style-tab-caption-wide .tab-caption-box-label {
padding: 0.5em 1em;
border-radius: 0;
width: 100%;
text-align: center;
}
/* ---------------------------------------------------------
アイコン共通（円/バー）
--------------------------------------------------------- */
.is-style-tab-caption-icon-circle .tab-caption-box-label,
.is-style-tab-caption-icon-bar .tab-caption-box-label {
display: grid;
place-content: center;
line-height: 2em;
}
.is-style-tab-caption-icon-circle .tab-caption-box-label::before,
.is-style-tab-caption-icon-bar .tab-caption-box-label::before {
margin-right: 0;
}
.is-style-tab-caption-icon-circle .tab-caption-box-label-text,
.is-style-tab-caption-icon-bar .tab-caption-box-label-text {
display: none;
}
/* アイコン（円） */
.is-style-tab-caption-icon-circle .tab-caption-box-content {
padding: 3em;
border-radius: 4px;
border-width: 2px;
}
.is-style-tab-caption-icon-circle .tab-caption-box-label {
width: 2em;
height: 2em;
padding: 0;
border-radius: 99px;
top: -0.9em;
left: 0.75em;
box-shadow: 0 0 0 2px;
font-size: 1em;
}
/* アイコン（縦バー） */
.is-style-tab-caption-icon-bar .tab-caption-box-content {
padding: 1.5em 1.5em 1.5em 3.5em;
border-radius: 0;
}
.is-style-tab-caption-icon-bar .tab-caption-box-label {
padding: 0;
border-radius: 0;
top: 0;
left: 0;
height: 100%;
width: 2.2em;
}
/* ---------------------------------------------------------
480px以下
--------------------------------------------------------- */
@media screen and (max-width: 480px) {
.is-style-tab-caption-outside .tab-caption-box-content,
.is-style-tab-caption-wide .tab-caption-box-content,
.is-style-tab-caption-icon-circle .tab-caption-box-content {
padding: 2em;
}
.is-style-tab-caption-overlap-round .tab-caption-box-content {
padding: 3em 2em 2em;
}
.is-style-tab-caption-inside .tab-caption-box-content {
padding: 2.5em 1.5em 1.5em;
}
.is-style-tab-caption-overlap .tab-caption-box-content {
padding: 2em 1.5em 1.5em;
}
.is-style-tab-caption-icon-bar .tab-caption-box-content {
padding: 1em 1.5em 1em 3em;
}
}
/* ---------------------------------------------------------
ラベルテキストの省略（三点リーダー）
※ アイコン系以外に適用
--------------------------------------------------------- */
.is-style-tab-caption-outside .tab-caption-box-label,
.is-style-tab-caption-inside .tab-caption-box-label,
[class*="is-style-tab-caption-overlap"] .tab-caption-box-label {
display: flex;
max-width: calc(100% - 2em);
}
.is-style-tab-caption-outside .tab-caption-box-label-text,
.is-style-tab-caption-inside .tab-caption-box-label-text,
[class*="is-style-tab-caption-overlap"] .tab-caption-box-label-text {
min-width: 0;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.is-style-tab-caption-outside .tab-caption-box-label::before,
.is-style-tab-caption-inside .tab-caption-box-label::before,
[class*="is-style-tab-caption-overlap"] .tab-caption-box-label::before {
flex-shrink: 0;
}
/* タブブロックのスタイル ---------------------------------------------- */
/* タブラベル共通 */
[class*="is-style-cstm-tab-"] .tab-label-group .tab-label {
padding: 0.6em 1.5em;
text-align: center;
border-radius: 0;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
/* タブ幅均等配置（grid / wrap） */
[class*="is-style-cstm-tab-grid-"] .tab-label-group .tab-label,
[class*="is-style-cstm-tab-wrap-"] .tab-label-group .tab-label {
flex: 1;
}
[class*="is-style-cstm-tab-"] .tab-label-group{
font-size:.9em;
}
/* タブ折り返し（wrap） */
[class*="is-style-cstm-tab-wrap-"] .tab-label-group {
flex-wrap: wrap;
}
/* 吹き出しタブ */
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-label-group {
gap: 7px 3px;
padding-bottom: 1em;
}
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-label-group .tab-label {
position: relative;
}
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-label-group .tab-label.is-active:after {
background-color: var(--cocoon-tab-label-active-color);
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
top: calc(100% - 1px);
height: 8px;
width: 15px;
}
/* 下線タブ */
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-label-group .tab-label {
background: none;
border-bottom: 2px solid var(--cocoon-tab-label-color);
}
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-label-group .tab-label.is-active {
background: none;
border-color: var(--cocoon-tab-label-active-color);
color: var(--cocoon-tab-label-active-color);
}
/* ホバー時の設定 */
[class*="is-style-cstm-tab-"]:not([class*="-underline"]) .tab-label-group .tab-label:hover {
background-color: var(--cocoon-tab-label-active-color);
color: var(--cocoon-white-color);
}
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-label-group .tab-label:hover {
border-color: var(--cocoon-tab-label-active-color);
color: var(--cocoon-tab-label-active-color);
}
/* コンテンツ部分（simple / bubble / underline 共通） */
[class*="is-style-cstm-tab-"][class*="-simple"] .tab-content-group,
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-content-group,
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-content-group {
border: none;
padding: 1.2em 0;
}
/* コンテンツ部分（frame） */
[class*="is-style-cstm-tab-"][class*="-frame"] .tab-content-group {
border-radius: 0;
}
[class*="is-style-cstm-tab-"][class*="-frame"] .tab-label-group {
gap: 0;
}
/* コメント欄ブログカード調整 --------------------------------------------- */
.comment-content .blogcard-wrap {
width: 100%;
}
.comment-content .blogcard-wrap.a-wrap:hover {
background-color: var(--cocoon-white-color);
}
.comment-content .blogcard-footer {
display: none;
}
/* ----------------------------------------------------------
ブログカードカスタムスタイル
---------------------------------------------------------- */
/* ---------------------------
共通スタイル
--------------------------- */
/* カードスタイル */
[class*="is-style-cstmcard-"] .blogcard {
border: 1px solid var(--cocoon-basic-border-color);
border-radius: 0;
padding: 1em; /* 内側余白 */
position: relative; /* Moreボタンの配置 */
}
[class*="is-style-cstmcard-"] .blogcard-wrap.a-wrap,
[class*="is-style-cstmcard-"] .blogcard-wrap.a-wrap:hover {
background-color: var(--cocoon-white-color);
}
[class*="is-style-cstmcard-"] .blogcard-wrap {
width: 100%;
}
[class*="is-style-cstmcard-"]:not(.is-style-cstmcard-textlink) .blogcard-wrap:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ホバー時の影（テキストリンク以外） */
transform: translateY(-1px);
}
/* ラベルスタイル */
[class*="is-style-cstmcard-"] .blogcard-label {
position: absolute;
top: -11px;
font-size: 0.7em;
color: #666;
background-color: #fff;
}
[class*="is-style-cstmcard-"] .blogcard-title {
font-size: 0.95em;
}
/* ---------------------------
タイトル下の余白
--------------------------- */
[class*="is-style-cstmcard-"] .blogcard-title {
margin-bottom: 0.2em;
}
.is-style-cstmcard-img-footer-excerpt .blogcard-title,
.is-style-cstmcard-textlink .blogcard-title,
.is-style-cstmcard-vertical-footer-excerpt .blogcard-title {
margin-bottom: 0;
}
/* ---------------------------
タイトル行数制限
--------------------------- */
[class*="is-style-cstmcard-"] .blogcard-title,
[class*="is-style-cstmcard-"] .blogcard-snippet {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.is-style-cstmcard-textlink .blogcard-title,
.is-style-cstmcard-footer-excerpt .blogcard-title,
.is-style-cstmcard-img-footer-excerpt .blogcard-title {
-webkit-line-clamp: 4;
}
/* ---------------------------
フッター非表示
--------------------------- */
[class*="is-style-cstmcard"][class*="-footer"] .blogcard-footer,
[class*="cstmcard-textlink"] .blogcard-footer {
display: none;
}
/* ---------------------------
スニペット非表示（画像なし・Read Moreボタン系）
--------------------------- */
[class*="is-style-cstmcard"][class*="-excerpt"] .blogcard-snippet,
[class*="cstmcard-textlink"] .blogcard-snippet {
display: none;
}
/* ---------------------------
画像なしカード
--------------------------- */
[class*="cstmcard-img"] .blogcard {
padding: 1.5em;
}
[class*="cstmcard-img"] .blogcard-thumbnail,
[class*="cstmcard-textlink"] .blogcard-thumbnail {
display: none;
}
[class*="cstmcard-img"] .blogcard-content,
[class*="cstmcard-textlink"] .blogcard-content {
margin-left: 0;
min-height: unset;
}
/* ---------------------------
テキストリンクカード
--------------------------- */
.is-style-cstmcard-textlink .a-wrap.blogcard-wrap {
display: flex;
width: 100%;
background-color: transparent;
}
.is-style-cstmcard-textlink .blogcard {
border-width: 0;
padding: 0;
}
.is-style-cstmcard-textlink .blogcard-label {
display: none;
}
.is-style-cstmcard-textlink .blogcard-title:hover {
text-decoration: underline;
}
.is-style-cstmcard-textlink .blogcard-content {
display: flex;
align-items: flex-start;
}
.is-style-cstmcard-textlink .blogcard-content::before {
font-family: "Font Awesome 5 Free";
content: "\f0c1"; /* アイコン */
font-weight: bold;
margin-right: 5px;
color: var(--cocoon-blue-color,#677593);
}
@media screen and (max-width: 834px) {
.is-style-cstmcard-textlink .blogcard-title {
font-size: 1em;
}
.is-style-cstmcard-textlink .blogcard-content {
line-height:1.6;
}
}
/* ---------------------------
縦型カード
--------------------------- */
[class*="is-style-cstmcard-vertical"] .blogcard-wrap {
max-width: 240px; /* カード最大幅 */
}
[class*="is-style-cstmcard-vertical"] .blogcard {
display: flex;
flex-direction: column;
}
[class*="is-style-cstmcard-vertical"] .blogcard-content {
margin-left: 0;
line-height: 1.6;
}
[class*="is-style-cstmcard-vertical"] .blogcard-thumbnail {
float: none;
margin: 0 0 5px 0;
width: 100%;
}
.is-style-cstmcard-vertical-footer-excerpt .blogcard-content {
min-height: unset; /* 最小高リセット */
}
/* ---------------------------
Read Moreボタン
--------------------------- */
[class*="is-style-cstmcard"][class*="-more"] .blogcard::after {
content: 'Read More';
display: inline-block;
background-color: var(--main-color); /* ボタンの背景色 */
color: #fff;
font-size: 12px;
border-radius: 2px;
z-index: 1;
transition: opacity 0.2s ease;
}
[class*="is-style-cstmcard"][class*="-more"] .blogcard-wrap:hover .blogcard::after {
opacity: 0.8;
}
/* 横型ボタン配置 */
[class*="is-style-cstmcard"][class*="-more-1"] .blogcard::after {
position: absolute;
bottom: 1rem;
right: 1rem;
padding: 0.3em 2em;
}
/* 縦型ボタン配置 */
[class*="is-style-cstmcard"][class*="-more-2"] .blogcard::after {
text-align: center;
padding: 0.3em 0;
}
[class*="is-style-cstmcard"][class*="-more-2"] .blogcard-content {
min-height: 60px;
}
/* ---------------------------
ブロックボックス内での調整
--------------------------- */
.block-box:not(.timeline-box) [class*="is-style-cstmcard-"] .a-wrap.blogcard-wrap:hover {
box-shadow: none;
}
.block-box:not(.timeline-box) [class*="is-style-cstmcard-"] .blogcard {
border-width: 0;
padding: 0;
}
.block-box:not(.timeline-box) [class*="is-style-cstmcard-"] .blogcard-label {
display: none;
}
.block-box:not(.timeline-box) [class*="is-style-cstmcard-"] .blogcard::after {
bottom: 0;
right: 0;
}
.block-box:not(.timeline-box) [class*="is-style-cstmcard-"] .blogcard-thumbnail {
margin-top:0;
}
/* ブログカードホバー（サムネ画像ホバー暗転）*/
.block-box:not(.timeline-box) [class*="is-style-cstmcard-"] .blogcard-thumbnail img {
transition: filter 0.5s ease;
}
.block-box:not(.timeline-box) [class*="is-style-cstmcard-"] .a-wrap.blogcard-wrap:hover .blogcard-thumbnail img {
filter: brightness(80%);
}
/* 追加用：ブログカードのアイコン変更 */
.bct-related .blogcard-label .fa::before,/*関連記事*/
.bct-reference .blogcard-label .fa::before,/*参考記事*/
.bct-reference-link .blogcard-label .fa::before,/*参考リンク*/
.bct-popular .blogcard-label .fa::before,/*人気記事*/
.bct-together .blogcard-label .fa::before,/*合わせてよみたい*/
.bct-detail .blogcard-label .fa::before,/*詳細はこちら*/
.bct-pickup .blogcard-label .fa::before,
.bct-official .blogcard-label .fa::before/*ピックアップ*/{
content: "\f518";
}
/* ブログカードファビコン調整 */
.blogcard-site {
align-items: baseline;
}
/* キーボードキー --------------------------------------------- */
.keyboard-key {
background-color: initial;
border: 1px solid #888;
border-radius: 1px;
box-shadow: none;
font-size: 0.9em;
padding: 1px 5px;
}
/* 記事内検索ボックスフォーム---------------------------------------------- */
.search-form div.sbtn {
background-color: var(--main-color);
}
.search-form div.sbtn::after {
font-weight: 900;
content: "\f245";/* カーソル */
bottom: -1em;
right: 0;
font-size: 1.4em;
}
/* マイクロバルーン---------------------------------------------- */
.micro-balloon {
border-color: #aaa; /* 固定 */
border-radius: 2px;
line-height: 1.4;
padding: .5em 1.25em;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 1em;
}
.micro-balloon.micro-top:before,
.micro-balloon.micro-top:after {
top: 100%;
}
.micro-balloon.micro-bottom:before,
.micro-balloon.micro-bottom:after {
bottom: 100%;
}
/* cocoon吹き出し ---------------------------------------------- */
/* フラットのスタイル */
.sbs-flat {
--cocoon-custom-background-color: var(--main-light-color);
--cocoon-custom-border-color: var(--main-light-color);
--cocoon-custom-text-color: var(--cocoon-text-color);
}
div.speech-balloon {
border-width: 1px;
border-radius: 8px;
padding: 1em !important;
max-width: 100%;
}
/* 481px以上 */
@media screen and (min-width: 481px) {
.speech-wrap {
align-items: center; /* 縦位置中央 */
}
.speech-person {
width: 10%;
min-width: 10%;
}
}
/* 線を細くする */
.speech-balloon::after {
left: -11px;
}
/* 右向き吹き出し */
.sbp-r:not(.not-nested-style) .speech-balloon::after,
.cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after {
right: -10px;
}
/* スマホ対応：右向き吹き出し */
@media screen and (max-width: 480px) {
.cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after {
right: -5px;
}
}
/* ソースコード ---------------------------------------------- */
.wp-block-code code {
white-space: pre-wrap;
}
pre {
position: relative;
padding: 1em !important;
border-radius: 5px;
}
/* ソースコードタイトル */
pre:after {
padding: 1px 12px;
position: absolute;
top: 0px;
right: 0px;
color: var(--main-color);
font-size: 0.7em;
border-radius: 0px;
}
pre.html:after {
content: "HTML";
}
pre.php:after {
content: "PHP";
}
pre.css:after {
content: "CSS";
}
pre.javascript:after {
content: "JavaScript";
}
/* コピーボタン */
.copy-btn {
display: none;
position: absolute;
top: 1.5rem;
right: 10px;
border: none;
background-color: var(--main-color);
color: var(--cocoon-white-color);
padding: 3px 8px;
border-radius: 1px;
font-size: 0.7em;
cursor: pointer;
}
/* ホバー時に表示 */
pre:hover .copy-btn {
display: inline-block;
}
.copy-btn:before {
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f0c5";
margin: 0 2px;
}
/* Hover（視認性アップ） */
.copy-btn:hover {
opacity: 0.8;
}
/* アイコンリストボックス --------------------------------------------- */
.wp-block-cocoon-blocks-iconlist-box.blank-box {
padding: 0;
}
.wp-block-cocoon-blocks-iconlist-box.blank-box.has-background {
padding:2em;
}
.iconlist-title:empty {
display: none;
}
ul.timeline .iconlist-box ul {
list-style-type: none;
}
/* タイムライン個別設定 */
.timeline-box {
--cocoon-custom-point-color:var(--main-color); /* サイト全体 */
}
body .timeline .wp-block-list {
margin-bottom:2em;
}
/* -------------------------------
タイムライン共通設定
---------------------------------*/
/* カスタム変数 */
.timeline {
--timeline-dot-size: 16px; /* ドットサイズ */
--timeline-border-width: 2px; /* 線の太さ */
--timeline-margin-left: calc((var(--timeline-dot-size) / 2) - (var(--timeline-border-width) / 2)); /* 左マージン */
--label-width: 46px; /* ラベル幅 */
}
/* タイムラインボックス基本 */
.timeline-box[class*="is-style-cstm-timeline"] {
border: none;
overflow-x: hidden;
padding:1em 0;
}
/* 背景色があるタイムラインボックス */
.timeline-box.has-background[class*="is-style-cstm-timeline"] {
padding: 2em;
}
/* タイトル共通スタイル */
[class*="is-style-cstm-timeline"] .timeline-title {
position: relative;
padding-bottom: 0.8em;
}
.is-style-cstm-timeline-simple .timeline-title,
.is-style-cstm-timeline-step-vertical .timeline-title {
margin-bottom: 1em;
}
.is-style-cstm-timeline-number .timeline-title,
.is-style-cstm-timeline-step-circle .timeline-title,
.is-style-cstm-timeline-step-bordered .timeline-title {
margin-bottom: 2em;
}
/* タイトル下線 */
[class*="is-style-cstm-timeline"] .timeline-title::after {
content: "";
background-color: var(--cocoon-text-color, #333);
position: absolute;
bottom: 0;
left: calc(50% - 1.25rem);
width: 2.5rem;
height: 1px;
border-radius: 10px;
}
/* 空タイトル非表示 */
[class*="is-style-cstm-timeline"] .timeline-title:empty {
display: none;
position: static;
padding-bottom: 0;
margin-bottom: 0;
}
/* ラベル・コンテンツ共通リセット */
[class*="is-style-cstm-timeline"] .timeline-item-label,
[class*="is-style-cstm-timeline"] .timeline-item-content {
float: none;
}
[class*="is-style-cstm-timeline"] .timeline-item-label {
text-align: initial;
}
/* --- 共通ステップ番号 --- */
[class*="is-style-cstm-timeline-step"] .timeline,
.is-style-cstm-timeline-number .timeline {
counter-reset: step;
}
[class*="is-style-cstm-timeline-step"] .timeline-item-label {
font-size: 0;
display: flex;
justify-content: center;
}
[class*="is-style-cstm-timeline-step"] .timeline-item-label::before { content: "STEP"; display: block; }
[class*="is-style-cstm-timeline-step"] .timeline-item-label::after,
.is-style-cstm-timeline-number .timeline-item:before {
content: counter(step);
counter-increment: step;
font-weight: bold;
display: block;
}
[class*="is-style-cstm-timeline-step"] .timeline-item-content { border-left: none; }
/* -------------------------------
タイプ別スタイル
---------------------------------*/
.is-style-cstm-timeline-simple .timeline-item-content,
.is-style-cstm-timeline-number .timeline-item-content,
.is-style-cstm-timeline-step-circle .timeline-item-content {
width: auto; /* コンテンツ幅 */
}
/* --- シンプル --- */
.is-style-cstm-timeline-simple .timeline-item-label {
padding-left: calc(1.5rem + var(--timeline-margin-left));
width: auto;
}
.is-style-cstm-timeline-simple .timeline-item:before {
top: 22px;
left: 0;
width: 10px;
height: 10px;
border: 3px solid var(--cocoon-custom-point-color);
background: #fff !important;
}
/* 親に has-background がある場合 → カスタム背景色を使用 */
.is-style-cstm-timeline-simple.has-background .timeline-item:before {
background: var(--cocoon-custom-background-color) !important;
}
.is-style-cstm-timeline-simple .timeline-item-content {
margin-left: var(--timeline-margin-left);
border-left: var(--timeline-border-width) #ccc solid;
padding: 0 1em 1em 1.5em;
}
/* --- 番号 --- */
.is-style-cstm-timeline-number .timeline-item-label {
display: none;
}
.is-style-cstm-timeline-number .timeline > li.timeline-item:not(:last-child) {
margin-bottom: 1em;
}
.is-style-cstm-timeline-number .timeline-item:before {
width: 25px;
height: 25px;
line-height: 25px;
left: 0px;
top: 0;
color: #fff;
display: grid;
place-content: center;
}
.is-style-cstm-timeline-number .timeline-item-content {
padding: 0 1em 1em 1.5em;
margin-left: 11px;
border-left: 3px solid #eee;
}
/* --- ステップ（丸型） --- */
.is-style-cstm-timeline-step-circle .timeline .timeline-item { display: flex; }
.is-style-cstm-timeline-step-circle .timeline-item-label {
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: var(--label-width);
height: var(--label-width);
border-radius: 50%;
background: var(--cocoon-custom-point-color);
color: #fff;
padding: 0;
line-height: 1.2;
z-index: 2;
}
.is-style-cstm-timeline-step-circle .timeline-item-label::before { font-size: 10px; }
.is-style-cstm-timeline-step-circle .timeline-item-label::after { font-size: 16px; }
.is-style-cstm-timeline-step-circle .timeline-item-content {
margin-top: 0.5em;
padding: 0 1em 2em;
position: relative;
flex: 1 1 auto;
min-width: 0; /* 見切れ防止 */
}
.is-style-cstm-timeline-step-circle .timeline-item:before { display: none; }
.is-style-cstm-timeline-step-circle .timeline-item-title {
margin-bottom: 0.5em;
}
/* ラベル線 */
.is-style-cstm-timeline-step-circle .timeline-item .timeline-item-content::before {
content: "";
position: absolute;
left: calc(-1 * var(--label-width) / 2);
width: 1px;
height: 100%;
background: var(--cocoon-custom-point-color);
opacity: 0.5;
z-index: 1;
}
/* --- ステップ（縦型） --- */
.is-style-cstm-timeline-step-vertical .timeline .timeline-item,
.is-style-cstm-timeline-step-bordered .timeline .timeline-item {
position: relative;
overflow: visible;
}
.is-style-cstm-timeline-step-vertical .timeline .timeline-item {
padding: 1em;
}
.is-style-cstm-timeline-step-vertical .timeline .timeline-item {
border-bottom: 1px dashed var(--cocoon-custom-point-color);
}
.is-style-cstm-timeline-step-vertical .timeline-item::before,
.is-style-cstm-timeline-step-bordered .timeline-item::before {
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 10px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
border-radius: 0;
}
.is-style-cstm-timeline-step-vertical .timeline-item:last-child::before,
.is-style-cstm-timeline-step-bordered .timeline-item:last-child::before {
display: none;
}
.is-style-cstm-timeline-step-vertical .timeline-item-label {
flex-direction: column;
align-items: center;
}
.is-style-cstm-timeline-step-vertical .timeline-item-title,
.is-style-cstm-timeline-step-bordered .timeline-item-title {
text-align: center;
color: var(--cocoon-custom-point-color);
margin-bottom: 0.5em;
font-size: 1.1em;
}
.is-style-cstm-timeline-step-vertical .timeline-item-content,
.is-style-cstm-timeline-step-bordered .timeline-item-content {
width: 100%;
padding: 0;
}
.is-style-cstm-timeline-step-vertical .timeline-item-label,
.is-style-cstm-timeline-step-bordered .timeline-item-label {
width: auto;
color: var(--cocoon-custom-point-color);
line-height: 1.2;
padding: 0;
}
.is-style-cstm-timeline-step-vertical .timeline-item-label::before { font-size: 12px; }
.is-style-cstm-timeline-step-vertical .timeline-item-label::after { font-size: 30px; }
/* --- ステップ（枠線付） --- */
.is-style-cstm-timeline-step-bordered .timeline .timeline-item {
border: 1px solid var(--cocoon-custom-point-color);
padding: 2em;
}
.is-style-cstm-timeline-step-bordered .timeline .timeline-item:not(:last-child) {
margin-bottom: 30px !important;
}
.is-style-cstm-timeline-step-bordered .timeline-item::before {
margin-top: 10px;
}
.is-style-cstm-timeline-step-bordered .timeline-item-label {
flex-direction: row;
align-items: baseline;
gap: 2px;
}
.is-style-cstm-timeline-step-bordered .timeline-item-label::before { font-size: 1rem; }
.is-style-cstm-timeline-step-bordered .timeline-item-label::after { font-size: 1.2rem; }
/* -------------------------------
レスポンシブ（スマホ 480px以下）
---------------------------------*/
@media screen and (max-width: 480px) {
/* 背景色あり */
.timeline-box.has-background[class*="is-style-cstm-timeline"] { padding: 2em 1em; }
/* simpleタイプ調整 */
.is-style-cstm-timeline-simple .timeline > li.timeline-item { border: none; }
.is-style-cstm-timeline-simple .timeline-item-label { padding-left: 1rem; }
.is-style-cstm-timeline-simple .timeline-item:before { left: -0.45rem; }
.is-style-cstm-timeline-simple .timeline-item-content { margin-left: 0; padding-left: 1rem; }
/* paddingリセット */
.is-style-cstm-timeline-number .timeline,
.is-style-cstm-timeline-step-circle .timeline,
.is-style-cstm-timeline-step-vertical .timeline,
.is-style-cstm-timeline-step-bordered .timeline { padding-left: 0; }
/* 左線非表示 */
.is-style-cstm-timeline-number .timeline > li.timeline-item,
.is-style-cstm-timeline-step-circle .timeline > li.timeline-item,
.is-style-cstm-timeline-step-vertical .timeline > li.timeline-item { border-left: none; }
/* ラベル padding調整 */
.is-style-cstm-timeline-step-vertical .timeline-item-label,
.is-style-cstm-timeline-step-bordered .timeline-item-label { padding-left: 0; padding-right: 0; }
}
/* ---------------------------------------------------------
アコーディオン（トグルボックス）
--------------------------------------------------------- */
/* トグルボタン（共通） ---------------------------- */
[class*="is-style-cstm-toggle"] .toggle-button {
border: none;
border-radius: 0;
padding: 0.8em 1em;
font-weight:bold;
color:var(--cocoon-dark-grey-color);
}
[class*="is-style-cstm-toggle"] .toggle-button::before {
opacity: 1;
}
/* 白抜き／下線スタイル ------------------------------ */
[class*="is-style-cstm-toggle-outline"] .toggle-button,
[class*="is-style-cstm-toggle-underline"] .toggle-button {
background: none;
}
/* 外枠あり（シンプル／白抜き） */
.toggle-box[class*="is-style-cstm-toggle-simple"],
.toggle-box[class*="is-style-cstm-toggle-outline"] {
border: 1px solid var(--cocoon-custom-border-color);
}
/* 下線のみ */
.toggle-box[class*="is-style-cstm-toggle-underline"] {
border-bottom: 1px solid var(--cocoon-custom-border-color);
}
/* 左寄せボタン（-left系） ------------------------- */
[class*="is-style-cstm-toggle"][class*="-left"] .toggle-button {
padding: 0.8em 2em 0.8em 1em;
text-align: left;
}
/* 左寄せ・FAQ 共通アイコン位置 */
[class*="is-style-cstm-toggle"][class*="-left"] .toggle-button::before,
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-button::before {
position: absolute;
right: 1em;
margin: 0;
font-size: 1em;
}
/* チェック時の装飾 -------------------------------- */
/* 白抜き：開閉時に下線を破線に */
[class*="is-style-cstm-toggle-outline"] .toggle-checkbox:checked ~ .toggle-button {
border-bottom: 1px dashed var(--cocoon-custom-border-color);
}
/* 開閉コンテンツ：境界線リセット */
[class*="is-style-cstm-toggle"] .toggle-checkbox:checked ~ .toggle-content {
border: none;
border-radius: 0;
}
/* コンテンツ余白（シンプル／白抜き） ---------------- */
[class*="is-style-cstm-toggle-simple"].toggle-wrap .toggle-content,
[class*="is-style-cstm-toggle-outline"].toggle-wrap .toggle-content {
padding: 0 1.5em;
}
[class*="is-style-cstm-toggle-simple"] .toggle-checkbox:checked ~ .toggle-content,
[class*="is-style-cstm-toggle-outline"] .toggle-checkbox:checked ~ .toggle-content {
padding: 1.5em;
}
/* ボタン風デザイン ------------------------------- */
.is-style-cstm-toggle-button .toggle-button {
width: fit-content;
border: 1px solid var(--cocoon-custom-border-color);
border-radius: 99px;
padding: 0.3em 1.5em;
margin: 0 auto;
}
.is-style-cstm-toggle-button .toggle-checkbox:checked ~ .toggle-button {
border-radius: 99px;
}
/* 背景色なしの場合 */
.is-style-cstm-toggle-button:not(.has-background).toggle-wrap .toggle-content {
padding:0;
}
.is-style-cstm-toggle-button:not(.has-background) .toggle-checkbox:checked ~ .toggle-content {
padding:1em 0;
}
/* FAQスタイル ------------------------------------ */
/* FAQ共通：左寄せ */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-button,
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-content {
position: relative;
text-align: left;
}
/* FAQコンテンツ余白（初期） */
[class*="is-style-cstm-toggle"][class*="-faq"].toggle-wrap .toggle-content {
padding: 0 2em 0 2.2em;
}
/* FAQボタン余白 */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-button {
padding: 0.8em 2em 0.8em 2.2em;
}
/* FAQコンテンツ余白（展開時） */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-checkbox:checked ~ .toggle-content {
padding: 1.5em 2em 1.5em 2.2em;
}
/* Q・A ラベル ------------------------------------- */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-button::after,
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-checkbox:checked ~ .toggle-content::after {
position: absolute;
left: 1em;
font-weight: bold;
}
/* Qラベル（ボタン側） */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-button::after {
content: 'Q';
color: #004aad;
top: 0.8em;
}
/* Aラベル（コンテンツ側） */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-checkbox:checked ~ .toggle-content::after {
content: 'A';
color: #bc5731;
top: 1.5em;
}
/* アイコン（Font Awesome利用） ------------------ */
/* 白抜きタイプ：矢印 */
[class*="is-style-cstm-toggle"][class*="-left"] .toggle-button::before {
content: "\f078"; /* V字型 */
}
[class*="is-style-cstm-toggle"][class*="-left"] .toggle-checkbox:checked ~ .toggle-button::before {
content: "\f077"; /* V字型 */
}
/* FAQタイプ：矢印 */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-button::before {
content: "\f0d7"; /* ▼ */
}
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-checkbox:checked ~ .toggle-button::before {
content: "\f0d8"; /* ▲ */
}
/* アイコン変更（共通設定追加） */
.fa-caret .toggle-button::before { content: "\f0d7"; }
.fa-caret .toggle-checkbox:checked ~ .toggle-button::before { content: "\f0d8"; }
.fa-chevron .toggle-button::before { content: "\f078"; }
.fa-chevron .toggle-checkbox:checked ~ .toggle-button::before { content: "\f077"; }
.fa-arrow .toggle-button::before { content: "\f063"; }
.fa-arrow .toggle-checkbox:checked ~ .toggle-button::before { content: "\f062"; }
/* FAQボックス ------------------------------------------------------- */
/* ボーダー・角丸調整 */
.faq-wrap.blank-box {
border-width: 1px;
border-radius: 1px;
}
/* デフォルトスタイルの余白 */
.faq-wrap.is-style-default.blank-box {
padding: 1.5em;
}
/* FAQ本文の段落間隔 */
body .wp-block-cocoon-blocks-faq p {
margin-bottom: 1em;
}
/* FAQ質問部分 */
.faq-question {
align-items: unset;
margin-bottom: 1em;
}
/* FAQラベル（番号など） */
.faq .faq-item-label {
font-size: 1em;
font-weight: bold;
text-align: center;
width: 1.8em;
padding: 0;
margin-right: 0.5em;
border-radius: 50%;
}
/* FAQ回答部分 */
.faq-item-content {
margin-top: 0;
}
/* アコーディオン矢印の表示 */
.is-style-accordion > .faq > .faq-question::before {
opacity: 1;
}
/* 記事内FAQ見出し調整 */
.article .wp-block-cocoon-blocks-faq h3 {
display: inline;
border: none;
background: none;
padding: 0;
font-size: 1em;
color: inherit;
}
/* ボックスメニューのスタイル---------------------------------------------- */
/* スタイル 1（背景色あり） */
.box-style-1 .box-menu {
box-shadow: none !important;
background-color: var(--main-light-color);
color: var(--main-color);
padding: 1em;
transition: background-color 0.5s; /* 背景色のみアニメーション */
}
.box-style-1 .box-menu-icon {
font-size: 1.8em;
color: var(--main-color) !important;
}
/* アイコンのスケールは transform でアニメーション */
.box-style-1 .box-menu-icon > div {
transition: transform 0.5s;
}
/* ホバー時 */
.box-style-1 .box-menu:hover {
background-color: var(--main-sub-color);
}
.box-style-1 .box-menu:hover .box-menu-icon > div {
transform: scale(1.4);
}
/* スタイル 2（横並び） */
.box-style-flex .box-menu {
display: flex;
align-items: center;
gap: 0.5em;
padding: 1em 1.5em;
min-height: unset;
}
.box-style-flex .box-menu-icon {
font-size: 1.2em;
color: var(--main-color) !important;
}
/* ホバー時 */
.box-style-flex .box-menu:hover {
background-color: var(--main-light-color);
box-shadow: inset 1px 1px 0 0 var(--main-color), 1px 1px 0 0 var(--main-color), 1px 0 0 0 var(--main-color);
}
/* --------------------------------
ボックスメニュー：カラム数切り替え
-------------------------------- */
/* grid用のリセット */
[class*="is-style-box-column-"] .box-menus .box-menu {
width: unset;
}
/* grid化 */
[class*="is-style-box-column-"] .box-menus {
display: grid;
}
/* gap（余白あり）のみ適用：is-style-box-column- かつ -gap を含むクラスに限定 */
[class*="is-style-box-column-"][class*="-gap"] .box-menus {
gap: 0.5em;
}
/* --- PC: 列数指定 --- */
/* 2列（PC） */
[class*="is-style-box-column-2-"] .box-menus {
grid-template-columns: repeat(2, 1fr);
}
/* 3列（PC） */
[class*="is-style-box-column-3-"] .box-menus {
grid-template-columns: repeat(3, 1fr);
}
/* 4列（PC） */
[class*="is-style-box-column-4-"] .box-menus {
grid-template-columns: repeat(4, 1fr);
}
/* 5列（PC） */
[class*="is-style-box-column-5-"] .box-menus {
grid-template-columns: repeat(5, 1fr);
}
/* 6列（PC） */
[class*="is-style-box-column-6-"] .box-menus {
grid-template-columns: repeat(6, 1fr);
}
/* --- モバイル（834px以下） --- */
@media screen and (max-width: 834px) {
/* モバイル2列：-m2系は2列に統一 */
[class*="is-style-box-column-2-"] .box-menus,
[class*="is-style-box-column-3-"][class*="-m2"] .box-menus,
[class*="is-style-box-column-4-"][class*="-m2"] .box-menus,
[class*="is-style-box-column-5-"][class*="-m2"] .box-menus,
[class*="is-style-box-column-6-"][class*="-m2"] .box-menus {
grid-template-columns: repeat(2, 1fr);
}
/* モバイル3列：-m3系のみ3列 */
[class*="is-style-box-column-3-"][class*="-m3"] .box-menus,
[class*="is-style-box-column-5-"][class*="-m3"] .box-menus,
[class*="is-style-box-column-6-"][class*="-m3"] .box-menus {
grid-template-columns: repeat(3, 1fr);
}
}
/* カラムブロック ---------------------------------------------- */
/* flexの余白 */
.is-layout-flex { gap: 1em;}
.is-layout-flex.gap-0 { gap: 0;}
/* 自作CTAボックス余白調整 */
.wp-block-columns.btn-flex, /* codoc対応 */
.wp-block-columns.is-layout-flex.btn-flex {
gap: 0.5em;
align-items: flex-end !important;
}
/* ボタンカラム下の余白 */
.btn-flex .wp-block-column,
.btn-flex .btn-wrap a {
margin-bottom: 0 !important;
}
/* カラムブロック｜モバイル2列（767px以下） */
@media only screen and (max-width: 767px) {
.wp-block-columns.is-style-mobile-two-columns {
flex-wrap: wrap !important;
gap: 0.5em;
}
.wp-block-columns.is-style-mobile-two-columns .wp-block-column {
flex: 1 1 calc(50% - 1rem);
}
}
/* sort-box */
.sort-box {
display: flex; /* すでに is-layout-flex がある場合は不要 */
flex-wrap: wrap; /* 必要に応じて */
align-items: stretch; /* 子カラムの高さを揃える */
}
/* カラム内のカードも縦並びで伸ばす */
.sort-box .wp-block-column .block-box, /* ラベルボックス用 */
.sort-box .wp-block-column {
display: flex;
flex-direction: column;
}
.sort-box .wp-block-column .block-box,
.sort-box .wp-block-column .block-box .label-box-content /* ラベルボックス用 */ {
flex: 1 1 auto; /* カラム内でカードが伸びる */
}
/* 縦型ブログカード */
.sort-box .wp-block-column [class*="is-style-cstmcard-vertical"],
.sort-box .wp-block-column [class*="is-style-cstmcard-vertical"] .blogcard-wrap,
.sort-box .wp-block-column [class*="is-style-cstmcard-vertical"] .blogcard {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/******************************************
追加css
**************************************/
/* テキストリンク（アイコン付） ------------------------------ */
.txt-link a,
.txt-link-box a {
--lh: 1.8; /* 行高を明示（計算の基準） */
display: inline-block;
position: relative;
padding-left: 1.2em;
line-height: var(--lh);
}
/* アイコン */
.txt-link a::before,
.txt-link-box a::before {
content: "";
position: absolute;
top: calc((1em * var(--lh) - 1em) / 2); /* 行高内で中央配置 */
left: 0;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* リスト用 */
ul.txt-link-box {
list-style: none !important;
padding-left: 0;
}
.txt-link-box p {
margin-bottom: 1em !important;
}
/* リンクカード（アイコン付） ---------------------------------------------- */
.link-card {
display: flex;
align-items: center;
gap: .5em;
padding: 1em 1.5em;
margin-bottom:2em;
background-color:var(--main-light-color);
border: 1px solid var(--main-sub-color);
border-radius: 8px;
text-decoration: none;
width: 100%;
cursor: pointer;
box-sizing: border-box;
transition: transform 0.3s, background-color 0.3s, border-color 0.3s;
}
/*480px以下*/
@media screen and (max-width: 480px){
.link-card {
padding:1em;
}
}
.link-card:hover {
transform: translateY(-2px);
}
.link-card-title {
color: var(--main-color);
font-weight: 700;
font-size: 0.9em;
line-height:1.4;
}
.link-card-description {
font-size: 0.7em;
color: #666;
line-height:1.4;
}
.link-card-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.5em;
height: 1.5em;
font-size: 1.5em;
color: var(--main-color);
}
.external-link {
width: 1.5em;
height: 1.5em;
background-color: currentColor;
/* SVG マスク */
mask-image: url('data:image/svg+xml;utf8,');
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
/* Webkit */
-webkit-mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.link-card-content {
flex: 1;
min-width: 0;
}
/* arrow-down 中央下に表示されるスクロール誘導の矢印 ------------------------------- */
.arrow-down,
.arrow-up {
margin-inline: auto; /* 左右中央寄せ */
margin-block: 1em; /* 上下の余白 */
}
/* 矢印の形状 */
.arrow-down span,
.arrow-up span {
display: block;
width: clamp(0.8em, 1.1vw, 1em);
height: clamp(0.8em, 1.1vw, 1em);
border: 1px solid var(--cocoon-text-color);
border-left: 0;
border-bottom: 0;
box-sizing: border-box;
margin: 0 auto;
position: relative; /* transform基準を明示 */
}
.arrow-down span {
transform: translateY(-50%) rotate(135deg);
}
.arrow-up span{
transform: translateY(50%) rotate(-45deg);
}
/* アニメーション｜点滅 ---------------------------------------------- */
.blink {
animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
0% { opacity: 0;}
100% { opacity: 1;}
}
/* アニメーション｜矢印が下方向にふわっと流れて消える */
.arrow-down {
animation: arrow-move 2s ease infinite;
}
@keyframes arrow-move {
0% {
transform: translateY(0px);
opacity: 1;
}
100% {
transform: translateY(10px);
opacity: 0;
}
}
/* めくれた紙風 ---------------------------------------------- */
.paper-style {
position: relative;
border: none;
}
.paper-style:after {
position: absolute;
content: '';
top: 0;
right: 0;
border-width: 0 20px 20px 0; /* 上右下左の順 */
border-style: solid;
border-color: #ccc var(--cocoon-white-color) #ccc; /* 上右下の色指定 */
box-shadow: -1px 1px 1px rgb(0 0 0 / 0.15); /* 軽い影 */
}
/* ウィジェット記事の新着リボン */
.new-tab .new-entry-cards.large-thumb a:first-of-type::before {
content: "NEW"; /* リボンの文字 */
}
.update-tab .new-entry-cards.large-thumb a:first-of-type::before {
content: "UP"; /* リボンの文字 */
}
.new-entry-cards.large-thumb a{
position: relative;
}
/* リボン共通スタイル：右向き */
:where(.new-tab, .update-tab) .new-entry-cards.large-thumb a:first-of-type::before {
position: absolute;
top: 1em;
left: 0;
z-index: 2;
margin: 0;
display: grid;
place-content: center;
height: 30px;
min-width: 7em;
background-color: var(--cocoon-red-color);
color: var(--cocoon-white-color);
letter-spacing: 0.2em;
font: 700 12px/1 "Alata", sans-serif;
text-shadow: 0 1px 1px var(--shadow-color);
clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}
/* ナビカード---------------------------------------------- */
/* ナビカードリボン 共通スタイル */
.navicard[class*="ribbon-style"] .ribbon::before,
.navicard[class*="ribbon-style"] .ribbon::after {
display: none;
}
.navicard[class*="ribbon-style"] .ribbon {
width: 100%;
}
.navicard[class*="ribbon-style"] .ribbon span {
transform: none;
right: initial;
top: initial;
width: auto;
}
/* スタイル変更1（.my-ribbon-1：右向き） */
.navicard.ribbon-style-1 .ribbon {
height: 30px;
}
.navicard.ribbon-style-1 .card-large-image .ribbon-top-left {
left: -5px;
top: 0.5em;
}
.navicard.ribbon-style-1 .ribbon span {
padding: 10px 30px 10px 20px;
clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}
/* スタイル変更2（.my-ribbon-2：下向き） */
.navicard.ribbon-style-2 .ribbon {
height: 50px;
}
.navicard.ribbon-style-2 .card-large-image .ribbon-top-left {
left: 15px;
}
.navicard.ribbon-style-2 .ribbon span {
padding: 10px 15px 15px;
line-height: 1.4;
clip-path: polygon(100% 0%, 100% 100%, 50% 80%, 0% 100%, 0% 0%);
-webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 80%, 0% 100%, 0% 0%);
}
/* スマホのみ改行---------------------------------------------- */
/*PCでは無効（改行しない）*/
.sma {
display: none;
}
/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
.sma {
display: block;
}
}
/* パソコンモニター枠 ---------------------------------------------- */
.window {
max-width: 800px;
margin: 0 auto 2em !important;
border: 1px solid var(--cocoon-thin-color);
border-radius: 5px;
box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.window_head {
padding: 0.7em;
background-color: var(--cocoon-thin-color);
/* background: linear-gradient(0deg, #f4f4f4, #eee); */
}
.window_body {
background-color: #fff;
aspect-ratio: 16 / 9;
overflow-y: auto;
}
.window_body :where(.wp-block-image, p) {
margin-bottom: 0 !important;
}
.window_body:has(p, ol, ul) {
padding: 2em;
}
.window_body img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
border-radius: 0;
}
/* ウィンドウ上部のボタン ------------------------------ */
.buttons_wrap {
display: flex;
}
.buttons_item {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 8px;
}
.button_red { background: #bc5731; }
.button_yellow { background: #dba334; }
.button_blue { background: #8b9b9d; }
/* 480px以下 */
@media screen and (max-width: 480px) {
.window__body::-webkit-scrollbar {
width: 10px;
}
.buttons_item {
width: 10px;
height: 10px;
}
}
/* --------------------------------
モバイル枠
-------------------------------- */
/* モバイル本体 */
.mobile-box {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 180px;
height: 360px;
margin: 0 auto 3em;
border: 5px solid #3c3c3c;
border-radius: 20px;
background: #3c3c3c;
box-sizing: border-box;
box-shadow: 0 10px 8px -6px #bebebe;
overflow: hidden;
}
/* 上部の丸いボタン */
.mobile-box-buttons {
display: flex;
justify-content: center;
gap: 6px;
margin: 6px 0;
}
.mobile-box-buttons span {
width: 6px;
height: 6px;
background: #555;
border-radius: 50%;
}
/* スクリーン部分（スクロール可能） */
.mobile-box-screen {
flex: 1;
width: 100%;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
display: flex;
justify-content: center; /* 横中央 */
align-items: center; /* 縦中央 */
padding: 10px 0; /* 少し上下余白を追加 */
box-sizing: border-box;
/* Firefox用 */
scrollbar-width: thin;
scrollbar-color: #999 #f1f1f1;
}
/* Chrome / Edge / Safari 用 */
.mobile-box-screen::-webkit-scrollbar {
width: 6px;
}
.mobile-box-screen::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.mobile-box-screen::-webkit-scrollbar-thumb {
background: #999;
border-radius: 3px;
}
.mobile-box-screen::-webkit-scrollbar-thumb:hover {
background: #666;
}
/* 画像 */
.mobile-box-screen img {
max-width: 100%;
max-height: 100%; /* スクリーンより大きくならないよう制限 */
height: auto;
display: block;
margin: 5px 0; /* 複数画像時の間隔 */
object-fit: contain; /* 縦横比を維持して収まる */
}
/* ポチップ ---------------------------------------------- */
/* ボックス全体の影を消す */
.pochipp-box {
box-shadow: none !important;
}
/* 画像サイズ：PC版（1000px以上） */
@media screen and (min-width: 1000px) {
body .pochipp-box[data-lyt-pc="big"],
body .pochipp-box[data-lyt-pc="imgbig"] {
grid-template-columns: 40% 1fr;
}
body .pochipp-box__image img {
max-height: 200px;
}
}
/* 画像サイズ・ボタン：スマホ版（599px以下） */
@media screen and (max-width: 599px) {
body .pochipp-box[data-lyt-mb="vrtcl"] .pochipp-box__image img {
width: 100%;
max-width: 200px;
}
body .pochipp-box .pochipp-box__btn {
padding: 10px;
}
}
/* ポチップ：アウトラインボタンスタイル ---------------------------------- */
/* アウトラインボタンの基本設定 */
.pochipp-box[data-btn-style=outline] .pochipp-box__btn {
box-shadow: none !important;
border: 1px solid currentColor;
transition: background-color 0.3s;
}
/* ホバー時に文字色を白に変更 */
.pochipp-box[data-btn-style=outline] .pochipp-box__btn:hover {
color: #fff !important;
}
/* ホバー時に背景色を各ショップカラーに変更 */
.pochipp-box[data-btn-style=outline] .-amazon > .pochipp-box__btn:hover {
background-color: var(--pchpp-color-amazon) !important;
border-color: var(--pchpp-color-amazon);
}
.pochipp-box[data-btn-style=outline] .-rakuten > .pochipp-box__btn:hover {
background-color: var(--pchpp-color-rakuten) !important;
border-color: var(--pchpp-color-rakuten);
}
.pochipp-box[data-btn-style=outline] .-yahoo > .pochipp-box__btn:hover {
background-color: var(--pchpp-color-yahoo) !important;
border-color: var(--pchpp-color-yahoo);
}
.pochipp-box[data-btn-style=outline] .-mercari > .pochipp-box__btn:hover {
background-color: var(--pchpp-color-mercari) !important;
border-color: var(--pchpp-color-mercari);
}
/* ポチップ：インラインボタン色 ------------------------------------------ */
/* 各ショップカラーを適用 */
.-amazon.pochipp-inline__btnwrap > .pochipp-inline__btn {
background-color: var(--pchpp-color-amazon) !important;
}
.-rakuten.pochipp-inline__btnwrap > .pochipp-inline__btn {
background-color: var(--pchpp-color-rakuten) !important;
}
.-yahoo.pochipp-inline__btnwrap > .pochipp-inline__btn {
background-color: var(--pchpp-color-yahoo) !important;
}
/* インラインボタンの基本マージン・パディング */
.pochipp-inline__btnwrap {
margin: 0.3em 0.5em !important;
}
.pochipp-inline__btnwrap > .pochipp-inline__btn {
line-height: 1 !important;
padding: 10px !important;
}
/* 文字色 ---------------------------------------------- */
.red,
.bold-red { color: var(--cocoon-red-color);}
.bold-blue { color:var(--cocoon-blue-color);}
/* ポイントマーカー色---------------------------------------------- */
.badge-pink { background-color:var(--accent-color);}
.badge-blue { background-color:var(--cocoon-blue-color);}
.badge-grey { background-color:#555;}
.badge-green { background-color:#93A4A4;}
/* マーカー：基本色設定 ---------------------------------------------- */
/* 背景マーカー */
.marker {
background-color:var(--main-sub-color);
}
.marker-red {
background-color:#f5dcce;
}
.marker-blue {
background-color:#e0ebf1;
}
/* マーカー（下線タイプ） ------------------------------------------ */
.marker-under {
background: none;
border-bottom: 3px dashed var(--main-color);
}
.marker-under-red {
background: none;
border-bottom: 3px dashed var(--cocoon-red-color);
}
.marker-under-blue {
background: none;
border-bottom: 3px dashed var(--cocoon-blue-color);
}
.marker-stripe {
background-image: repeating-linear-gradient(-45deg, var(--cocoon-thin-color) 0, var(--cocoon-thin-color) 2px, transparent 2px, transparent 4px);
}
/* コンタクトフォーム（お問い合わせ） -------------------------------- */
.comment-form-attachment {
font-size: 0.8em;
}
/* アイコン変更---------------------------------------------- */
.fa-history:before { content: "\f2f1"; /* 更新日 */}
/* SVG縦位置調整---------------------------------------------- */
.svg-flex {
display: inline-flex;
align-items: center;
gap:5px;
}
/* 汎用ボックス共通 ---------------------------------------------- */
.block-box-label {
align-items: center;
}
/* SVGアイコン共通 */
.widget .sub-menu li:before,
.fa-home:before,
.btn-l::after,
.btn-wrap.btn-wrap-l > a::after,
.is-style-icon-list-check > li::before,
.fa-chevron-left:before,
.fa-chevron-right:before,
.fa-search::before,
.fab-search::before,
.fa-times:before,
.fab-check::before,
.fab-edit::before,
.fab-thumbs-up::before,
.fab-pencil::before,
.fa-tag::before {
display: inline-block;
content: "";
height: 1em;
width: 1em;
background-color: currentColor;
/* マスク指定 */
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
/* Safari/Chrome対応 */
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.fa-home:before {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
transform: translateY(0.05em);
}
/* < */
.fa-chevron-left:before {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* > */
.widget .sub-menu li:before,
.btn-l::after,
.btn-wrap.btn-wrap-l > a::after,
.fa-chevron-right:before {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* 検索 */
.fa-search::before,
.fab-search::before {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* ✕ */
.fa-times:before {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* 編集アイコン */
.fab-edit::before {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* いいねアイコン */
.fab-thumbs-up::before {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
transform: translateY(-0.1em);
}
/* ペンアイコン */
.fab-pencil::before {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* タグアイコン */
.fa-tag::before {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* チェックアイコン */
.fab-check::before,
.is-style-icon-list-check > li::before {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* リストスタイル（チェック）*/
.is-style-icon-list-check > li::before {
position:absolute;
top:.4em;
left:.2em;
}
.block-box:not(.timeline) .is-style-icon-list-check > li::before {
background:var(--cocoon-custom-border-color);
}
/***********************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
/*必要ならばここにコードを書く*/
}
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く */
}