リンク（c-link-3 相当のスタイル）
* - 段落 () と Gutenberg リスト (ul.wp-block-list / ol.wp-block-list) 内の に適用
* - target="_blank" の場合は末尾に外部リンクアイコンを表示
* - カスタムブロック内の 等はセレクタ上一致しないので影響なし
--------------------------------------------- */
/* ---------------------------------------------
* テーマカスタマイズ (K26): 旧 bcg_2023 _reuse.scss の wp-block-* 整形を移植
* ----
* 旧記事から移行した Gutenberg コアブロック (カラム / メディア+テキスト) は
* 新テーマのカスタムブロック (c-column-* 等) とは別物で、新テーマ .p-detail に
* レイアウト整形が無かったため、旧テーマ同等のスタイルを移植する。
* ※ 横並びレイアウト自体 (display:flex / flex-basis) は WP コアの
* is-layout-flex グローバルスタイルが担保。ここでは gap や float 等の
* 旧テーマ固有の見た目だけを補う。
* 単位: 旧 1rem=10px → 新テーマは実寸 px / rem を直接指定。
--------------------------------------------- */
}
.p-detail > *:not(:last-child) {
margin-bottom: var(--margin-btm);
}
.p-detail__ttl-h2 {
margin-top: min(64 / 830 * 100%, 64px);
}
@media screen and (max-width: 768px) {
.p-detail__ttl-h2 {
margin-top: min(48 / 350 * 100%, 48px);
}
}
.p-detail__ttl-h3 {
margin-top: min(80 / 830 * 100%, 80px);
}
@media screen and (max-width: 768px) {
.p-detail__ttl-h3 {
margin-top: min(54 / 350 * 100%, 54px);
}
}
.p-detail__ttl-h4 {
margin-top: min(80 / 830 * 100%, 80px);
}
@media screen and (max-width: 768px) {
.p-detail__ttl-h4 {
margin-top: min(34 / 350 * 100%, 34px);
}
}
.p-detail__txt {
margin-top: min(40 / 830 * 100%, 40px);
}
@media screen and (max-width: 768px) {
.p-detail__txt {
margin-top: min(32 / 350 * 100%, 32px);
}
}
.p-detail__txt + .p-detail__txt {
margin-top: min(32 / 830 * 100%, 32px);
}
@media screen and (max-width: 768px) {
.p-detail__txt + .p-detail__txt {
margin-top: min(16 / 350 * 100%, 16px);
}
}
@media screen and (max-width: 768px) {
.p-detail__ttl-h2 + .p-detail__txt {
margin-top: min(26 / 350 * 100%, 26px);
}
}
.p-detail__ttl-h3 + .p-detail__txt {
margin-top: min(32 / 830 * 100%, 32px);
}
@media screen and (max-width: 768px) {
.p-detail__ttl-h3 + .p-detail__txt {
margin-top: min(27 / 350 * 100%, 27px);
}
}
.p-detail__ttl-h4 + .p-detail__txt {
margin-top: min(28 / 830 * 100%, 28px);
}
@media screen and (max-width: 768px) {
.p-detail__ttl-h4 + .p-detail__txt {
margin-top: min(23 / 350 * 100%, 23px);
}
}
.p-detail__btn + .p-detail__txt {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.p-detail__btn + .p-detail__txt {
margin-top: min(40 / 350 * 100%, 40px);
}
}
.p-detail__img {
margin-top: min(40 / 830 * 100%, 40px);
}
@media screen and (max-width: 768px) {
.p-detail__img {
margin-top: min(28 / 350 * 100%, 28px);
}
}
.wp-block-column .p-detail__img {
margin-top: 0;
}
.p-detail__btn + .p-detail__img {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.p-detail__btn + .p-detail__img {
margin-top: min(40 / 350 * 100%, 40px);
}
}
.p-detail__btn {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.p-detail__btn {
margin-top: min(40 / 350 * 100%, 40px);
}
}
@media screen and (max-width: 768px) {
.p-detail__btn--mt20 {
margin-top: min(20 / 350 * 100%, 20px);
}
}
.p-detail__btn-large {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.p-detail__btn-large {
margin-top: min(40 / 350 * 100%, 40px);
}
}
.p-detail__btn-large + .p-detail__btn-large {
margin-top: 25px;
}
@media screen and (max-width: 768px) {
.p-detail__btn-large + .p-detail__btn-large {
margin-top: min(25 / 350 * 100%, 25px);
}
}
@media print, screen and (min-width: 769px) {
.c-block-5 .p-detail__btn-large {
margin-top: min(56 / 830 * 100%, 56px);
}
}
.p-detail__list {
margin-top: min(40 / 830 * 100%, 40px);
}
@media screen and (max-width: 768px) {
.p-detail__list {
margin-top: min(32 / 350 * 100%, 32px);
}
}
.p-detail__btn + .p-detail__list {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.p-detail__btn + .p-detail__list {
margin-top: min(40 / 350 * 100%, 40px);
}
}
.p-detail__list-note {
margin-top: min(16 / 830 * 100%, 16px);
}
@media screen and (max-width: 768px) {
.p-detail__list-note {
margin-top: min(10 / 350 * 100%, 10px);
}
}
.p-detail__name {
margin-right: 1rem;
}
.p-detail > h2,
.p-detail h2.wp-block-heading {
position: relative;
margin-top: min(64 / 830 * 100%, 64px);
padding-left: 20px;
font-size: calc(32 / var(--root-fz) * 1rem);
font-weight: 600;
line-height: 1.6;
color: var(--color-base-1);
}
@media screen and (max-width: 768px) {
.p-detail > h2,
.p-detail h2.wp-block-heading {
margin-top: min(48 / 350 * 100%, 48px);
padding-left: 19px;
font-size: calc(22 / var(--root-fz) * 1rem);
}
}
.p-detail > h2::before,
.p-detail h2.wp-block-heading::before {
content: "";
position: absolute;
left: 0;
top: 9.6px;
bottom: 9.6px;
width: 4px;
background-color: var(--color-green-2);
transform: translateY(1px);
}
@media screen and (max-width: 768px) {
.p-detail > h2::before,
.p-detail h2.wp-block-heading::before {
top: 6.6px;
bottom: 6.6px;
width: 3px;
}
}
.p-detail > h2 strong,
.p-detail > h2 b,
.p-detail h2.wp-block-heading strong,
.p-detail h2.wp-block-heading b {
font-weight: 700;
}
.p-detail > h2 em,
.p-detail > h2 i,
.p-detail h2.wp-block-heading em,
.p-detail h2.wp-block-heading i {
font-style: italic;
}
.p-detail > h3,
.p-detail h3.wp-block-heading {
position: relative;
margin-top: min(80 / 830 * 100%, 80px);
padding-left: 20px;
margin-block-end: var(--leading-trim);
font-size: calc(28 / var(--root-fz) * 1rem);
font-weight: 600;
line-height: 1.6;
color: var(--color-base-1);
}
@media screen and (max-width: 768px) {
.p-detail > h3,
.p-detail h3.wp-block-heading {
margin-top: min(54 / 350 * 100%, 54px);
padding-left: 19px;
font-size: calc(20 / var(--root-fz) * 1rem);
}
}
.p-detail > h3::before,
.p-detail h3.wp-block-heading::before {
content: "";
position: absolute;
left: 0;
top: 8.4px;
bottom: 8.4px;
width: 4px;
background-color: var(--color-green-2);
transform: translateY(1px);
}
@media screen and (max-width: 768px) {
.p-detail > h3::before,
.p-detail h3.wp-block-heading::before {
top: 6px;
bottom: 6px;
width: 3px;
}
}
.p-detail > h3 strong,
.p-detail > h3 b,
.p-detail h3.wp-block-heading strong,
.p-detail h3.wp-block-heading b {
font-weight: 700;
}
.p-detail > h3 em,
.p-detail > h3 i,
.p-detail h3.wp-block-heading em,
.p-detail h3.wp-block-heading i {
font-style: italic;
}
.p-detail > h4,
.p-detail h4.wp-block-heading {
position: relative;
margin-top: min(80 / 830 * 100%, 80px);
padding-left: 20px;
margin-block-end: var(--leading-trim);
font-size: calc(24 / var(--root-fz) * 1rem);
font-weight: 600;
line-height: 1.6;
color: var(--color-base-1);
}
@media screen and (max-width: 768px) {
.p-detail > h4,
.p-detail h4.wp-block-heading {
margin-top: min(34 / 350 * 100%, 34px);
padding-left: 19px;
font-size: calc(18 / var(--root-fz) * 1rem);
}
}
.p-detail > h4::before,
.p-detail h4.wp-block-heading::before {
content: "";
position: absolute;
left: 0;
top: 7.2px;
bottom: 7.2px;
width: 4px;
background-color: var(--color-green-2);
transform: translateY(1px);
}
@media screen and (max-width: 768px) {
.p-detail > h4::before,
.p-detail h4.wp-block-heading::before {
top: 5.4px;
bottom: 5.4px;
width: 3px;
}
}
.p-detail > h4 strong,
.p-detail > h4 b,
.p-detail h4.wp-block-heading strong,
.p-detail h4.wp-block-heading b {
font-weight: 700;
}
.p-detail > h4 em,
.p-detail > h4 i,
.p-detail h4.wp-block-heading em,
.p-detail h4.wp-block-heading i {
font-style: italic;
}
.p-detail > p {
font-size: calc(15 / var(--root-fz) * 1rem);
font-weight: 400;
line-height: 1.85;
color: var(--color-base-1);
margin-top: min(40 / 830 * 100%, 40px);
}
@media screen and (max-width: 768px) {
.p-detail > p {
line-height: 2;
margin-top: min(32 / 350 * 100%, 32px);
}
}
.p-detail > p strong,
.p-detail > p b {
font-weight: 700;
}
.p-detail > p em,
.p-detail > p i {
font-style: italic;
}
.p-detail > p u {
text-decoration: underline;
}
@supports (-moz-appearance: none) or (-moz-osx-font-smoothing: auto) {
.p-detail > p u {
text-decoration-thickness: 1.5px;
}
}
.p-detail > p small {
font-size: 0.85em;
}
@media screen and (max-width: 768px) {
h2 + .p-detail > p, h2.wp-block-heading + .p-detail > p {
margin-top: min(26 / 350 * 100%, 26px);
}
}
h3 + .p-detail > p, h3.wp-block-heading + .p-detail > p {
margin-top: min(32 / 830 * 100%, 32px);
}
@media screen and (max-width: 768px) {
h3 + .p-detail > p, h3.wp-block-heading + .p-detail > p {
margin-top: min(27 / 350 * 100%, 27px);
}
}
h4 + .p-detail > p, h4.wp-block-heading + .p-detail > p {
margin-top: min(28 / 830 * 100%, 28px);
}
@media screen and (max-width: 768px) {
h4 + .p-detail > p, h4.wp-block-heading + .p-detail > p {
margin-top: min(23 / 350 * 100%, 23px);
}
}
.p-detail > p + .p-detail > p {
margin-top: min(32 / 830 * 100%, 32px);
}
@media screen and (max-width: 768px) {
.p-detail > p + .p-detail > p {
margin-top: min(16 / 350 * 100%, 16px);
}
}
.p-detail ul.wp-block-list strong,
.p-detail ul.wp-block-list b,
.p-detail ol.wp-block-list strong,
.p-detail ol.wp-block-list b {
font-weight: 700;
}
.p-detail ul.wp-block-list em,
.p-detail ul.wp-block-list i,
.p-detail ol.wp-block-list em,
.p-detail ol.wp-block-list i {
font-style: italic;
}
.p-detail ul.wp-block-list u,
.p-detail ol.wp-block-list u {
text-decoration: underline;
}
@supports (-moz-appearance: none) or (-moz-osx-font-smoothing: auto) {
.p-detail ul.wp-block-list u,
.p-detail ol.wp-block-list u {
text-decoration-thickness: 1.5px;
}
}
.p-detail > .wp-block-image,
.p-detail > figure:not([class*=p-detail-main__]),
.p-detail > img {
margin-top: min(40 / 830 * 100%, 40px);
}
@media screen and (max-width: 768px) {
.p-detail > .wp-block-image,
.p-detail > figure:not([class*=p-detail-main__]),
.p-detail > img {
margin-top: min(28 / 350 * 100%, 28px);
}
}
.p-detail > .wp-block-image img,
.p-detail > figure:not([class*=p-detail-main__]) img,
.p-detail > img img {
border-radius: 10px;
}
@media screen and (max-width: 768px) {
.p-detail > .wp-block-image img,
.p-detail > figure:not([class*=p-detail-main__]) img,
.p-detail > img img {
border-radius: min(10 / var(--design-width) * 100vw, 10px);
}
}
.p-detail ul.wp-block-list,
.p-detail ol.wp-block-list {
margin-top: min(40 / 830 * 100%, 40px);
padding-left: 0;
list-style: none;
}
@media screen and (max-width: 768px) {
.p-detail ul.wp-block-list,
.p-detail ol.wp-block-list {
margin-top: min(32 / 350 * 100%, 32px);
}
}
.p-detail ul.wp-block-list > li,
.p-detail ol.wp-block-list > li {
position: relative;
padding-left: 1.2em;
margin-block: var(--leading-trim);
font-size: calc(15 / var(--root-fz) * 1rem);
font-weight: 400;
line-height: 1.85;
}
@media screen and (max-width: 768px) {
.p-detail ul.wp-block-list > li,
.p-detail ol.wp-block-list > li {
line-height: 2;
}
}
.p-detail ul.wp-block-list > li + li,
.p-detail ol.wp-block-list > li + li {
margin-top: 13px;
}
@media screen and (max-width: 768px) {
.p-detail ul.wp-block-list > li + li,
.p-detail ol.wp-block-list > li + li {
margin-top: 8px;
}
}
.p-detail > p + ul.wp-block-list,
.p-detail > p + ol.wp-block-list {
margin-top: min(32 / 830 * 100%, 32px);
}
@media screen and (max-width: 768px) {
.p-detail > p + ul.wp-block-list,
.p-detail > p + ol.wp-block-list {
margin-top: min(16 / 350 * 100%, 16px);
}
}
@media screen and (max-width: 768px) {
.p-detail > h2 + ul.wp-block-list,
.p-detail > h2.wp-block-heading + ul.wp-block-list,
.p-detail > h2 + ol.wp-block-list,
.p-detail > h2.wp-block-heading + ol.wp-block-list {
margin-top: min(26 / 350 * 100%, 26px);
}
}
.p-detail > h3 + ul.wp-block-list,
.p-detail > h3.wp-block-heading + ul.wp-block-list,
.p-detail > h3 + ol.wp-block-list,
.p-detail > h3.wp-block-heading + ol.wp-block-list {
margin-top: min(32 / 830 * 100%, 32px);
}
@media screen and (max-width: 768px) {
.p-detail > h3 + ul.wp-block-list,
.p-detail > h3.wp-block-heading + ul.wp-block-list,
.p-detail > h3 + ol.wp-block-list,
.p-detail > h3.wp-block-heading + ol.wp-block-list {
margin-top: min(27 / 350 * 100%, 27px);
}
}
.p-detail > h4 + ul.wp-block-list,
.p-detail > h4.wp-block-heading + ul.wp-block-list,
.p-detail > h4 + ol.wp-block-list,
.p-detail > h4.wp-block-heading + ol.wp-block-list {
margin-top: min(28 / 830 * 100%, 28px);
}
@media screen and (max-width: 768px) {
.p-detail > h4 + ul.wp-block-list,
.p-detail > h4.wp-block-heading + ul.wp-block-list,
.p-detail > h4 + ol.wp-block-list,
.p-detail > h4.wp-block-heading + ol.wp-block-list {
margin-top: min(23 / 350 * 100%, 23px);
}
}
.p-detail > ul.wp-block-list + ul.wp-block-list,
.p-detail > ul.wp-block-list + ol.wp-block-list,
.p-detail > ol.wp-block-list + ul.wp-block-list,
.p-detail > ol.wp-block-list + ol.wp-block-list {
margin-top: min(32 / 830 * 100%, 32px);
}
@media screen and (max-width: 768px) {
.p-detail > ul.wp-block-list + ul.wp-block-list,
.p-detail > ul.wp-block-list + ol.wp-block-list,
.p-detail > ol.wp-block-list + ul.wp-block-list,
.p-detail > ol.wp-block-list + ol.wp-block-list {
margin-top: min(16 / 350 * 100%, 16px);
}
}
.p-detail ul.wp-block-list > li::before {
content: "・";
position: absolute;
left: 0;
top: 0;
}
.p-detail ol.wp-block-list {
counter-reset: detail-ol;
}
.p-detail ol.wp-block-list > li {
counter-increment: detail-ol;
}
.p-detail ol.wp-block-list > li::before {
content: counter(detail-ol) ".";
position: absolute;
left: 0;
top: 0;
font-weight: 600;
}
.p-detail > p a,
.p-detail ul.wp-block-list a,
.p-detail ol.wp-block-list a {
color: var(--color-green-2);
font-weight: 600;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.p-detail > p a:hover,
.p-detail ul.wp-block-list a:hover,
.p-detail ol.wp-block-list a:hover {
text-decoration: underline;
}
@supports (-moz-appearance: none) or (-moz-osx-font-smoothing: auto) {
.p-detail > p a:hover,
.p-detail ul.wp-block-list a:hover,
.p-detail ol.wp-block-list a:hover {
text-decoration-thickness: 1.5px;
}
}
}
.p-detail > p a[target=_blank]::after,
.p-detail ul.wp-block-list a[target=_blank]::after,
.p-detail ol.wp-block-list a[target=_blank]::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-left: 5px;
vertical-align: middle;
background: url(../img/common/icon_extlink_green.svg) no-repeat center center/contain;
}
@media screen and (max-width: 768px) {
.p-detail > p a[target=_blank]::after,
.p-detail ul.wp-block-list a[target=_blank]::after,
.p-detail ol.wp-block-list a[target=_blank]::after {
width: 16px;
height: 16px;
}
}
.p-detail .wp-block-columns {
gap: 2rem;
}
@media screen and (max-width: 768px) {
.p-detail .wp-block-columns {
gap: 1.5rem;
}
}
.p-detail .wp-block-column > *:not(:last-child) {
margin-bottom: var(--margin-btm);
}
.p-detail .wp-block-column > p {
font-size: calc(15 / var(--root-fz) * 1rem);
font-weight: 400;
line-height: 1.85;
color: var(--color-base-1);
}
@media screen and (max-width: 768px) {
.p-detail .wp-block-column > p {
line-height: 2;
}
}
.p-detail .wp-block-media-text {
display: block;
clear: both;
}
.p-detail .wp-block-media-text__media {
margin: 0 0 16px 16px;
float: right;
}
.p-detail .wp-block-media-text__content {
padding: 0;
}
.p-detail .wp-element-caption {
font-size: calc(14 / var(--root-fz) * 1rem);
text-align: left;
}
/* ---------------------------------------------
* p-detail-main
--------------------------------------------- */
.p-detail-main {
/* テーマカスタマイズ (F10): メインビジュアル直下にキャプション (生成AI画像の注記用)
WP 投稿の「抜粋」フィールドを `` で出力。
テキストスタイルは記事内画像と同じ c-txt-3--caption を使用。
SP では親 figure が画面幅 100vw に拡張されるため左右にパディングを追加。
M02: 左寄せに統一。 */
}
.p-detail-main__top {
display: flex;
flex-direction: column;
gap: min(30 / var(--design-width) * 100vw, 30px);
padding-bottom: min(32 / 830 * 100%, 32px);
border-bottom: 1px solid var(--color-gray-2);
}
@media screen and (max-width: 768px) {
.p-detail-main__top {
gap: min(20 / var(--design-width) * 100vw, 20px);
padding-bottom: min(20 / 350 * 100%, 20px);
}
}
.p-detail-main__ttl {
margin-block: var(--leading-trim);
}
.p-detail-main__tag-wrap {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.p-detail-main__tag-wrap {
flex-direction: column;
align-items: flex-start;
gap: min(20 / var(--design-width) * 100vw, 20px);
}
}
@media print, screen and (min-width: 769px) {
.p-detail-main__date {
flex-shrink: 0;
transform: translateY(20%);
}
}
.p-detail-main__author-wrap {
display: flex;
align-items: flex-start;
gap: 5px;
margin-top: min(24 / 830 * 100%, 24px);
}
@media screen and (max-width: 768px) {
.p-detail-main__author-wrap {
gap: 8px;
margin-top: min(20 / 350 * 100%, 20px);
}
}
.p-detail-main__author-wrap > :first-child {
flex-shrink: 0;
}
.p-detail-main__author {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px 8px;
}
@media screen and (max-width: 768px) {
.p-detail-main__author {
gap: min(13 / var(--design-width) * 100vw, 13px);
}
}
.p-detail-main__author-name {
margin-block: var(--leading-trim);
}
.p-detail-main__author-name:not(:last-of-type) {
position: relative;
}
.p-detail-main__author-name:not(:last-of-type)::after {
content: "/";
display: none;
position: absolute;
top: 50%;
right: -6px;
transform: translateY(-38%);
color: var(--color-base-1);
margin-block: var(--leading-trim);
font-size: calc(15 / var(--root-fz) * 1rem);
font-weight: 400;
line-height: 1;
/* 22.5px */
}
@media screen and (max-width: 768px) {
.p-detail-main__author-name:not(:last-of-type)::after {
display: none;
}
}
.p-detail-main__kv {
margin-top: min(34 / 830 * 100%, 34px);
width: 100%;
}
@media screen and (max-width: 768px) {
.p-detail-main__kv {
margin-top: min(24 / 350 * 100%, 24px);
margin-inline: calc(50% - 50vw);
width: 100vw;
}
}
@media screen and (max-width: 768px) {
.windows .p-detail-main__kv {
margin-inline: calc(50% - 50cqw);
width: 100cqw;
}
}
.p-detail-main__kv img {
width: 100%;
}
@media print, screen and (min-width: 769px) {
.p-detail-main__kv img {
border-radius: 10px;
}
}
.p-detail-main__kv video {
display: block;
width: 100%;
height: auto;
}
@media print, screen and (min-width: 769px) {
.p-detail-main__kv video {
border-radius: 10px;
}
}
.p-detail-main__kv.is-playicon {
position: relative;
}
.p-detail-main__kv-caption {
margin-top: min(24 / 830 * 100%, 24px);
text-align: left;
}
@media screen and (max-width: 768px) {
.p-detail-main__kv-caption {
margin-top: min(12 / 350 * 100%, 12px);
padding-inline: min(20 / var(--design-width) * 100vw, 20px);
}
}
/* ---------------------------------------------
* テーマカスタマイズ (M02): 記事詳細の画像キャプションは左寄せ
* - p-detail-main__kv-caption (アイキャッチ直下): 上で対応済
* - c-img-1__figure-txt (本文中の画像モーダルブロックのキャプション)
* - c-column-1__figure-txt / c-column-2__figure-txt (メディア+テキストブロック)
* 全て article-detail ページ配下に限定
--------------------------------------------- */
.article-detail .c-img-1__figure-txt,
.article-detail .c-column-1__figure-txt,
.article-detail .c-column-2__figure-txt {
text-align: left;
}
/* ---------------------------------------------
* テーマカスタマイズ: 動画の再生ボタン (MV / 本文 共通)
*
* .is-playicon が付いた動画ラッパー (MV: p-detail-main__kv--video /
* 本文: wp-block-video) のポスター上に、80×80 の再生ボタンを重ねる。
* JS再生方式 — 初期は