/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/
@media (max-width: 767px) {
h2 {
font-size: 1.7rem !important; /* SPサイズに調整 */
}
h3 {
font-size: 1.1rem !important; /* SPサイズに調整 */
}
}
a {
text-decoration: none !important;
}
.wp-block-column.is-style-card-1 {
background: var(--wp--preset--color--base-4);
border: 4px solid var(--wp--preset--color--accent-1);
border-radius: 20px;
padding: var(--wp--preset--spacing--40);
display: flow-root;
}
.wp-block-column.is-style-card-2 {
background: var(--wp--preset--color--base-2);
border-radius: 20px;
padding: var(--wp--preset--spacing--60);
display: flow-root;
}
.wp-block-column.is-style-card-3 {
background: var(--wp--preset--color--base-4);
border-radius: 20px;
padding: var(--wp--preset--spacing--11);
display: flow-root;
}
/* フォント */
.wp-site-blocks, .editor-styles-wrapper {
font-family: var(--wp--preset--font-family--base);
}
.wp-site-blocks h1, .wp-site-blocks h2, .wp-site-blocks h3, .wp-site-blocks .post-title, .editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3 {
font-family: "Zen Maru Gothic", sans-serif;
}
/* カラーコード */ :root {
--color-background-1: #FFFCF5;
--color-background-2: #FFF4F3;
--color-background-3: #D8F4EC;
--color-background-4: #E7F8D9;
--color-background-5: #FFEFC9;
--color-background-6: #FFE580;
--color-background-7: #FEF2E5;
--color-background-8: #FFE8F3;
--color-background-9: #FFF0F0;
--color-background-10: #F3F6FF;
}
/* 波 */
.wave-svg-inline {
width: 100%;
height: clamp(48px, 6vw, 140px);
position: relative;
top:-1px;
}
.wave-svg-inline svg {
width: 100%;
height: 120%;
position: absolute;
left: 0;
bottom: 1;
}
/* セクション区切り用カラー指定 */
.top-color-01.wave-svg-inline {
background: var(--color-background-1);
}
.top-color-02.wave-svg-inline {
background: var(--color-background-2);
}
.top-color-03.wave-svg-inline {
background: var(--color-background-3);
}
.top-color-04.wave-svg-inline {
background: var(--color-background-4);
}
.top-color-05.wave-svg-inline {
background: var(--color-background-5);
}
.top-color-06.wave-svg-inline {
background: var(--color-background-6);
}
.top-color-07.wave-svg-inline {
background: var(--color-background-7);
}
.top-color-08.wave-svg-inline {
background: var(--color-background-8);
}
.top-color-09.wave-svg-inline {
background: var(--color-background-9);
}
.top-color-10.wave-svg-inline {
background: var(--color-background-10);
}
.bottom-color-01.wave-svg-inline svg {
fill: var(--color-background-1);
}
.bottom-color-02.wave-svg-inline svg {
fill: var(--color-background-2);
}
.bottom-color-03.wave-svg-inline svg {
fill: var(--color-background-3);
}
.bottom-color-04.wave-svg-inline svg {
fill: var(--color-background-4);
}
.bottom-color-05.wave-svg-inline svg {
fill: var(--color-background-5);
}
.bottom-color-06.wave-svg-inline svg {
fill: var(--color-background-6);
}
.bottom-color-07.wave-svg-inline svg {
fill: var(--color-background-7);
}
.bottom-color-08.wave-svg-inline svg {
fill: var(--color-background-8);
}
.bottom-color-09.wave-svg-inline svg {
fill: var(--color-background-9);
}
.bottom-color-10.wave-svg-inline svg {
fill: var(--color-background-10);
}
.wp-block-group {
margin-top: 0;
margin-bottom: 0;
}
//* 投稿リストの親グリッド */
.blog .posts-list, .archive .posts-list {
display: grid;
gap: 2rem;
grid-template-columns: 1fr; /* SP: 1列 */
padding: 0;
}
/* タブレット: 2列 */
@media (min-width: 768px) {
.blog .posts-list, .archive .posts-list {
grid-template-columns: repeat(2, 1fr);
}
}
/* PC: 3列 */
@media (min-width: 1024px) {
.blog .posts-list, .archive .posts-list {
grid-template-columns: repeat(3, 1fr);
}
}
/* 投稿カード */
.blog .post, .archive .post {
display: flex;
flex-direction: column;
border-radius: 16px; /* 角丸 */
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 影 */
background-color: #fff;
}
/* アイキャッチ画像 */
.post-thumbnail img, .post img {
width: 100%;
height: auto;
display: block;
}
/* メタ情報 */
.post-meta {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
/*! padding: 0.5rem 1rem; */
/*! font-size: 0.875rem; */
}
.post-meta span {
display: inline-block;
padding: 0.3rem 0.5rem !important;
border-radius: 99px;
border: 2px solid #DE6262;
font-size: 0.6rem !important;
}
/* タイトル */
.post-title {
font-size: 1.125rem;
font-weight: 600;
margin: 0.5rem 1rem;
}
/* リード文（50文字で省略） */
.post-excerpt {
/*! padding: 0 1rem 1rem; */
font-size: 0.95rem;
color: #333;
display: -webkit-box;
-webkit-line-clamp: 3; /* 3行で省略 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* H2見出し */
/* 1. 親要素の「はみ出し禁止」を解除する */
.wp-block-group:has(.h2-decorated),
.wp-block-column:has(.h2-decorated),
.is-layout-constrained:has(.h2-decorated) {
overflow: visible !important;
text-align: center !important; /* 中身を中央に寄せる */
}
/* 2. H2自体の設定 */
.h2-decorated {
display: inline-block; /* 文字幅に合わせる */
position: relative;
padding: 0;
/* margin: 2rem auto;*/
width: auto;
line-height: 1.5;
/* overflow: hidden を絶対に書かない */
overflow: visible !important;
z-index: 1;
}
/* 3. 装飾の共通設定（::beforeと::after） */
.h2-decorated::before,
.h2-decorated::after {
content: "";
position: absolute;
top: 50%;
/* 画面幅に合わせてサイズを調整（小さすぎると消えて見えるため調整） */
width: clamp(80px, 15vw, 332px);
height: 66px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: -1;
pointer-events: none; /* クリックの邪魔をしない */
}
/* 4. 左側の装飾：文字の左端から「外側」へ2rem離して配置 */
.h2-decorated::before {
left: -2rem; /* 隙間2rem分 */
transform: translate(-100%, -50%); /* 自身の幅の分だけ左へ */
background-image: url("data:image/svg+xml;utf8,");
}
/* 5. 右側の装飾：文字の右端から「外側」へ2rem離して配置 */
.h2-decorated::after {
right: -2rem; /* 隙間2rem分 */
transform: translate(100%, -50%); /* 自身の幅の分だけ右へ */
background-image: url("data:image/svg+xml;utf8,");
}
/* 6. スマホ：はみ出し不可避なので、上に配置する既存のSP設定へ */
@media (max-width: 768px) {
.h2-decorated {
top:1.5rem;
margin-bottom:2.2rem;
}
.h2-decorated::before {
left: 50%;
top: -3rem;
transform: translateX(-50%);
width: 65vw;
background-image: url("data:image/svg+xml;utf8,");
}
.h2-decorated::after {
display: none;
}
}
/* =================================================
表示制御（補助）
================================================= */
/* PC用 */
.display-pc-only {
display: block;
}
@media screen and (max-width: 600px) {
.display-pc-only {
display: none;
}
}
/* SP用 */
.display-sp-only {
display: none;
}
@media screen and (max-width: 600px) {
.display-sp-only {
display: block;
}
}
/* アンカーリンクの着地点を調整 */
html {
/* スクロールを滑らかにする（お好みで） */
scroll-behavior: smooth;
}
/* アンカー（id）を持つ要素すべてに適用 */
[id] {
/* ヘッダーの高さ（約80px〜100px）に合わせて数値を調整してください */
scroll-margin-top: 160px;
}
/* =================================================
ヘッダー固定
================================================= */
header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 1000;
background: #FFFCF5;
}
.wp-block-template-part .wp-block-group.has-background {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 50;
}
/* ラベルをフレックス化 */
.wp-block-navigation-item__label {
display: flex;
max-width: none;
align-items: center;
gap: 8px;
}
/* 上部リンク集 */
.display-pc-only p {
font-size: 12px;
margin: 0;
opacity: 0.8;
}
ーーーーーーーー .wp-block-navigation__submenu-icon {
display: none;
}
/* 固定ページタイトル 完全削除 */
.page .wp-block-post-title {
display: none;
}
.wp-block-post-title + .wp-block-spacer, .wp-block-spacer + .wp-block-post-title, .wp-block-spacer:has(+ .wp-block-post-title) {
display: none;
}
/* ヘッダー隙間削除 */
.wp-block-group.has-global-padding {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ヘッダーメニューブレイクポイント調整 */
/* FVスライダー */
/* FVスライダー背景 */
.top-slider-container {
position: relative;
margin-top: 1rem !important;
}
.top-slider-container::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 100%;
z-index: -1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23FFEFC9' fill-opacity='1' d='M0,160L60,176C120,192,240,224,360,229.3C480,235,600,213,720,186.7C840,160,960,128,1080,122.7C1200,117,1320,139,1380,149.3L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: bottom center;
background-size: 100%;
}
/* ====================================
修正版v2：カスタムヘッダー CSS
==================================== */ :root {
--header-bg: #FFFCF5;
--main-text: #333;
--nav-hover-bg: rgba(0, 0, 0, 0.03);
}
/* 幅解除・リセット */
.wp-block-html, .my-custom-header {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.my-custom-header {
background-color: var(--header-bg);
position: sticky;
top: 0;
z-index: 9999;
}
.my-custom-header a {
text-decoration: none !important;
color: var(--main-text);
transition: 0.3s;
font-family: "Zen Maru Gothic", sans-serif;
}
/* 表示切り替え */
.pc-only {
display: block !important;
}
.sp-only {
display: none !important;
}
@media (max-width: 1024px) {
.pc-only {
display: none !important;
}
.sp-only {
display: block !important;
}
button.sp-only {
display: block !important;
}
}
/* ------------------------------
アイコン共通設定（PC・SP両用）
------------------------------ */
/* nav-icon-〇〇 というクラスがついた要素の前に画像を表示 */
[class^="nav-icon"]::before {
content: "";
display: block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0; /* 縮まないように */
}
/* アイコン画像のパス設定 */
.nav-icon-1::before {
background-image: url(/wp-content/themes/twentytwentyfour-child/images/icon01.svg);
}
.nav-icon-2::before {
background-image: url(/wp-content/themes/twentytwentyfour-child/images/icon02.svg);
}
.nav-icon-3::before {
background-image: url(/wp-content/themes/twentytwentyfour-child/images/icon03.svg);
}
.nav-icon-4::before {
background-image: url(/wp-content/themes/twentytwentyfour-child/images/icon04.svg);
}
.nav-icon-5::before {
background-image: url(/wp-content/themes/twentytwentyfour-child/images/icon05.svg);
}
.nav-icon-6::before {
background-image: url(/wp-content/themes/twentytwentyfour-child/images/icon06.svg);
}
/* ------------------------------
1. PC用 レイアウト
------------------------------ */
.header-utility {
/*! padding: 8px 0; */
}
.header-utility .utility-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
padding-top: 16px;
font-size: 13px;
}
.custom-search-form {
display: flex;
border: 2px solid #DE6262;
border-radius: 20px;
overflow: hidden;
background: #fff;
}
.custom-search-form input {
border: none !important;
padding: 4px 10px !important;
font-size: 12px;
outline: none;
background: #fff;
width: 150px;
}
.custom-search-form button {
background: #DE6262;
color: #fff;
border: none;
padding: 0 22px;
font-size: 12px;
cursor: pointer;
}
.header-main {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 12px 0px;
height: 80px;
position: relative;
}
.header-logo img {
display: block;
max-height: 70px;
width: auto;
}
/* PCナビゲーション */
.pc-nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 10px;
}
.pc-nav > ul > li {
position: relative;
margin: 0;
}
.pc-nav a[class^="nav-icon"] {
display: flex;
flex-direction: column; /* アイコン上、文字下 */
align-items: center;
justify-content: center;
width: 110px;
padding: 10px 5px;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.3;
border-radius: 8px;
}
.pc-nav a[class^="nav-icon"]::before {
width: 32px;
height: 32px;
margin-bottom: 4px;
}
.pc-nav a[class^="nav-icon"]:hover {
background-color: var(--nav-hover-bg);
transform: translateY(-2px);
}
/* PCサブメニュー */
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 280px;
background: #fff;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
border: 1px solid #eee; /* 代わりに枠線 */
padding: 10px 0;
z-index: 100;
}
.pc-nav li:hover .sub-menu {
display: block;
}
.sub-menu a {
display: block;
padding: 12px 20px;
font-size: 14px;
border-bottom: 1px solid #f9f9f9;
text-align: left;
/*! width: 100%; */
}
.sub-menu a:hover {
background-color: #f0f8ff;
padding-left: 25px;
}
/* ------------------------------
2. SP用 レイアウト（1024px以下）
------------------------------ */
@media (max-width: 1024px) {
.header-main {
height: 50px;
justify-content: center; /* ロゴ中央 */
}
.header-logo img {
max-height: 52px;
}
/* ハンバーガーボタン（右側に配置変更） */
.hamburger-btn {
position: absolute;
right: 0px; /* 左(left)から右へ */
left: auto;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: none;
border: none;
cursor: pointer;
z-index: 10001; /* ドロワーより低い番号にすれば隠れますが、今回はドロワーを高くします */
padding: 0;
}
.hamburger-btn span {
display: block;
width: 24px;
height: 2px;
background: #333;
margin: 6px auto;
transition: 0.3s;
}
/* ドロワー（メニュー本体） */
.mobile-drawer {
position: fixed;
top: 0;
right: 0; /* 右から出てくるように変更（お好みでleftでも可） */
width: 80%;
max-width: 320px;
height: 100vh;
background: #fff;
z-index: 10005; /* ハンバーガー(10001)より高くして上に重ねる */
transition: transform 0.3s ease;
transform: translateX(100%); /* 右外へ */
overflow-y: auto;
padding: 20px;
/* box-shadow: 2px 0 10px rgba(0,0,0,0.1); ← 影削除 */
visibility: hidden;
}
/* 開いた時 */
.mobile-drawer.is-open {
transform: translateX(0);
visibility: visible;
}
/* 背景オーバーレイ */
.drawer-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10004; /* ドロワーの下、ハンバーガーの上 */
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.drawer-overlay.is-open {
opacity: 1;
visibility: visible;
}
/* 閉じるボタン */
.drawer-close {
background: none;
border: none;
font-size: 14px;
margin-bottom: 20px;
cursor: pointer;
color: #666;
display: block;
width: 100%;
text-align: right;
}
/* SPメニューリスト */
.sp-nav ul {
list-style: none;
padding: 0;
margin: 0 0 30px;
}
.sp-nav li {
border-bottom: 1px solid #eee;
}
/* SPメニュー内のリンク・アイコン調整 */
.sp-nav a, .sp-nav summary {
display: flex; /* 横並びにする */
align-items: center; /* 垂直中央 */
padding: 15px 0;
font-size: 15px;
font-weight: bold;
color: #333;
cursor: pointer;
list-style: none;
gap: 10px; /* アイコンと文字の間隔 */
font-family: "Zen Maru Gothic", sans-serif;
}
/* SP用アイコンサイズ調整 */
.sp-nav [class^="nav-icon"]::before {
width: 24px; /* PCより少し小さく */
height: 24px;
margin: 0; /* 余白リセット */
}
/* アコーディオンの＋ー表示 */
.sp-nav summary {
justify-content: flex-start; /* 左寄せ */
position: relative;
padding-right: 30px; /* 右側に＋用のスペース */
}
.sp-nav summary::after {
content: "+";
font-size: 18px;
position: absolute;
right: 0;
font-weight: normal;
}
.sp-nav details[open] summary::after {
content: "-";
}
/* SPサブリンク */
.sp-sub-links {
background: #f9f9f9;
/*! padding: 0 15px 15px; */
}
.sp-sub-links a {
font-size: 14px;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
font-weight: normal;
display: block; /* サブリンクはアイコンなしならブロックで */
}
.sp-sub-links .sp-menu-label{
font-weight: bold;
color:#DE6262;
background-color: #fff;
}
/* SPユーティリティ */
.sp-utility {
margin-top: 30px;
border-top: 2px solid #eee;
padding-top: 20px;
}
.sp-search {
margin-bottom: 20px;
height: 40px;
}
.sp-search input {
width: 100% !important;
background: #f5f5f5;
}
.sp-utility-links {
display: flex;
flex-direction: column;
gap: 15px;
}
.sp-utility-links a {
display: block;
font-size: 14px;
color: #666;
background: #eee;
padding: 10px;
text-align: center;
border-radius: 10px;
}
}
/* 横スクロール防止 */
body {
overflow-x: hidden;
width: 100%;
}
@media (min-width: 1024px) {
.mobile-drawer {
display: none;
}
}
/* --------------------------------------------------
下層ページデザイン用調整
-------------------------------------------------- */
/* 管理画面選択用クラス: is-style-dotted-separator
対象ブロック: カラム (core/columns)
*/
.is-style-dotted-separator {
/* 点線の設定 */
border-bottom: 2px dotted #cccccc; /* 太さ、点線、色 */
/* 余白の設定 */
padding-bottom: 2rem; /* 点線より上の余白（コンテンツと線の間） */
margin-bottom: 2rem; /* 点線より下の余白（線と次のブロックの間） */
}
/* 最後の要素だけ線や余白を消したい場合のオプション（必要に応じて） */
.is-style-dotted-separator:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* 管理画面選択用クラス: is-style-card-4
対象ブロック: カラム (core/column)
構造: カラム(card-4) > カラム群 > カラム(項目) + カラム(内容)
*/
/* 1. カード全体（外枠） */
.wp-block-column.is-style-card-4 {
/* カード自体の背景や枠線は不要ならリセット */
background: transparent !important;
border: none !important;
padding: 0 !important;
display: block !important; /* flow-rootだと崩れる場合があるためblockに */
}
/* 2. 内部の行（項目+内容のペア） */
.is-style-card-4 .wp-block-columns {
border-radius: 10px;
overflow: hidden;
gap: 0 !important; /* カラム間の隙間なし */
margin-bottom: 10px !important; /* 行ごとの間隔 */
padding: 0 !important;
background: transparent !important; /* エディタ設定の背景色を無効化 */
border: 4px solid #DE6262; /* 薄い枠線を追加して視認性アップ */
}
/* 3. 左側（項目名：33%部分） */
.is-style-card-4 .wp-block-columns > .wp-block-column:first-child {
background-color: #DE6262 !important; /* 強制的に赤 */
color: #ffffff !important;
padding: 15px !important;
display: flex;
align-items: center;
justify-content: center; /* 文字中央揃え */
margin: 0 !important; /* 余計なマージン削除 */
}
/* 4. 右側（内容：66%部分） */
.is-style-card-4 .wp-block-columns > .wp-block-column:last-child {
background-color: #ffffff !important; /* 強制的に白 */
color: #333333 !important;
padding: 15px !important;
display: flex;
align-items: center;
justify-content: flex-start; /* 左揃え */
margin: 0 !important;
}
/* 内部のテキスト調整 */
.is-style-card-4 p {
margin: 0 !important;
font-size: 14px;
line-height: 1.4;
}
/* 5. カード内のボタン調整 */
.is-style-card-4 .wp-block-buttons {
margin-top: 20px; /* リストとボタンの間隔 */
}
/* --------------------------------------------------
下層ボタン調整
-------------------------------------------------- */
/* 管理画面選択用クラス: is-style-full-width-btn
対象ブロック: ボタン (core/buttons) ※親ブロック
*/
.is-style-full-width-btn .wp-block-button {
width: 100%; /* 基本は親要素に合わせて広がる */
max-width: 320px; /* ★ここで最大幅を制限（300px〜400pxがおすすめ） */
margin: 0 auto; /* 幅が余ったときに中央に寄せる */
}
td .is-style-full-width-btn .wp-block-button {
width: 90%;
max-width: 320px;
margin: 0 auto;
}
.is-style-full-width-btn .wp-block-button__link {
width: 100%;
border-radius: 9999px;
font-size: 16px;
box-sizing: border-box;
text-align: center;
justify-content: center;
}
/* 管理画面選択用クラス: is-style-link-icon
対象ブロック: ボタン (core/button) ※子ブロック
*/
/* 1. テキスト位置調整 */
/* 親が全幅スタイル(is-style-full-width-btn) かつ 自身がアイコン付き(is-style-link-icon)の場合 */
.is-style-full-width-btn .wp-block-button.is-style-link-icon .wp-block-button__link {
position: relative;
padding-right: 3.5em;
}
/* 2. SVGアイコン表示 */
.is-style-full-width-btn .wp-block-button.is-style-link-icon .wp-block-button__link::after {
content: "";
position: absolute;
top: 50%;
right: 1.2em;
transform: translateY(-50%);
width: 1.2em;
height: 1.2em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23ffffff;%7D%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M96,0v416h416V0H96z M472,376H136V40h336V376z'/%3E%3Cpolygon class='st0' points='40,472 40,296 40,136 40,96 0,96 0,512 416,512 416,472 376,472'/%3E%3Cpolygon class='st0' points='232.812,312.829 350.671,194.969 350.671,279.766 390.671,279.766 390.671,126.688 237.594,126.688 237.594,166.688 322.39,166.688 204.531,284.547'/%3E%3C/g%3E%3C/svg%3E");
}
/* 管理画面選択用クラス: is-style-card-5
対象ブロック: カラム (core/column)
構造: カラム(card-5) > カラム群 > カラム(項目) + カラム(内容)
*/
.is-style-card-5 {
background: var(--wp--preset--color--base-4);
border: 4px solid var(--wp--preset--color--accent-1);
border-radius: 20px;
overflow: hidden;
gap: 0 !important;
margin-bottom: 1em;
display: flow-root;
}
.is-style-card-5 p {
padding:0rem 1rem;
margin-top: 0px;
}
.is-style-card-5 ul {
padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
margin-top: 0px;
}
.is-style-card-5 strong {
font-weight: bold;
}
/* 鳥取独自カード*/
.wp-block-column.is-style-card-6 {
background: var(--wp--preset--color--base-4);
border: 4px solid var(--wp--preset--color--accent-2);
border-radius: 20px;
padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--12);
display: flow-root;
}
.wp-block-table.is-style-stripes {
border-radius: 20px;
overflow: hidden;
border: 4px solid var(--wp--preset--color--accent-1);
}
.wp-block-table.is-style-stripes table {
border: 2px solid var(--wp--preset--color--accent-1);
}
.wp-block-table.is-style-stripes thead {
background-color: #DE6262;
color: #fff;
border: 2px solid var(--wp--preset--color--accent-1);
}
.wp-block-table.is-style-stripes thead th {
border: 2px dotted #fff;
}
.wp-block-table.is-style-stripes tbody tr {
background-color: #FFEFC9;
border: 2px dotted #A4A4A4;
}
.wp-block-table.is-style-stripes tbody td {
border: 2px dotted #A4A4A4;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) {
background-color: #FFFCF5;
}
/* =========================================
テーブル横スクロール（矢印付き）デザイン調整版
クラス名: is-style-scroll-hint
========================================= */
/* --- スマホ表示 (768px以下) --- */
@media (max-width: 768px) {
/* 1. 外枠（figure）の設定 */
/* 文字を置くための透明な土台にします */
figure.wp-block-table.is-style-scroll-hint, .is-style-scroll-hint {
display: block !important;
overflow-x: visible !important;
position: relative !important;
padding-top: 35px !important; /* 文字用のスペース */
margin-bottom: 2em !important;
border: none !important; /* ★外枠の線は消す（文字を囲わないため） */
background: transparent !important;
}
/* 2. 「スクロールできます」の文字設定 */
figure.wp-block-table.is-style-scroll-hint::before, .is-style-scroll-hint::before {
content: '← スクロールできます →';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
font-size: 12px;
color: var(--wp--preset--color--accent-1);
font-weight: bold;
pointer-events: none;
}
/* 3. テーブル本体（table）の設定 */
figure.wp-block-table.is-style-scroll-hint table, .is-style-scroll-hint table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
white-space: nowrap;
border: 4px solid var(--wp--preset--color--accent-1);
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
background: #fff;
}
/* 4. セルの設定 */
.is-style-scroll-hint th, .is-style-scroll-hint td {
white-space: nowrap;
vertical-align: middle;
border-right: none !important;
border-top: none !important;
}
/* 最後の行の下線は消す（枠線と被るため） */
.is-style-scroll-hint tbody tr:first-child th, .is-style-scroll-hint tbody tr:first-child td, .is-style-scroll-hint tbody tr:last-child th, .is-style-scroll-hint tbody tr:last-child td {
border-bottom: none !important;
}
/* アニメーションバー */
figure.wp-block-table.is-style-scroll-hint::after, .is-style-scroll-hint::after {
content: "";
display: block !important;
position: absolute !important;
top: 20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100% !important;
max-width: 120px !important;
height: 2px !important;
background: #ccc !important;
animation: scrollHintBar 1.5s infinite ease-in-out;
}
}
/* アニメーション定義 */
@keyframes scrollHintBar {
0% {
width: 40px;
opacity: 1;
}
50% {
width: 120px;
opacity: 0.5;
}
100% {
width: 40px;
opacity: 1;
}
}
/* --- PC表示 (769px以上) --- */
@media (min-width: 769px) {
figure.wp-block-table.is-style-scroll-hint, .is-style-scroll-hint {
overflow-x: visible !important;
padding-top: 0 !important;
}
figure.wp-block-table.is-style-scroll-hint::before, .is-style-scroll-hint::before, figure.wp-block-table.is-style-scroll-hint::after, .is-style-scroll-hint::after {
display: none !important;
}
figure.wp-block-table.is-style-scroll-hint table, .is-style-scroll-hint table {
display: table !important;
white-space: normal !important;
/* PCではデフォルトのデザインに戻すためリセット */
border: initial !important;
border-radius: initial !important;
border-collapse: collapse !important;
}
}
/* 管理画面選択用クラス: is-style-card-7
対象ブロック: カラム (core/column)
構造: カラム(card-7) > カラム群 > カラム(項目) + カラム(内容)
*/
.wp-block-column.is-style-card-7 {
background: var(--wp--preset--color--base-2);
border-radius: 20px;
padding: var(--wp--preset--spacing--40);
display: flow-root;
}
/* card-01内の画像エリアを中央揃えにする設定 */
.card-01 .wp-block-columns > .wp-block-column:first-child {
display: flex; /* フレックスボックス化 */
justify-content: center; /* 左右中央揃え */
align-items: center; /* 上下中央揃え */
}
/* figureタグ自体の余白をリセット（念のため） */
.card-01 .wp-block-image {
margin: 0 auto;
}
/*@media (max-width: 768px) {
.card-01 .wp-block-image {
width: 50%;
}
}*/
/* 管理画面選択用クラス: is-style-botan-icon
対象ブロック: ボタン (core/button) ※子ブロック
*/
/* 1. テキスト位置調整 */
/* 親が全幅スタイル(is-style-full-width-btn) かつ 自身がアイコン付き(is-style-botan-icon)の場合 */
.is-style-full-width-btn .wp-block-button.is-style-botan-icon .wp-block-button__link {
position: relative;
padding-right: 3.5em;
}
.is-style-full-width-btn .wp-block-button.is-style-botan-icon .wp-block-button__link::after {
content: "";
position: absolute;
top: 50%;
right: 1.2em;
transform: translateY(-50%);
width: 1.8em;
height: 1.8em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='%23ffffff' d='M15,0C6.72,0,0,6.72,0,15s6.72,15,15,15,15-6.72,15-15S23.28,0,15,0ZM21.67,13.53c.59.59.59,1.54,0,2.12l-8.11,8.11c-.29.29-.68.44-1.06.44s-.77-.15-1.06-.44c-.59-.59-.59-1.54,0-2.12l7.01-7.01-6.68-6.68c-.59-.59-.59-1.54,0-2.12.59-.59,1.54-.59,2.12,0'/%3E%3C/svg%3E");
}
/* ------------------------------
2. カラム・ボタンのレイアウト調整
------------------------------ */
/* カラム全体の設定：高さを揃える */
.top-purpose .wp-block-columns {
align-items: stretch; /* 子要素の高さを揃える */
gap: 5 !important;/* 縦横の隙間 */
}
/* カラム個別の設定 */
.top-purpose .wp-block-column {
display: flex;
flex-direction: column;
}
/* ボタン群エリア */
.top-purpose .wp-block-buttons {
height: 100%;
width: 100%;
}
/* ボタン外枠 */
.top-purpose .wp-block-button.is-style-anchor-icon {
width: 100%;
height: 100%;
display: flex;
}
.section-top-area h2{
margin:1rem;
}
.section-top-area p{
line-height: 1.2rem;
}
/* ------------------------------
3. ボタンのデザイン (is-style-anchor-icon)
------------------------------ */
.wp-block-button.is-style-anchor-icon .wp-block-button__link {
width: 100%;
height: 100%;
min-height: 72px;
display: flex;
justify-content: center; /* 文字を中央寄せ */
align-items: center; /* 上下中央寄せ */
position: relative; /* アイコン配置の基準 */
background-color: #ffffff !important;
border: 3px solid var(--wp--preset--color--accent-1) !important;
border-radius: 20px; /* 全体の角丸 */
color: var(--wp--preset--color--accent-1) !important;
font-weight: 700;
padding: 0 2rem 0 0.5rem;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05); /* うっすら立体感 */
transition: all 0.3s ease;
text-align: center;
line-height: 1.4;
}
/* ホバー時の動き */
.wp-block-button.is-style-anchor-icon .wp-block-button__link:hover {
transform: translateY(2px);
box-shadow: none;
background-color: #fffaf0 !important; /* ホバーで少し色を変える */
}
/* ------------------------------
4. アイコン（▼の角丸版）
------------------------------ */
.wp-block-button.is-style-anchor-icon .wp-block-button__link::after {
content: "";
display: block;
position: absolute;
top:35%;
right: 0.5rem; /* 右端からの距離 */
transform: translateX(-50%) rotate(45deg); /* 中央配置して45度回転 */
width: 10px;
height: 10px;
border-bottom: 3px solid var(--wp--preset--color--accent-1);
border-right: 3px solid var(--wp--preset--color--accent-1);
border-radius: 2px; /* 角を少し丸くする */
}
/* =========================================
グループスタイル：クレヨンストライプ（波用）
クラス名: .is-style-crayon-stripe
========================================= */
/* 1. 背景と波用エリア設定 */
.wp-block-group.is-style-crayon-stripe {
/* --- ベースの背景色 --- */
background-color: var(--wp--preset--color--base-2);
position: relative; /* パターン配置の基準 */
/* 上の余白 */
padding-top: var(--wp--preset--spacing--60) !important;
/* 下のマージンを消して波とくっつける */
margin-bottom: 0 !important;
/* はみ出し防止 */
overflow: hidden;
}
/* 2. SVGパターンの表示（擬似要素＋CSSマスク） */
.wp-block-group.is-style-crayon-stripe::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* コンテンツの邪魔をしない */
z-index: 0; /* コンテンツの下に配置 */
/* --- ★ここで模様の色を指定します（変更可能） --- */
/* 例：薄い赤（透明度10%） */
background-color: rgba(222, 98, 98, 0.1);
/* --- SVGをマスクとして使用 --- */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_1' data-name='レイヤー 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M12.25,42.55c1.91-1.9,3.28-1.06,5.76-3.56.53-.53,2.53-3.38,3.1-3.52,2.26-.58,4.05-5.19,6.33-5.9,2.43-.76,5.64-7.73,5.92-8.1,1.43-1.89,1.89-1.43,2.16-1.56,2.88-1.48,3.63-3.17,5.14-5.18,1.38-1.84,1.79-3.14,3.51-4.51,2.31-1.83,3.81-2.96,5.62-4.32.08-.06.14-.11.22-.17V0h-5.03c-1.36,1.51-2.62,2.76-3.59,3.38-2.59,1.62-3.01,1.34-5.97,4.51-2.94,3.14-3.69,4.72-5.69,7.66-.49.72-2.01,1.76-4.15,3.21-3.65,2.5-1.92,3.24-4.42,5.68-3.13,3.06-4.41,4.56-8.13,6.81-1.97,1.2-3.51,4.58-5.48,6.77-2.43,2.7-5.14,4.18-5.61,4.51-.64.45-1.28,1-1.91,1.62v5.84h4.08c.89-.76,1.88-1.45,3.1-2.05,2.31-1.12,2.68-3.03,5.07-5.41Z'/%3E%3Cpath class='cls-1' d='M12.78,16.85c2.71-2.16,2.79-4.61,4.5-5.09s3.19-3.44,6.72-7.25C25.68,2.69,28.03,1.68,29.57,0h-12.24c-.3.46-.58.94-.82,1.5-1.14,2.23-4.86,4.7-8.22,9.98-2.53,3.98-4.64,2.81-6.66,4.87-.51.52-1.05,1.11-1.61,1.75v11.68c4.88-3.87,6.55-7.97,12.77-12.94Z'/%3E%3Cpath class='cls-1' d='M43.23,36.23c2.69-2.18,2.28-4.22,4.46-5.14.82-.49,1.48-.76,2.32-1.29v-11.8c-1.25,1.5-2.45,3.16-3.28,4.82-1.12,2.24-4.73,2.77-8.04,8.08-2.5,4-4.62,2.85-6.62,4.94-3.28,3.42-8.02,9.86-10.69,11.54-1.9,1.19-2.64,1.36-4.07,2.62h12.34s.09-.07.14-.1c5.48-4.1,6.94-8.38,13.44-13.67Z'/%3E%3Cpath class='cls-1' d='M3.98,0H0v5.75C1.64,4.42,2.86,1.36,3.98,0Z'/%3E%3Cpath class='cls-1' d='M50,44.16c-.16.11-.32.22-.5.35-3.38,2.33-2.65,3.4-4.52,5.5h5.02v-5.85Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_1' data-name='レイヤー 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M12.25,42.55c1.91-1.9,3.28-1.06,5.76-3.56.53-.53,2.53-3.38,3.1-3.52,2.26-.58,4.05-5.19,6.33-5.9,2.43-.76,5.64-7.73,5.92-8.1,1.43-1.89,1.89-1.43,2.16-1.56,2.88-1.48,3.63-3.17,5.14-5.18,1.38-1.84,1.79-3.14,3.51-4.51,2.31-1.83,3.81-2.96,5.62-4.32.08-.06.14-.11.22-.17V0h-5.03c-1.36,1.51-2.62,2.76-3.59,3.38-2.59,1.62-3.01,1.34-5.97,4.51-2.94,3.14-3.69,4.72-5.69,7.66-.49.72-2.01,1.76-4.15,3.21-3.65,2.5-1.92,3.24-4.42,5.68-3.13,3.06-4.41,4.56-8.13,6.81-1.97,1.2-3.51,4.58-5.48,6.77-2.43,2.7-5.14,4.18-5.61,4.51-.64.45-1.28,1-1.91,1.62v5.84h4.08c.89-.76,1.88-1.45,3.1-2.05,2.31-1.12,2.68-3.03,5.07-5.41Z'/%3E%3Cpath class='cls-1' d='M12.78,16.85c2.71-2.16,2.79-4.61,4.5-5.09s3.19-3.44,6.72-7.25C25.68,2.69,28.03,1.68,29.57,0h-12.24c-.3.46-.58.94-.82,1.5-1.14,2.23-4.86,4.7-8.22,9.98-2.53,3.98-4.64,2.81-6.66,4.87-.51.52-1.05,1.11-1.61,1.75v11.68c4.88-3.87,6.55-7.97,12.77-12.94Z'/%3E%3Cpath class='cls-1' d='M43.23,36.23c2.69-2.18,2.28-4.22,4.46-5.14.82-.49,1.48-.76,2.32-1.29v-11.8c-1.25,1.5-2.45,3.16-3.28,4.82-1.12,2.24-4.73,2.77-8.04,8.08-2.5,4-4.62,2.85-6.62,4.94-3.28,3.42-8.02,9.86-10.69,11.54-1.9,1.19-2.64,1.36-4.07,2.62h12.34s.09-.07.14-.1c5.48-4.1,6.94-8.38,13.44-13.67Z'/%3E%3Cpath class='cls-1' d='M3.98,0H0v5.75C1.64,4.42,2.86,1.36,3.98,0Z'/%3E%3Cpath class='cls-1' d='M50,44.16c-.16.11-.32.22-.5.35-3.38,2.33-2.65,3.4-4.52,5.5h5.02v-5.85Z'/%3E%3C/svg%3E");
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
-webkit-mask-size: 100px auto; /* パターンのサイズ（お好みで調整） */
mask-size: 100px auto;
}
.wp-block-group.is-style-crayon-stripe.back-ground-color02::before {
background-color: rgba(214, 222, 255, 0.3);
}
/* 3. 内部レイアウト調整（高さ揃え） */
/* このスタイルが適用されたグループ内のカラム */
.wp-block-group.is-style-crayon-stripe .wp-block-columns {
align-items: stretch !important; /* 子要素の高さを揃える */
gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
position: relative; /* 背景より上に表示するため */
z-index: 1;
}
/* カラム自体を縦並びフレックスに */
.wp-block-group.is-style-crayon-stripe .wp-block-column {
display: flex;
flex-direction: column;
margin-bottom: -1px;
}
/* 1. ボックス全体の外枠（角丸・影） */
.instagram_box {
border-radius: 15px;
overflow: hidden;
background-color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border: 1px solid #eeeeee;
margin-bottom: 2em;
}
.instagram_box .wp-block-column {
margin: 0 !important;
}
.instagram_box p {
background: radial-gradient(circle at 30% 107%, #ffa22a 0%, #ffc12f 5%, #ff3795 45%, #d624aa 60%, #285AEB 90%);
color: #ffffff;
font-weight: bold;
text-align: center;
padding: 15px;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.instagram_box p::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/* インスタグラムのアイコン画像（白色SVG） */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}
.instagram_box #sb_instagram {
padding: 10px !important;
background: transparent !important;
}
.wp-block-buttons.is-style-tag-cate-btn {
gap: 8px !important; /* ボタン同士の間隔 */
}
.is-style-tag-cate-btn .wp-block-button__link {
width: 100%;
border-radius: 9999px;
font-size: clamp(8px, 3vw, 12px);
box-sizing: border-box;
text-align: center;
justify-content: center;
padding: 0.5rem 1.5rem;
}
/* =========================================
フッターエリア全体設定
========================================= */
footer{
margin-top: 1rem;
}
/* 1. フッター直上の全幅画像 */
.footer-top-hero {
width: 100%;
margin-bottom: -1px; /* 隙間防止 */
line-height: 0;
}
.footer-hero-img {
width: 100%;
height: auto;
max-height: 250px; /* PCでの高さ上限 */
object-fit: cover;
}
/* 2. フッター本体 */
.custom-site-footer {
background-color: #FFE580;
color: #333;
padding-top: 60px;
padding-bottom: 20px;
font-size: 14px;
margin-top: -30px;
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
/* PC: 左(狭め) | 中央(広め) | 右(広め) */
grid-template-columns: 1fr 1fr 240px;
gap: 50px;
align-items: start;
}
.footer-group {
margin-bottom: 40px; /* グループ間の余白 */
}
/* =========================================
階層リンクのデザイン（共通：右端に矢印）
========================================= */
/* すべてのリンク共通設定 */
.custom-site-footer a {
text-decoration: none;
color: inherit;
transition: color 0.3s, background-color 0.3s;
display: flex;
justify-content: space-between; /* 文字は左、矢印は右 */
align-items: center;
position: relative;
}
.custom-site-footer a:hover {
color: var(--wp--preset--color--accent-1, #DE6262);
}
/* 矢印（＞）の生成 */
.custom-site-footer a::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-top: 2px solid currentColor; /* 文字色と同じ線 */
border-right: 2px solid currentColor; /* 文字色と同じ線 */
transform: rotate(45deg); /* 45度回転して＞にする */
margin-left: 10px;
opacity: 0.6; /* 少し薄くする */
}
/* --- レベル1：大項目 (H4) --- */
.footer-heading {
margin: 0 0 15px 0;
}
.footer-heading a {
font-size: 18px;
font-weight: 700;
color: var(--wp--preset--color--accent-1, #DE6262);
border-bottom: 2px solid var(--wp--preset--color--accent-1, #DE6262);
padding-bottom: 8px;
}
/* 大項目の矢印は少し大きく */
.footer-heading a::after {
width: 8px;
height: 8px;
border-width: 3px;
opacity: 1;
}
/* 単独リンク（イベント等）用 */
.footer-heading.single-link {
margin-bottom: 15px;
}
/* --- レベル2：中項目 (H5) --- */
.footer-sub-group {
margin-bottom: 25px;
}
.footer-sub-heading {
margin: 0 0 8px 0;
}
.footer-sub-heading a {
font-size: 15px;
font-weight: 700;
color: #444;
padding: 6px 0;
border-bottom: 1px dotted #ccc; /* 控えめな下線 */
}
/* 中項目の矢印 */
.footer-sub-heading a::after {
border-width: 2px;
}
/* --- レベル3：小項目 (li) --- */
.footer-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer-list li a {
font-size: 13px;
color: #666;
padding: 5px 0 5px 1em; /* 左にインデント */
}
.footer-list li a:hover {
background-color: rgba(255, 255, 255, 0.5); /* ホバー時に薄く背景 */
padding-left: 1.2em; /* ホバーで少し右に動くアニメーション */
}
/* 小項目の矢印は小さく */
.footer-list li a::after {
width: 5px;
height: 5px;
border-width: 1px;
}
/* コピーライト */
.footer-copyright {
text-align: center;
border-top: 1px solid rgba(0, 0, 0, 0.1);
/* margin-top: 50px;*/
padding-top: 20px;
font-size: 11px;
color: #666;
}
/* =========================================
レスポンシブ対応
========================================= */
/* タブレット (2列表示) */
@media (max-width: 1024px) {
.footer-inner {
grid-template-columns: 1fr 1fr; /* 2列化 */
gap: 40px;
}
/* 左カラム（救急など）を全幅にして上に配置 */
.footer-col:first-child {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr; /* 中で2列に */
gap: 20px;
}
}
/* スマホ (1列表示) */
@media (max-width: 768px) {
.footer-inner {
grid-template-columns: 1fr; /* 完全1列 */
gap: 40px;
}
.footer-col:first-child {
grid-template-columns: 1fr; /* サイドバーも1列に戻す */
}
/* タップ領域を広げる調整 */
.footer-list li a {
padding: 10px 0 10px 1em;
border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
}
.footer-heading a {
font-size: 20px;
}
}
/* アコーディオン制御用のスタイル（スマホのみ） */
@media (max-width: 768px) {
/* 初期状態：リストを隠して高さを0にする */
.js-accordion .footer-list {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease; /* スムーズに開閉 */
margin: 0;
pointer-events: none;
}
/* 開いた状態 */
.js-accordion.is-open .footer-list {
max-height: 500px; /* リストが収まる十分な高さ */
opacity: 1;
margin-top: 10px;
margin-bottom: 20px;
pointer-events: auto;
}
/* 矢印を回転させる設定 */
.js-accordion .footer-sub-heading a {
cursor: pointer;
position: relative;
}
.js-accordion .footer-sub-heading a::after {
transition: transform 0.4s ease;
}
/* 開いている時は矢印を下向き（あるいは回転）に */
.js-accordion.is-open .footer-sub-heading a::after {
transform: rotate(135deg);
}
}
/* PCではアコーディオンを無効化してすべて表示 */
@media (min-width: 769px) {
.footer-list {
max-height: none !important;
opacity: 1 !important;
pointer-events: auto !important;
}
}
/* =========================================
鳥取独自カード (is-style-card-6) の見出しアイコン
========================================= */
/* 1. 見出し(h4)のレイアウト設定 */
.wp-block-column.is-style-card-6 h4 {
display: flex; /* アイコンと文字を横並びにする */
align-items: center; /* 上下中央揃え */
justify-content: center; /* 左右中央揃え（元がcenter寄せのデザインのため） */
gap: 10px; /* アイコンと文字の間隔 */
}
/* 2. アイコンの表示 (::before) */
.wp-block-column.is-style-card-6 h4::before {
content: "";
display: inline-block;
flex-shrink: 0; /* 画面が狭くてもアイコンを縮ませない */
/* アイコンのサイズ（必要に応じて調整してください） */
width: 80px;
height: 60px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/* SVGデータ（エンコード済み） */
background-image: url("data:image/svg+xml,%3Csvg width='97' height='71' viewBox='0 0 97 71' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.8345 32.6887C27.976 28.1087 21.371 27.8878 17.7335 31.5032C15.1784 34.0436 13.6689 35.1187 11.342 35.9655C10.186 36.3852 12.233 36.8785 13.4406 37.313C15.0385 37.88 19.6554 38.8004 22.2694 42.622C26.2825 48.4981 25.0307 61.5535 32.8359 66.082C43.2847 72.1495 52.2312 64.4767 57.5477 63.3354C60.9201 62.6138 65.3971 64.9333 67.179 66.9656C71.8475 72.3041 70.36 72.4955 73.2392 66.6342C75.3009 62.4297 75.0137 62.9746 70.7356 63.0851C66.0524 63.2029 62.6947 60.7877 57.0469 56.5979C53.4978 53.9617 48.7042 50.5304 44.588 47.1064C41.164 44.2641 35.6119 37.1584 31.8419 32.6887H31.8345Z' fill='%231E9E5F'/%3E%3Cpath d='M37.6151 48.0561C37.0628 46.3698 45.6854 34.9933 53.4686 32.8874C63.4755 30.185 71.1924 34.4484 74.9772 37.2686C81.4644 42.0917 85.0136 49.1606 86.7292 51.9881C86.9207 52.4962 82.996 50.7069 79.5572 49.4625C74.5796 47.6584 66.2736 46.5318 59.6097 46.5834C49.7721 46.657 44.7502 49.5361 42.6222 50.3535C38.3293 52.0029 38.5208 50.8542 37.6077 48.0561H37.6151Z' fill='%231E9E5F'/%3E%3Cpath d='M11.235 18.435C9.625 18.655 8.225 18.675 7.035 18.495C5.845 18.325 4.925 17.945 4.275 17.355C3.635 16.765 3.315 15.965 3.315 14.955C3.315 14.075 3.535 13.325 3.975 12.705C4.425 12.075 5.045 11.53 5.835 11.07C5.765 10.68 5.665 10.235 5.535 9.735C5.405 9.235 5.27 8.74 5.13 8.25C4.99 7.75 4.865 7.33 4.755 6.99C4.685 6.76 4.71 6.535 4.83 6.315C4.96 6.095 5.14 5.95 5.37 5.88C5.62 5.81 5.85 5.84 6.06 5.97C6.28 6.09 6.425 6.27 6.495 6.51C6.665 7.09 6.83 7.72 6.99 8.4C7.16 9.07 7.3 9.715 7.41 10.335C7.89 10.145 8.4 9.975 8.94 9.825C9.48 9.665 10.04 9.52 10.62 9.39C10.86 9.33 11.085 9.365 11.295 9.495C11.505 9.625 11.635 9.81 11.685 10.05C11.735 10.3 11.695 10.53 11.565 10.74C11.435 10.94 11.25 11.065 11.01 11.115C9.76 11.375 8.745 11.655 7.965 11.955C7.185 12.245 6.585 12.555 6.165 12.885C5.755 13.205 5.47 13.54 5.31 13.89C5.16 14.23 5.085 14.585 5.085 14.955C5.085 15.745 5.565 16.305 6.525 16.635C7.485 16.955 8.98 16.965 11.01 16.665C11.26 16.625 11.48 16.685 11.67 16.845C11.87 16.995 11.985 17.19 12.015 17.43C12.045 17.68 11.985 17.9 11.835 18.09C11.685 18.29 11.485 18.405 11.235 18.435ZM21.9 18.3C21.68 18.33 21.48 18.275 21.3 18.135C21.13 18.005 21.03 17.83 21 17.61C20.98 17.39 21.035 17.195 21.165 17.025C21.305 16.845 21.485 16.74 21.705 16.71C22.655 16.58 23.405 16.375 23.955 16.095C24.515 15.815 24.905 15.485 25.125 15.105C25.345 14.725 25.425 14.33 25.365 13.92C25.295 13.39 25.1 13.005 24.78 12.765C24.46 12.525 24.005 12.43 23.415 12.48C23.095 12.5 22.72 12.545 22.29 12.615C21.87 12.675 21.435 12.745 20.985 12.825C20.535 12.905 20.105 12.995 19.695 13.095C19.285 13.185 18.93 13.27 18.63 13.35C18.41 13.41 18.205 13.39 18.015 13.29C17.825 13.18 17.7 13.015 17.64 12.795C17.58 12.585 17.6 12.385 17.7 12.195C17.81 11.995 17.975 11.865 18.195 11.805C18.515 11.715 18.89 11.625 19.32 11.535C19.76 11.445 20.215 11.36 20.685 11.28C21.165 11.19 21.63 11.115 22.08 11.055C22.54 10.995 22.945 10.95 23.295 10.92C24.305 10.84 25.13 11.045 25.77 11.535C26.41 12.015 26.795 12.72 26.925 13.65C27.035 14.36 26.925 15.045 26.595 15.705C26.265 16.355 25.71 16.915 24.93 17.385C24.15 17.845 23.14 18.15 21.9 18.3ZM41.235 18.435C39.625 18.655 38.225 18.675 37.035 18.495C35.845 18.325 34.925 17.945 34.275 17.355C33.635 16.765 33.315 15.965 33.315 14.955C33.315 14.075 33.535 13.325 33.975 12.705C34.425 12.075 35.045 11.53 35.835 11.07C35.765 10.68 35.665 10.235 35.535 9.735C35.405 9.235 35.27 8.74 35.13 8.25C34.99 7.75 34.865 7.33 34.755 6.99C34.685 6.76 34.71 6.535 34.83 6.315C34.96 6.095 35.14 5.95 35.37 5.88C35.62 5.81 35.85 5.84 36.06 5.97C36.28 6.09 36.425 6.27 36.495 6.51C36.665 7.09 36.83 7.72 36.99 8.4C37.16 9.07 37.3 9.715 37.41 10.335C37.89 10.145 38.4 9.975 38.94 9.825C39.48 9.665 40.04 9.52 40.62 9.39C40.86 9.33 41.085 9.365 41.295 9.495C41.505 9.625 41.635 9.81 41.685 10.05C41.735 10.3 41.695 10.53 41.565 10.74C41.435 10.94 41.25 11.065 41.01 11.115C39.76 11.375 38.745 11.655 37.965 11.955C37.185 12.245 36.585 12.555 36.165 12.885C35.755 13.205 35.47 13.54 35.31 13.89C35.16 14.23 35.085 14.585 35.085 14.955C35.085 15.745 35.565 16.305 36.525 16.635C37.485 16.955 38.98 16.965 41.01 16.665C41.26 16.625 41.48 16.685 41.67 16.845C41.87 16.995 41.985 17.19 42.015 17.43C42.045 17.68 41.985 17.9 41.835 18.09C41.685 18.29 41.485 18.405 41.235 18.435ZM51.945 18.705C51.765 18.535 51.665 18.325 51.645 18.075C51.635 17.825 51.72 17.61 51.9 17.43C52.66 16.66 53.255 15.69 53.685 14.52C54.125 13.35 54.345 12.075 54.345 10.695C54.345 9.915 54.22 9.35 53.97 9C53.72 8.65 53.35 8.475 52.86 8.475C52.46 8.475 52.09 8.64 51.75 8.97C51.41 9.29 51.155 9.77 50.985 10.41C50.815 11.05 50.77 11.855 50.85 12.825C50.87 13.055 50.805 13.265 50.655 13.455C50.515 13.635 50.33 13.735 50.1 13.755C49.86 13.775 49.65 13.715 49.47 13.575C49.3 13.435 49.195 13.25 49.155 13.02C49.085 12.5 49.04 11.93 49.02 11.31C49 10.68 48.995 10.055 49.005 9.435C49.025 8.805 49.055 8.225 49.095 7.695C49.135 7.155 49.175 6.71 49.215 6.36C49.245 6.12 49.355 5.925 49.545 5.775C49.735 5.625 49.95 5.565 50.19 5.595C50.44 5.625 50.635 5.73 50.775 5.91C50.925 6.09 50.98 6.31 50.94 6.57C50.92 6.75 50.89 6.98 50.85 7.26C50.82 7.54 50.795 7.805 50.775 8.055C51.005 7.665 51.315 7.34 51.705 7.08C52.095 6.81 52.5 6.675 52.92 6.675C53.99 6.675 54.79 7.025 55.32 7.725C55.85 8.415 56.115 9.405 56.115 10.695C56.115 11.725 56.005 12.73 55.785 13.71C55.575 14.68 55.255 15.59 54.825 16.44C54.405 17.28 53.875 18.025 53.235 18.675C53.065 18.855 52.85 18.945 52.59 18.945C52.34 18.955 52.125 18.875 51.945 18.705Z' fill='%231E9E5F'/%3E%3Cpath d='M73.935 18.795C73.695 18.885 73.47 18.885 73.26 18.795C73.05 18.715 72.905 18.565 72.825 18.345C72.755 18.125 72.655 17.865 72.525 17.565C72.145 17.655 71.7 17.75 71.19 17.85C70.68 17.95 70.145 18.05 69.585 18.15C69.035 18.25 68.5 18.345 67.98 18.435C67.47 18.525 67.02 18.6 66.63 18.66C66.38 18.7 66.16 18.66 65.97 18.54C65.78 18.42 65.66 18.245 65.61 18.015C65.56 17.785 65.6 17.575 65.73 17.385C65.86 17.195 66.045 17.085 66.285 17.055C66.605 17.015 67 16.96 67.47 16.89C67.94 16.82 68.43 16.745 68.94 16.665V13.53H68.22C67.63 13.53 67.16 13.465 66.81 13.335C66.47 13.195 66.225 12.965 66.075 12.645C65.925 12.315 65.85 11.875 65.85 11.325V10.56C65.85 9.73 66.025 9.155 66.375 8.835C66.725 8.515 67.34 8.355 68.22 8.355H68.94V6.27C68.94 6.01 69.025 5.8 69.195 5.64C69.365 5.48 69.565 5.4 69.795 5.4C70.035 5.4 70.24 5.48 70.41 5.64C70.58 5.8 70.665 6.01 70.665 6.27V8.355H71.385C72.275 8.355 72.89 8.515 73.23 8.835C73.57 9.155 73.74 9.73 73.74 10.56V11.325C73.74 11.875 73.665 12.315 73.515 12.645C73.375 12.965 73.13 13.195 72.78 13.335C72.44 13.465 71.975 13.53 71.385 13.53H70.665V16.395C70.895 16.355 71.11 16.32 71.31 16.29C71.52 16.25 71.72 16.21 71.91 16.17C71.83 16 71.75 15.84 71.67 15.69C71.6 15.54 71.53 15.4 71.46 15.27C71.36 15.07 71.35 14.87 71.43 14.67C71.51 14.47 71.645 14.325 71.835 14.235C72.055 14.135 72.275 14.125 72.495 14.205C72.715 14.285 72.88 14.425 72.99 14.625C73.13 14.885 73.29 15.2 73.47 15.57C73.65 15.94 73.825 16.315 73.995 16.695C74.165 17.075 74.305 17.415 74.415 17.715C74.495 17.935 74.495 18.145 74.415 18.345C74.335 18.555 74.175 18.705 73.935 18.795ZM62.715 19.065C62.425 19.095 62.18 19.045 61.98 18.915C61.78 18.795 61.655 18.615 61.605 18.375C61.555 18.105 61.59 17.87 61.71 17.67C61.84 17.47 62.04 17.355 62.31 17.325C62.67 17.275 62.96 17.18 63.18 17.04C63.4 16.89 63.56 16.62 63.66 16.23C63.77 15.84 63.825 15.27 63.825 14.52C63.825 14.26 63.815 14.01 63.795 13.77C63.785 13.53 63.77 13.3 63.75 13.08C63.5 13.49 63.235 13.895 62.955 14.295C62.685 14.695 62.435 15.025 62.205 15.285C62.045 15.465 61.85 15.58 61.62 15.63C61.4 15.68 61.19 15.625 60.99 15.465C60.82 15.335 60.72 15.165 60.69 14.955C60.67 14.735 60.73 14.545 60.87 14.385C61.06 14.185 61.265 13.935 61.485 13.635C61.715 13.325 61.94 13 62.16 12.66C62.39 12.31 62.6 11.97 62.79 11.64C62.99 11.31 63.15 11.02 63.27 10.77C63.22 10.63 63.165 10.49 63.105 10.35C63.055 10.2 63 10.06 62.94 9.93C62.66 10.18 62.39 10.405 62.13 10.605C61.93 10.755 61.7 10.83 61.44 10.83C61.19 10.82 60.98 10.72 60.81 10.53C60.68 10.36 60.62 10.165 60.63 9.945C60.64 9.725 60.74 9.55 60.93 9.42C61.3 9.17 61.69 8.855 62.1 8.475C61.93 8.215 61.745 7.965 61.545 7.725C61.355 7.475 61.16 7.225 60.96 6.975C60.82 6.805 60.77 6.62 60.81 6.42C60.85 6.21 60.955 6.04 61.125 5.91C61.305 5.77 61.505 5.715 61.725 5.745C61.945 5.775 62.13 5.875 62.28 6.045C62.46 6.245 62.635 6.45 62.805 6.66C62.975 6.87 63.135 7.085 63.285 7.305C63.495 7.085 63.69 6.875 63.87 6.675C64.05 6.465 64.21 6.265 64.35 6.075C64.49 5.885 64.68 5.785 64.92 5.775C65.16 5.755 65.36 5.815 65.52 5.955C65.69 6.095 65.79 6.275 65.82 6.495C65.85 6.705 65.795 6.9 65.655 7.08C65.235 7.64 64.745 8.2 64.185 8.76C64.595 9.56 64.915 10.43 65.145 11.37C65.375 12.31 65.49 13.36 65.49 14.52C65.49 15.66 65.38 16.55 65.16 17.19C64.95 17.82 64.635 18.27 64.215 18.54C63.805 18.82 63.305 18.995 62.715 19.065ZM68.445 12.015H68.94V9.87H68.445C68.075 9.87 67.83 9.92 67.71 10.02C67.59 10.11 67.53 10.33 67.53 10.68V11.22C67.53 11.56 67.59 11.78 67.71 11.88C67.83 11.97 68.075 12.015 68.445 12.015ZM70.665 12.015H71.16C71.53 12.015 71.77 11.97 71.88 11.88C72 11.78 72.06 11.56 72.06 11.22V10.68C72.06 10.33 72 10.11 71.88 10.02C71.77 9.92 71.53 9.87 71.16 9.87H70.665V12.015ZM81.645 18.825C80.805 18.825 80.11 18.77 79.56 18.66C79.01 18.56 78.575 18.37 78.255 18.09C77.935 17.82 77.705 17.435 77.565 16.935C77.435 16.425 77.37 15.775 77.37 14.985V11.22C77.37 10.3 77.46 9.575 77.64 9.045C77.83 8.515 78.145 8.125 78.585 7.875C79.035 7.625 79.655 7.47 80.445 7.41C80.535 7.18 80.64 6.905 80.76 6.585C80.88 6.265 80.975 6.025 81.045 5.865C81.145 5.595 81.31 5.405 81.54 5.295C81.77 5.175 82.04 5.16 82.35 5.25C82.61 5.33 82.795 5.49 82.905 5.73C83.015 5.97 83.02 6.21 82.92 6.45C82.87 6.57 82.81 6.715 82.74 6.885C82.67 7.055 82.595 7.215 82.515 7.365H83.37C84.21 7.365 84.905 7.42 85.455 7.53C86.015 7.64 86.45 7.835 86.76 8.115C87.08 8.385 87.305 8.775 87.435 9.285C87.575 9.785 87.645 10.43 87.645 11.22V14.985C87.645 15.775 87.575 16.425 87.435 16.935C87.305 17.435 87.08 17.82 86.76 18.09C86.45 18.37 86.015 18.56 85.455 18.66C84.905 18.77 84.21 18.825 83.37 18.825H81.645ZM79.2 13.935H85.815V12.24H79.2V13.935ZM81.645 17.22H83.37C84.02 17.22 84.515 17.185 84.855 17.115C85.195 17.035 85.435 16.875 85.575 16.635C85.715 16.385 85.79 16.01 85.8 15.51H79.215C79.235 16.01 79.31 16.385 79.44 16.635C79.58 16.875 79.82 17.035 80.16 17.115C80.51 17.185 81.005 17.22 81.645 17.22ZM79.215 10.65H85.8C85.78 10.16 85.7 9.795 85.56 9.555C85.43 9.315 85.19 9.16 84.84 9.09C84.5 9.01 84.01 8.97 83.37 8.97H81.645C81.005 8.97 80.51 9.01 80.16 9.09C79.82 9.16 79.58 9.315 79.44 9.555C79.31 9.795 79.235 10.16 79.215 10.65Z' fill='%23DE6262'/%3E%3C/svg%3E");
}
.bg-custom-pattern {
background-image:
url('/wp-content/themes/twentytwentyfour-child/images/background-img-01.svg'), url('/wp-content/themes/twentytwentyfour-child/images/background-img-02.svg');
background-position:
left 10px top 30px, right 10px bottom 30px;
/* 繰り返しの設定 */
background-repeat: no-repeat, no-repeat;
/* サイズの設定 */
background-size:
200px auto, /* 01の幅を300pxに固定（お好みで調整） */ 200px auto, /* 02はエリア内に収まる最大サイズ */
}
/* 1. 一番外側のカラム（親要素）を基準にする */
.slider-frame-img {
position: relative !important;
display: flex;
justify-content: center;
}
/* 2. 擬似要素を使って、スライダーの「真上」に配置する */
.slider-frame-img::after {
content: "";
position: absolute;
top: 2%;
width: 100%;
max-width: 910px;
height: 100%;
z-index: 100 !important;
pointer-events: none;
opacity: 0.5;
background-image:
url('/wp-content/themes/twentytwentyfour-child/images/background-img.svg');
background-repeat: no-repeat;
background-size: 100%; /* テストサイズ */
background-repeat: no-repeat;
padding-bottom: 20px;
background-position: top 0px left 0px;
}
/* テーブル２列デザイン */
.table-design02 th {
background: #DE6262;
color: #FFF;
}
.table-design02 td {
background: #fff;
}
.table-design02 tbody {
border: 2px solid #DE6262;
}
@media (max-width: 781px) {
/* 親要素：横スクロールの設定 */
.is-style-sp-scroll {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
gap: 10px; /* 画像同士の隙間 */
}
/* 各カラムの設定 */
.is-style-sp-scroll .wp-block-column {
flex: 0 0 auto !important; /* 幅を固定しない設定 */
min-width: 800px; /* 1枚あたりの横幅（お好みで） */
}
/* 画像自体の高さ固定とトリミング設定 */
.is-style-sp-scroll .wp-block-image img {
width: 100%;
/*! min-height: 600px; */ /* ★ここでお好みの高さを指定 */
object-fit: cover; /* ★重要：アスペクト比を維持して枠を埋める */
display: block;
}
.is-style-sp-scroll .img-width-80{
width: 80%;
}
.phon-btn-card1 {
font-weight: bold;
}
.font-label-bold {
font-weight: bold;
}
@media (max-width: 781px) {
.sp-hide-contents {
display: none !important;
}
.top-cardcontents-style h3 {
font-size: 1.2rem;
}
.wp-block-column.is-style-card-1 {
padding: 1rem 1rem 0.3rem 1rem;
}
p {
margin-top: 0 !important;
}
.is-style-full-width-btn .wp-block-button {
width: auto; /* 基本は親要素に合わせて広がる */
max-width: 300px; /* ★ここで最大幅を制限（300px〜400pxがおすすめ） */
margin: 0 auto; /* 幅が余ったときに中央に寄せる */
}
.is-style-full-width-btn .wp-block-button a {
padding: 0.5rem 2rem;
}
.is-style-full-width-btn .wp-block-button a {
font-size: 0.8rem;
}
.wp-block-post-content {
/*! padding: 1rem; */
}
.wp-block-column.is-style-card-2 {
padding: 1rem;
}
.wp-block-column.is-style-card-2 h3{
padding: 1rem 0;
}
.wp-block-column.is-style-card-3 {
padding: 1rem;
}
.top-purpose .wp-block-columns {
}
.is-style-dotted-separator {
padding-bottom: 1rem; /* 点線より上の余白（コンテンツと線の間） */
margin-bottom: 0.5rem; /* 点線より下の余白（線と次のブロックの間） */
}
.wp-block-button.is-style-anchor-icon .wp-block-button__link {
padding: 0.5em 1em 1.5em 1em; /* アイコンが入る分、下に余白を多く取る */
}
}
}
/* ----------------------------------------
絞り込みセクション全体 [custom_filters]
---------------------------------------- */
.custom-filter-section {
background: var(--color-background-5);
padding: 20px 20px;
font-family: 'Zen Maru Gothic', sans-serif;
}
/* 各行の配置 */
.filter-group {
max-width: 1100px;
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
margin: 0 auto;
}
.filter-group:last-child {
margin-bottom: 0;
}
/* ボタンの共通スタイル（画像のようなぷっくりした感じ） */
.filter-btn {
text-decoration: none;
padding: 0.4rem 0.5rem;
border-radius: 8px;
background: #fff;
border: 2px solid #DE6262;
transition: all 0.25s ease-out;
color: #DE6262;
font-weight: bold;
font-size: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax( 12em, 2fr ));
text-align: center;
}
.area-btn.is-active {
background-color: #DE6262; /* 画像の赤色に近い色 */
color: #fff;
border-color: #fDE6262;
}
/* ジャンルボタン（下の段） */
.genre-btn {
border: 3px solid #DE6262; /* 赤枠 */
color: #DE6262;
background: #fff;
}
.genre-btn.is-active {
background-color: #DE6262;
color: #fff;
}
.genre-btn:hover {
background-color: #DE6262;
color: #fff;
}
/* ----------------------------------------
記事一覧カードのデザイン [custom_post_cards]
---------------------------------------- */
/* --- 記事一覧：カード全体のレイアウト（PC3列） --- */
.posts-list {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 25px !important;
margin-bottom: 60px !important;
margin:auto;
max-width:1100px;
}
/* --- カード本体のデザイン --- */
.post-card {
background: #fff !important;
border-radius: 20px !important;
border: 1px solid #eee !important;
box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
transition: all 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
padding-bottom: 10px !important;
}
/* カードを触ったときの浮き上がり */
.post-card:hover {
transform: translateY(-8px) !important;
box-shadow: 0 15px 35px rgba(0,0,0,0.12) !important;
}
/* --- 画像エリア：カードの端から浮かせる余白設定 --- */
.post-thumbnail-container {
position: relative;
width: 100%;
aspect-ratio: 40/21;
background-color: var(--color-light-gray);
overflow: hidden;
flex-shrink: 0;
}
.post-img, .no-image-dummy {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
/*! border-radius: 12px !important; */ /* 画像の角を少し丸く */
display: block !important;
}
/* 画像がない場合のダミー表示 */
.no-image-dummy {
background-color: #f5f5f5 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #bbb !important;
font-weight: bold !important;
font-size: 14px !important;
border: 1px dashed #ddd !important;
}
/* --- テキストコンテンツエリア --- */
.post-content-area {
padding: 15px 20px !important;
text-align: left;
}
/* タグ（エリア・ジャンル）の並び */
.post-meta {
/*! display: flex !important; */
/*! flex-wrap: wrap !important; */
/*! gap: 8px !important; */
/*! margin-bottom: 12px !important; */
/*! align-items: center !important; */
}
/* --- エリアタグのデザイン（1E9E5Fの枠線スタイル） --- */
.area-tag-new {
background-color: #ffffff !important;
color: #1E9E5F !important;
border: 1.5px solid #1E9E5F !important; /* 指定の緑色 */
font-size: 11px !important;
padding: 2px 10px !important;
border-radius: 4px !important;
font-weight: 700 !important;
display: inline-block !important;
}
/* ジャンルタグ（ハッシュタグ形式） */
.genre-tag {
color: #DE6262 !important;
font-size: 13px !important;
font-weight: 700 !important;
}
/* 記事タイトル */
.post-title {
font-size: 1.15rem !important;
margin: 0.75rem 0 0.75rem 0 !important;
line-height: 1.5 !important;
font-weight: 700 !important;
color: #000 !important;
display: -webkit-box;
-webkit-line-clamp: 3; /* 2行で省略 */
-webkit-box-orient: vertical;
overflow: hidden;
font-family: "Zen Maru Gothic", sans-serif;
}
/* 抜粋文 */
.post-excerpt {
font-size: 0.85rem !important;
color: #666 !important;
line-height: 1.6 !important;
display: -webkit-box;
-webkit-line-clamp: 2; /* 2行で省略 */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- レスポンシブ調整（タブレット2列、スマホ1列） --- */
@media (max-width: 1024px) {
.posts-list { grid-template-columns: repeat(2, 1fr) !important;
margin: 0 40px;
}
}
@media (max-width: 781px) {
.posts-list {
gap: 0.5rem !important;
margin: 0rem;
}
.custom-posts-list{
margin: 0rem 1rem;
}
.post-img, .no-image-dummy {
margin:0;
padding:0;
box-sizing:border-box;
}
.post-title {
font-size: 1rem !important;
}
.post-content-area {
padding: 8px 12px !important;
text-align:left;
}
}
/* アイキャッチ画像 */
.post-thumbnail img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
/* カテゴリ・タグエリア */
/* エリアタグ：アイコンと文字を横並びにし、上下中央に揃える */
.area-chubu,.area-central{
display: inline-flex !important;
align-items: center !important;
gap: 0.1rem !important; /* アイコンと文字の隙間 */
background-color: #1E9E5F !important;
color: #fff !important;
border: 1.5px solid #1E9E5F !important;
font-size: 0.6rem !important;
padding: 0.3rem 0.5rem !important;
border-radius: 99px !important;
font-weight: bold;
}
.area-seibu,.area-west{
display: inline-flex !important;
align-items: center !important;
gap: 0.1rem !important; /* アイコンと文字の隙間 */
background-color: #FF7B4E !important;
color: #ffffff !important;
border: 1.5px solid #FF7B4E !important;
font-size: 0.6rem !important;
padding: 0.3rem 0.5rem !important;
border-radius: 99px !important;
font-weight: bold;
}
.area-toubu,.area-east{
display: inline-flex !important;
align-items: center !important;
gap: 0.1rem !important; /* アイコンと文字の隙間 */
background-color: #487CFF !important;
color: #ffffff !important;
border: 1.5px solid #487CFF !important;
font-size: 0.6rem !important;
padding: 0.3rem 0.5rem !important;
border-radius: 99px !important;
font-weight: bold;
}
/* アイコンの色とサイズ */
.area-icon {
width: 14px !important;
height: 14px !important;
fill: #fff !important; /* タグと同じ緑色 */
}
/* 赤いエリアタグ */
.area-tag {
background: #f06262;
color: #fff;
font-size: 0.8rem;
padding: 4px 14px;
border-radius: 6px;
font-weight: 700;
}
/* ハッシュタグ風ジャンル */
.genre-tag {
color: #f06262;
font-size: 0.9rem;
font-weight: 700;
/*margin-left: 5px;*/
}
/* タイトル */
.post-title {
font-size: 1.25rem;
margin: 15px 20px;
line-height: 1.4;
font-weight: 700;
}
.post-title a {
color: #333;
transition: color 0.2s;
}
.post-title a:hover {
color: #f06262;
}
/* 説明文 */
.post-excerpt {
/*! padding: 0 20px 25px 20px; */
font-size: 0.95rem;
color: #777;
line-height: 1.7;
flex-grow: 1;
margin-bottom: 0.75rem;
}
/* ----------------------------------------
ページネーション（下部の数字）
---------------------------------------- */
.pagination {
text-align: center;
margin-top: 50px;
}
.pagination .page-numbers {
display: inline-block;
padding: 6px 12px;
margin: 4px 2px;
border-radius: 12px;
background: #fff;
color: #1E9E5F;
border: 2px solid #1E9E5F;
font-weight: 700;
transition: all 0.2s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
background: #1E9E5F;
color: #fff;
}
/* --- ジャンルアコーディオンのデザイン（中央寄せ・赤文字・＞アイコン） --- */
.genre-accordion {
margin-top: 15px;
border-radius: 10px;
overflow: hidden;
}
.genre-summary {
padding: 12px 20px;
font-weight: 700;
color: #DE6262; /* 指定の赤色 */
cursor: pointer;
list-style: none; /* 矢印を消す */
text-align: center; /* テキストを中央に */
position: relative;
transition: all 0.3s;
display: block; /* 中央寄せを確実にするため */
}
/* カスタムアイコン：下向きの ＞ (V) */
.genre-summary::after {
content: "";
display: inline-block;
margin-left: 16px;
position: absolute;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid #DE6262; /* ＞ の線 */
border-bottom: 2px solid #DE6262; /* ＞ の線 */
transform: translateY(-70%) rotate(45deg); /* 下向きにする */
transition: transform 0.3s ease;
}
/* 開いている時は ＞ を上に向ける */
.genre-accordion[open] .genre-summary::after {
transform: translateY(-30%) rotate(-135deg);
}
/* アコーディオンの中身（ボタンエリア） */
.genre-accordion .genre-filter {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center; /* 中のボタンも中央寄せ */
gap: 10px;
}
/* Safariのデフォルト矢印消し */
.genre-summary::-webkit-details-marker {
display: none;
}
.area_box_margin{
margin-top:0;
}
/* スマホ対応 */
@media (max-width: 781px) {
.filter-btn {
padding: 0.5rem 0.5rem;
flex: 1 1 40%; /* スマホではボタンを横に並べやすく */
text-align: center;
}
}
/* --- レイアウト全体 --- */
.single-layout-wrapper {
position: relative;
background-color: ##FFFCF5;
min-height: 100vh;
padding-top: 100px;
padding-bottom: 60px;
}
/* --- 第1レイヤー：背景ボケ（高さ200px固定・横幅MAX） --- */
.layer-1-bg-blur {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 400px;
background-size: cover;
background-position: center;
filter: blur(15px);
opacity: 0.9;
z-index: 0;
}
/* --- 第2レイヤー：記事エリア（FFEFC9・角丸） --- */
.layer-2-header-card {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
background-color: #FFEFC9; /* 薄い黄色 */
border-radius: 20px 20px 0 0; /* 上側だけ角丸 */
padding: 30px 40px 10px;
}
.post-header-content {
text-align: left; /* すべて左寄せ */
}
/* .genre-tag-single{
display: inline-flex !important;
background-color: #ffffff !important;
border: 1.5px solid #000 !important;
font-size: 13px !important;
padding: 3px !important;
border-radius: 4px !important;
font-weight: 700 !important;
}*/
.single-title-left {
font-size: 26px;
color: #DE6262;
margin: 15px 0 10px;
font-weight: bold;
}
.post-date-left {
font-size: 14px;
color: #666;
margin-bottom: 20px;
}
/* --- 第3レイヤー：白背景コンテンツ --- */
.layer-3-content-body {
background-color: #ffffff;
padding: 40px;
border-radius: 20px 20px; /* 下側を角丸に */
}
/* アイキャッチコンテナ */
.single-main-visual {
background-color: #f0f0f0; /* グレー背景 */
border-radius: 12px;
margin-bottom: 30px;
display: flex;
justify-content: center;
overflow: hidden;
max-height: 450px;
}
.single-main-visual img {
width: auto;
max-width: 100%;
height: auto;
object-fit: contain;
}
/* ナビゲーション全体のコンテナ */
.page-footer-nav {
background-color: #FFFCF5; /* ほんのりベージュで区切りを明確に */
padding: 0px 20px 60px 20px;
}
.page-footer-nav-inner {
max-width: 900px;
margin: 0 auto;
}
/* 各行のスタイル */
.nav-row {
display: flex;
margin-bottom: 30px;
}
.nav-row:last-child {
margin-bottom: 0;
}
/* 左側の見出しラベル */
.nav-label {
flex: 0 0 160px;
font-weight: bold;
font-size: 15px;
color: #333;
padding-top: 5px;
}
/* 右側のリンク群 */
.nav-links {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
align-items: center;
}
/* エリアリンクの装飾（東部｜中部｜西部） */
.area-links .area-item {
font-size: 18px;
font-weight: bold;
color: #DE6262;
text-decoration: none;
position: relative;
}
.area-links .area-item:not(:last-child)::after {
content: "｜";
color: #ccc;
margin-left: 15px;
font-weight: normal;
}
/* カテゴリ・リサーチのタグ装飾 */
.tag-links a {
font-size: 14px;
color: #666;
background: #fff;
padding: 6px 15px;
border: 1px solid #ddd;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s ease;
}
.tag-links a:hover {
background: #DE6262;
color: #fff;
border-color: #DE6262;
}
/* スマホ・タブレット対応 */
@media (max-width: 768px) {
.page-footer-nav {
padding: 40px 15px;
}
.nav-row {
flex-direction: column; /* 縦並びに */
margin-bottom: 25px;
}
.nav-label {
flex: none;
margin-bottom: 12px;
font-size: 14px;
color: #DE6262; /* スマホではラベルを強調 */
}
.nav-links {
gap: 10px;
}
/* スマホではエリアもタグのようなボタン形式に */
.area-links .area-item {
font-size: 15px;
background: #DE6262;
color: #fff;
padding: 8px 20px;
border-radius: 5px;
width: calc(33.333% - 7px); /* 3並び */
text-align: center;
}
.area-links .area-item:not(:last-child)::after {
display: none; /* 仕切り線を消す */
}
.tag-links a {
padding: 8px 16px; /* タップしやすく少し大きく */
}
}
/* モバイル調整 */
@media (max-width: 768px) {
.layer-2-header-card { margin: 0 15px; padding: 20px; }
.layer-3-content-body { padding: 20px; }
}
:where(.wp-site-blocks :focus) {
outline: none;
}
/* ----------------------------------------
イベント
---------------------------------------- */
.event-filters .area-filter .button{
text-decoration: none;
padding: 20px 35px;
border-radius: 20px;
background: #fff;
border: 3px solid #DE6262;
color: #444;
font-weight: 700;
font-size: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax( 12em, 1fr ));
text-align: center;
font-family: 'Zen Maru Gothic', sans-serif;
}
.event-filters .area-filter {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
/*! margin: 0 40px; */
}
.event-filters .area-filter:last-child {
margin-bottom: 0;
}
.event-filters .genre-filter .button{
text-decoration: none;
padding: 20px 35px;
border-radius: 20px;
background: #fff;
border: 3px solid #DE6262;
color: #444;
font-weight: 700;
font-size: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax( 12em, 1fr ));
text-align: center;
font-family: 'Zen Maru Gothic', sans-serif;
}
.event-filters {
/*! max-width: 1300px; */
margin: 0 auto 2rem auto; /* 左右をautoにすることで中央寄せになります */
padding: 0 20px; /* スマホで端がくっつきすぎないように余白 */
}
/* 2. エリアとジャンルのボタンの並びを中央寄せにする */
/* HTML内のstyle属性(display:flex)が効いているため、justify-contentを追加します */
.event-filters .area-filter > div,
.event-filters .genre-filter > div {
justify-content: center !important; /* 強制的に中央寄せ */
}
/* 3. 「ジャンルを選択:」の文字も中央にする */
.genre-filter p {
text-align: center;
}
.event-filters .genre-filter:last-child {
margin-bottom: 0;
}
@media (max-width: 781px) {
.event-filters {
padding: 25px 15px;
}
.area-filter .button{
padding: 20px 20px;
flex: 1 1 30%; /* スマホではボタンを横に並べやすく */
text-align: center;
}
.genre-filter .button{
padding: 20px 20px;
flex: 1 1 10%; /* スマホではボタンを横に並べやすく */
text-align: center;
}
}
.event-header-section {
font-family: 'Zen Maru Gothic', sans-serif;
}
.event-header-section h1{
font-weight: bold;
text-align: center;
}
.event-header-section .event-navigation{
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
/*! margin: 0 40px; */
}
.event-header-section .button{
text-decoration: none;
padding: 20px 35px;
border-radius: 20px;
background: #DE6262;
border: 3px solid #DE6262;
color: #fff;
font-weight: 700;
font-size: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax( 12em, 1fr ));
text-align: center;
}
.event-header-section {
background-color: var(--wp--preset--color--base-4);
position: relative;
padding-top: var(--wp--preset--spacing--60) !important;
margin-bottom: 0 !important;
overflow: hidden;
/* z-indexのコンテキストを作成 */
z-index: 1;
}
.event-header-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
background-color: rgba(100, 160, 255, 0.1);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_1' data-name='レイヤー 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M12.25,42.55c1.91-1.9,3.28-1.06,5.76-3.56.53-.53,2.53-3.38,3.1-3.52,2.26-.58,4.05-5.19,6.33-5.9,2.43-.76,5.64-7.73,5.92-8.1,1.43-1.89,1.89-1.43,2.16-1.56,2.88-1.48,3.63-3.17,5.14-5.18,1.38-1.84,1.79-3.14,3.51-4.51,2.31-1.83,3.81-2.96,5.62-4.32.08-.06.14-.11.22-.17V0h-5.03c-1.36,1.51-2.62,2.76-3.59,3.38-2.59,1.62-3.01,1.34-5.97,4.51-2.94,3.14-3.69,4.72-5.69,7.66-.49.72-2.01,1.76-4.15,3.21-3.65,2.5-1.92,3.24-4.42,5.68-3.13,3.06-4.41,4.56-8.13,6.81-1.97,1.2-3.51,4.58-5.48,6.77-2.43,2.7-5.14,4.18-5.61,4.51-.64.45-1.28,1-1.91,1.62v5.84h4.08c.89-.76,1.88-1.45,3.1-2.05,2.31-1.12,2.68-3.03,5.07-5.41Z'/%3E%3Cpath class='cls-1' d='M12.78,16.85c2.71-2.16,2.79-4.61,4.5-5.09s3.19-3.44,6.72-7.25C25.68,2.69,28.03,1.68,29.57,0h-12.24c-.3.46-.58.94-.82,1.5-1.14,2.23-4.86,4.7-8.22,9.98-2.53,3.98-4.64,2.81-6.66,4.87-.51.52-1.05,1.11-1.61,1.75v11.68c4.88-3.87,6.55-7.97,12.77-12.94Z'/%3E%3Cpath class='cls-1' d='M43.23,36.23c2.69-2.18,2.28-4.22,4.46-5.14.82-.49,1.48-.76,2.32-1.29v-11.8c-1.25,1.5-2.45,3.16-3.28,4.82-1.12,2.24-4.73,2.77-8.04,8.08-2.5,4-4.62,2.85-6.62,4.94-3.28,3.42-8.02,9.86-10.69,11.54-1.9,1.19-2.64,1.36-4.07,2.62h12.34s.09-.07.14-.1c5.48-4.1,6.94-8.38,13.44-13.67Z'/%3E%3Cpath class='cls-1' d='M3.98,0H0v5.75C1.64,4.42,2.86,1.36,3.98,0Z'/%3E%3Cpath class='cls-1' d='M50,44.16c-.16.11-.32.22-.5.35-3.38,2.33-2.65,3.4-4.52,5.5h5.02v-5.85Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_1' data-name='レイヤー 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M12.25,42.55c1.91-1.9,3.28-1.06,5.76-3.56.53-.53,2.53-3.38,3.1-3.52,2.26-.58,4.05-5.19,6.33-5.9,2.43-.76,5.64-7.73,5.92-8.1,1.43-1.89,1.89-1.43,2.16-1.56,2.88-1.48,3.63-3.17,5.14-5.18,1.38-1.84,1.79-3.14,3.51-4.51,2.31-1.83,3.81-2.96,5.62-4.32.08-.06.14-.11.22-.17V0h-5.03c-1.36,1.51-2.62,2.76-3.59,3.38-2.59,1.62-3.01,1.34-5.97,4.51-2.94,3.14-3.69,4.72-5.69,7.66-.49.72-2.01,1.76-4.15,3.21-3.65,2.5-1.92,3.24-4.42,5.68-3.13,3.06-4.41,4.56-8.13,6.81-1.97,1.2-3.51,4.58-5.48,6.77-2.43,2.7-5.14,4.18-5.61,4.51-.64.45-1.28,1-1.91,1.62v5.84h4.08c.89-.76,1.88-1.45,3.1-2.05,2.31-1.12,2.68-3.03,5.07-5.41Z'/%3E%3Cpath class='cls-1' d='M12.78,16.85c2.71-2.16,2.79-4.61,4.5-5.09s3.19-3.44,6.72-7.25C25.68,2.69,28.03,1.68,29.57,0h-12.24c-.3.46-.58.94-.82,1.5-1.14,2.23-4.86,4.7-8.22,9.98-2.53,3.98-4.64,2.81-6.66,4.87-.51.52-1.05,1.11-1.61,1.75v11.68c4.88-3.87,6.55-7.97,12.77-12.94Z'/%3E%3Cpath class='cls-1' d='M43.23,36.23c2.69-2.18,2.28-4.22,4.46-5.14.82-.49,1.48-.76,2.32-1.29v-11.8c-1.25,1.5-2.45,3.16-3.28,4.82-1.12,2.24-4.73,2.77-8.04,8.08-2.5,4-4.62,2.85-6.62,4.94-3.28,3.42-8.02,9.86-10.69,11.54-1.9,1.19-2.64,1.36-4.07,2.62h12.34s.09-.07.14-.1c5.48-4.1,6.94-8.38,13.44-13.67Z'/%3E%3Cpath class='cls-1' d='M3.98,0H0v5.75C1.64,4.42,2.86,1.36,3.98,0Z'/%3E%3Cpath class='cls-1' d='M50,44.16c-.16.11-.32.22-.5.35-3.38,2.33-2.65,3.4-4.52,5.5h5.02v-5.85Z'/%3E%3C/svg%3E");
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
-webkit-mask-size: 100px auto;
mask-size: 100px auto;
}
.event-filters{
background-color: var(--wp--preset--color--base-2);
}
.event-grid{
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 25px !important;
margin-bottom: 60px !important;
margin:auto;
max-width:1100px;
margin-top:2rem;
}
@media (max-width: 768px) {
.event-grid{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 15px !important;
width: 100% !important;
transform: none !important;
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
}
/* --- レイヤー構造ベース --- */
.single-layout-wrapper {
position: relative;
background-color: #FFFCF5;
min-height: 100vh;
padding-top: 40px;
padding-bottom: 0px;
font-family: 'Zen Maru Gothic', sans-serif;
overflow: hidden;
}
.layer-1-bg-blur {
position: absolute;
top: 0; left: 0; width: 100%; height: 500px;
background-size: cover; background-position: center;
filter: blur(20px); opacity: 0.4; z-index: 0;
}
.layer-2-header-card {
position: relative; z-index: 2;
background-color: #FFEFC9;
border-radius: 20px 20px;
padding: 40px 40px 20px;
}
.layer-3-content-body {
position: relative; z-index: 1;
background-color: #ffffff;
padding: 40px;
border-radius: 20px 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
/* --- パーツ装飾 --- */
/*.genre-tag-single {
background: #fff; border: 1.5px solid #444;
padding: 4px 12px; border-radius: 6px;
font-weight: 700; font-size: 13px; margin-right: 5px;
}*/
.single-title-left {
font-size: 28px; color: #DE6262; margin: 10px 0; font-weight: bold;
}
.post-date-left { color: #666; font-size: 15px; font-weight: bold; }
/* メインビジュアル */
.single-main-visual {
margin-bottom: 30px; border-radius: 15px; overflow: hidden;
background: #f0f0f0; text-align: center;
}
.single-main-visual img { max-height: 500px;
height: 400px;
width: auto; max-width: 100%; }
/* ナビボタン */
.nav-button-custom {
background: #DE6262; color: #fff; text-decoration: none;
padding: 10px 30px; border-radius: 50px; font-weight: 700;
box-shadow: 0 4px 0 #b54646; transition: 0.2s;
}
.nav-button-custom:hover { transform: translateY(2px); box-shadow: 0 2px 0 #b54646; }
/* 詳細テーブル */
.event-meta-details-custom {
margin-top: 50px;
/*! padding: 30px; */
border-radius: 25px;
border: 4px solid #DE6262;
overflow: hidden;
}
.details-headline {
text-align: center; color: #DE6262; font-size: 1.4rem; margin-bottom: 25px;
}
.event-details-table tbody{
border-radius: 50px;
}
.event-details-table { width: 100%; border-collapse: collapse; }
.event-details-table th {
width: 25%; background: #DE6262;
padding: 15px; text-align: left; vertical-align: top;
border-bottom: 2px dotted #fff; font-size: 14px; color: #fff;
}
.event-details-table tr:last-child th {
border-bottom: none;
}
.event-details-table td { padding: 15px; border-bottom: 2px dotted #DE6262; font-size: 15px; }
.event-details-table tr:last-child td {
border-bottom: none;
}
/* ボタン系 */
.official-link-btn {
background: #DE6262; color: #fff; padding: 8px 20px; border-radius: 20px;
text-decoration: none; font-weight: bold; display: inline-block;
}
/* 基本スタイル：.map-link-btn */
.map-link-btn {
background: #DE6262;
font-weight: bold;
color: #fff;
padding: 8px 4em 8px 21px; /* 右側にアイコン用の余白を確保 */
border-radius: 20px;
text-decoration: none;
font-size: 16px;
position: relative; /* アイコン配置の基準 */
}
/* 擬似要素でアイコンを表示 */
.map-link-btn::after {
content: "";
position: absolute;
top: 50%;
right: 1.2em;
transform: translateY(-50%);
width: 1.2em;
height: 1.2em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23ffffff;%7D%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M96,0v416h416V0H96z M472,376H136V40h336V376z'/%3E%3Cpolygon class='st0' points='40,472 40,296 40,136 40,96 0,96 0,512 416,512 416,472 376,472'/%3E%3Cpolygon class='st0' points='232.812,312.829 350.671,194.969 350.671,279.766 390.671,279.766 390.671,126.688 237.594,126.688 237.594,166.688 322.39,166.688 204.531,284.547'/%3E%3C/g%3E%3C/svg%3E");
}
/* スマホ対応 */
@media (max-width: 768px) {
.layer-3-content-body {margin: 0rem; padding: 3rem 1rem 1.5rem 1rem; }
.layer-2-header-card {margin: 0 0.5rem; padding: 2rem 1rem; }
.event-details-table th, .event-details-table td { display: block; width: 100%; }
.event-details-table th { border-radius: 10px 10px 0 0; }
.single-title-left { font-size: 22px; }
}
/* --- イベントメタ情報のコンテナ --- */
.event-meta-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px; /* タグ間の隙間 */
margin-bottom: 15px;
}
/* --- タグ共通スタイル --- */
/*.genre-tag-single,*/
.status-badge,
.area-tag-single {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: bold; /* 全体的に少し太字で見やすく */
border-radius: 4px;
padding: 4px 8px; /* 【修正】左右の余白を少し広げました */
line-height: 1.2;
white-space: nowrap; /* 折り返し防止 */
}
/* --- 1. ステータス (開催中・開催前) --- */
.status-badge {
color: #fff;
margin: 0.75rem 0.75rem 0.75rem 0;
}
/* 開催中 */
.status-badge.ongoing {
background-color: #DE6262;
}
/* 開催前（必要であれば） */
.status-badge.upcoming {
background-color: #4dabf7;
}
.card-date{
font-size: 0.8rem;
margin: 0;
}
/* --- 2. エリアタグ (緑色 + ピンアイコン) --- */
.area-tag-single {
background-color: #fff;
color: #1E9E5F;
border: 2px solid #1E9E5F;
}
/* ピンアイコンをCSSで描画 (SVGアイコン) */
.area-tag-single::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
margin-right: 6px;
background-color: currentColor; /* 文字色と同じ色にする */
/* ピンの形状（SVGマスク） */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 80 35.817 80 80z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* --- 3. ジャンルタグ --- */
/*.genre-tag-single {
background-color: #ffffff !important;
color: #555;
border: 2px solid #000 !important;
padding-left: 10px !important;
padding-right: 10px !important;
}*/
/* アコーディオン全体 */
.genre-filter-accordion {
width: 100%;
max-width: 1300px; /* 全体幅に合わせる */
margin: 0 auto;
}
/* 矢印アイコンの動き */
.toggle-icon {
transition: transform 0.3s ease;
font-size: 0.8em;
}
/* 開いている時は矢印を回転 */
.accordion-toggle.active .toggle-icon {
transform: rotate(180deg);
}
/* 中身（ボタン群）エリア */
.accordion-body {
display: none; /* デフォルトは非表示 */
padding-top: 10px;
/* アニメーション用 */
opacity: 0;
transition: opacity 0.3s ease;
}
/* 開いている状態 */
.accordion-body.is-open {
display: block; /* 表示 */
opacity: 1;
}
/* ボタン群のレイアウト（以前の中央寄せCSSを継承） */
.accordion-content-inner {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center; /* ボタン中央寄せ */
}
.calendar-nav{
margin: auto;
max-width: 1100px;
}
.weekly-calendar{
margin: auto;
max-width: 1300px;
background-color: #fff;
}
.weekly-calendar .calendar-day{
/*! margin: 40px; */
}
.top-purpose .wp-block-buttons.is-style-tag-cate-btn {
height: auto;
}
.entry-content{
margin-top: -1.9rem ;
}
/* すべて .slider-variant を起点にする */
/* 1. 一番外枠：スライダー専用の設定 */
.slider-variant.custom-slider-wrapper {
max-width: 1100px !important;
margin: 0 auto !important;
position: relative;
padding: 0 60px !important;
box-sizing: border-box !important;
}
/* 2. 表示窓 */
.slider-variant .slider-container {
overflow: hidden !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
cursor: grab;
}
/* 3. トラック */
.slider-variant .slider-track {
display: flex !important;
flex-wrap: nowrap !important;
gap: 20px !important;
transition: transform 0.4s ease;
width: max-content !important;
}
/* 4. PC（769px〜）：スライダーの中のカード幅だけを変更 */
@media (min-width: 769px) {
.slider-variant .post-card {
/* 調整済みの計算式を適用 */
flex: 0 0 calc((100% - 160px) / 3) !important;
max-width: calc((100% - 160px) / 3) !important;
margin: 0 !important;
box-sizing: border-box !important;
user-select: none;
}
/* ボタンのデザイン */
.slider-variant .slider-prev,
.slider-variant .slider-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid #ddd;
z-index: 10;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
}
.slider-variant .slider-prev { left: 8px; }
.slider-variant .slider-next { right: 8px; }
.slider-variant .slider-prev::before { content: '＜'; }
.slider-variant .slider-next::before { content: '＞'; }
}
/* 5. スマホ（〜768px）：スライダーの中のレイアウトだけを変更 */
@media (max-width: 768px) {
.slider-variant.custom-slider-wrapper { padding: 0 15px !important; }
.slider-variant .slider-prev,
.slider-variant .slider-next { display: none !important; }
.slider-variant .slider-track {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 15px !important;
width: 100% !important;
transform: none !important;
}
.slider-variant .hide-on-mobile { display: none !important; }
}
/* すべて .slider-variant を起点にする */
/* 1. 一番外枠：スライダー専用の設定 */
.slider-variant.custom-slider-wrapper {
max-width: 1100px !important;
margin: 0 auto !important;
position: relative;
padding: 0 60px !important;
box-sizing: border-box !important;
}
/* 2. 表示窓 */
.slider-variant .slider-container {
overflow: hidden !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
cursor: grab;
}
/* 3. トラック */
.slider-variant .slider-track {
display: flex !important;
flex-wrap: nowrap !important;
gap: 20px !important;
transition: transform 0.4s ease;
width: max-content !important;
}
/* 4. PC（769px〜）：スライダーの中のカード幅だけを変更 */
@media (min-width: 769px) {
.slider-variant .post-card {
/* 調整済みの計算式を適用 */
flex: 0 0 calc((100% - 160px) / 3) !important;
max-width: calc((100% - 160px) / 3) !important;
margin: 0 !important;
box-sizing: border-box !important;
user-select: none;
}
/* ボタンのデザイン */
.slider-variant .slider-prev,
.slider-variant .slider-next {
color: #fff;
font-weight: 800;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #1E9E5F;
border: 3px solid #1E9E5F;
z-index: 10;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
}
.slider-variant .slider-prev { left: 8px; }
.slider-variant .slider-next { right: 8px; }
.slider-variant .slider-prev::before { content: '＜'; }
.slider-variant .slider-next::before { content: '＞'; }
}
/* 5. スマホ（〜768px）：スライダーの中のレイアウトだけを変更 */
@media (max-width: 768px) {
.slider-variant.custom-slider-wrapper { padding: 0px !important; }
.slider-variant .slider-prev,
.slider-variant .slider-next { display: none !important; }
.slider-variant .slider-track {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 15px !important;
width: 100% !important;
transform: none !important;
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.slider-variant .hide-on-mobile { display: none !important; }
}
@media (max-width: 767px) {
/* 1. タイトルと、画像が含まれるカラムブロック全体の順序を制御 */
.top-mokuteki-btn .card-01.wp-block-column {
display: flex !important;
flex-direction: column !important;
}
/* 2. 画像が入っているcolumnsブロックを最上部に持っていき、横並びにする */
.top-mokuteki-btn .card-01 .wp-block-columns {
display: flex !important;
flex-direction: row !important; /* 横並び強制 */
align-items: center !important; /* 上下中央揃え */
gap: 15px !important; /* 画像とテキストの間の隙間 */
margin-bottom: 10px !important;
}
/* 3. 画像のカラムを一番左（最初）にする */
.top-mokuteki-btn .card-01 .wp-block-columns .wp-block-column:last-child {
order: -1 !important; /* 順序を一番前に */
flex-basis: 30% !important; /* 画像の幅（お好みで調整） */
}
/* 4. 元々あった説明文のカラムに見出し（h3）を移動させたような見せ方にするため
h3をcolumnsブロックの中へ擬似的に配置するか、以下の調整を行います */
/* 今回のHTML構造上、h3はcolumnsの外にあるため、
より確実に「画像が左、タイトルが右」にするには、h3をcolumnsの上に配置し、
さらに全体を調整する形になります。 */
.top-mokuteki-btn .card-01 {
display: grid !important;
grid-template-areas:
"img title"
"btn btn";
grid-template-columns: 1fr 2fr; /* 左(画像)と右(タイトル)の比率 */
align-items: center;
}
/* 画像の配置 */
.top-mokuteki-btn .card-01 .wp-block-columns {
grid-area: img;
margin: 0 !important;
}
.top-mokuteki-btn .card-01 .wp-block-columns .sp-hide-contents {
display: none !important; /* SPで説明文を隠す設定がある場合 */
}
/* タイトルの配置 */
.top-mokuteki-btn .card-01 .wp-block-heading {
grid-area: title;
margin: 0 !important;
font-size: 1.1rem !important; /* SPサイズに調整 */
}
/* ボタンの配置（下に回り込ませる） */
.top-mokuteki-btn .card-01 .wp-block-buttons {
grid-area: btn;
margin-top: 15px !important;
}
}
@media (max-width: 767px) {
/* スライダー等と干渉しないよう、今回のターゲットクラスを指定 */
.two-row-cards .wp-block-columns {
display: flex !important;
flex-wrap: wrap !important; /* 折り返しを許可 */
flex-direction: row !important; /* 横並びベース */
gap: 10px !important; /* カード同士の隙間（お好みで調整） */
}
.two-row-cards .wp-block-columns .wp-block-column {
/* 50%から隙間分を引いて2列にする */
flex-basis: calc(50% - 40px) !important;
flex-grow: 1 !important;
margin: 0 !important; /* 余計なマージンをリセット */
padding: 10px !important; /* カード内の余白（必要に応じて） */
}
/* カード内のフォントサイズ微調整（2列だとタイトルが長いため） */
.two-row-cards .wp-block-heading {
font-size: 0.95rem !important;
line-height: 1.3 !important;
word-break: break-all;
}
/* 画像のサイズ調整 */
.two-row-cards .wp-block-image {
margin: 5px 0 0 0 !important;
}
}
@media (max-width: 767px) {
/* 1. グループ（clickable-group）自体を横並びの土台にする */
.top-mokuteki-btn .clickable-group {
display: flex !important;
flex-direction: row !important; /* 横並び */
flex-wrap: wrap !important; /* 折り返し許可 */
align-items: center !important;
gap: 10px !important;
padding: 15px !important;
}
.top-mokuteki-btn .wp-block-column.is-style-card-1 {
padding: 0rem; }
/* 2. 画像(wp-block-columns)を左に、タイトル(h3)を右に入れ替える */
/* 画像が含まれるブロックを一番左(order:1)へ */
.top-mokuteki-btn .wp-block-columns {
order: 1 !important;
flex: 0 0 60px !important; /* 画像の表示幅 */
/*! margin: 0 !important; */
}
/* タイトルを右(order:2)へ */
.top-mokuteki-btn .wp-block-heading {
order: 2 !important;
flex: 1 !important; /* 残りの幅を埋める */
margin: 0 !important;
font-size: 1.1rem !important;
}
/* 3. 画像ブロックの中の余計な要素（説明文）を消す */
.top-mokuteki-btn .wp-block-columns .sp-hide-contents {
display: none !important;
}
/* 画像自体のサイズ微調整 */
.top-mokuteki-btn .wp-block-image {
margin: 0 !important;
width: 100% !important;
}
.top-mokuteki-btn .wp-block-image img {
width: 100% !important;
height: auto !important;
}
/* 4. タグボタン類は下に回す */
.top-mokuteki-btn .wp-block-buttons {
width: 100% !important;
order: 3 !important;
margin-top: 10px !important;
}
}
.top-card-nenrei{
margin:100px;
padding-bottom: 1rem !important;
}
.top-card-nenrei{
margin:100px;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.top-card-nenrei p{
margin-top: 0px;
}
/* --- 共通設定：ここがズレ防止のキモ --- */
.top-sns-btn .sns-card {
box-sizing: border-box; /* 枠線を幅の内側に含める */
}
/* --- PC表示（768px以上）：縦並び --- */
@media (min-width: 768px) {
div.top-sns-btn.wp-block-column {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.top-sns-btn .sns-card {
display: flex;
flex-direction: row;
align-items: center;
text-decoration: none;
background-color: #ffffff;
border: 4px solid #DE6262;
border-radius: 50px;
padding: 10px 20px;
min-width: 180px;
transition: all 0.3s ease;
margin-top: 0px;
}
}
/* --- 共通パーツ --- */
.top-sns-btn .sns-img-wrapper {
width: 2.5rem;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.top-sns-btn .sns-img-wrapper img {
width: 100%;
height: auto;
object-fit: contain;
}
.top-sns-btn .sns-label {
color: #DE6262;
font-weight: bold;
font-size: 14px;
margin-left: 12px;
}
/* --- スマホ表示（767px以下）：横3並び --- */
@media (max-width: 767px) {
/* セレクタを長くして詳細度を上げる */
div.top-sns-btn.wp-block-column {
display: flex !important; /* WPのブロック指定に勝つためにこれだけ残す */
flex-direction: row !important;
flex-wrap: nowrap;
justify-content: center;
gap: 8px;
width: 100%;
}
.top-sns-btn .sns-card {
/* gap分(8px * 2)を引いて3分割 */
width: calc((100% - 16px) / 3);
height: 54px;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
border: 3px solid #DE6262;
border-radius: 20px;
flex-shrink: 0;
}
.top-sns-btn .sns-label {
display: none;
}
.top-sns-btn .sns-img-wrapper {
margin: 0;
width: 2.5rem;
height: 2.5rem;
}
}
/* =========================================
クラス .list-anchor-btns を基準にしたSP2列レイアウト
========================================= */
@media (max-width: 767px) {
/* 1. 親コンテナの横並びをGridに変更して2列に固定 */
.wp-block-columns.list-anchor-btns {
display: grid !important;
/* 均等な50%幅の2列を作成 */
grid-template-columns: repeat(2, 1fr) !important;
/* ボタン間の隙間（上下左右） */
gap: 12px !important;
/* Flexboxの設定をリセット */
flex-direction: unset !important;
}
/* 2. 各カラムの幅をリセット（Grid制御に任せる） */
.list-anchor-btns .wp-block-column {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
/* 奇数の場合、Gridの特性で最後の一つは自動的に左側に配置されます */
}
/* 3. ボタン内のテキストとサイズの微調整 */
.list-anchor-btns .wp-block-button.is-style-anchor-icon .wp-block-button__link {
/* テキストサイズを若干小さく */
font-size: 0.85rem !important;
/* 狭い幅でも文字が収まるよう左右パディングを調整 */
padding: 0.8rem 1.6rem 0.8rem 0.6rem !important;
/* 複数行になっても高さが揃うように設定 */
min-height: 54px;
line-height: 1.3;
display: flex;
justify-content: center;
align-items: center;
min-height: 64px;
}
/* 4. アイコン（矢印）のサイズと位置の微調整 */
.list-anchor-btns .wp-block-button.is-style-anchor-icon .wp-block-button__link::after {
right: 0.5rem;
width: 7px;
height: 7px;
border-width: 2px; /* 少し細くしてスッキリさせる */
top: 40%;
}
}
strong{
font-weight: bold;}
.gap-none-style {
gap: 0 !important;
}
/* --- PC版の基本スタイル --- */
.is-style-table-design02 table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 4px solid #DE6262;
border-radius: 20px;
table-layout: fixed;
overflow: hidden;
}
.is-style-table-design02 tbody th,
.is-style-table-design02 tbody td {
border-bottom: 1.5px solid #A4A4A4;
font-size: 0.9rem;
}
.is-style-table-design02 tbody th,
.is-style-table-design02 tbody td {
border-bottom: 1.5px solid #A4A4A4;
font-size: 0.9rem;
}
.is-style-table-design02 th,
.is-style-table-design02 td {
padding: 1rem 1rem;
border: none;
text-align: left;
}
/* ヘッダーの色 */
.is-style-table-design02 thead th {
background-color: #DE6262;
color: #fff;
font-weight: bold;
text-align: center;
font-family: "Zen Maru Gothic", sans-serif;
}
/* 2色交互（奇数行：薄い黄 / 偶数行：白） */
.is-style-table-design02 tbody tr:nth-child(odd) th{
background-color: #FFDADA;
text-align: center;
}
.is-style-table-design02 tbody tr:nth-child(odd) td {
background-color: #fff;
}
.is-style-table-design02 tbody tr:nth-child(even) th{
background-color: #FFDADA;
text-align: center;
}
.is-style-table-design02 tbody tr:nth-child(even) td {
background-color: #FFFCF5;
}
/* --- スマホ版（768px以下） --- */
@media screen and (max-width: 768px) {
/* テーブル構造を解除してブロック化 */
/* .is-style-table-design02 table,
.is-style-table-design02 thead,
.is-style-table-design02 tbody,
.is-style-table-design02 tr,
.is-style-table-design02 th,
.is-style-table-design02 td {
display: block;
width: 100% !important;
box-sizing: border-box;
}
.is-style-table-design02 tbody th,
.is-style-table-design02 tbody td {
border-bottom: none;
font-size: 0.9rem;
}
.is-style-table-design02 tbody tr:nth-child(odd) th,
.is-style-table-design02 tbody tr:nth-child(even) th{
background-color: #DE6262;
color: #fff;
}
.is-style-table-design02 thead {
display: none; /* 見出し行を隠す */
}*/
/* .is-style-table-design02 tr {
overflow: hidden;
background: #fff;
} */
/* カテゴリ1（th）を見出しにする */
/* .is-style-table-design02 tbody th[scope="row"] {
background-color: #DE6262 !important; /* カテゴリ1は常に濃い黄色 */*/
/* color: #fff;
font-weight: bold;
font-size: 1.1rem;
text-align: center;
padding: 15px !important;
border: none;
}*/
/* データセル（td）を箇条書き風にする */
/* .is-style-table-design02 tbody td {
border: none;
padding: 0.5rem 0.75rem !important;
text-align: left;
}*/
/* rowspan対策：スマホでは結合を無視して表示を保証する */
/* .is-style-table-design02 th[rowspan],
.is-style-table-design02 td[rowspan] {
height: auto !important;
}
}*/
.is-style-table-design02 .is-style-full-width-btn .wp-block-button {
max-width: 100%;
text-align: center;
}
.is-style-table-design02 table {
table-layout: auto !important; /* fixedを解除して内容に合わせる */
width: 100%;
}
/* --- PC版の基本スタイル --- */
.is-style-table-design02 table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 4px solid #DE6262;
border-radius: 20px;
table-layout: fixed;
overflow: hidden;
}
.is-style-table-design02 tbody th,
.is-style-table-design02 tbody td {
border-bottom: 1.5px solid #A4A4A4;
font-size: 0.9rem;
}
.is-style-table-design02 tbody th,
.is-style-table-design02 tbody td {
border-bottom: 1.5px solid #A4A4A4;
font-size: 0.9rem;
}
.is-style-table-design02 th,
.is-style-table-design02 td {
padding: 1rem 1rem;
border: none;
text-align: left;
}
/* ヘッダーの色 */
.is-style-table-design02 thead th {
background-color: #DE6262;
color: #fff;
font-weight: bold;
text-align: center;
font-family: "Zen Maru Gothic", sans-serif;
}
/* 2色交互（奇数行：薄い黄 / 偶数行：白） */
.is-style-table-design02 tbody tr:nth-child(odd) th{
background-color: #FFDADA;
text-align: center;
}
.is-style-table-design02 tbody tr:nth-child(odd) td {
background-color: #fff;
}
.is-style-table-design02 tbody tr:nth-child(even) th{
background-color: #FFDADA;
text-align: center;
}
.is-style-table-design02 tbody tr:nth-child(even) td {
background-color: #FFFCF5;
}
/* --- スマホ版（768px以下） --- */
@media screen and (max-width: 768px) {
/* テーブル構造を解除してブロック化 */
.is-style-table-design02 table,
.is-style-table-design02 thead,
.is-style-table-design02 tbody,
.is-style-table-design02 tr,
.is-style-table-design02 th,
.is-style-table-design02 td {
display: block;
width: 100% !important;
box-sizing: border-box;
}
.is-style-table-design02 tbody th,
.is-style-table-design02 tbody td {
border-bottom: none;
font-size: 0.9rem;
}
.is-style-table-design02 tbody tr:nth-child(odd) th,
.is-style-table-design02 tbody tr:nth-child(even) th{
background-color: #DE6262;
color: #fff;
}
.is-style-table-design02 thead {
display: none; /* 見出し行を隠す */
}
.is-style-table-design02 tr {
overflow: hidden;
background: #fff;
}
/* カテゴリ1（th）を見出しにする */
.is-style-table-design02 tbody th[scope="row"] {
background-color: #DE6262 !important; /* カテゴリ1は常に濃い黄色 */
color: #fff;
font-weight: bold;
font-size: 1.1rem;
text-align: center;
padding: 15px !important;
border: none;
}
/* データセル（td）を箇条書き風にする */
.is-style-table-design02 tbody td {
border: none;
padding: 0.5rem 0.75rem !important;
text-align: left;
}
/* rowspan対策：スマホでは結合を無視して表示を保証する */
.is-style-table-design02 th[rowspan],
.is-style-table-design02 td[rowspan] {
height: auto !important;
}
}
.is-style-table-design02 .is-style-full-width-btn .wp-block-button {
max-width: 100%;
text-align: center;
}
.is-style-table-design02 table {
table-layout: auto !important; /* fixedを解除して内容に合わせる */
width: 100%;
}
.pc-display-none-class {
display: none !important;
}
.sp-display-none-class{
display: block !important;
}
@media (max-width: 768px) {
.pc-display-none-class{
display: block !important;
}
.sp-display-none-class{
display: none !important;
}
}
.mokuteki-list-checkbox-icon{
margin-top: 0.6rem;
}
.mokuteki-list-checkbox-icon p {
display: flex;
/*! align-items: center; */
gap: 0.5em;
line-height: 1.5;
margin-bottom: 0.5em;
font-family: "Zen Maru Gothic", sans-serif;
font-size: 1rem;
font-weight: bold;
line-height: 1.2;
padding: 0;
}
.mokuteki-list-checkbox-icon sub {
font-size: 0.8rem;
font-weight: bold;
}
.mokuteki-list-checkbox-icon p::before {
content: "";
flex-shrink: 0; /* アイコンが潰れないように固定 */
width: 1.4em;
height: 1.4em;
/* SVGデータ：角丸四角 ＋ チェックマーク */
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DE6262' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4' ry='4' fill='%23FFFFFF'/%3E%3C/svg%3E"); background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.topic-cards-margin p{
margin: 0.75rem 0rem !important;
}
.topic-card-margin{
padding: 0.5rem;
}
.topic-card-margin p{
margin: 0.25rem 1rem !important;
}
/* --- 1. 絞り込みセクション全体（PC最大幅1100px・枠囲み） --- */
.genre-section {
max-width: 1100px;
margin: 30px auto;
margin-bottom: 0px;
padding: 24px;
background-color: #fff;
border-radius: 15px;
border: 4px solid #FFE580;
box-sizing: border-box;
text-align: center;
}
/* --- 2. ラベル（中央寄せ・赤ポチ付き） --- */
.genre-label {
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 20px;
color: #DE6262;
display: flex;
justify-content: center;
align-items: center;
}
/* --- 3. ボタンの並び（変更：filter-group-sub） --- */
.filter-group-sub {
display: flex;
flex-wrap: wrap; /* 折り返し許可 */
justify-content: center; /* 中央寄せ */
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
}
/* --- 4. ボタン単体のデザイン --- */
.filter-group-sub .filter-btn {
text-decoration: none;
display: inline-block;
padding: 10px 22px;
font-size: 0.95rem;
font-weight: bold;
border: 2px solid #DE6262;
border-radius: 8px;
background-color: #fff;
color: #DE6262;
transition: all 0.25s ease-out;
cursor: pointer;
box-sizing: border-box;
}
@media (max-width: 769px) {
.filter-btn {
grid-template-columns: none;
}
}
/* --- 5. ホバーアクション（PCのみ） --- */
@media (min-width: 769px) {
.filter-btn:hover {
background-color: #DE6262;
color: #fff;
transform: translateY(-4px);
box-shadow: 0 6px 15px rgba(222, 98, 98, 0.3);
}
}
/* --- 6. アクティブ（選択中）の状態 --- */
.filter-btn.is-active {
background-color: #DE6262;
color: #fff;
border-color: #DE6262;
transform: translateY(0);
box-shadow: inset 0 2px 5px rgba(0,0,0,0.15);
}
/* --- 7. スマホ対応（折り返し設定） --- */
@media screen and (max-width: 768px) {
.genre-section {
margin: 1rem 0px 0px 0px;
padding: 10px 12px;
border-width: 3px;
}
.filter-group-sub {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 4px 6px !important;
}
.filter-group-sub .filter-btn {
width: auto !important;
flex: 0 0 auto !important;
padding: 6px 12px !important;
font-size: 0.75rem;
white-space: nowrap;
}
}
.related-posts-slider-section{
padding: 0 1rem;
}
.related-posts-slider-section h2{
text-align: left;
font-family: "Zen Maru Gothic", sans-serif;
}
.related-slider-title{
text-align: center !important;
}
/* ラベルのスタイル */
.contact-form-area label {
display: block;
font-weight: bold;
margin-bottom: 20px;
color: var(--wp--preset--color--accent-1);
font-size: 1.2rem;
font-family: "Zen Maru Gothic", sans-serif;
}
/* 入力フィールド共通（テキスト、メール、セレクト、テキストエリア） */
.contact-form-area input[type="text"],
.contact-form-area input[type="email"],
.contact-form-area select,
.contact-form-area textarea {
width: 100%;
padding: 12px 15px;
margin-top: 8px;
border: 2px solid #ddd;
border-radius: 6px;
background-color: #f9f9f9;
font-size: 1rem;
transition: all 0.3s ease;
box-sizing: border-box;
}
/* フォーカス時の挙動 */
.contact-form-area input:focus,
.contact-form-area select:focus,
.contact-form-area textarea:focus {
outline: none;
border-color: var(--wp--preset--color--accent-1);
background-color: #fff;
box-shadow: 0 0 0 4px rgba(250, 230, 210, 0.5);
}
/* セレクトボックスの調整 */
.contact-form-area select {
cursor: pointer;
appearance: none; /* デフォルトの矢印をリセット（必要に応じて） */
}
/* 送信ボタンのスタイル */
.contact-form-area .wpcf7-submit {
display: block;
max-width: 450px;
width: 100%;
margin: 0 auto;
margin-top: 10px;
background-color: var(--wp--preset--color--accent-1);
color: #fff;
font-size: 1.1rem;
font-weight: bold;
padding: 15px;
border: none;
border-radius: 15px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
font-family: "Zen Maru Gothic", sans-serif;
}
.contact-form-area .wpcf7-submit:hover {
background-color: #C42525;
}
.contact-form-area .wpcf7-submit:active {
transform: scale(0.98);
}
/* エラーメッセージ・スピナーの調整 */
.contact-form-area .wpcf7-not-valid-tip {
color: #dc3232;
font-size: 0.85rem;
margin-top: 5px;
display: block;
}
.contact-form-area .wpcf7-response-output {
margin: 20px 0 0;
padding: 15px;
border-radius: 6px;
font-size: 0.9rem;
text-align: center;
}
/* スマホ対応の調整 */
@media (max-width: 480px) {
.contact-form-area {
padding: 25px 20px;
}
}
.contact-form-area select {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* デフォルトの矢印を消す */
/* 右端にアクセントカラーのブロックと白抜き矢印を配置 */
background-image:
/* 白抜きの矢印（SVG） */
url('data:image/svg+xml;charset=utf8,'),
/* 右側の背景色ブロック */
linear-gradient(to right, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-1));
background-repeat: no-repeat;
/* 矢印のサイズと背景ブロックのサイズ */
background-size: 24px 24px, 45px 100%;
/* 矢印の位置と背景ブロックの位置 */
background-position: calc(100% - 10px) center, right center;
padding-right: 55px; /* ブロックと重ならないように余白を広めに確保 */
}
/* ホバー・フォーカス時に少し色を濃くして反応を出す */
.contact-form-area select:hover,
.contact-form-area select:focus {
outline: none;
border-color: #C42525; /* 送信ボタンのホバー色と合わせる */
background-image:
url('data:image/svg+xml;charset=utf8,'),
linear-gradient(to right, #C42525, #C42525);
}
/* 最初のテーブル幅を短く */
.table-first-min table th:first-child {
width: 30%;
}
/*@media (max-width: 768px) {
.table-first-min table th:first-child {
width: 35%;
}
}*/
.event-card-container{
margin:1rem;
}
/* --- 一番外側のコンテナ設定 --- */
.calendar-contents-area {
max-width: 1100px; /* マックス1100pxに設定 */
margin: 0 auto;
background-color: var(--color-background-5); /* 指定の背景色 */
padding: 2rem ;
border-radius: 15px;
margin-bottom: 2rem;
}
/* カレンダー表示エリア全体 */
.calendar-navs-area {
background-color: transparent; /* 親の背景色を活かすため透過 */
padding-bottom: 2rem;
}
.calendar-navs-area.bottom-navs {
padding-top: 2rem;
}
/* ナビゲーションのレイアウト（PC・共通） */
.calendar-nav {
margin: auto;
max-width: 800px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
/* 前の週・次の週ボタン */
.calendar-nav .button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.8rem 1.2rem;
background-color: #DE6262;
color: #fff;
text-decoration: none;
border-radius: 15px;
font-size: 0.9rem;
font-weight: bold;
transition: all 0.3s ease;
width: 120px;
text-align: center;
font-family: 'Zen Maru Gothic', sans-serif;
}
.calendar-nav .button:hover {
background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 85%, transparent);
}
/* セレクトボックス本体の装飾 */
.calendar-nav select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
flex: 1;
cursor: pointer;
background-color: #ffffff;
border: 3px solid #DE6262;
border-radius: 15px;
padding: 10px 40px 10px 20px !important;
font-size: 1rem;
font-weight: 500;
color: #444;
line-height: 1.5;
transition: all 0.2s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: calc(100% - 12px) center;
background-size: 18px;
text-align: center;
}
/* カレンダー全体のコンテナ */
.weekly-calendar {
width: 100%; /* 親の1100pxに合わせる */
max-width: 1100px;
margin: 0 auto;
border: 3px solid #DE6262;
border-radius: 15px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
/* 1日ごとの行 */
.weekly-calendar .calendar-day {
display: flex;
border-bottom: 2px dashed #DE6262;
min-height: 100px;
align-items: stretch;
}
.weekly-calendar .calendar-day:last-child {
border-bottom: none;
}
/* 左側：日付エリア */
.weekly-calendar .calendar-day h3 {
width: 110px;
background-color: #DE6262;
color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start; /* 上揃え */
align-items: center;
margin: 0 !important;
padding: 20px 10px !important;
font-size: 1.2rem;
font-weight: bold;
flex-shrink: 0;
text-align: center;
line-height: 1.4;
}
/* 右側：コンテンツエリア */
.event-list-day{
flex: 1;
padding: 1.5rem !important;
margin: 0 !important;
list-style: none; /* リストのポチを消す */
}
/* --- レスポンシブ設定 --- */
@media (max-width: 1024px) {
.calendar-contents-area {
padding: 1rem;
}
.weekly-calendar .calendar-day {
flex-direction: column;
}
.weekly-calendar .calendar-day h3 {
width: 100%;
flex-direction: row;
justify-content: flex-start;
gap: 15px;
padding: 10px 20px !important;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
}
@media (max-width: 480px) {
.calendar-nav {
flex-wrap: wrap;
padding: 0;
}
.calendar-nav select {
order: 1;
width: 100%;
flex: none;
margin-bottom: 8px;
}
.calendar-nav .button {
order: 2;
flex: 1;
max-width: none;
}
}
/* イベントカードリストの基本リセット */
.event-list-day {
list-style: none;
padding: 0;
margin: 0;
}
.event-list-item {
margin-bottom: 1.5rem;
background: #fff;
border: 1px solid #eee;
border-radius: 12px; /* 少し角を丸くして柔らかく */
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.event-list-item:hover {
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
/* カードのレイアウト（PC） */
.event-card-horizontal {
display: flex;
flex-direction: row;
}
/* 画像エリア */
.event-card-horizontal .card-image {
width: 240px; /* 少し広げて視認性アップ */
min-width: 240px;
background: #f5f5f5;
}
.event-card-horizontal .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 16 / 9;
display: block;
}
.event-card-horizontal .no-image {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 150px;
color: #999;
}
/* コンテンツエリア */
.event-card-horizontal .card-content {
padding: 1.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 0.8rem; /* 各要素の間隔を一定に */
}
/* 要素別スタイル */
.event-card-horizontal .card-title {
margin: 0;
font-size: 1.25rem;
line-height: 1.4;
}
.event-card-horizontal .card-title a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.event-card-horizontal .card-title a:hover {
color: #DE6262;
}
.event-card-horizontal .card-excerpt {
font-size: 0.9rem;
color: #666;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* エリア＋タグ（下部） */
.event-card-horizontal .card-meta-bottom {
margin-top: auto; /* コンテンツが少なくても下に固定 */
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 0.5rem;
}
.event-card-horizontal .area-label {
font-size: 0.85rem;
background: #f0f0f0;
padding: 2px 10px;
border-radius: 4px;
color: #555;
}
.event-card-horizontal .tag {
font-size: 0.85rem;
color: #888;
margin-right: 5px;
}
/* --- スマホ対応 (1024px以下で切り替え) --- */
@media (max-width: 480px) {
.event-card-horizontal {
flex-direction: column;
}
.event-card-horizontal .card-image {
width: 100%;
min-width: 100%;
}
.event-card-horizontal .card-content {
padding: 1rem;
}
.event-card-horizontal .card-title {
font-size: 1.1rem;
}
}
/* ナビゲーション全体のコンテナ */
.event-navigation {
width: 100%;
max-width: 1100px; /* 全体の枠に合わせる */
margin: 0 auto 3rem; /* 下にしっかり余白（3rem）を空けて重なりを防止 */
padding: 0 15px;
box-sizing: border-box;
}
.event-navigation ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center; /* 横方向の中央寄せ */
align-items: stretch; /* ボタンの高さを揃える */
gap: 12px; /* ボタン同士の隙間 */
width: 100%;
}
.event-navigation .nav-item {
flex: 1; /* 均等な幅にする */
max-width: 240px; /* 広がりすぎ防止 */
}
/* ボタンの基本スタイル */
.event-navigation .nav-button {
display: flex;
flex-direction: row; /* PCでは横並び */
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 10px;
background-color: #fff;
color: #DE6262;
border: 2px solid #DE6262;
border-radius: 15px;
text-decoration: none;
font-weight: bold;
font-size: 1rem;
height: 100%; /* 高さを揃える */
min-height: 60px; /* 最低限の高さを確保 */
box-sizing: border-box;
transition: all 0.3s ease;
font-family: 'Zen Maru Gothic', sans-serif;
}
/* アイコンサイズ */
.event-navigation .nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
}
.event-navigation .nav-icon svg {
width: 100%;
height: 100%;
}
/* 現在地・ホバー */
.event-navigation .nav-button.active,
.event-navigation .nav-button:hover {
background-color: #DE6262;
color: #fff;
}
/* --- スマホ対応 (767px以下) --- */
@media (max-width: 767px) {
.event-navigation {
margin-bottom: 2rem; /* スマホ時の下の余白 */
}
.event-navigation ul {
gap: 8px; /* スマホでは隙間を少し詰める */
}
.event-navigation .nav-button {
flex-direction: column; /* アイコンを上、文字を下に（中央寄せが確実になる） */
padding: 10px 5px;
font-size: 0.85rem;
gap: 5px;
text-align: center;
min-height: 80px; /* 縦並び用に高さを少し出す */
}
.event-navigation .nav-icon {
width: 22px;
height: 22px;
}
}
/* 親要素(figure)の余計なマージンと横スクロールを強制カット */
.is-style-custom-smart-table {
width: 100%;
max-width: 100%;
margin: 1.5em 0 0 0;
overflow: hidden;
padding: 0;
}
/* テーブル自体の設定 */
.is-style-custom-smart-table table {
width: 100%;
margin: 0;
table-layout: auto !important;
border-collapse: separate;
border-spacing: 0;
border: 4px solid #DE6262;
border-radius: 20px;
overflow: hidden;
}
.is-style-custom-smart-table thead th {
background-color: #DE6262;
color: #fff;
font-weight: bold;
font-family: "Zen Maru Gothic", sans-serif;
border: none;
}
.is-style-custom-smart-table thead th + th {
border-left: 2px solid #fff;
}
.is-style-custom-smart-table tbody th,
.is-style-custom-smart-table tbody td{
padding: 1rem 0.5rem;
font-size: 0.9rem;
border: none;
}
.is-style-custom-smart-table tbody td {
border-left: 2px dotted #ccc;
}
.is-style-custom-smart-table tbody td {
border-bottom: 2px dotted #ccc;
}
.is-style-custom-smart-table tbody th {
border-bottom: 2px dotted #fff;
}
.is-style-custom-smart-table tbody tr:last-child td,
.is-style-custom-smart-table tbody tr:last-child th {
border-bottom: none !important;
}
/* 2色交互（奇数行：薄い黄 / 偶数行：白） */
.is-style-custom-smart-table tbody tr:nth-child(odd) th{
background-color: #FFDADA;
text-align: center;
font-family: "Zen Maru Gothic", sans-serif;
}
.is-style-custom-smart-table tbody tr:nth-child(even) th{
background-color: #FFDADA;
text-align: center;
font-family: "Zen Maru Gothic", sans-serif;
}
.is-style-custom-smart-table tbody tr:nth-child(odd) td {
background-color: #fff;
}
.is-style-custom-smart-table tbody tr:nth-child(even) td {
background-color: #FFFCF5;
}
/* --- スマートフォン向け（768px以下） --- */
@media screen and (max-width: 768px) {
.is-style-custom-smart-table table {
border: none;
}
/* 全ての要素を縦並びに強制 */
.is-style-custom-smart-table table,
.is-style-custom-smart-table thead,
.is-style-custom-smart-table tbody,
.is-style-custom-smart-table th,
.is-style-custom-smart-table td,
.is-style-custom-smart-table tr {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 1. PC用のヘッダー(相談窓口/連絡先/受付時間)を非表示 */
.is-style-custom-smart-table thead {
display: none !important;
}
/* 2. 各行をカード風にする */
.is-style-custom-smart-table tr {
margin-bottom: 1rem !important;
border: 3px solid #DE6262;
border-radius: 15px;
background: #fff;
overflow: hidden;
}
/* 3. 窓口名（tbody内のth）をカードのタイトルにする */
.is-style-custom-smart-table tbody th {
background-color: #DE6262 !important;
color: #fff !important;
padding: 15px !important;
text-align: left !important;
font-size: 1rem !important;
border: none !important;
}
/* 4. 各項目（連絡先・受付時間）のスタイル */
.is-style-custom-smart-table td {
padding: 32px 15px 12px 15px !important;
position: relative;
border: none !important;
border-bottom: 2px dotted #ccc !important;
text-align: left !important;
word-break: break-all;
}
.is-style-custom-smart-table tbody tr:last-child td {
border-bottom: 2px dotted #ccc !important;
}
.is-style-custom-smart-table td:last-child {
border-bottom: none !important;
}
/* 5. ラベル（JSで取得した「連絡先」「受付時間」）を表示 */
.is-style-custom-smart-table td::before {
content: attr(data-label);
position: absolute;
top: 10px;
left: 15px;
font-size: 0.75em;
font-weight: bold;
color: #fff;
background: #DE6262;
padding: 2px 8px;
border-radius: 4px;
}
}
/* 親要素(figure)の余計なマージンと横スクロールを強制カット */
.is-style-custom-smart-table2 {
width: 100%;
max-width: 100%;
margin: 1.5em 0;
overflow: hidden;
padding: 0;
}
/* テーブル自体の設定 */
.is-style-custom-smart-table2 table {
width: 100%;
margin: 0;
table-layout: auto !important;
border-collapse: separate;
border-spacing: 0;
border: 4px solid #DE6262;
border-radius: 20px;
overflow: hidden;
}
.is-style-custom-smart-table2 th {
background-color: #DE6262;
color: #fff;
font-weight: bold;
font-family: "Zen Maru Gothic", sans-serif;
}
.is-style-custom-smart-table2 tbody th,
.is-style-custom-smart-table2 tbody td{
padding: 1rem 0rem;
font-size: 0.9rem;
border: none;
border-bottom: 2px dotted #fff;
}
.is-style-custom-smart-table2 tbody td {
border-bottom: 2px dotted #ccc;
}
.is-style-custom-smart-table2 tbody tr:last-child td,
.is-style-custom-smart-table2 tbody tr:last-child th {
border-bottom: none !important;
}
/* 2色交互（奇数行：薄い黄 / 偶数行：白） */
.is-style-custom-smart-table2 tbody tr:nth-child(odd) td {
background-color: #fff;
}
.is-style-custom-smart-table2 tbody tr:nth-child(even) td {
background-color: #FFFCF5;
}
/* --- スマートフォン向け（768px以下） --- */
@media screen and (max-width: 768px) {
.is-style-custom-smart-table2 table {
border: none;
}
/* 全ての要素を縦並びに強制 */
.is-style-custom-smart-table2 table,
.is-style-custom-smart-table2 thead,
.is-style-custom-smart-table2 tbody,
.is-style-custom-smart-table2 th,
.is-style-custom-smart-table2 td,
.is-style-custom-smart-table2 tr {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 1. PC用のヘッダー(相談窓口/連絡先/受付時間)を非表示 */
.is-style-custom-smart-table2 thead {
display: none !important;
}
/* 2. 各行をカード風にする */
.is-style-custom-smart-table2 tr {
margin-bottom: 1rem !important;
border: 3px solid #DE6262;
border-radius: 15px;
background: #fff;
overflow: hidden;
}
/* 3. 窓口名（tbody内のth）をカードのタイトルにする */
.is-style-custom-smart-table2 tbody th {
background-color: #DE6262 !important;
color: #fff !important;
padding: 15px !important;
text-align: left !important;
font-size: 0.9rem !important;
border: none !important;
}
/* 4. 各項目（連絡先・受付時間）のスタイル */
.is-style-custom-smart-table2 td {
padding: 12px 15px 12px 15px !important;
position: relative;
border: none !important;
text-align: left !important;
word-break: break-all;
}
.is-style-custom-smart-table2 td:last-child {
border-bottom: none !important;
}
/* 5. ラベル（JSで取得した「連絡先」「受付時間」）を表示 */
.is-style-custom-smart-table2 td::before {
position: absolute;
top: 10px;
left: 15px;
font-size: 0.75em;
font-weight: bold;
color: #fff;
background: #DE6262;
padding: 2px 8px;
border-radius: 4px;
}
}
/* PC（768px以上）では改行を無効化 */
@media (min-width: 768px) {
.sp-only-br br {
display: none;
}
}
@media (max-width: 768px) {
.pc-only-br br {
display: none;
}
}
/*特集記事タグ*/
.genre-tag-single{
display: inline-block;
padding: 0.3rem 0.5rem !important;
border-radius: 99px;
border: 2px solid #DE6262;
color: #DE6262 !important;
background-color: #fff;
font-size: 0.7rem !important;
font-weight: 700 !important;
}
/*注釈デザイン指定*/
.has-text-align-left sub{
display: inline-block;
line-height: 1.4;
padding-top: 0.5rem;
}
@media screen and (max-width: 767px) {
.wp-block-table.table-design02 {
border-radius: none;
overflow: none;
border: none;
}
.wp-block-table.table-design02 thead th {
border: none;
}
.wp-block-table.table-design02 tbody tr {
background-color: #FFF;
border: none;
}
.wp-block-table.table-design02 tbody td {
border: none;
}
.table-design02 tbody {
border: none;
}
.wp-block-table.table-design02 table {
border: none;
}
.table-design02 th {
background: #DE6262;
color: #fff;
}
.table-design02 tr {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.table-design02 th,
.table-design02 td {
display: block;
width: 100% !important;
box-sizing: border-box;
padding: 1rem !important;
}
/* 見出し（th）の下の余白を調整 */
.table-design02 th {
border-bottom: none; /* 元の横線が不要な場合 */
padding-bottom: 5px;
}
/* 内容（td）の上の余白を調整 */
.table-design02 table td {
font-size: 0.9rem !important;
}
.table-design02 img{
display: block !important;
margin: 0 auto 0.5rem auto !important;
}
.table-design02 table tr {
margin-bottom: 1rem !important;
border: 3px solid #DE6262 !important;
border-radius: 15px;
background: #fff;
overflow: hidden;
}
.table-design02{
text-align: left;
}
}
/* ボタン挙動調整 */
.wp-block-button .wp-block-button__link {
transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.wp-block-button .wp-block-button__link:hover {
opacity: 0.7 !important;
transform: translateY(-8px) !important;
box-shadow: 0 15px 35px rgba(0,0,0,0.12) !important;
}
.wp-block-button .wp-block-button__link:active,
.wp-block-button .wp-block-button__link:focus {
background-color: #888888 !important;
color: #ffffff !important;
opacity: 1 !important;
transform: translateY(0) !important;
box-shadow: none !important;
}
/* リストデザイン調整 */
.wp-block-list {
text-align: left !important;
list-style: none;
padding-left: 0;
font-size:1rem;
}
/* 2. 最初の階層（親リスト）の●設定 */
@media screen and (max-width: 768px) {
.wp-block-list {
font-size:0.85rem;
}
}
.wp-block-list > li {
position: relative;
padding-left: 1.3rem; /* 記号の分の余白 */
margin-bottom: 1rem; /* 行間の調整 */
}
.wp-block-list > li::before {
content: "●";
position: absolute;
left: 0;
color: var(--wp--preset--color--accent-1)
}
.wp-block-list li ul {
list-style: none !important;
padding-left: 0px !important;
}
.wp-block-list li ul li::before {
content: "※" !important;
color: #000;
font-size: 0.8rem;
}
.wp-block-list li ul li {
font-size: 0.8rem;
padding-left:1rem;
margin-top: 0px !important;
line-height: 1.3 !important;
margin-bottom: 0.2rem !important;
}
.wp-block-list li sub {
display: inline-block;
line-height: 1 !important;
vertical-align: baseline;
position: relative;
top: 0.1rem;
}
.wp-block-list li ul li ul li::before {
content: none !important;
}
.wp-block-list li ul li ul li {
padding-left:0rem;
}
/* 注釈テキストの設定 */
.annotation {
font-size: 0.8rem;
padding-left: 1.2em;
text-indent: -1.2em;
line-height: 1.5;
text-align: left !important;
position: relative;
}
.annotation:before {
content: "※";
}
/* 専用クラス .arrow-between がついたカラムセットだけに適用 */
.wp-block-columns.arrow-between {
position: relative;
overflow: visible;
}
.wp-block-columns.arrow-between > .wp-block-column:first-child {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.wp-block-columns.arrow-between > .wp-block-column:first-child::after {
content: "→";
position: absolute;
right: -15px;
font-size: 1.5rem;
color: var(--wp--preset--color--accent-1);
font-weight: bold;
z-index: 2;
}
@media screen and (max-width: 768px) {
.wp-block-columns.arrow-between > .wp-block-column:first-child::after {
right: -10px;
font-size: 1.2rem;
}
}
/* テキスト再調整 */
@media screen and (max-width: 768px) {
h4 {
font-size: clamp(14px, 3vw, 18px);
}
h5 {
padding-bottom: 0.5rem;
}
}
/* 目的エリアボタン */
@media (max-width: 768px) {
.mokuteki-area-btn .wp-block-buttons-is-layout-flex{
gap: 5px;}
.mokuteki-area-btn .wp-block-button{
width: auto;
max-width: 130px ;
margin: 0;}
.mokuteki-area-btn .wp-block-button a {
padding: 0.5rem 1rem;
font-size:0.7rem;}
}
/* 目的別エリア */
/* 住所・営業時間のコンテナ */
.info-variant .post-info-details {
background: #FFFCF5;
padding: 0.5rem;
margin: 0.5rem 0;
border-radius: 6px;
}
.info-variant .post-info-details p {
margin: 4px 0 !important;
font-size: 0.7rem;
line-height: 1.5;
color: #444;
display: flex;
align-items: flex-start;
}
.info-variant .label {
font-weight: bold;
color: #DE6262;
min-width: 3em;
display: inline-block;
}
/* ボタンの基本スタイル（最初は隠しておく） */
.page-top {
position: fixed !important;
right: 20px !important;
bottom: 20px !important;
width: 50px !important;
height: 50px !important;
z-index: 999999 !important; /* 最前面に */
opacity: 1 !important; /* 強制表示 */
visibility: visible !important; /* 強制表示 */
display: block !important;
}
/* スクロール後に表示されるためのクラス */
.page-top.is-show {
opacity: 1;
visibility: visible;
bottom: 30px; /* 少し上に浮き上がらせる演出 */
}
/* ボタンのデザイン */
.page-top-link {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background: #ff7b4e;
color: #fff;
text-decoration: none;
border-radius: 50%; /* 正円にする */
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
font-size: 20px;
}
/* ホバー時の動き */
.page-top-link:hover {
transform: translateY(-5px);
opacity: 0.7 !important;
}
/* スマホ用のサイズ調整 */
@media screen and (max-width: 767px) {
.page-top-link {
width: 45px;
height: 45px;
right: 15px;
bottom: 15px;
}
}
/*就学前ボタン２列 */
@media (max-width: 781px) {
.nenrei-shuugakumae-btn {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.nenrei-shuugakumae-btn .wp-block-button {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.nenrei-shuugakumae-btn .wp-block-button__link {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: left;
min-height: 64px;
padding: 10px 5px;
border-radius: 20px;
}
.nenrei-shuugakumae-btn .wp-block-button a {
padding: 0.5rem 0.75rem;
font-size: 11px !important;
}
.nenrei-shuugakumae-btn .wp-block-button.is-style-botan-icon .wp-block-button__link::after {
top: 50%;
right: 0.7em;
transform: translateY(-50%);
width: 1.6em;
}
.nenrei-shuugakumae-btn .wp-block-button.is-style-botan-icon .wp-block-button__link {
position: relative;
padding-right: 2.5em;
}
.nenrei-shougakukou-card{
margin-top: 0;
}
.has-text-align-center img
{
margin: 0 auto;
}
}
@media (min-width: 781px) {
.nenrei-shuugakumae-btn{
max-width: 700px;
margin: 0 auto;
}
}
td.has-text-align-center {
text-align: center; /* テキスト・インライン要素の中央寄せ */
vertical-align: middle;
}
/* 画像をブロック要素化して中央へ */
td.has-text-align-center img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px; /* ボタンとの隙間 */
}
/* ボタンコンテナの中央寄せ */
td.has-text-align-center .is-content-justification-left {
justify-content: center !important; /* leftを上書き */
}
/* カード内の画像コンテナのサイズを固定 */
.post-card .card-image {
width: 100%;
aspect-ratio: 16 / 9; /* ここで比率を指定（3:2や16:9などお好みで） */
overflow: hidden;
}
/* 画像自体の表示設定 */
.post-card .post-img {
width: 100%;
height: 100%;
object-fit: cover; /* 比率を維持したまま枠いっぱいに広げ、余分をカット */
object-position: center; /* 中央を基準にトリミング */
}
@media (max-width: 781px) {
.search-card .wp-block-columns{
margin-block-start: 0.6rem;
}
}
/* タブレット (2列表示) */
@media (max-width: 768px) {
.footer-sub-group {
margin-bottom: 0px;
}
.footer-sub-heading {
margin: 0px;
}
.footer-col:first-child {
gap: 0px;
}
.footer-inner {
grid-template-columns: 1fr;
gap: 20px;
}
.two-column-sub-style{
gap: 0;
Padding-top: 0.5rem;
}
.mokuteki-list-checkbox p{
font-size: 0.8rem;
}
}
.hp-font-style01 {
font-family: "Zen Maru Gothic", sans-serif;
}
@media (min-width: 768px) {
.pc-display-text-class01 p{
margin-top:0.3rem;
}
}
/* カード自体を正方形にする */
.top-nenrei-custom-btn .is-style-card-1 {
padding: 1rem;
}
.top-card-nenrei {
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 1rem;
}
/* 画像が伸びたり潰れたりしないように調整 */
.top-card-nenrei img {
width: 90%;
height: auto;
max-height: 60%;
object-fit: contain;
}
/* フッター再調整 */
@media (min-width: 768px) {
.footer-sub-heading a{
pointer-events: none;
color:#DE6262;
display: flex;
justify-content: flex-start;
text-align: left;
}
.footer-sub-heading a:before{
content: "●";
margin-right: 0.5rem;
}
.footer-sub-heading a:after{
content: none;
}
}
/* --------------------------------------------------
スライダー：ブラウザ間の差異をなくす標準化設定
-------------------------------------------------- */
/* 1. スライダーの外枠自体を 880px（1000px - 120px）に絞る */
#metaslider-id-14 {
max-width: 880px !important; /* ここで「画像の見えたい幅」を指定 */
margin: 0 auto 40px !important;
position: relative;
overflow: visible !important; /* 矢印を外に出すために必須 */
}
/* 2. 表示窓とリストの設定（余計な計算をさせない） */
#metaslider-id-14 .flex-viewport {
border-radius: 30px !important;
width: 100% !important;
margin-top: 1.2rem !important; /* ★ここを追加：画像エリアを10px下に配置 */
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 3. 画像：calcを使わず100%固定。これでFirefoxの巨大化を防ぐ */
#metaslider-id-14 .slides img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 !important;
border-radius: 0 !important;
border: none !important;
}
/* 4. 矢印：スライダーの「外側」に配置する */
#metaslider-id-14 .flex-direction-nav a {
opacity: 1 !important;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
background-color: #eee;
border-radius: 50%;
width: 44px;
height: 44px;
text-align: center;
line-height: 44px;
text-decoration: none !important;
}
/* 左矢印を枠の左外へ / 右矢印を枠の右外へ */
#metaslider-id-14 .flex-direction-nav .flex-prev {
left: -60px !important;
}
#metaslider-id-14 .flex-direction-nav .flex-next {
right: -60px !important;
}
/* 5. ページネーション（ドット） */
#metaslider-id-14 .flex-control-nav {
bottom: 20px !important;
}
/* --------------------------------------------------
スマホ用調整（枠いっぱいに広げる）
-------------------------------------------------- */
@media screen and (max-width: 1024px) {
#metaslider-id-14 .flex-direction-nav .flex-prev { left: -25px !important; }
#metaslider-id-14 .flex-direction-nav .flex-next { right: -25px !important; }
#metaslider-id-14 .flex-direction-nav a {
width: 25px;
height: 25px;
}
}
@media screen and (max-width: 768px) {
#metaslider-id-14 .flex-direction-nav .flex-prev {
left: -20px !important; }
#metaslider-id-14 .flex-direction-nav .flex-next {
right: -20px !important; }
#metaslider-id-14 {
max-width: 100% !important;
}
/* スマホでは矢印を画像の上に重ねるか非表示にする */
#metaslider-id-14 .flex-direction-nav a {
width: 25px;
height: 25px;
display: none;
}
#metaslider-id-14 .flex-viewport {
margin-top: 0.5rem !important; /* ★ここを追加：画像エリアを10px下に配置 */}
.slider-frame-img::after {
width: 98%;
top: 5px;
}
}
.metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a.flex-prev::after {
mask-size: 15px !important;}
.metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a.flex-next::after {
mask-size: 15px !important;}
}
/* --------------------------------------------------
SP（スマホ）用調整
-------------------------------------------------- */
@media (max-width: 768px) {
#metaslider-id-14 {
border-radius: 20px !important;
border-width: 3px !important;
}
/* 上下の装飾を少し小さく */
#metaslider-id-14::before {
top: 10px;
width: 50px;
height: 4px;
}
#metaslider-id-14::after {
bottom: 15px;
width: 80px;
height: 4px;
}
#metaslider-id-14 .flex-control-nav {
bottom: 25px;
}
}
/* =========================================================
検索結果専用：カード型グリッドレイアウト（完全上書き版）
========================================================= */
/* --- 1. グリッドコンテナ（一覧全体） --- */
.search-columns-card ul.wp-block-post-template {
display: grid !important;
/* スマホは1列、PCは自動で列を増やす（最小幅280px） */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 24px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
/* --- 2. カード全体の強制リセット＆スタイル --- */
.search-columns-card li.wp-block-post {
display: flex !important;
flex-direction: column !important;
background: #fff !important;
border: 1px solid #e0e0e0 !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
margin: 0 !important; /* 他のCSSの余白を強制リセット */
padding: 0 !important;
height: 100% !important; /* 高さを揃える */
box-sizing: border-box !important;
}
.search-columns-card li.wp-block-post:hover {
transform: translateY(-4px) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}
/* --- 3. サムネイル画像（アスペクト比を16:9に強制統一） --- */
.search-columns-card .wp-block-post-featured-image {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
aspect-ratio: 16 / 9 !important;
background-color: #f8f9fa !important;
border-bottom: 1px solid #eee !important;
display: block !important;
}
.search-columns-card .wp-block-post-featured-image a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.search-columns-card .wp-block-post-featured-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
/* --- 4. コンテンツエリア（テキスト部分） --- */
.search-columns-card li.wp-block-post > .wp-block-group.is-vertical {
padding: 20px !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
gap: 12px !important; /* 各要素間の隙間を均一に */
box-sizing: border-box !important;
}
/* --- 5. タイトル --- */
.search-columns-card .wp-block-post-title {
font-size: 1.1rem !important;
font-weight: bold !important;
line-height: 1.5 !important;
margin: 0 !important;
padding: 0 !important;
}
.search-columns-card .wp-block-post-title a {
color: #333 !important;
text-decoration: none !important;
}
/* --- 6. メタ情報（日付・カテゴリなど）のリセット --- */
.search-columns-card .wp-block-template-part,
.search-columns-card .wp-block-template-part .wp-block-group {
margin: 0 !important;
padding: 0 !important;
}
/* メタ情報を横並びに */
.search-columns-card .wp-block-template-part .is-layout-flex {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px 12px !important;
margin: 0 !important;
padding: 0 !important;
}
/* 不要なテキスト（「—」「by」「in」など）を強制非表示 */
.search-columns-card .wp-block-template-part p.has-text-color,
.search-columns-card .wp-block-post-terms__prefix {
display: none !important;
}
/* 日付と著者 */
.search-columns-card .wp-block-post-date,
.search-columns-card .wp-block-post-author-name {
font-size: 0.8rem !important;
color: #888 !important;
margin: 0 !important;
line-height: 1 !important;
}
/* カテゴリタグ */
.search-columns-card .taxonomy-category {
margin: 0 !important;
}
.search-columns-card .taxonomy-category a {
display: inline-block !important;
background: #f1f3f4 !important;
color: #5f6368 !important;
padding: 4px 8px !important;
border-radius: 4px !important;
font-size: 0.75rem !important;
text-decoration: none !important;
font-weight: bold !important;
line-height: 1 !important;
}
/* --- 7. 抜粋（リード文） --- */
.search-columns-card .wp-block-post-excerpt {
font-size: 0.85rem !important;
color: #555 !important;
line-height: 1.6 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 複数行を強制的に3行で省略（レイアウト崩れ防止） */
.search-columns-card .wp-block-post-excerpt__excerpt {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
margin: 0 !important;
}
/* --- 8. 不要なスペーサーを隠す --- */
.search-columns-card .wp-block-spacer {
display: none !important;
}
/* --- 9. ページネーション --- */
.search-columns-card .wp-block-query-pagination {
display: flex !important;
justify-content: center !important;
margin-top: 40px !important;
padding-top: 20px !important;
border-top: 1px solid #ddd !important;
}
.search-columns-card .wp-block-post-title {
display: block;
}
.search-columns-card .wp-block-post-author-name{
display: none;
}
.search-columns-card .area-toubu,.area-east,.area-chubu{
font-weight: normal;
}
了解いたしました。CSSのみで制御する方法ですね。
提示されたHTML構造を見ると、画像がない投稿（「プライバシーポリシー」など）には タグ自体が存在しません。そのため、「記事全体（li要素）」に対して背景を設定し、画像がある時だけそれを上に重ねて隠すという手法が最もスマートです。
以下のCSSを管理画面の「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けてみてください。
追加するCSS
CSS
/* 1. 投稿リストの各アイテムを画像エリアとして定義 */
.search-columns-card .wp-block-post {
position: relative;
background-color: #eeeeee; /* 背景のグレー */
display: flex;
flex-direction: column;
}
/* 2. 画像がない場合に「NO IMAGE」の文字を出す設定 */
.search-columns-card .wp-block-post:not(:has(figure))::before {
content: "NO IMAGE";
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 4;
width: 100%;
max-height: 200px;
background-color: #ddd; /* ベタ塗りの色 */
color: #888; /* 文字の色 */
font-weight: bold;
font-size: 14px;
margin-bottom: 20px; /* 下のテキストとの余白（既存のpadding-bottomに合わせる） */
}
/* 3. 画像がある場合は、画像自体が上に重なるので背景は見えません */
.wp-block-post-featured-image {
position: relative;
z-index: 1;
background-color: #fff; /* 背景透過防止 */
}
.center-no-card{
text-align: center;
font-size: 1.5rem;
padding: 2rem 0;
color: #DE6262;
font-family: 'Zen Maru Gothic', sans-serif;
font-weight: bold;
}
.event-grids-area{
padding: 1rem;
}
/* data-label属性がない場合は疑似要素を表示しない */
td:not([data-label])::before {
display: none !important;
}
@media screen and (max-width: 768px) {
.is-style-custom-smart-table td:not([data-label]) {
padding: 12px 15px 12px 15px !important;
}}
.nenrei-shuugakumae-btns .is-style-botan-icon a{
height: 4.5rem !important;
}
/* --- スライダー全体の土台 --- */
#metaslider-id-14 {
max-width: 880px !important;
margin: 0 auto !important;
position: relative;
overflow: visible !important;
z-index: 1;
}
/* 1. フレームを配置する基準点をスライダーのコンテナに設定 */
/* 2. フレーム（ベゼル）本体 */
#metaslider_container_14::after {
content: "";
position: absolute;
/* スライダーの .flex-viewport の margin-top (1.2rem) と重なりを同期 */
top: -0.5rem;
left: -1.7em;
width: 108%;
height: calc(108% - 1.2rem);
z-index: 100 !important; /* スライダー画像より上 */
pointer-events: none; /* 下のスライダーをクリック可能にする */
background-image: url('/wp-content/themes/twentytwentyfour-child/images/background-img.svg');
background-repeat: no-repeat;
background-size: 100% 100%; /* 枠の形に合わせて引き伸ばす */
background-position: center top;
opacity: 1; /* 重なりが確認できたら透過度を調整してください */
}
/* --- スマホ(SP)用の微調整 --- */
@media screen and (max-width: 768px) {
#metaslider_container_14::after {
left: 0.1rem;
width: 100% !important;
height: 110%;
}
}
/* 番号リスト */
.wp-block-column ol.wp-block-list > li {
counter-increment: my-counter; /* 数値を1ずつ増やす */
position: relative;
padding-left: 1.8em; /* 丸数字のスペースを確保 */
margin-bottom: 10px;
list-style: none !important; /* 強制的に標準の数字を消す */
}
.wp-block-column ol.wp-block-list > li::before {
content: counter(my-counter);
position: absolute;
left: 0;
top: 0.1em;
width: 1.4em;
height: 1.4em;
background-color: var(--wp--preset--color--accent-1);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
font-weight: bold;
}
.wp-block-column ol.wp-block-list li ul li::before {
content: none;
}
.annotation-before sub {
display: block;
padding-left: 1.5em;
text-indent: -1.1em;
position: relative;
vertical-align: baseline;
}
.annotation-before sub::before {
content: "※";
display: inline-block;
width: 1.2em;
text-align: center;
}
.annotation-before .has-accent-1-color sub ::before {
color: var(--wp--preset--color--accent-1);
}