/* ================================================== Common ================================================== */ .wp-block-columns { align-items: flex-start !important; } .wp-block-columns > .wp-block-column, .wp-block-columns > .wp-block-column.is-vertically-aligned-center, .wp-block-columns > .wp-block-column.is-vertically-aligned-bottom { align-self: flex-start !important; } .wp-block-columns > .wp-block-column.navigation-columns-actions{ align-self: center !important; } /* * cta-001の白ボックス内(リード文+ボタン)は縦方向中央揃えにしたいので、 * 上の共通ルール(align-items/align-self: flex-start !important)を * このCTAに限定して上書きする。 */ .cta-001__lead-columns { align-items: center !important; } .cta-001__lead-columns > .wp-block-column.is-vertically-aligned-center { align-self: center !important; } .wp-block-post-content.is-layout-flow > * { margin-block-start: 0; } a{ transition: 0.3s; } a:hover{ opacity:0.8; text-decoration: none; } /* * リスト(ul/ol) * 本文のpタグ(core/paragraph)とフォントサイズ・フォント・行間を揃え、 * ブラウザ標準で入る中黒(・)や数字ぶんの左インデント(通常40px)を * 最小限(1em)まで減らす。 * list-style-position:insideにすると折り返し2行目以降がマーカーの位置(先頭) * まで戻ってしまうため、position:outside(ブラウザ標準の折り返し方式)を保ち、 * マーカー分の余白だけpadding-leftで確保する。1em(px固定値ではない)にする * ことで、フォントサイズが変わっても余白がそれに応じて伸縮する。 * * .single-sidebar-archives(サイドバーの月別アーカイブ、wp_get_archives()が * 出力するul)はcore/listブロックではないため.wp-block-listクラスが付かず、 * ブラウザ標準スタイルのままだった。本文のリストと同じ見た目に揃えるため * 同じルールを適用する。 */ .wp-block-list, .single-sidebar-archives { margin-left: 0; padding-left: 1em; list-style-position: outside; font-family: var(--wp--preset--font-family--fontsecondary); font-size: var(--wp--preset--font-size--superbfont-small); line-height: 1.6; } /* * h3の上余白(margin-top)をmediumサイズ(var(--wp--preset--spacing--superbspacing-medium))に。 * ブログ本文(.single-blog)・お知らせ本文(.single-news)・プライバシーポリシー * ページ(.privacy-policy、WPが自動付与するbodyクラス)の見出しに限定する。 */ .single-blog .wp-block-post-content h3, .single-news .wp-block-post-content h3, .privacy-policy .wp-block-post-content h3 { margin-top: var(--wp--preset--spacing--superbspacing-medium); border-left: 5px solid var(--wp--preset--color--primary); background-color: var(--wp--preset--color--mono-4); padding: var(--wp--preset--spacing--superbspacing-xsmall) var(--wp--preset--spacing--superbspacing-xsmall); } /* * お知らせ・ブログ詳細(本文/post-content)のh4見出しに、 * グレー(#999999、mono-2とmono-3の中間の明るさ)の下線全体+ * 左寄せ60px分だけprimaryカラーのアクセントを重ねた二色下線を付ける。 */ .single-blog .wp-block-post-content h4, .single-news .wp-block-post-content h4 { position: relative; margin-top: var(--wp--preset--spacing--superbspacing-medium); padding-bottom: var(--wp--preset--spacing--superbspacing-xxsmall); border-bottom: 3px solid #999999; font-size: var(--wp--preset--font-size--superbfont-medium); } .single-blog .wp-block-post-content h4::after, .single-news .wp-block-post-content h4::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 60px; height: 3px; background-color: var(--wp--preset--color--primary); } /* * お知らせ・ブログ詳細(本文/post-content)のh5見出しに、 * 下線(mono-3)+太字+フォントサイズsmallのスタイルを付ける。 * font-sizeへの!importantは、エディタ側の個別指定(インラインstyle)より * 確実に統一サイズを優先させたいための指定。 */ .single-blog .wp-block-post-content h5, .single-news .wp-block-post-content h5 { padding-bottom: var(--wp--preset--spacing--superbspacing-xxsmall); border-bottom: 1px solid var(--wp--preset--color--mono-3); font-size: var(--wp--preset--font-size--superbfont-small) !important; font-weight: 700; } /* * お知らせ・ブログ詳細(本文/post-content)の本文テキストのフォントサイズをsmallに統一。 * p/ul/li/ol/divが対象(見出しタグはそれぞれ個別指定があるため対象外)。 */ .single-blog .wp-block-post-content p, .single-blog .wp-block-post-content ul, .single-blog .wp-block-post-content li, .single-blog .wp-block-post-content ol, .single-blog .wp-block-post-content div, .single-news .wp-block-post-content p, .single-news .wp-block-post-content ul, .single-news .wp-block-post-content li, .single-news .wp-block-post-content ol, .single-news .wp-block-post-content div { font-size: var(--wp--preset--font-size--superbfont-small); } /* * strongタグは太字(700)+ peachカラーで強調。 */ .single-blog .wp-block-post-content strong, .single-news .wp-block-post-content strong { font-weight: 700; color: var(--wp--preset--color--peach); } /* * emタグ(イタリック)は斜体を解除して太字(700)にし、 * 文字の背後にyellowのマーカー線を敷く。 * background-imageのグラデーション(0-60%は透明、60-100%はyellow)を * background-size:100% 1lh(1行の高さ)にサイズ指定し、 * 上端基準(background-position:0 0)で配置することで、 * 行の下側(文字の下半分くらい)だけ色が乗る見た目になる * (1emにすると文字の上寄りまで色が乗ってしまうため、1lh基準にしている)。 * background-repeat:repeat-yで複数行にまたがる場合も行ごとに追従する。 * (参考: https://cars-enjoy.com/media/?p=19014 のemタグと同じ「背景グラデーションで * マーカー風の下地を敷く」手法をベースに、線の太さはご指定に合わせて調整している) */ .single-blog .wp-block-post-content em, .single-news .wp-block-post-content em { font-style: normal; font-weight: 700; background-image: linear-gradient(transparent 60%, var(--wp--preset--color--yellow) 60%); background-repeat: repeat-y; background-position: 0 0; background-size: 100% 1lh; } /* ================================================== Header ================================================== */ /* * サイトロゴは差し替える画像の縦横比に関わらず高さを揃えるため、 * 高さを固定してwidth:autoで比率を保ったまま伸縮させる。 * (PC:48px / スマホ:36px) */ .wp-block-site-logo img { height: 48px; width: auto; } /* * PCではデスクトップ用ヘッダーを表示し、 * モバイル用ヘッダーを非表示にする */ .header-mobile { display: none !important; } .header-desktop-top { padding-top: 16px; padding-bottom: 16px; } /* 下段のサービスナビゲーション */ .header-service-bar { background-color: var(--wp--preset--color--primary); } .header-service-nav { padding-top: 12px; padding-bottom: 12px; } .header-service-nav .wp-block-navigation-item__content { color: #fff; } /* ハンバーガーだけPCで非表示 */ .header-mobile-navigation.header-mobile { display: none !important; } /* * ハンバーガーアイコン(閉)・オーバーレイ内の×ボタン・メニュー項目のテキストを * primaryカラーにする。ナビ本体には has-mono-1-color が付いているため、 * 子要素側で明示的に上書きする。 */ .header-mobile-navigation .wp-block-navigation__responsive-container-open, .header-mobile-navigation .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--primary) !important; } .header-mobile-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--primary) !important; } .navigation-columns-wrapper { display: flex; flex-wrap: nowrap; align-items: center; } /* ロゴは内容幅 */ .navigation-columns-logo { flex: 0 0 auto !important; width: auto !important; } /* 右側は残り全部 */ .navigation-columns-actions { display: flex; flex: 1 1 0 !important; width: auto !important; min-width: 0; } /* ナビ＋予約ボタンを右寄せ */ .navigation-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 20px; width: 100%; } /* * 予約ボタン(LINE予約・ネット予約・電話) * PC/タブレット・スマホ共通でアイコン+2段テキスト(タイトル/サブタイトル)のピル型ボタン。 * スマホでは画面下部固定バーに切り替える(Smartphoneメディアクエリ側で上書き)。 */ .header-contact-button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .header-contact-button__item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; box-sizing: border-box; padding: 8px 16px; border-radius: 30px; color: #fff; text-decoration: none; } .header-contact-button__icon { display: flex; align-items: center; justify-content: center; } .header-contact-button__icon img { display: block; width: 20px; height: 20px; } .header-contact-button__text { display: flex; flex-direction: column; line-height: 1.3; } .header-contact-button__title { font-size: 14px; font-weight: 600; white-space: nowrap; } .header-contact-button__subtitle { display: block; font-size: 10px; opacity: 0.9; white-space: nowrap; } .header-contact-button__item--line { background-color: #5BC463; } .header-contact-button__item--net { background-color: var(--wp--preset--color--primary); } .header-contact-button__item--tel { border:1px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); } /* * 電話アイコンはCSS mask-imageでprimaryカラーに着色する。 * (img直参照だと色を変更できないため、単色シルエットとしてマスク表示する) */ .header-contact-button__icon--tel { width: 20px; height: 20px; background-color: var(--wp--preset--color--primary); -webkit-mask-image: url(/wp-content/themes/cars-basic/assets/images/icon_tel.svg); mask-image: url(/wp-content/themes/cars-basic/assets/images/icon_tel.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* * ナビゲーションのサブメニュー背景色 * PC(下段バー)とスマホ(ハンバーガーオーバーレイ)で別々に指定する。 */ .header-desktop .wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--primary) !important; border:none !important; left:-1em !important; padding-top: var(--wp--preset--spacing--superbspacing-xxsmall) !important; padding-bottom: var(--wp--preset--spacing--superbspacing-xxsmall) !important; } /* ================================================== Pagination ================================================== */ /* 矢印ボタンとページ番号の間隔を詰める */ .wp-block-query-pagination { gap: 4px !important; } /* ページ番号(現在ページはprimaryカラーの丸背景、それ以外は薄いグレー文字) */ .wp-block-query-pagination-numbers .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; margin: 0 2px; border-radius: 50%; box-sizing: border-box; color: var(--wp--preset--color--mono-1); font-size: var(--wp--preset--font-size--superbfont-xxsmall); text-decoration: none; } .wp-block-query-pagination-numbers .page-numbers.dots { background: none; } .wp-block-query-pagination-numbers .page-numbers.current { background-color: var(--wp--preset--color--primary); color: #fff; font-weight: 600; } .wp-block-query-pagination-numbers a.page-numbers:hover { background-color: var(--wp--preset--color--primary); color:#fff; } /* 前後ページの矢印アイコン(丸ボタン+primaryカラー) */ .wp-block-query-pagination-previous, .wp-block-query-pagination-next { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; /*border-radius: 50%; border: 1px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary);*/ text-decoration: none; overflow: hidden; position: relative; /* * 矢印(←/→)は実際にはSVGではなく文字(グリフ)として出力されており、 * ブロックの「label」属性を空にしても既定のテキスト("前のページ"等)に * フォールバックしてしまう。そのためラベル文字列だけをfont-size:0で * 見た目上消し、矢印用のspan(下記)だけ改めてフォントサイズを指定している。 */ font-size: 0; } .wp-block-query-pagination-previous::before, .wp-block-query-pagination-next::before { content:""; width:10px; height:10px; position: absolute; left:50%; top:50%; border-left:1px solid var(--wp--preset--color--primary); border-top:1px solid var(--wp--preset--color--primary); } .wp-block-query-pagination-previous::before{ transform:translate(-50% , -50%) rotate(-45deg); } .wp-block-query-pagination-next::before{ transform:translate(-50% , -50%) rotate(135deg); } .wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow { /*font-size: var(--wp--preset--font-size--superbfont-xsmall);*/ display: none; } /* ================================================== Calendar ================================================== */ .xo-event-calendar .xo-months{ display: grid; grid-template-columns: 1fr 1fr; gap:var(--wp--preset--spacing--superbspacing-small); } .xo-event-calendar .holiday-titles{ display: none; } .xo-event-calendar table.xo-month .month-header { margin-top: 0; margin-bottom: var(--wp--preset--spacing--superbspacing-xxsmall); } .xo-event-calendar table.xo-month .month-event-title { /* * プラグイン側にも全く同じセレクタ・同程度の詳細度で * padding:0 3px の指定があり、後読み込みのため * !importantを付けないと上書きできない。 */ padding: 4px !important; line-height: 1; color:#fff !important; } /* * 曜日ヘッダー(Sun/Sat)・土日の日付・当日・定休日(祝日等)の色を * プラグイン既定の色(青/赤)ではなく、テーマカラーに合わせる。 * 日付セルは実際には入れ子のtable構造になっており、曜日ごとのクラスは * 付与されていないため、列位置(nth-child)で土日を判定している。 * (1列目=日曜、7列目=土曜。ヘッダーの並び順 Sun/Mon/.../Sat と対応) */ .xo-event-calendar th.sunday { /* * プラグイン側が table.xo-month>thead th.sunday{color:#d00} を * 同程度の詳細度・後読み込みで指定しているため、!importantで確実に上書きする。 */ color: var(--wp--preset--color--peach) !important; } .xo-event-calendar th.saturday { color: var(--wp--preset--color--primary) !important; } .xo-event-calendar td.month-week table td:nth-child(1) { color: var(--wp--preset--color--peach); } .xo-event-calendar td.month-week table td:nth-child(7) { color: var(--wp--preset--color--primary); } /* * 定休日(祝日等の終日イベント)は土日の色指定よりも後ろに書き、 * 詳細度を揃える(div要素まで含めて指定する)ことで、 * 土日と重なった場合でも定休日の配色を優先させている。 */ .xo-event-calendar td.month-week table div.holiday-all { /* * 背景色はプラグインがインラインstyle(background-color:#dbf0fc)で * 直接指定しているため、!importantでないと上書きできない。 */ background: var(--wp--preset--color--mono-4) !important; } /* * 当日は背景なしで、文字色だけprimaryカラーにする。 * プラグイン側の.month-dayname td div.today{color:#00d}と * 詳細度が同程度で後読み込みのため、!importantで確実に上書きする。 * (背景を付けないため、以前試した丸バッジ用のサイズ調整は不要) */ .xo-event-calendar td.month-week table div.today { color: var(--wp--preset--color--primary) !important; } /* ================================================== Tablet / Mobile ================================================== */ @media only screen and (max-width: 768px) { .wp-block-columns.columns-reverse-mobile { flex-direction: column-reverse; } /* ---------------------------------------------- Header ---------------------------------------------- */ .header-mobile .wp-block-site-logo { flex-shrink: 0; } .header-mobile-contact { flex-shrink: 0; margin-left: auto; } .header-mobile-navigation { flex-shrink: 0; } .header-mobile-contact .wp-block-button__link { padding: 8px 12px; font-size: var(--wp--preset--font-size--superbfont-tiny); line-height: 1.4; white-space: nowrap; } /* ハンバーガーアイコンを右寄せ */ .header-mobile-navigation.wp-block-navigation { display: flex; justify-content: flex-end; } /* 開いたオーバーレイメニュー */ .header-mobile-navigation .wp-block-navigation__responsive-container.is-menu-open { padding: 4px 24px 90px; box-sizing: border-box; overflow-y: auto; } /* * 閉じるボタン(×)の位置合わせ。 * ボタンの配置基準(containing block)は上の.is-menu-openではなく、 * さらに内側の.wp-block-navigation__responsive-dialogのため、 * .is-menu-openのpadding(top:4px/right:24px)の分だけ内側にずれてしまう。 * 実機で座標を検証し、そのズレを打ち消す値(top:23px/right:-4px)を指定することで、 * 閉じている時のハンバーガーアイコンと同じ座標(top:約27px/右端から20px)に一致させている。 */ .header-mobile-navigation .wp-block-navigation__responsive-container-close { position: absolute !important; top: 23px !important; right: -4px !important; } .header-mobile-navigation .wp-block-navigation__responsive-container-content { align-items: flex-start; width: 100%; } .header-mobile-navigation .wp-block-navigation__responsive-dialog { width: 100%; } .header-mobile-navigation .wp-block-navigation__container { align-items: flex-start !important; gap: 0 !important; width: 100%; } .header-mobile-navigation .wp-block-navigation-item { width: 100%; border-bottom: 1px solid #ddd; } .header-mobile-navigation .wp-block-navigation-item__content { display: block; width: 100%; padding: var(--wp--preset--spacing--superbspacing-small) 0 !important; box-sizing: border-box; font-size: var(--wp--preset--font-size--superbfont-small) !important; font-weight: 700 !important; } /* サブメニューを持つ項目(サービスなど)は、直下にサブメニューが続くため下マージンを詰める */ .header-mobile-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { padding-bottom: 0 !important; } /* 一番上の項目(サービス)は閉じるボタンとの間隔を詰めるため、上マージンをなくす */ .header-mobile-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content { padding-top: 0 !important; } /* サブメニュー(車検・新車販売など)は下線不要、1文字分インデントする */ .header-mobile-navigation .wp-block-navigation__submenu-container { position: static !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; width: 100% !important; margin: var(--wp--preset--spacing--superbspacing-small) 0 0 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 24px !important; box-sizing: border-box !important; transform: none !important; } .header-mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: none !important; width: 100% !important; margin: 0 !important; } .header-mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding-top: 0 !important; padding-left: 0 !important; margin-left: 0 !important; text-align: left !important; width: 100% !important; box-sizing: border-box !important; } /* ---------------------------------------------- Features ---------------------------------------------- */ .superbthemes-features .wp-block-columns .wp-block-column { width: 100% !important; max-width: 48% !important; } } /* ================================================== Footer ================================================== */ /* h3とナビゲーションの間隔を詰める */ .footer .wp-block-heading { margin-bottom: var(--wp--preset--spacing--superbspacing-xxsmall); } /* h3の直下のブロックは上マージンをなくす */ .footer .wp-block-heading + * { margin-top: 0; } /* 関連リンクのバナー画像の最大幅 */ .footer-link-banners figure { max-width: 200px; } /* ================================================== Smartphone ================================================== */ @media only screen and (max-width: 599px) { /* サイトロゴの高さをスマホ用に縮小 */ .wp-block-site-logo img { height: 36px; } /* PC用ナビと下段ナビを非表示 */ .header-desktop { display: none !important; } /* ロゴ＋右側操作を横並び */ .navigation-columns-wrapper { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; } /* 共通ロゴ */ .navigation-columns-logo { flex: 0 0 auto !important; width: auto !important; } /* 予約ボタン＋ハンバーガーのカラム */ .navigation-columns-actions { display: flex !important; flex: 1 1 auto !important; width: auto !important; min-width: 0; margin-left: auto; } /* 右側の2要素を右寄せ */ .navigation-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 12px; width: 100%; margin-left: auto; } /* モバイル用Navigationだけ表示 */ .header-mobile-navigation.header-mobile { display: flex !important; flex: 0 0 auto !important; justify-content: flex-end; } /* * スマホでは3つの予約ボタンを画面下部に固定表示するバーにする。 * z-indexはWordPress標準のナビゲーションオーバーレイ(ハンバーガー展開時)より * 確実に高い値にして、オーバーレイを開いてもバーが隠れないようにしている。 */ .header-contact-button { display: flex !important; position: fixed; bottom: 0; left: 0; width: 100%; margin: 0; padding: 8px 10px; gap: 10px; background-color: #fff; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); box-sizing: border-box; z-index: 999999; } /* * 編集画面(投稿/固定ページ編集・サイトエディター)のiframe内では * position:fixedがiframeの祖先要素の影響で正しく機能せず、 * バーが画面外に配置されて見えなくなることがあるため、 * 編集キャンバス内だけ通常の配置に戻す。 */ .editor-styles-wrapper .header-contact-button { position: static; box-shadow: none; } .header-contact-button__item { flex: 1 1 0; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border-radius: 10px; } .header-contact-button__icon { display: flex; align-items: center; justify-content: center; } .header-contact-button__icon img { display: block; width: 20px; height: 20px; } .header-contact-button__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .header-contact-button__subtitle { display: block; } .header-contact-button__title, .header-contact-button__subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-contact-button__title { font-size: clamp(10px, 3vw, 13px); font-weight: 600; } .header-contact-button__subtitle { font-size: clamp(8px, 2.2vw, 10px); opacity: 0.9; } /* 固定バーの高さ分、ページ最下部のコンテンツ(フッター等)が隠れないように余白を確保 */ body { padding-bottom: 72px; } /* ---------------------------------------------- Features ---------------------------------------------- */ .superbthemes-features .wp-block-columns .wp-block-column { max-width: 100% !important; } .superbthemes-features .wp-block-columns .wp-block-column .wp-block-group { justify-content: center !important; flex-direction: column !important; flex-wrap: wrap !important; align-items: center !important; } /* ---------------------------------------------- Calendar ---------------------------------------------- */ .xo-event-calendar .xo-months{ grid-template-columns: 1fr; } /* ---------------------------------------------- Footer ---------------------------------------------- */ /* h3見出しは左寄せ */ .footer .wp-block-heading { text-align: left !important; } /* ソーシャルアイコンのカラムは中央寄せ */ .footer-social-column { display: flex !important; justify-content: center !important; width: 100% !important; } .footer-social-column .wp-block-social-links { float: none !important; margin: 0 !important; width: auto !important; justify-content: center !important; } /* 関連リンクのバナー画像は横並び2列 */ .footer-link-banners { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; } } /* * 関連リンクのバナー画像2カラム化は、サイト全体の「スマホ」判定(768px以下)に * 揃えるため、こちらでも同じ内容を適用する(上のmax-width:599pxのルールは * そのまま残し、600〜768px幅もカバーする)。 */ @media only screen and (max-width: 768px) { .footer-link-banners { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; } } /* ================================================== Carousel ================================================== */ .js-carousel { position: relative; overflow: hidden; } .carousel__track { display: flex; transition: transform 0.5s ease; /* 横スワイプはJS側でハンドリングし、縦スクロールはブラウザ標準の挙動に任せる */ touch-action: pan-y; cursor: grab; } .js-carousel.is-dragging .carousel__track { cursor: grabbing; } .js-carousel.is-dragging { user-select: none; } .carousel__slide { flex: 0 0 100%; max-width: 100%; } /* * 共通スタイル(.is-layout-flow.wp-block-group)が上マージンを付与するが、 * carousel__slideは横並びのスライドなので不要なため打ち消す。 * (先頭スライドはWP標準の:first-childルールで元々0になるため、 * 2枚目以降だけ余白が付いて見える) */ .carousel__slide { margin-block-start: 0 !important; } /* 矢印ボタン・ドットも同じ理由(標準の余白付与)で上マージンが付くため打ち消す */ .carousel__arrow, .carousel__dots { margin-block-start: 0 !important; } .carousel__slide .wp-block-cover { width: 100%; } .carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--wp--preset--color--primary); cursor: pointer; padding: 0; } .carousel__arrow:hover { background: #fff; } .carousel__arrow--prev { left: 16px; } .carousel__arrow--next { right: 16px; } /* * 矢印は記号(文字)ではなく、もっとみるボタン(.wp-block-button__link.wp-element-button::before)と * 同じ手法で、border-top/border-rightを45度回転させて表現する。 * prevは左向き(45deg - 180deg = -135deg)、nextは右向き(45deg、ボタンと同じ角度)。 */ .carousel__arrow::before { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; } .carousel__arrow--prev::before { transform: rotate(-135deg); margin-left: 3px; } .carousel__arrow--next::before { transform: rotate(45deg); margin-right: 3px; } .carousel__dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; } .carousel__dot { width: 10px; height: 10px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0; } .carousel__dot.is-active { background: #fff; } /* 前後ボタン(ページ送り)は画面幅を問わず一旦非表示にする。ドットはそのまま表示する。 */ .carousel__arrow { display: none !important; } /* * コンテンツ量がスライドごとに異なっても高さを揃えるため、 * page-title-coverのmin-height(伸縮可能)ではなく、 * カルーセル内のカバーだけはheightで固定する。 * PC:36rem、タブレット・スマホ(768px以下):30rem。 */ .carousel__slide .wp-block-cover { height: 36rem !important; } @media only screen and (max-width: 768px) { .carousel__slide .wp-block-cover { height: 30rem !important; } } /* ================================================== Page Title ================================================== */ /* * バナー系パーツ(page-title-001/002, kv-001/002, archive-title-001, * archive-title-blog-001, carousel-001)の高さを共通管理する。 * PC:36rem、タブレット・スマホ(768px以下):15rem。 */ .page-title-cover { min-height: 36rem !important; } @media only screen and (max-width: 768px) { .page-title-cover { min-height: 15rem !important; } } /* * page-title-001だけは他のバナー系パーツと高さを分けたいので、 * 専用クラスで管理する。PC:20rem、スマホ(599px以下):10rem。 */ .page-title-001-cover { min-height: 20rem !important; } @media only screen and (max-width: 599px) { .page-title-001-cover { min-height: 10rem !important; } } /* * archive-title-001(お知らせ一覧・お知らせ詳細)/ archive-title-blog-001(ブログ一覧・ * ブログ詳細)のタイトルバナー。「お問い合わせ」ページなど他のpage-title-001-cover * 利用ページの高さには影響させず、この2つのタイトルバナーだけ専用クラスで * 高さを調整する(page-title-001-coverと同じ PC:20rem、スマホ(599px以下):10rem)。 */ .archive-title-cover { min-height: 20rem !important; } @media only screen and (max-width: 599px) { .archive-title-cover { min-height: 10rem !important; } } /* ================================================== 2-Column Text サイト共通で.wp-block-columnsはalign-items:flex-start !important になっているため、左右のコンテンツ量が異なると背景ボックスの高さが 揃わない。このパーツに限り上下を揃えたいので、専用クラスで stretchに上書きする。 ================================================== */ .twocol-text.wp-block-columns { align-items: stretch !important; } .twocol-text > .wp-block-column { align-self: stretch !important; } .twocol-text-box { height: 100%; box-sizing: border-box; } /* ================================================== Car Lineup ================================================== */ .car-lineup-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); overflow: hidden; } /* * 車種画像は元画像(car-1.jpg等)の実寸をそのまま使っているため、 * カード幅が画像の実寸(690px)より狭い場合は自動的に縮小されて中央寄せ相当になるが、 * カード幅の方が広くなるケース(列数が少ない・画面が広いなど)では画像が実寸のまま * 左寄せで表示されてしまう。カード幅いっぱいに広がるよう明示的にwidth:100%を指定し、 * どのカード幅でも中央に(=隙間なく)表示されるようにする。 * object-fit:coverと組み合わせて、はみ出す部分は中央を基準にトリミングされる。 */ .car-lineup-card .wp-block-image img { width: 100%; } /* * グリッドレイアウト(layout:grid, columnCount:N)は列数が固定のため、 * 何も指定しないとスマホでも同じ列数のまま表示されてしまう。 * 列数のバリエーションごとに .car-lineup--Ncol 修飾クラスで明示的に上書きする。 * (.car-lineup 自体はカードの見た目・ボタン余白など列数に依存しない * 共通スタイルの起点として、どのバリエーションでも付与し続ける) */ /* car-lineup-4column: PCでは4列、タブレット・スマホでは2列 */ .car-lineup--4col { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; } @media only screen and (max-width: 768px) { .car-lineup--4col { grid-template-columns: repeat(2, 1fr) !important; } } /* car-lineup-3column: PCでは3列、タブレット・スマホでは1列 */ .car-lineup--3col { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; } @media only screen and (max-width: 768px) { .car-lineup--3col { grid-template-columns: repeat(1, 1fr) !important; } } /* * 「詳細」ボタンの左右余白。 * car-lineup-cardがconstrainedレイアウトのため、WP側の既定ルールが * margin-left/right:auto !importantを付与し、余白が打ち消されてしまう。 * そのため!importantで上書きする。 */ .car-lineup .wp-block-buttons { margin-left: var(--wp--preset--spacing--superbspacing-small) !important; margin-right: var(--wp--preset--spacing--superbspacing-small) !important; } /* ================================================== 2-Column Card (2column-card / 2column-reverse-card) ================================================== */ /* * lineupパターン(.car-lineup-card)と同じ角丸・ドロップシャドウの * カード表現を2カラムパターンにも使えるようにした専用クラス。 * border-radius自体はブロックのstyle属性(インライン)で指定しているため、 * ここではbox-shadowと、角丸からはみ出す子要素を隠すための * overflow:hiddenのみを定義する。 */ .two-column-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); overflow: hidden; } /* ================================================== Flow (利用の流れ) カード数が増減してもレイアウトが崩れないよう、 一覧コンテナはgridレイアウト(1カラム/自動行)にしている。 ================================================== */ .flow-001-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); overflow: hidden; } /* ナンバリング(01,02...): 白文字・プライマリーカラー背景の正円バッジ */ .flow-001-number { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base) !important; line-height: 1; } /* 投稿一覧パーツ(post-list-001 / post-list-archive-001 / blog-list-001)内のタイトルリンクが、 埋め込み先(post-contentなど)のリンク色設定を継承してしまわないように、 投稿一覧パーツ内でのみ見出し自体の色を優先する */ .post-list-wrapper .wp-block-post-title a, .post-list-archive-wrapper .wp-block-post-title a, .blog-list-wrapper .wp-block-post-title a { color: inherit !important; } /* ================================================== Post List Item (日付 + タイトル) PCでは日付とタイトルを横並びに、スマホでは縦並びに表示する ================================================== */ .post-list-item { align-items: baseline !important; } @media only screen and (max-width: 768px) { .post-list-item { flex-direction: column !important; align-items: flex-start !important; } } /* ================================================== Post List Archive (category tabs) ================================================== */ .post-list-category-tabs { row-gap: var(--wp--preset--spacing--superbspacing-xxsmall); column-gap: var(--wp--preset--spacing--superbspacing-xxsmall); } .post-list-category-tabs__item, .post-list-category-tabs__list a { display: inline-block; padding: 6px 20px; border: 1px solid var(--wp--preset--color--mono-3); border-radius: 30px; color: var(--wp--preset--color--mono-1); font-size: var(--wp--preset--font-size--superbfont-xsmall); text-decoration: none; white-space: nowrap; } .post-list-category-tabs__item:hover, .post-list-category-tabs__list a:hover { background-color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast-light); } .post-list-category-tabs__item.is-active { background-color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast-light); } .post-list-category-tabs__list, .post-list-category-tabs__list ul { display: flex; flex-wrap: wrap; row-gap: var(--wp--preset--spacing--superbspacing-xxsmall); column-gap: var(--wp--preset--spacing--superbspacing-xxsmall); list-style: none; margin: 0; padding: 0; } .post-list-category-tabs__list li { margin: 0; } /* WordPressが現在のカテゴリーに付与するクラス(現在のアーカイブ) */ .post-list-category-tabs__list li.current-cat > a { background-color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast-light); } /* ================================================== Blog Archive (custom post type "blog") ================================================== */ .blog-archive-card { overflow: hidden; } /* * サムネイル画像(post-featured-image)はPC:220pxで固定(ブロック属性側で指定)。 * スマホ(768px以下)はブロック属性の高さより少し高くしたいので、CSS側で * !importantで上書きする。 */ @media only screen and (max-width: 768px) { .blog-archive-card .wp-block-post-featured-image, .blog-archive-card .wp-block-post-featured-image img { height: 260px !important; } } .blog-archive-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; } @media only screen and (max-width: 768px) { .blog-archive-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media only screen and (max-width: 599px) { .blog-archive-grid { grid-template-columns: repeat(1, 1fr) !important; } } /* ================================================== Blog two columns ================================================== */ .blog-two-columns .wp-block-post-featured-image { min-width: 40% !important; } @media only screen and (max-width: 750px) { .blog-two-columns .wp-block-post-featured-image { min-width: 100% !important; } .blog-two-columns .has-post-thumbnail .wp-block-group { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } } /* ================================================== Button (site-wide unification) ヘッダー・フッターはボタンタグ(wp-element-button)を 使用していないため対象外。carousel-001.php内の 3つの「お問い合わせ」ボタンのみ、背景に重なるとの 理由で意図的に除外している(下記の専用ルールで復元)。 ================================================== */ .wp-block-button__link.wp-element-button { position: relative; z-index: 0; overflow: hidden; border: 2px solid var(--wp--preset--color--primary) !important; border-radius: 5px !important; background-color: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--contrast-light) !important; transition: color 0.3s ease; } /* * ホバー時の「スライド斜め」アニメーション。 * ::afterを斜めに変形させて左外側に隠しておき、 * ホバー時にスライドインさせて白背景を見せる。 * z-index:-1で親(position:relative)の背景より上、 * テキストより下のレイヤーに配置している。 */ .wp-block-button__link.wp-element-button::after { content: ""; position: absolute; top: -50%; left: -20%; z-index: -1; width: 160%; height: 220%; background-color: #fff; transform: skewX(-15deg) translateX(-120%); transition: transform 0.3s ease; } .wp-block-button__link.wp-element-button:hover, .wp-block-button__link.wp-element-button:focus { color: var(--wp--preset--color--primary) !important; } .wp-block-button__link.wp-element-button:hover::after, .wp-block-button__link.wp-element-button:focus::after { transform: skewX(-15deg) translateX(0); } /* * carousel-001.phpのボタンは白背景・青文字のまま維持しつつ、 * ホバー時は他のボタンと逆方向(白→青)のスライドアニメーションにする。 */ .carousel__slide .wp-block-button__link.wp-element-button, .btn-reverse .wp-block-button__link.wp-element-button { border-color: transparent !important; background-color: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--primary) !important; } .carousel__slide .wp-block-button__link.wp-element-button::after, .btn-reverse .wp-block-button__link.wp-element-button::after { background-color: var(--wp--preset--color--primary); } .carousel__slide .wp-block-button__link.wp-element-button:hover, .carousel__slide .wp-block-button__link.wp-element-button:focus, .btn-reverse .wp-block-button__link.wp-element-button:hover, .btn-reverse .wp-block-button__link.wp-element-button:focus { color: var(--wp--preset--color--base) !important; border-color: var(--wp--preset--color--base) !important; } /* * ボタン右側の矢印。 * ::afterは背景スライド演出に使用しているため、 * ::beforeで上と右の罫線(border-top/border-right)を * 45度回転させて「>」のような矢印として表現している。 * ホバー時は矢印だけ少し右へ移動するアニメーションを加える。 */ .wp-block-button__link.wp-element-button::before { content: ""; position: absolute; top: 50%; right: 18px; z-index: 1; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: transform 0.3s ease; } .wp-block-button__link.wp-element-button:hover::before, .wp-block-button__link.wp-element-button:focus::before { transform: translateY(-50%) translateX(4px) rotate(45deg); } /* * carousel-001.php・btn-reverseのボタンは矢印もcurrentColor(基本の::beforeルール)に任せる。 * 通常時は文字色(プライマリー)、ホバー時は文字色(ホワイト)に自動で追従する。 */ /* ================================================== Breadcrumb ================================================== */ .breadcrumb-wrapper { line-height: 1; } .breadcrumb { color: var(--wp--preset--color--mono-1); font-size: var(--wp--preset--font-size--superbfont-xsmall); } .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; } .breadcrumb__item { display: flex; align-items: center; } .breadcrumb__link, .breadcrumb__current { color: inherit; text-decoration: none; } .breadcrumb__home { display: inline-flex; align-items: center; } .breadcrumb__icon { display: block; width: 16px; height: 16px; } .breadcrumb__separator { margin: 0 8px; } /* * パンくずリストがある画面では、フッターの上マージンを詰める。 * wp:template-partは実際には専用のラッパー要素(wp-block-template-part)で * 出力されるため、.breadcrumb-wrapper自体の隣接要素ではなく、 * パンくず側のラッパー(has-breadcrumb)とフッター側のラッパーの隣接関係で判定する。 */ .has-breadcrumb + .wp-block-template-part .footer { margin-top: 0 !important; } /* ================================================== Post Navigation (投稿詳細ページ末尾の前後記事・一覧リンク) ================================================== */ .post-navigation { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--superbspacing-small); padding-top: var(--wp--preset--spacing--superbspacing-xsmall); border-top: 1px solid var(--wp--preset--color--mono-3); } .post-navigation__list { color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--superbfont-small); font-weight: 400; text-decoration: none; text-align: center; } .post-navigation__list:hover, .post-navigation__list:focus { text-decoration: underline; } /* * 矢印はサイト共通のボタン(.wp-block-button__link.wp-element-button::before)と * 同じ手法(罫線を45度回転させたシェブロン)で装飾する。 * 文字(＜/＞)は.post-navigation__arrow-glyphで視覚的に非表示にし、 * アクセシブルネームはaria-labelで補う。リンク領域(44px四方)は * 見た目の矢印本体(8px)より広めに確保し、タップしやすくしている。 */ .post-navigation__arrow { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--wp--preset--color--primary); text-decoration: none; } .post-navigation__arrow-glyph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .post-navigation__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transition: transform 0.3s ease; } .post-navigation__arrow--prev::before { transform: translate(-50%, -50%) rotate(-135deg); } .post-navigation__arrow--next::before { transform: translate(-50%, -50%) rotate(45deg); } .post-navigation__arrow--prev:hover::before, .post-navigation__arrow--prev:focus::before { transform: translate(-50%, -50%) translateX(-4px) rotate(-135deg); } .post-navigation__arrow--next:hover::before, .post-navigation__arrow--next:focus::before { transform: translate(-50%, -50%) translateX(4px) rotate(45deg); } /* * 前後に記事がない場合(先頭・末尾の記事)は、PHP側(cars_basic_render_post_navigation)で * リンクなしのとして出力し、文字色(currentColor)をグレーにして * 操作できないことを示す。 */ .post-navigation__arrow.is-disabled { color: var(--wp--preset--color--mono-3); pointer-events: none; } @media only screen and (max-width: 768px) { .post-navigation__list { font-size: var(--wp--preset--font-size--superbfont-xsmall); } } /* ================================================== Contact Form 7 (お問い合わせページ) ================================================== */ .wpcf7 { max-width: 800px !important; margin-left: auto !important; margin-right: auto !important; } /* ①フォーム全体の横幅は上の.wpcf7で800pxに制限 */ /* ②ラベルとinputを横並びにする(PC)。 cf7-field / cf7-field__label はフォームタグ側(フォームタブ)で 付与する前提のクラス。 */ .wpcf7 .cf7-field label { display: flex; align-items: center; gap: var(--wp--preset--spacing--superbspacing-small); width: 100%; } .wpcf7 .cf7-field--textarea label { align-items: flex-start; } .wpcf7 .cf7-field__label { flex: 0 0 160px; font-weight: 600; } .wpcf7 .cf7-field .wpcf7-form-control-wrap { flex: 1 1 auto; width: 100%; } /* 項目ごとの間隔を広げる */ .wpcf7 .cf7-field { margin-bottom: var(--wp--preset--spacing--superbspacing-small); } .wpcf7 .wpcf7-form-control-wrap input, .wpcf7 .wpcf7-form-control-wrap textarea, .wpcf7 .wpcf7-form-control-wrap select { width: 100%; box-sizing: border-box; border: none; background-color: var(--wp--preset--color--mono-4); padding: var(--wp--preset--spacing--superbspacing-xsmall); font-family: inherit; font-size: inherit; } /* * セレクトボックスの矢印を、サイト共通のボタン矢印 * (.wp-block-button__link.wp-element-button::before)と同じ * 「border+rotate(45deg)」の技法で描画し直す。 * ブラウザ標準の矢印はappearance:noneで非表示にし、 * 矢印分のスペースをpadding-rightで確保、 * ラッパー(.wpcf7-form-control-wrap)側の::afterに矢印を描画する * (select自体は::afterを描画できないブラウザがあるため)。 */ .wpcf7 .wpcf7-form-control-wrap select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: calc(var(--wp--preset--spacing--superbspacing-xsmall) * 2 + 8px); } .wpcf7 .wpcf7-form-control-wrap:has(select) { position: relative; display: block; } .wpcf7 .wpcf7-form-control-wrap:has(select)::after { content: ""; position: absolute; top: 50%; right: var(--wp--preset--spacing--superbspacing-xsmall); width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); pointer-events: none; } /* * ③確認・送信ボタンはフォームタグ側で * サイト共通の青ボタンクラス(wp-block-button__link wp-element-button)を * 直接付与する想定のため、色・アニメーションは既存のスタイルがそのまま適用される。 * ここではボタンの最小幅と、配置(中央寄せ)のみ追加している。 */ .wpcf7 .cf7-submit-wrap { text-align: center; } .wpcf7 .cf7-submit-wrap .wpcf7-submit { min-width: 200px; padding-top: var(--wp--preset--spacing--superbspacing-xsmall); padding-bottom: var(--wp--preset--spacing--superbspacing-xsmall); } /* ④完了(送信成功)メッセージ。エラー時は色を変えないよう、成功時のみに限定 */ .wpcf7-response-output.wpcf7-mail-sent-ok { border: 1px solid var(--wp--preset--color--primary) !important; background-color: rgba(7, 134, 189, 0.1); text-align: center; } @media only screen and (max-width: 599px) { .wpcf7 .cf7-field label { flex-direction: column; align-items: flex-start; } .wpcf7 .cf7-field__label { flex: 0 0 auto; } } /* ================================================== CTA 2 (電話・オンライン予約) ================================================== */ .cta-002__heading { flex-wrap: nowrap; } .cta-002__icon { margin: 0; flex: 0 0 auto; } .cta-002__icon img { display: block; } /* * ボタンはbtn-reverseクラス(白背景・プライマリー文字、ホバーで反転)を使用。 * ここでは横幅の上限(300px)のみ指定する。 * wp-block-button__width-100によりリンク自体にwidth:100%が付与されるため、 * 外側のdivだけでなくリンク自体にもmax-widthを指定する。 */ .cta-002 .wp-block-button, .cta-002 .wp-block-button.wp-block-button__width-100, .cta-002 .wp-block-button__link { max-width: 300px !important; } /* ボタンの上マージンを広げる */ .cta-002 .wp-block-buttons { margin-top: var(--wp--preset--spacing--superbspacing-small) !important; } /* ================================================== FAQ (よくある質問・アコーディオン) ================================================== */ .faq-item { border-bottom: 1px solid var(--wp--preset--color--mono-4); } /* Q部分(クリックで開閉するボタン) ビジュアルエディタで編集しやすいよう、グループ+段落ブロックで構成している。 role/tabindexはJS側(faq.js)で実行時に付与する(ブロックの保存内容には含めない)。 */ .faq-item__question { display: flex; align-items: center; position: relative; gap: var(--wp--preset--spacing--superbspacing-xsmall); width: 100%; margin: 0; padding: var(--wp--preset--spacing--superbspacing-xsmall) calc(16px + var(--wp--preset--spacing--superbspacing-xsmall)) var(--wp--preset--spacing--superbspacing-xsmall) 0; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* マウスクリック時は既定のアウトラインを出さず、キーボード操作時(Tab移動)は アクセシビリティのためフォーカスリングを表示する */ .faq-item__question:focus:not(:focus-visible) { outline: none; } .faq-item__question:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .faq-item__q, .faq-item__a { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background-color: var(--wp--preset--color--primary); /* * WordPressのグローバルスタイルが `:root :where(p) { color: mono-1 }` を * 出力しており、:where()は詳細度0のため通常のクラスセレクタと詳細度が * 並び、読み込み順次第で上書きされてしまう。ここでは!importantで * 確実に白文字を優先させる。 */ color: var(--wp--preset--color--base) !important; font-weight: 700; } .faq-item__question-text { flex: 1 1 auto; font-weight: 700; } /* 開閉アイコン(＋/－) 専用の装飾要素を追加せず、.faq-item__question自体の疑似要素として描画する (ビジュアルエディタ上に空のブロックが残らないようにするため)。 横棒・縦棒の中心を一致させるため、right指定 + translateX(50%)で 「要素自身の幅の半分だけ右にずらす」ことで、幅の異なる2本の棒を 同じ中心点に揃えている。 */ .faq-item__question::before, .faq-item__question::after { content: ""; position: absolute; top: 50%; right: 8px; background-color: var(--wp--preset--color--primary); transition: transform 0.3s ease; } .faq-item__question::before { width: 14px; height: 2px; transform: translate(50%, -50%); } .faq-item__question::after { width: 2px; height: 14px; transform: translate(50%, -50%); } .faq-item.is-open .faq-item__question::after { transform: translate(50%, -50%) rotate(90deg); } /* * A部分のスライドダウン。 * max-height: 0 → 十分大きな値 のトランジションで開閉する。 * (grid-template-rowsのfr値を使ったアニメーションよりも、 * デフォルトで確実に非表示にできるこちらの方式を採用) */ .faq-item__answer-wrap { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; } .faq-item.is-open .faq-item__answer-wrap { max-height: 500px; } .faq-item__answer-inner { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--superbspacing-xsmall); padding: 0 0 var(--wp--preset--spacing--superbspacing-xsmall); } .faq-item__answer-text { margin: 0.2em 0 0; } /* ================================================== Page Title 2 ================================================== */ /* * カバー画像の下にリードブロックを配置しつつ、 * margin-topをマイナスにしてカバー下端に重ねる。 * ブロック自体の横幅は、左右に最低small分の余白を確保しつつ * 最大1200pxまでに制限し、中央寄せにする。 * (親グループにpaddingを付けると、カバー側のalignfullの * フルブリード計算が崩れるため、幅の制御はこのブロック自身の * width/max-widthで行う) */ .page-title-2__lead { width: calc(100% - (var(--wp--preset--spacing--superbspacing-small) * 2)) !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; margin-top: -60px !important; position: relative; } @media only screen and (max-width: 768px) { .page-title-2__lead { margin-top: -30px !important; } } /* コピー(見出しに近い一行目のテキスト)を太字に */ .page-title-2__copy { font-weight: 700; } /* ================================================== Stores (店舗情報) ================================================== */ .stores-list { display: flex; flex-direction: column; font-size: var(--wp--preset--font-size--superbfont-xsmall); } .stores-row { display: flex; gap: var(--wp--preset--spacing--superbspacing-small); padding: var(--wp--preset--spacing--superbspacing-xsmall) 0; border-bottom: 1px solid var(--wp--preset--color--mono-3); } .stores-row:first-child { padding-top: 0; } .stores-row__label { flex: 0 0 120px; font-weight: 700; color: var(--wp--preset--color--mono-1); } .stores-row__value { flex: 1 1 auto; color: var(--wp--preset--color--mono-1); } .stores-row__value ul { margin:0.3em 0 0 0; font-size: var(--wp--preset--font-size--superbfont-xsmall); } .stores-map { margin-top: var(--wp--preset--spacing--superbspacing-medium) !important; line-height: 0; } .stores-map iframe { display: block; width: 100%; } @media only screen and (max-width: 599px) { .stores-row { flex-direction: column; gap: var(--wp--preset--spacing--superbspacing-xxsmall); } .stores-row__label { flex: 0 0 auto; } } /* ================================================== 3Column Image (3column-image) 3column-imageは既存のcarousel.js(.js-carousel)をそのまま使い回す。 PC(769px以上)では通常の3カラム表示に上書きし、 スマホ(768px以下)ではswiper風に1枚ずつ自動スライドさせる。 ================================================== */ /* * スマホ(1枚ずつスライド)でも、隣のスライドが見切れる際に * 画像同士が隙間なく接してしまわないよう、gapはPC/スマホ共通で指定する。 */ .threecol-image-carousel .carousel__track { gap: var(--wp--preset--spacing--superbspacing-small); } /* * carousel__dotsは元々carousel-001の背景カバー画像に重ねる用の * position:absoluteだが、このパーツは画像の下にスライドが続くだけの * バナー的なコンテンツなので、ドットは重ねずスライドの下に静的に配置する。 * 色も白(カバー画像向け)ではなく、他の下配置ドットと同じ配色に変更する。 */ .threecol-image-carousel .carousel__dots { position: static; transform: none; /* * WP標準の共通スタイル(carousel__dotsへのmargin-block-start:0 !important、 * および.is-layout-constrained > :last-childへのmargin-block-end:0)が * margin指定を打ち消してしまうため、!importantで確実に上下marginを効かせる。 */ margin: var(--wp--preset--spacing--superbspacing-small) auto !important; justify-content: center; } .threecol-image-carousel .carousel__dot { background: var(--wp--preset--color--mono-3); } .threecol-image-carousel .carousel__dot.is-active { background: var(--wp--preset--color--primary); } @media only screen and (min-width: 769px) { .threecol-image-carousel { overflow: visible; } .threecol-image-carousel .carousel__track { /* carousel.jsがJSで付与するtranslateXを打ち消し、スライドさせない */ transform: none !important; } .threecol-image-carousel .carousel__slide { flex: 0 0 calc((100% - (var(--wp--preset--spacing--superbspacing-small) * 2)) / 3); max-width: calc((100% - (var(--wp--preset--spacing--superbspacing-small) * 2)) / 3); } /* PCでは静止表示なのでドットは不要 */ .threecol-image-carousel .carousel__dots { display: none; } } /* ================================================== 3Column Image Text 2(3column-image-text-002) 3column-image-textと同じ「画像+見出し+本文」だが、threecol-image-carousel (3column-image)と同じ仕組みで、PC(769px以上)は3列並びの静止表示、 スマホ・タブレット(768px以下)ではスワイプ+自動再生で1枚ずつ切り替わる。 矢印ボタンは使わず、下部のドット(PCでは非表示)だけで現在位置を示す。 ================================================== */ .threecol-text-carousel .carousel__track { gap: var(--wp--preset--spacing--superbspacing-small); } /* * carousel__dotsは元々carousel-001の背景カバー画像に重ねる用の * position:absoluteだが、このパーツは画像の下に見出し・本文が続く * 通常のコンテンツなので、ドットは重ねずスライドの下に静的に配置する。 * 色も白(カバー画像向け)ではなく、通常背景で見える濃い色に変更する。 */ .threecol-text-carousel .carousel__dots { position: static; transform: none; /* * WP標準の共通スタイル(carousel__dotsへのmargin-block-start:0 !important、 * および.is-layout-constrained > :last-childへのmargin-block-end:0)が * margin指定を打ち消してしまうため、!importantで確実に上下marginを効かせる。 */ margin: var(--wp--preset--spacing--superbspacing-small) auto !important; justify-content: center; } .threecol-text-carousel .carousel__dot { background: var(--wp--preset--color--mono-3); } .threecol-text-carousel .carousel__dot.is-active { background: var(--wp--preset--color--primary); } @media only screen and (min-width: 769px) { .threecol-text-carousel { overflow: visible; } .threecol-text-carousel .carousel__track { /* carousel.jsがJSで付与するtranslateXを打ち消し、スライドさせない */ transform: none !important; } .threecol-text-carousel .carousel__slide { flex: 0 0 calc((100% - (var(--wp--preset--spacing--superbspacing-small) * 2)) / 3); max-width: calc((100% - (var(--wp--preset--spacing--superbspacing-small) * 2)) / 3); } /* PCでは静止表示なのでドットは不要 */ .threecol-text-carousel .carousel__dots { display: none; } } /* ================================================== Blog List (blog-list-001) クエリーループ(投稿テンプレート)が生成する