/*
* 作り直した固定ページ（tools/vc2html.py で WPBakery から変換したもの）の見た目。
*
* 1. 変換した部品の共通の形（行・列・見出し・アイコン・ボタン）
* 2. トップ
* 3. 目的別に探す（一覧）……旧ページの「カスタムCSS」から移した。値は変えていない
* 4. 目的別の各ページ（9ページ共通）……同上
* 5. アプリ用お問い合わせ（/members の下。UTAGE のアプリの中で開く）……同上。site.css に負けないよう .parent-pageid-27790 を付けた
* 5b. よくある質問（/faq）・ページ一覧（/knowledge-allpages）……同上
* 6. マニュアル（カテゴリ一覧 /knowledge）
*/
/* ===================================================
1. 共通の形
=================================================== */
/* 中の部品の上下の間を外へはみ出させない（旧ページの行は中の間を抱え込んでいた。例：目的別ページの最後の「次のカテゴリー」の下 40px） */
.m-page { --m-gap: 30px; display: flow-root; }
/* 旧ページの部品の下の間（WPBakery の既定 35px）と同じにする */
.post_content .m-page .m-section { margin-bottom: 35px; }
.m-page .m-row,
.m-page .m-row-inner {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--m-gap);
margin-bottom: 35px;
}
.m-page .m-col { grid-column: span 12; min-width: 0; }
.m-page .m-col--1-2 { grid-column: span 6; }
.m-page .m-col--1-3 { grid-column: span 4; }
.m-page .m-col--2-3 { grid-column: span 8; }
.m-page .m-col--1-4 { grid-column: span 3; }
.m-page .m-col--3-4 { grid-column: span 9; }
@media (max-width: 767px) {
/* スマホでは列を縦に並べる。旧ページは縦に並んだ列の間を空けていなかった（列の中の余白だけ） */
.m-page .m-col { grid-column: span 12; }
.m-page :is(.m-row, .m-row-inner) { gap: 0; } /* 列の間（12列ぶん）が画面の幅を超えて、本文がはみ出さないように */
}
/* 画面の幅いっぱいに背景を伸ばす行 */
.m-page .m-row--stretch {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
}
.m-page > :first-child { margin-top: 0; }
/* SWELL の本文の見出しの飾り（帯・線）を外す。見出しの飾りはページ側の指定だけにする */
/* 作り直したページの文字は旧テーマと同じ行の高さ 30px、段落の下 10px */
.post_content .m-page { line-height: 1.875; }
.post_content .m-page :where(p) { margin-bottom: 10px; line-height: inherit; }
/* 文章のかたまり・HTML の部品（tools/vc2html.py の m-text・m-raw）の下は 35px（WPBakery の既定）。
旧ページでは次の見出しの上の間（20px）と重ならなかったので、ページ直下の文章は余白（padding）で取る */
.post_content .m-page :is(.m-text, .m-raw) { margin-bottom: 35px; }
.post_content .m-page > :is(.m-text, .m-raw) { margin-bottom: 0; padding-bottom: 35px; }
/* 列の最後の文章のかたまり・HTML の部品も、下の 35px を残す（SWELL は最後の要素の下の間を 0 にするので余白で取る）。目的別のカードは除く */
.post_content .m-page .m-col:not(.custom-card-design) > :is(.m-text, .m-raw):last-child { padding-bottom: 35px; }
.post_content .m-page > .m-row-inner { margin-bottom: 0; }
/* 目的別の各ページ（上に .page-header-box がある9ページ）は、旧ページの「カスタムCSS」で HTML の部品の下の間を 0 にしていた */
.post_content .m-page:has(.page-header-box) .m-raw { margin-bottom: 0; padding-bottom: 0; }
/* 行・列の最初の見出しも、旧ページと同じく上に間を取る（大見出し 20px・小見出し 10px）。
SWELL は先頭の要素の上の間を !important で 0 にするので、こちらも !important */
.post_content .m-page :is(.m-row, .m-row-inner, .m-section, .m-col) > h3.m-h:first-child { margin-top: 20px !important; }
.post_content .m-page :is(.m-row, .m-row-inner, .m-section, .m-col) > h4.m-h:first-child { margin-top: 10px !important; }
/* 目的別のカードの見出しは上の間なし（旧ページの「カスタムCSS」で 0 にしていた） */
.post_content .m-page .custom-card-design > :is(h3, h4).m-h:first-child { margin-top: 0 !important; }
.post_content .m-page :where(h1, h2, h3, h4) {
background: none;
border: 0;
padding: 0;
margin: 20px 0 10px;
color: inherit;
font-weight: normal;
line-height: 1.1;
}
.post_content .m-page :where(h4) { margin: 10px 0; }
.post_content .m-page :where(h1, h2, h3, h4)::before,
.post_content .m-page :where(h1, h2, h3, h4)::after { content: none; }
/* 大きさは旧テーマの実測（見出しの部品の既定）。:where で弱くして、ページごとの指定（目的別ページなど）が勝つようにする */
.post_content .m-page :where(h1) { font-size: 36px; }
.post_content .m-page :where(h2) { font-size: 26px; }
.post_content .m-page :where(h3) { font-size: 24px; }
.post_content .m-page :where(h4) { font-size: 20px; }
.post_content .m-page .m-h a { color: inherit; text-decoration: none; }
/* 見出しの上に置く丸いアイコン（トップの4つ） */
.m-page .m-icon-wrap { text-align: center; margin: 0 0 20px; }
.m-page .m-icon {
display: inline-block;
width: 104px;
height: 104px;
border-radius: 50%;
position: relative;
color: #fff;
}
.m-page .m-icon::before {
content: "";
position: absolute;
inset: 17px; /* 旧ページのアイコンの絵柄は 70px（丸は 104px） */
background-color: currentColor;
-webkit-mask: center / auto 100% no-repeat;
mask: center / auto 100% no-repeat; /* 高さ 70px に合わせ、幅は字の幅のまま（タグは 75px で丸からはみ出す。旧と同じ） */
}
.m-page .m-icon--check::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1643 634 919 1358 783 1494Q755 1522 715 1522Q675 1522 647 1494L511 1358L149 996Q121 968 121 928Q121 888 149 860L285 724Q313 696 353 696Q393 696 421 724L715 1019L1371 362Q1399 334 1439 334Q1479 334 1507 362L1643 498Q1671 526 1671 566Q1671 606 1643 634Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1643 634 919 1358 783 1494Q755 1522 715 1522Q675 1522 647 1494L511 1358L149 996Q121 968 121 928Q121 888 149 860L285 724Q313 696 353 696Q393 696 421 724L715 1019L1371 362Q1399 334 1439 334Q1479 334 1507 362L1643 498Q1671 526 1671 566Q1671 606 1643 634Z'/%3E%3C/svg%3E"); }
.m-page .m-icon--file::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath d='M1468 380Q1496 408 1516 456Q1536 504 1536 544V1696Q1536 1736 1508 1764Q1480 1792 1440 1792H96Q56 1792 28 1764Q0 1736 0 1696V96Q0 56 28 28Q56 0 96 0H992Q1032 0 1080 20Q1128 40 1156 68ZM1024 136V512H1400Q1390 483 1378 471L1065 158Q1053 146 1024 136ZM1408 1664V640H992Q952 640 924 612Q896 584 896 544V128H128V1664ZM384 800Q384 786 393 777Q402 768 416 768H1120Q1134 768 1143 777Q1152 786 1152 800V864Q1152 878 1143 887Q1134 896 1120 896H416Q402 896 393 887Q384 878 384 864ZM1120 1024Q1134 1024 1143 1033Q1152 1042 1152 1056V1120Q1152 1134 1143 1143Q1134 1152 1120 1152H416Q402 1152 393 1143Q384 1134 384 1120V1056Q384 1042 393 1033Q402 1024 416 1024ZM1120 1280Q1134 1280 1143 1289Q1152 1298 1152 1312V1376Q1152 1390 1143 1399Q1134 1408 1120 1408H416Q402 1408 393 1399Q384 1390 384 1376V1312Q384 1298 393 1289Q402 1280 416 1280Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath d='M1468 380Q1496 408 1516 456Q1536 504 1536 544V1696Q1536 1736 1508 1764Q1480 1792 1440 1792H96Q56 1792 28 1764Q0 1736 0 1696V96Q0 56 28 28Q56 0 96 0H992Q1032 0 1080 20Q1128 40 1156 68ZM1024 136V512H1400Q1390 483 1378 471L1065 158Q1053 146 1024 136ZM1408 1664V640H992Q952 640 924 612Q896 584 896 544V128H128V1664ZM384 800Q384 786 393 777Q402 768 416 768H1120Q1134 768 1143 777Q1152 786 1152 800V864Q1152 878 1143 887Q1134 896 1120 896H416Q402 896 393 887Q384 878 384 864ZM1120 1024Q1134 1024 1143 1033Q1152 1042 1152 1056V1120Q1152 1134 1143 1143Q1134 1152 1120 1152H416Q402 1152 393 1143Q384 1134 384 1120V1056Q384 1042 393 1033Q402 1024 416 1024ZM1120 1280Q1134 1280 1143 1289Q1152 1298 1152 1312V1376Q1152 1390 1143 1399Q1134 1408 1120 1408H416Q402 1408 393 1399Q384 1390 384 1376V1312Q384 1298 393 1289Q402 1280 416 1280Z'/%3E%3C/svg%3E"); }
.m-page .m-icon--tags::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1792'%3E%3Cpath d='M410.5 538.5Q448 501 448 448Q448 395 410.5 357.5Q373 320 320 320Q267 320 229.5 357.5Q192 395 192 448Q192 501 229.5 538.5Q267 576 320 576Q373 576 410.5 538.5ZM1515 1024Q1515 1077 1478 1114L987 1606Q948 1643 896 1643Q843 1643 806 1606L91 890Q53 853 26.5 789Q0 725 0 672V256Q0 204 38 166Q76 128 128 128H544Q597 128 661 154.5Q725 181 763 219L1478 933Q1515 972 1515 1024ZM1899 1024Q1899 1077 1862 1114L1371 1606Q1332 1643 1280 1643Q1244 1643 1221 1629Q1198 1615 1168 1584L1638 1114Q1675 1077 1675 1024Q1675 972 1638 933L923 219Q885 181 821 154.5Q757 128 704 128H928Q981 128 1045 154.5Q1109 181 1147 219L1862 933Q1899 972 1899 1024Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1792'%3E%3Cpath d='M410.5 538.5Q448 501 448 448Q448 395 410.5 357.5Q373 320 320 320Q267 320 229.5 357.5Q192 395 192 448Q192 501 229.5 538.5Q267 576 320 576Q373 576 410.5 538.5ZM1515 1024Q1515 1077 1478 1114L987 1606Q948 1643 896 1643Q843 1643 806 1606L91 890Q53 853 26.5 789Q0 725 0 672V256Q0 204 38 166Q76 128 128 128H544Q597 128 661 154.5Q725 181 763 219L1478 933Q1515 972 1515 1024ZM1899 1024Q1899 1077 1862 1114L1371 1606Q1332 1643 1280 1643Q1244 1643 1221 1629Q1198 1615 1168 1584L1638 1114Q1675 1077 1675 1024Q1675 972 1638 933L923 219Q885 181 821 154.5Q757 128 704 128H928Q981 128 1045 154.5Q1109 181 1147 219L1862 933Q1899 972 1899 1024Z'/%3E%3C/svg%3E"); }
.m-page .m-icon--question::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath d='M896 1376V1184Q896 1170 887 1161Q878 1152 864 1152H672Q658 1152 649 1161Q640 1170 640 1184V1376Q640 1390 649 1399Q658 1408 672 1408H864Q878 1408 887 1399Q896 1390 896 1376ZM1152 704Q1152 616 1096.5 541Q1041 466 958 425Q875 384 788 384Q545 384 417 597Q402 621 425 639L557 739Q564 745 576 745Q592 745 601 733Q654 665 687 641Q721 617 773 617Q821 617 858.5 643Q896 669 896 702Q896 740 876 763Q856 786 808 808Q745 836 692.5 894.5Q640 953 640 1020V1056Q640 1070 649 1079Q658 1088 672 1088H864Q878 1088 887 1079Q896 1070 896 1056Q896 1037 917.5 1006.5Q939 976 972 957Q1004 939 1021 928.5Q1038 918 1067 893.5Q1096 869 1111.5 845.5Q1127 822 1139.5 785Q1152 748 1152 704ZM1433 510.5Q1536 687 1536 896Q1536 1105 1433 1281.5Q1330 1458 1153.5 1561Q977 1664 768 1664Q559 1664 382.5 1561Q206 1458 103 1281.5Q0 1105 0 896Q0 687 103 510.5Q206 334 382.5 231Q559 128 768 128Q977 128 1153.5 231Q1330 334 1433 510.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath d='M896 1376V1184Q896 1170 887 1161Q878 1152 864 1152H672Q658 1152 649 1161Q640 1170 640 1184V1376Q640 1390 649 1399Q658 1408 672 1408H864Q878 1408 887 1399Q896 1390 896 1376ZM1152 704Q1152 616 1096.5 541Q1041 466 958 425Q875 384 788 384Q545 384 417 597Q402 621 425 639L557 739Q564 745 576 745Q592 745 601 733Q654 665 687 641Q721 617 773 617Q821 617 858.5 643Q896 669 896 702Q896 740 876 763Q856 786 808 808Q745 836 692.5 894.5Q640 953 640 1020V1056Q640 1070 649 1079Q658 1088 672 1088H864Q878 1088 887 1079Q896 1070 896 1056Q896 1037 917.5 1006.5Q939 976 972 957Q1004 939 1021 928.5Q1038 918 1067 893.5Q1096 869 1111.5 845.5Q1127 822 1139.5 785Q1152 748 1152 704ZM1433 510.5Q1536 687 1536 896Q1536 1105 1433 1281.5Q1330 1458 1153.5 1561Q977 1664 768 1664Q559 1664 382.5 1561Q206 1458 103 1281.5Q0 1105 0 896Q0 687 103 510.5Q206 334 382.5 231Q559 128 768 128Q977 128 1153.5 231Q1330 334 1433 510.5Z'/%3E%3C/svg%3E"); }
.m-page .m-btn-wrap { margin: 0; }
.post_content .m-page .m-btn {
display: inline-block;
padding: 10px 18px;
border: 2px solid #111;
color: #111;
background: #fff;
font-size: 14px;
line-height: 1.2;
text-decoration: none;
}
.post_content .m-page .m-btn:hover { background: #111; color: #fff; }
/* 自前の h1 を持つページ（目的別など）は SWELL のタイトルを出さない（inc/display.php） */
.m-own-title .c-pageTitle { display: none; }
.m-own-title .l-mainContent__inner > .post_content { margin-top: 0; }
/* 目的別のトップ（/purpose。body の m-slug-* は inc/display.php）はパンくずが無く、旧はヘッダーの下 PC 35px・スマホ 21px に題名、説明の下 85px にカード（11/5 実測） */
.m-slug-purpose #content { padding-top: 35px; }
.m-slug-purpose .post_content .m-page > .m-row:first-child { margin-bottom: 10px; }
/* 目的別ページの上の大きなアイコン：旧ページは図形が枠いっぱい（60px）に描かれていた */
.post_content .page-header-icon .m-svg { width: 100%; height: 100%; }
/* ===================================================
2. トップ
=================================================== */
/* 大見出しはヘッダーのすぐ下に付ける（旧テーマと同じ） */
.home #content { padding-top: 0; }
.m-page--front .m-hero {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 140px calc(50vw - 50%) 128px;
text-align: center;
color: #fff;
position: relative;
z-index: 2; /* 検索候補を、下の4つの入口より前に出す（はみ出しを切らない。動画は枠ぴったりなので切る必要が無い）。入口の見出しは SWELL が z-index 1 にしているので 2 */
/* 背景は旧トップと同じ動画（.m-hero__bg）。読み込むまでと、動きを減らす設定の人には、同じ動画の静止画を出す */
background: url("/wp-content/uploads/2021/05/discussing_features.jpg") center / cover no-repeat;
}
.m-page--front .m-hero::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: rgba(0, 0, 0, .6);
}
.m-page--front .m-hero__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
.m-page--front .m-hero__bg { display: none; }
}
.post_content .m-page--front .m-hero__ttl {
color: #fff;
font-size: 30px;
font-weight: 300; /* 旧トップと同じ（11/4 実測） */
letter-spacing: 2px;
margin-top: 0; /* SWELL が見出しの上に付ける 20px を消す（旧は帯の上 140px のすぐ下） */
margin-bottom: 40px;
}
/* 動画の後ろに WordPress の自動整形が空の段落を足し、その下の間 10px で見出しが下がる */
.m-page--front .m-hero > p:empty { display: none; }
.m-page--front .m-search { max-width: 850px; margin: 0 auto; }
/* PC は旧テーマと同じく本文の幅の 75%（1140px なら 855px、940px なら 705px） */
@media (min-width: 992px) { .m-page--front .m-search { width: 75%; max-width: none; } }
/* 大見出しの寸法は旧トップの実測（PC：見出し30px・下45px・検索窓の高さ65px・下139px） */
.post_content .m-page--front .m-hero__ttl { line-height: 1.5; margin-bottom: 45px; }
.m-page--front .m-hero { padding-bottom: 139px; }
.m-page--front .m-search__input { height: 65px; font-size: 16px; }
.m-page--front .m-search__btn { width: 112px; }
/* 4つの入口。旧ページは列の上に35px、アイコンの下に35px、ボタンの下に約22pxの間があった */
.m-page--front .m-row { row-gap: 0; margin-bottom: 0; }
.m-page--front .m-col { padding-top: 35px; }
.post_content .m-page--front .m-icon-wrap { margin-bottom: 35px; line-height: 0; } /* .post_content .m-page p（下 10px・行の高さ 30px）より強く */
.post_content .m-page--front .m-h { line-height: 1.1; }
/* ボタンの下の約22px（旧ページのボタンの既定）。列の最後の要素の下の間を SWELL が !important で 0 にするので、こちらも !important */
.post_content .m-page--front .m-btn-wrap { margin-bottom: 22px !important; }
.post_content .m-page--front .m-btn { padding: 13px 18px; line-height: 21px; }
/* トップの4つの入口のボタンは旧と同じ #2a2a2a（地は透明。11/4 実測） */
.post_content .m-page--front .m-btn { border-color: #2a2a2a; color: #2a2a2a; background: transparent; }
.post_content .m-page--front .m-btn:hover { background: #2a2a2a; color: #fff; }
@media (max-width: 767px) {
/* スマホも旧トップと同じ（見出し30px・検索窓の高さ42px）。上の間は PC と同じ 140px（うち 14px はヘッダーの下。site.css A-7） */
.m-page--front .m-search__input { height: 42px; font-size: 14px; }
.m-page--front .m-search__btn { width: 59px; }
}
/* ===================================================
3. 目的別に探す（一覧）
=================================================== */
/* カードの行の下は 20px（旧ページはカードの外側の余白で取っていた。行の最後のカードの下の間は SWELL が 0 にするので、行の余白で取る） */
.post_content .m-page .m-row--stretch:has(> .custom-card-design) { padding-bottom: 20px; }
/* PC では、旧ページと同じくカードを本文の左右に 15px ずつはみ出して並べ、カードの間は 20px（WPBakery の列の作りの再現） */
@media (min-width: 768px) {
.post_content .m-page .m-row--stretch:has(> .custom-card-design) {
gap: 20px;
padding-left: calc(50vw - 50% - 15px);
padding-right: calc(50vw - 50% - 15px);
}
/* 横に並んだカードは高さをそろえる（カードの下の間は行の間 20px で取る） */
.post_content .m-page .m-row--stretch > .custom-card-design { margin-bottom: 0; }
}
/* スマホでは、旧ページと同じくカードを本文の左右に 5px ずつはみ出して並べる */
@media (max-width: 767px) {
.post_content .m-page .m-row--stretch:has(> .custom-card-design) {
padding-left: calc(50vw - 50% - 5px);
padding-right: calc(50vw - 50% - 5px);
}
}
/* 旧ページは列の下に余白があった（WPBakery の列の既定）。行の背景の中で同じ間を空ける */
.post_content .custom-card-design { margin-bottom: 20px; }
/* --- 全体のカードデザイン（隙間・くっつき修正版） --- */
/* 実際に白く表示されるカード本体（内側の箱にデザインを当てる） */
.post_content .custom-card-design {
background-color: #ffffff !important; /* 背景を白に */
padding: 25px !important; /* 内側の余白 */
border-top: 4px solid #3b82f6 !important; /* デフォルトの上の線（青） */
border-right: 1px solid #e5e7eb !important; /* 右の線 */
border-bottom: 1px solid #e5e7eb !important; /* 下の線 */
border-left: 1px solid #e5e7eb !important; /* 左の線 */
border-radius: 10px !important; /* 角を丸くする */
overflow: hidden !important;
box-sizing: border-box !important;
}
/* --- 緑のカード用設定 --- */
.post_content .card-green {
border-top-color: #10b981 !important; /* 上の線を緑に */
}
.post_content .card-green .custom-tag {
color: #10b981;
background-color: #ecfdf5;
}
/* --- オレンジのカード用設定 --- */
.post_content .card-orange {
border-top-color: #f59e0b !important; /* 上の線をオレンジに */
}
.post_content .card-orange .custom-tag {
color: #f59e0b;
background-color: #fffbeb;
}
/* --------------------------------------------------
※これより下の「.custom-tags」などのコードは前回のままでOKです
-------------------------------------------------- */
/* タグ（ボタン）を横に並べる設定 */
.post_content .custom-tags {
display: flex;
flex-wrap: wrap;
gap: 10px; /* タグとタグの隙間 */
margin-top: 15px; /* 上の本文との隙間 */
}
/* タグ（ボタン）1つ1つのデザイン */
.post_content .custom-tag {
background-color: #f0f6ff; /* 薄い青の背景 */
color: #3b82f6; /* 青い文字 */
font-size: 13px; /* 少し小さめの文字 */
padding: 6px 12px; /* 内側の余白 */
border-radius: 20px; /* 丸みのある形 */
display: inline-block;
font-weight: bold;
}
/* 本文の行間を調整する設定（旧ページの .wpb_text_column は変換後の .m-text） */
.post_content .custom-card-design :is(p, .m-text) {
line-height: 1.5 !important; /* 行間の広さ（数字を小さくすると狭くなります） */
}
/* --- 4. 水色のカード用設定（メッセージ） --- */
.post_content .card-lightblue {
border-top-color: #0ea5e9 !important;
}
.post_content .card-lightblue .custom-tag {
color: #0ea5e9;
background-color: #f0f9ff;
}
/* --- 5. 紫色のカード用設定（会員サイト） --- */
.post_content .card-purple {
border-top-color: #8b5cf6 !important;
}
.post_content .card-purple .custom-tag {
color: #8b5cf6;
background-color: #f5f3ff;
}
/* --- 6. 青緑色（ティール）のカード用設定（顧客管理） --- */
.post_content .card-teal {
border-top-color: #14b8a6 !important;
}
.post_content .card-teal .custom-tag {
color: #14b8a6;
background-color: #f0fdfa;
}
/* --- 7. 黄色のカード用設定（パートナー管理） --- */
.post_content .card-yellow {
border-top-color: #eab308 !important;
}
.post_content .card-yellow .custom-tag {
color: #eab308;
background-color: #fefce8;
}
/* --- 8. 赤色（ピンク系）のカード用設定（分析・改善） --- */
.post_content .card-red {
border-top-color: #f43f5e !important;
}
.post_content .card-red .custom-tag {
color: #f43f5e;
background-color: #fff1f2;
}
/* --- 9. 濃紺色（スレート）のカード用設定（契約情報） --- */
.post_content .card-slate {
border-top-color: #475569 !important;
}
.post_content .card-slate .custom-tag {
color: #475569;
background-color: #f8fafc;
}
/* --- カード全体をクリック可能にする設定 --- */
.post_content .custom-card-design {
position: relative !important; /* 透明シートの基準点を作る（必須） */
transition: all 0.3s ease !important; /* 浮き上がるアニメーションの準備 */
}
/* カードに被せる「透明なリンクシート」 */
.post_content .card-link-cover {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 10 !important;
text-decoration: none !important;
}
/* マウスが乗った時に少し浮き上がり、影をつけるエフェクト */
.post_content .custom-card-design:hover {
transform: translateY(-5px) !important; /* 上に5px動かす */
box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important; /* ふんわり影をつける */
}
/* ===================================================
4. 目的別の各ページ（9ページ共通）
=================================================== */
/* ===================================================
2. ページ上部のタイトルエリア
=================================================== */
.post_content .page-header-box {
display: flex;
align-items: flex-start;
gap: 20px;
margin-top: 0 !important;
margin-bottom: 0 !important;
background-color: #ffffff !important;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.post_content .page-header-icon {
background-color: #f0f6ff;
color: #3b82f6;
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
flex-shrink: 0;
}
.post_content .page-header-text h1 {
font-size: 26px;
font-weight: bold;
margin-top: 0;
margin-bottom: 10px;
color: #111827;
}
.post_content .page-header-text p {
color: #4b5563;
margin: 0;
line-height: 1.6;
}
/* ===================================================
3. ページ内リンク（ナビゲーションピル）
=================================================== */
.post_content .page-nav-pills {
display: grid; /* flexからgrid（マス目レイアウト）に変更 */
grid-template-columns: repeat(3, 1fr); /* 常に3列で均等に分割する魔法 */
gap: 15px;
margin-top: 15px !important;
margin-bottom: 50px;
padding-top: 30px;
padding-bottom: 30px;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
.post_content .page-nav-pill {
/* --- Flexboxで垂直・水平のど真ん中に配置 --- */
display: flex !important;
align-items: center !important; /* 垂直方向の中央揃え */
justify-content: center !important; /* 水平方向の中央揃え */
/* --- 行間を少し詰める --- */
line-height: 1.4 !important; /* 数値が小さいほど詰まります（標準は1.5〜1.6） */
background-color: #f8fbff !important;
border: 1px solid #dbeafe !important;
border-radius: 8px;
/* 上下の余白を少し減らし、最低限の高さを確保する */
padding: 10px 15px !important;
min-height: 54px; /* ← これで1行でも十分な高さが確保されます */
color: #333333 !important;
text-decoration: none !important;
font-weight: bold;
font-size: 15px;
transition: all 0.2s ease;
text-align: center;
}
.post_content .page-nav-pill:hover {
background-color: #eff6ff !important;
border-color: #3b82f6 !important;
color: #333333 !important;
box-shadow: 0 4px 10px rgba(59, 130, 246, 0.1);
}
/* ===================================================
4. セクション見出し（青い縦線付き）
=================================================== */
.post_content .section-heading-blue {
border-left: 5px solid #3b82f6;
padding-left: 15px;
font-size: 22px;
font-weight: bold;
color: #111827;
margin-bottom: 25px;
line-height: 1.3;
}
/* ===================================================
5. リンクのリスト（記事一覧自動取得版）
=================================================== */
.post_content .custom-post-list .display-posts-listing {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 60px;
}
/* SWELL は「div の最後の子」の下余白を !important で 0 にする。一覧は枠の最後の子なので、余白は枠の側に付ける */
.post_content .custom-post-list { margin-bottom: 60px; }
.post_content .custom-post-list .listing-item {
background-color: #ffffff !important;
border: 1px solid #e5e7eb;
border-radius: 8px;
transition: all 0.2s ease;
position: relative;
list-style: none !important;
}
.post_content .custom-post-list .listing-item a.title {
display: block;
padding: 18px 45px 18px 45px;
text-decoration: none !important;
color: #374151 !important;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
}
.post_content .custom-post-list .listing-item:hover {
border-color: #3b82f6;
transform: translateX(5px);
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.post_content .custom-post-list .listing-item:hover a.title {
color: #3b82f6 !important;
}
/* アイコン自動付与 */
.post_content .custom-post-list .listing-item::before {
content: '';
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%239ca3af' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'%3E%3C/path%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
transition: all 0.2s ease;
}
.post_content .custom-post-list .listing-item::after {
content: '';
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23d1d5db' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
transition: all 0.2s ease;
}
.post_content .custom-post-list .listing-item:hover::before {
background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%233b82f6' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'%3E%3C/path%3E%3C/svg%3E");
}
.post_content .custom-post-list .listing-item:hover::after {
background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%233b82f6' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E");
}
/* ===================================================
6. ページ下部のカテゴリー移動ボタン
=================================================== */
.post_content .category-nav-links {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 80px;
margin-bottom: 40px;
}
.post_content .cat-nav-btn {
display: flex;
align-items: center;
background-color: #ffffff !important;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 12px 25px;
text-decoration: none !important;
color: #111827 !important;
flex: 1;
transition: all 0.2s ease;
}
.post_content .cat-nav-next:only-child {
margin-left: auto;
max-width: calc(50% - 10px);
}
.post_content .cat-nav-btn:hover {
border-color: #3b82f6;
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.post_content .cat-nav-btn .nav-icon {
width: 20px;
height: 20px;
color: #9ca3af;
flex-shrink: 0;
transition: color 0.2s ease;
}
.post_content .cat-nav-btn:hover .nav-icon {
color: #3b82f6;
}
.post_content .cat-nav-btn .nav-text {
display: flex;
flex-direction: column;
flex: 1;
}
.post_content .cat-nav-prev .nav-text {
margin-left: 15px;
text-align: left;
}
.post_content .cat-nav-next .nav-text {
margin-right: 15px;
text-align: right;
}
.post_content .cat-nav-btn .nav-label {
font-size: 12px;
color: #6b7280;
margin-bottom: 5px;
line-height: 1.2;
}
.post_content .cat-nav-btn .nav-title {
font-size: 16px;
font-weight: bold;
line-height: 1.2;
}
/* ===================================================
7. スマホ閲覧時（画面幅768px以下）の専用設定
=================================================== */
@media screen and (max-width: 768px) {
/* 1. 一番上のタイトルエリア */
.post_content .page-header-box {
flex-direction: column;
padding: 20px;
gap: 15px;
}
.post_content .page-header-text h1 {
font-size: 22px;
}
/* 2. ページ内リンク（ナビゲーションピル） */
.post_content .page-nav-pills {
grid-template-columns: 1fr; /* スマホでは縦1列に並べる */
gap: 10px;
margin-bottom: 40px;
padding-bottom: 20px;
}
.post_content .page-nav-pill {
padding: 12px 15px;
font-size: 14px;
}
/* 3. リンクのリスト（カード型） */
.post_content .custom-post-list .listing-item a.title {
padding: 15px 35px 15px 35px;
font-size: 14px;
}
.post_content .custom-post-list .listing-item::before {
left: 10px;
}
.post_content .custom-post-list .listing-item::after {
right: 10px;
}
/* 4. セクション見出し */
.post_content .section-heading-blue {
font-size: 18px;
margin-bottom: 15px;
}
/* 5. 一番下のカテゴリー移動ボタン */
.post_content .category-nav-links {
flex-direction: column;
margin-top: 50px;
}
.post_content .cat-nav-next:only-child {
max-width: 100%;
}
.post_content .cat-nav-btn {
padding: 15px 20px;
}
.post_content .cat-nav-prev .nav-text,
.post_content .cat-nav-next .nav-text {
text-align: left;
margin-left: 15px;
margin-right: 0;
}
}
/* ===================================================
5. アプリ用お問い合わせ
=================================================== */
/* アプリの中で開くページ。旧ページの「カスタムCSS」で効いていたのは、フッター・パンくず・上へ戻るを隠すことと、
本文の上の間 40px だけ（ヘッダーとタイトルの帯も隠すつもりの指定があったが、旧テーマの作りと合わず効いていなかった）。
パスワードを入れる前も後も、旧ページで実際に見えていたとおりにする */
.parent-pageid-27790 :is(#breadcrumb, .p-breadcrumb, #footer, .l-footer, #pagetop, .p-fixBtnWrap) {
display: none !important;
}
.parent-pageid-27790 #content { padding-top: 40px; }
/* ここから下は旧ページの「カスタムCSS」のフォームの部分。全てに .parent-pageid-27790 を付け、site.css のお問い合わせの指定
（.wpcf7 の欄・送信ボタン、段落の下 10px !important）より強くした（2026-11-09 主君。旧は送信ボタン 58px・欄 52px・本文の欄 322px・札 13px・項目の下 0）。
旧テーマの土台（Bootstrap）から受けていた値（欄・ボタンの行の高さと欄の文字の色、札の行の高さ）と、段落の上下の間の !important は、旧の見た目に合わせて足したもの */
/* =========================================
2. アプリ問い合わせフォーム本体のレイアウト
========================================= */
.parent-pageid-27790 .post_content .intro-block,
.parent-pageid-27790 .post_content .note-block {
margin-bottom: 28px;
font-size: 15px;
line-height: 1.7;
}
.parent-pageid-27790 .post_content .intro-block {
border-top: 2px solid #333;
border-bottom: 2px solid #333;
padding: 20px 4px;
}
.parent-pageid-27790 .post_content .hours-block {
border-top: 1px dashed #999;
border-bottom: 1px dashed #999;
padding: 16px 4px;
margin-bottom: 36px;
font-size: 14px;
color: #444;
line-height: 1.7;
}
.parent-pageid-27790 .post_content .intro-block p,
.parent-pageid-27790 .post_content .note-block p,
.parent-pageid-27790 .post_content .hours-block p { margin-bottom: 0 !important; }
.parent-pageid-27790 .post_content .intro-block p + p { margin-top: 16px !important; }
.parent-pageid-27790 .post_content .hours-block p + p { margin-top: 12px !important; } /* フォームの中の style="margin-top: 12px;" が site.css の !important に負けるため */
.parent-pageid-27790 .post_content .form-row { margin-bottom: 26px; }
.parent-pageid-27790 .post_content .form-row label.field-name {
display: block;
font-weight: 700;
font-size: 17px;
margin-bottom: 8px;
}
/* 入力欄（視認性向上 ＆ iPhoneズーム防止） */
.parent-pageid-27790 .post_content .form-row input[type="text"],
.parent-pageid-27790 .post_content .form-row input[type="email"],
.parent-pageid-27790 .post_content .form-row textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
font-size: 16px;
padding: 10px 12px;
border: 1px solid #777;
border-radius: 4px;
background-color: #fff;
transition: border-color 0.2s, outline 0.2s;
line-height: 30px; /* 旧テーマの土台は本文の行の高さ 30px・文字の色を受け継いでいた（旧の欄 52px・本文の欄 322px・#333） */
color: inherit;
}
.parent-pageid-27790 .post_content .form-row input[type="text"]:focus,
.parent-pageid-27790 .post_content .form-row input[type="email"]:focus,
.parent-pageid-27790 .post_content .form-row textarea:focus {
border-color: #0aa3e8;
outline: 1px solid #0aa3e8;
}
.parent-pageid-27790 .post_content .badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
border-radius: 3px;
padding: 1px 8px;
margin-left: 8px;
vertical-align: 2px;
line-height: 1; /* 旧テーマの土台（Bootstrap の .badge） */
}
.parent-pageid-27790 .post_content .badge-required { background: #e53935; color: #fff; }
.parent-pageid-27790 .post_content .badge-optional { background: #9e9e9e; color: #fff; }
.parent-pageid-27790 .post_content .field-note {
font-size: 12.5px;
color: #777;
margin-top: 6px !important;
line-height: 1.5;
}
/* Contact Form 7の自動改行・空タグによる余白を無効化 */
.parent-pageid-27790 .post_content .form-row br,
.parent-pageid-27790 .post_content .agree-row br,
.parent-pageid-27790 .post_content .submit-row br { display: none; }
.parent-pageid-27790 .post_content .form-row p,
.parent-pageid-27790 .post_content .agree-row p,
.parent-pageid-27790 .post_content .submit-row p { margin-bottom: 0 !important; }
/* 承諾チェックボックスの横並び・余白補正 */
.parent-pageid-27790 .post_content .agree-row {
background: #f7f9fa;
border: 1px solid #e0e4e7;
border-radius: 6px;
padding: 16px 18px;
margin: 34px 0 30px;
font-size: 14.5px;
}
.parent-pageid-27790 .post_content .agree-row .wpcf7-list-item { margin: 0; display: block; }
.parent-pageid-27790 .post_content .agree-row .wpcf7-list-item label {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
cursor: pointer;
}
.parent-pageid-27790 .post_content .agree-row input[type="checkbox"] {
margin: 0;
margin-top: 4px;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.parent-pageid-27790 .post_content .agree-row .wpcf7-list-item-label { line-height: 1.5; font-weight: normal; }
/* =========================================
3. 添付ファイルとクリアボタンのデザイン統一
========================================= */
.parent-pageid-27790 .post_content .file-input-group {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.parent-pageid-27790 .post_content .form-row input[type="file"] { font-size: 13px; color: #555; }
/* ブラウザ標準の「ファイルを選択」ボタンを上書き */
.parent-pageid-27790 .post_content .form-row input[type="file"]::file-selector-button,
.parent-pageid-27790 .post_content .form-row input[type="file"]::-webkit-file-upload-button {
background: #f1f3f4;
color: #555;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 14px;
font-size: 13.5px;
cursor: pointer;
transition: background-color 0.2s;
margin-right: 8px;
height: 34px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
}
.parent-pageid-27790 .post_content .form-row input[type="file"]::file-selector-button:hover,
.parent-pageid-27790 .post_content .form-row input[type="file"]::-webkit-file-upload-button:hover {
background: #e2e6ea;
}
/* クリアボタンのデザイン（高さ・パディングを統一） */
.parent-pageid-27790 .post_content .clear-file-button {
background: #f1f3f4;
color: #555;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 14px;
font-size: 13.5px;
cursor: pointer;
transition: background-color 0.2s;
white-space: nowrap;
height: 34px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
}
.parent-pageid-27790 .post_content .clear-file-button:hover { background: #e2e6ea; }
/* =========================================
4. 送信ボタンと注意事項
========================================= */
.parent-pageid-27790 .post_content .submit-row { text-align: center; margin-bottom: 16px; }
/* 送信ボタンの基本デザイン（チェックONの時） */
.parent-pageid-27790 .post_content .submit-button {
background: #0aa3e8;
color: #fff;
border: none;
border-radius: 6px;
font-size: 17px;
font-weight: 700;
padding: 14px 90px;
line-height: 30px; /* 旧テーマの土台は本文の行の高さ 30px を受け継いでいた（旧の高さ 58px） */
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
}
.parent-pageid-27790 .post_content .submit-button:not(:disabled):hover { opacity: 0.8; }
/* チェックボックス未チェック（無効）時のデザイン */
.parent-pageid-27790 .post_content .submit-button:disabled {
background: #e0e0e0;
color: #9e9e9e;
cursor: not-allowed;
box-shadow: none;
}
.parent-pageid-27790 .post_content .after-note { font-size: 13.5px; color: #555; line-height: 1.6; }
.parent-pageid-27790 .post_content .after-note p { margin-bottom: 0 !important; }
.parent-pageid-27790 .post_content .after-note p + p { margin-top: 12px !important; }
/* =========================================
5. スマホ・タブレット向け調整（画面幅768px以下）
========================================= */
@media screen and (max-width: 768px) {
.parent-pageid-27790 .post_content :is(.intro-block, .note-block, .hours-block) { font-size: 14px; }
.parent-pageid-27790 .post_content .form-row label.field-name { font-size: 16px; }
.parent-pageid-27790 .post_content .field-note { font-size: 12px; }
.parent-pageid-27790 .post_content .agree-row { padding: 12px 14px; font-size: 13.5px; }
.parent-pageid-27790 .post_content .submit-button { width: 100%; max-width: 320px; padding: 14px 0; }
}
/* =========================================
6. カスタムフッター（コピーライト）
========================================= */
.parent-pageid-27790 .post_content .custom-page-footer {
text-align: center;
font-size: 13px;
color: #888;
margin-top: 40px; /* フォームとの間隔 */
padding: 24px 0 10px; /* 上下の余白 */
border-top: 1px solid #e0e4e7; /* 薄い線を引く */
}
/* =========================================
7. 送信完了メッセージのポップアップ化
========================================= */
/* 送信成功時のみ、メッセージを画面中央にフロート表示。旧はアプリ用お問い合わせのページの「カスタムCSS」で、そのページだけに効いていた
（/contact・/request は、ほかの結果と同じ枠の中の文。2026-11-09 主君の指摘で、アプリのページだけに絞った） */
.parent-pageid-27790 .post_content .wpcf7 form.sent .wpcf7-response-output {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
max-width: 320px;
background: #0aa3e8; /* ポップアップの背景色（青） */
color: #fff;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
padding: 24px 20px;
border-radius: 8px;
z-index: 99999;
text-align: center;
font-weight: 700;
font-size: 15px;
border: none;
margin: 0;
animation: popupMessage 0.4s ease forwards;
}
/* ポップアップが下からフワッと浮かび上がるアニメーション */
@keyframes popupMessage {
0% { opacity: 0; transform: translate(-50%, -40%); }
100% { opacity: 1; transform: translate(-50%, -50%); }
}
/* ===================================================
5b. よくある質問（/faq）・マニュアル（ページ一覧 /knowledge-allpages）……旧ページの「カスタムCSS」から移した。値は変えていない
=================================================== */
.page-id-9301 .listing-item {
line-height: 130% !important;
padding-bottom: 15px;
}
.page-id-7471 .listing-item {
line-height: 130% !important;
padding-bottom: 10px;
}
/* ===================================================
6. マニュアル（カテゴリ一覧 /knowledge）
=================================================== */
.m-kb {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px 30px;
}
@media (max-width: 767px) {
.m-kb { grid-template-columns: 1fr; }
}
/* 寸法・色は旧 /knowledge の実測（カテゴリ名26px、一覧16px・行の下15px・文字#222。アイコンは旧の knowledgepress の字形で、絵柄の枠は 16px・左2.4px・上3.5px。ぼけないよう整数の位置に置く） */
.post_content h2.m-kb__ttl {
background: none;
padding: 0;
margin: 0 0 20px;
font-size: 26px;
font-weight: 400;
line-height: 1.1;
color: var(--color_main);
}
.post_content .m-kb__ttl::before { content: none; }
.post_content .m-kb__ttl a { color: inherit; text-decoration: none; }
.post_content .m-kb ul { list-style: none; padding: 0; margin: 0 0 15px; }
.post_content .m-kb li { font-size: 16px; line-height: 1.4; margin: 0 0 15px; padding-left: 30px; position: relative; }
.post_content .m-kb li a { color: #222; text-decoration: none; }
.post_content .m-kb li a:hover { color: var(--color_main); }
.post_content .m-kb li::before {
content: "";
position: absolute;
left: 2px;
top: 4px;
width: 16px;
height: 16px;
background-color: #333;
-webkit-mask: var(--m-kb-icon) center / contain no-repeat;
mask: var(--m-kb-icon) center / contain no-repeat;
}
.post_content .m-kb__subcats li { --m-kb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M421 192 549 320H960V896H64V192ZM448 128H0V960H1024V256H576Z'/%3E%3C/svg%3E"); }
.post_content .m-kb__posts li { --m-kb-icon: var(--m-icon-file); }
.post_content .m-kb__all { font-size: 16px; line-height: 30px; }
/* タイトルの帯は旧 /knowledge・/knowledge-allpages と同じ、題名の上下 100px（1行で高さ 245px）・中央寄せ（.m-big-band は inc/display.php）。
/knowledge の色は旧テーマの CSS の値 rgb(62,158,214)（画面から読んだ #589dd1 は画面の色の変換が入った値で、指定すると違う色に出た） */
.m-big-band .l-topTitleArea { min-height: 0; padding: 100px 0; text-align: center; }
.page-template-template-knowledgebase .l-topTitleArea { background-color: #3e9ed6; }
/* 本文の最後から下の区画（フッター・スマホのサイドバー）までの間を旧の実測にそろえる（11/5 Astra の実測。
旧は WPBakery の行・段落の下の間が残っていたが、SWELL は本文の最後の要素の下を 0 にする） */
:is(.m-slug-purpose, .m-slug-latest-articles, .m-slug-contact-2, .m-slug-introduction) .l-mainContent__inner > .post_content { padding-bottom: 10px; }
:is(.m-slug-faq, .m-slug-faq2) .l-mainContent__inner > .post_content { padding-bottom: 22.5px; }
.m-slug-knowledge-allpages .l-mainContent__inner > .post_content { padding-bottom: 34px; }
@media (max-width: 959px) {
.m-slug-webhook .l-mainContent__inner > .post_content { padding-bottom: 10px; }
}
@media (max-width: 767px) {
.m-slug-knowledge .l-mainContent__inner > .post_content { padding-bottom: 49.5px; }
}