タグだったが、ネイティブ化に伴い (wp:group) 化。
全体クリックは内部の wp:button を ::before で拡張してカバーする */
.sec_service_list .sec_service_item {
position: relative;
}
.sec_service_list .sec_service_item .tmpl_card_more > .wp-block-button__link::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.sec_service_list .sec_service_item:has(.tmpl_card_more > .wp-block-button__link:hover) {
border: 2px solid var(--c-brand-800);
transition: border var(--dur) var(--ease);
}
@media only screen and (max-width: 768px) {
.sec_service_list .sec_service_item:has(.tmpl_card_more > .wp-block-button__link:hover) {
border: 0;
}
}
/* sec_service_illust を figure(wp-block-image) として使うための中和 */
.sec_service_list .sec_service_item .sec_service_illust.wp-block-image {
margin: 0 25px 0 0;
flex: 0 0 144px;
}
@media only screen and (max-width: 768px) {
.sec_service_list .sec_service_item .sec_service_illust.wp-block-image {
margin: 0 1.5rem 0 0;
flex: 0 0 80px;
}
}
.sec_service_list .sec_service_item .sec_service_illust.wp-block-image img {
width: 100%;
height: auto;
}
/* sec_service_textbody が wp:group になった際のデフォルト margin 調整 */
.sec_service_list .sec_service_item .sec_service_textbody.wp-block-group {
flex: 1 1 auto;
max-width: 100%;
}
.sec_service_list .sec_service_item .sec_service_textbody .tmpl_card_more_wrap {
margin-top: 2rem;
}
@media only screen and (max-width: 768px) {
.sec_service_list .sec_service_item .sec_service_textbody .tmpl_card_more_wrap {
margin-top: 1rem;
}
}
/* sec_service_list 全体を wp:group にしたことでの既定 gap 中和 */
.wp-block-group.sec_service_list {
gap: 0;
}
/* ----- 事例サムネ tmpl_thum (wp:image内包) ----- */
/* .tmpl_thum 内の wp:image figure デフォルト margin をリセット */
.tmpl_thum.wp-block-group {
padding: 0;
}
.tmpl_thum .wp-block-image {
margin: 0;
position: static;
}
/* 旧: .tmpl_thum img は position:absolute だったが、
figure ラップ後は figure と img の関係で調整 */
.tmpl_thum .wp-block-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ----- 選ばれる理由 tmpl_style_imgbox ----- */
/* tmpl_style_imgbox が wp:group 化した際の gap リセット */
.wp-block-group.tmpl_style_imgbox {
gap: 0;
}
.wp-block-group.tmpl_columns--3_wide {
gap: 0;
}
/* ----- 中央寄せボタン tmpl_btn_center ----- */
/* 「導入事例をもっと見る」が wp:buttons になった際の調整 */
.wp-block-buttons.tmpl_btn_center {
justify-content: center;
}
/* ==========================================================================
Gutenbergネイティブ wp:image の figure デフォルト margin 一括中和
---------------------------------------------------------------------------
WordPressコア の figure.wp-block-image は margin:0 0 1em 0 がつくが、
テーマ側の .tmpl_thum などで制御したいので中和
========================================================================== */
.wp-block-image.sec_service_illust,
.tmpl_thum .wp-block-image {
margin: 0;
}