開始要素との間に、
が挿入されてしまい、これに p:empty::before が効いてしまう。
* Gutenberg用のCSSファイルらしい。一部のカルーセルアイテムにのみ効いている理由は不明。一時的にＧｕｔｅｎｂｅｒｇをオン（Ｃｌａｓｓｉｃ Ｅｄｉｔｏｒをオフ）にしてなんらかの操作をしたためか？
* content: none; と display: none; の一方だけで良さそうだが、挙動が不明なので両方入れておく */
.et_pb_row.slick-landing-carousel-row .et_pb_text_inner p:empty::before {
content: none;
display: none;
}
/** ランディングページ・ トップ全幅スライダー **/
/* トップ全幅スライダーの全幅セクションを最大幅1200px、中央配置にする */
.slick-landing-slider {
max-width: 1200px;
margin: auto;
}
/* トップ全幅スライダーの各画像を最大幅1200px、中央配置にする */
.slick-landing-slider .et_pb_fullwidth_imaage {
max-width: 1200px;
margin: auto;
}
/***お問い合わせフォーム***/
/** お問い合わせページのメインと、ランディングページ等の下部の簡易フォームとの、共通部分 **/
.pcontact_box {
max-width: 800px;
margin: auto;
padding: 40px 0;
color: #d6d6d6;
}
.pcontact_row {
margin: 0 0 16px 0;
}
.pcontact_complete_box {
max-width: 800px;
margin: auto;
padding: 40px 20px;
color: #ffffff;
}
.pcontact_complete_row {
}
.pcontact_subject {
margin: 0 0 9px 6px;
letter-spacing: 0.15em;
}
.pcontact_form {
width: 90%;
margin: auto;
}
/* 「送信」ボタンのみ中央寄せ */
.pcontact_submit .pcontact_form {
text-align: center;
}
.pcontact_form input,
.pcontact_form select,
.pcontact_form textarea {
max-width: 100%;
padding: 16px;
font-weight: 600;
margin: 0 0 0;
}
.pcontact_form .mwform-tel-field {
max-width: 100%
}
.pcontact_form .mwform-tel-field input {
max-width: 27.5%
}
.pcontact_form input.text,
.pcontact_form input.title,
.pcontact_form input[type="email"],
.pcontact_form input[type="password"],
.pcontact_form input[type="tel"],
.pcontact_form input[type="text"],
.pcontact_form select,
.pcontact_form textarea {
padding: 16px;
border: 2px solid #d6d6d6;
color: #d6d6d6;
background-color: transparent;
}
.pcontact_form textarea {
font-size: 14px;
}
.pcontact_form input::placeholder,
.pcontact_form textarea::placeholder {
color: #d6d6d6;
opacity: 1;
}
/* 「送信」ボタンのみ */
.pcontact_form input[type="submit"] {
padding: 16px;
background-color: #005a84;
border: 2px solid #ffffff;
border-radius: 63px;
color: #ffffff;
font-size: 16px;
letter-spacing: 0.1em;
transition: 1.00s;
transition-timing-function: ease;
}
.pcontact_form input[type="submit"]:hover {
background-color: #eaebee;
border: 2px solid #ff029e;
color: #2f3854;
}
.pcontact_form input.text:focus,
.pcontact_form input.title:focus,
.pcontact_form input[type="email"]:focus,
.pcontact_form input[type="password"]:focus,
.pcontact_form input[type="tel"]:focus,
.pcontact_form input[type="text"]:focus,
.pcontact_form input[type="submit"]:focus,
.pcontact_form select:focus,
.pcontact_form textarea:focus {
border-color: #d6d6d6;
color: #d6d6d6;
}
/** ランディングページ等の下部の簡易フォームのみに適用される **/
.simple_contact_form_section .et_pb_row {
padding: 10px 0;
}
.simple_contact_form_module .pcontact_box {
padding: 0 0;
}
.simple_contact_form_module .pcontact_form input.text,
.simple_contact_form_module .pcontact_form input.title,
.simple_contact_form_module .pcontact_form input[type="email"],
.simple_contact_form_module .pcontact_form input[type="password"],
.simple_contact_form_module .pcontact_form input[type="tel"],
.simple_contact_form_module .pcontact_form input[type="text"],
.simple_contact_form_module .pcontact_form select,
.simple_contact_form_module .pcontact_form textarea {
border: 2px solid #cccccc;
color: #666666;
background-color: #ffffff;
}
/* textarea のみ */
.simple_contact_form_module .pcontact_form textarea {
max-height: 225px;
}
.simple_contact_form_module .pcontact_form input.text:focus,
.simple_contact_form_module .pcontact_form input.title:focus,
.simple_contact_form_module .pcontact_form input[type="email"]:focus,
.simple_contact_form_module .pcontact_form input[type="password"]:focus,
.simple_contact_form_module .pcontact_form input[type="tel"]:focus,
.simple_contact_form_module .pcontact_form input[type="text"]:focus,
.simple_contact_form_module .pcontact_form input[type="submit"]:focus,
.simple_contact_form_module .pcontact_form select:focus,
.simple_contact_form_module .pcontact_form textarea:focus {
border-color: #cccccc;
color: #666666;
}
.simple_contact_form_module .pcontact_complete_box {
background-color: #447384;
}
.simple_contact_form_module .pcontact_complete_text {
padding: 0 20px;
}
/*** 特商法表記ページ ***/
.terms_box {
margin: 4em 0;
font-weight: 600;
}
.terms_subtitle {
padding: 0 0 5px 0;
}
.terms_description {
padding: 0 0 10px 30px;
}
.terms_uppercomment {
font-size: 12px;
padding: 0 0 0 0;
}
.terms_comment {
font-size: 13px;
padding: 0 0 0 3em;
}
/*** ご利用ガイドページ ***/
.userguide_image {
width: 200px;
float: left;
margin: 0 20px 0 0;
}
.userguide_text {
}
.userguide_text::after {
content: "";
display: block;
clear: both;
}
.userguide_icon {
clear: both;
float: left;
border: 1px solid #ffa500;
border-radius: 20px;
margin: 0 20px 0 0;
padding: 20px 20px 10px 20px;
}
.userguide_icon_image {
width: 80px;
padding: 0 0 10px;
}
.userguide_icon_title {
text-align: center;
font-size: 16px;
}
.userguide_intericon_arrow {
clear: both;
float: left;
width: 122px;
text-align: center;
margin: 0 20px 0 0;
padding: 10px 20px;
}
.userguide_linktext {
float: right;
margin: 0 10% 0 0;
}
article.post-1166 hr {
clear: both;
}
/*** マイアカウント ***/
/** 登録画面 **/
/* ユーザー名入力欄 */
form.woocommerce-form-register label[for=reg_username]::after {
content: "\A※ ユーザー名に使用できる文字は、英数字と記号（. _ - @）のみです。";
white-space: pre-wrap;
color: #006600;
}
/* 登録画面でのデフォルトの表示を削除 */
/* 「個人データは、このウェブサイトでの体験のサポート、アカウントへのアクセスの管理、プライバシーポリシー に説明されている他の用途に使用されます。」
* という表示がなされている。
* 管理画面でこの欄を空欄にすると、タグだけのHTMLになり、高さ0でいっさい表示されなくなるが、
* 管理画面を勝手に変更してしまうリスクを考慮して、本箇所で display: none; を設定しておく。*/
.woocommerce-account form.woocommerce-form-register .woocommerce-privacy-policy-text {
display: none;
}
/** マイアカウントナビ **/
.woocommerce-account .woocommerce-MyAccount-navigation {
background-color: #f0f8ff;
border: 1px solid #71a5ff;
border-radius: 15px;
padding: 10px;
margin-bottom: 2em;
}
.woocommerce-account #left-area .entry-content .woocommerce-MyAccount-navigation ul {
padding: 1px 3px;
list-style-type: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active {
background-color: darkseagreen;
border-radius: 5px;
border: 2px solid coral;
padding: 8px 10px 8px 20px;
margin: 2px 0;
text-align: center;
list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active:hover {
opacity: 0.8;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
color: #ffffff;
text-decoration: none;
font-weight: 600;
display: block;
width: 100%;
height: 100%;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover {
opacity: 0.8;
}
/* マイアカウント内のボタンの文字色 */
.woocommerce-account .woocommerce-info a {
color: #ff4500 !important;
}
/** マイアカウント・コンテンツ **/
.woocommerce-account .woocommerce-MyAccount-content {
margin-bottom: 2em;
}
/* 表示名フォームの注意書き（「変更を保存」ボタンの下に表示） */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm::after {
content: "\A ※ 商取引上の問題により、お客様の表示名を実際の姓名から変更できない場合があります。";
white-space: pre-wrap;
}
/** 表示名フォームの姓名の順序入れ替え（WooCommerce for Japanプラグインを使用していない状況で） **/
/* 親要素 */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm.edit-account {
display: flex;
flex-wrap: wrap;
}
/* 子要素（first: 名のみ） */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm p.woocommerce-form-row--first,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm p.form-row-first {
/* float: right;
margin-left: 2.9%;
*/
order: -1;
margin-left: 0;
}
/* 子要素（last: 姓のみ） */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm p.woocommerce-form-row--last,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm p.form-row-last {
/* float: left; */
order: -2;
margin-right: 0;
}
/* 子要素（wide） */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm p.woocommerce-form-row--wide,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm p.form-row-wide {
width: 94% !important;
}
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset {
width: 94% !important;
}
@media all and (max-width:767px) {
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm p.woocommerce-form-row--first,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm p.form-row-first {
width: 94% !important;
margin-left: 0;
}
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm p.woocommerce-form-row--last,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm p.form-row-last {
width: 94% !important;
margin-right: 0;
}
}
/*** カート ***/
/* 通知メッセージ */
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message {
color: #fff !important;
}
/* 数量ボタン */
body.woocommerce-cart .quantity input.qty {
color: #fff;
padding: 16px 10px 16px 8px;
background-color: #4fdacb !important;
}
/* クーポンコード欄 */
body.woocommerce-cart table.cart td.actions .coupon .input-text {
background-color: #4fdacb !important;
width: 200px;
color: #fff;
}
body.woocommerce-cart table.cart td.actions .coupon .input-text::placeholder {
opacity: 0.9;
}
/* 「日本の概算」の非表示 */
.cart_totals tr.woocommerce-shipping-totals p.woocommerce-shipping-destination {
display: none;
}
/* 「ショップに戻る」ボタンの下を空ける */
.return-to-shop {
margin-bottom: 2em;
}
/*** 支払いページ ***/
/** ご注文詳細への追加メッセージ **/
form.woocommerce-checkout #order_review ul#shipping_method::after {
content: "\A※ この支払いページで送料を変更された場合、下の支払い方法が変更されない場合がございます。\A その場合には、ページを再読み込み（リフレッシュ）してください。";
white-space: pre-wrap;
font-weight: 400;
}
/** WorldPay(2018年)のクレジットカード画像の削除 **
.woocommerce-checkout #left-area article#post-67 img {
display: none;
}
**/
/** WorldPay(2026年)のクレジットカード画像のサイズ・位置 **/
.woocommerce-checkout #payment ul.payment_methods li span.access_worldpay_checkout-payment-method-images img.access_worldpay_checkout-card-brands {
height: 24px !important;
margin: 6px 6px 0 0;
}
/** カード名義人フォームフィールド **/
.woocommerce form .form-row input.input-text#access_worldpay_checkout-card-holder-name-input {
background-color: #fff;
border: 1px solid rgba(32,7,7,0.8);
border-radius: 4px;
}
#wc-access_worldpay_checkout-cc-form #access_worldpay_checkout-card-holder-name-input {
padding: 8px !important;
}
/** 通知 **/
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
color: #545454 !important;
}
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
color: #545454 !important;
}
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error {
color: #545454 !important;
}
/** 入力フォームのプレースホルダー **/
/* 納入時は form#checkout だったはずだが、2021-08-12 時点のWooCommerceバージョンでは、form.checkout に変わっている。
* body.woocommerce-checkout form#checkout input::placeholder { */
body.woocommerce-checkout form.checkout input::placeholder {
opacity: 0.3;
}
/** 姓名欄の上に追加表記 **
body.woocommerce-checkout #billing_last_name_field::before {
content: "※クレジットカード表記通りにご入力下さい。";
white-space: pre;
color: #006600;
}
* 姓と名のフォームの高さを合わせるために必要 *
body.woocommerce-checkout #billing_first_name_field::before {
content: " ";
}
**/
/** 姓名欄の上に追加表記 **
* クライアントの要望で、名・姓の順番に変えるので、上記の2項のCSS設定も入れ替える必要がある。**/
body.woocommerce-checkout #billing_first_name_field::before {
content: "※クレジットカード表記通りにご入力下さい。";
white-space: pre;
color: #006600;
}
/* 姓と名のフォームの高さを合わせるために必要 */
body.woocommerce-checkout #billing_last_name_field::before {
content: " ";
}
/** 郵便番号・都道府県欄の上に追加表記 **/
body.woocommerce-checkout #billing_postcode_field::before {
content: "※クレジットカードご登録住所をご入力下さい。";
white-space: pre;
color: #006600;
}
/* 郵便番号と都道府県のフォームの高さを合わせるために必要 */
body.woocommerce-checkout #billing_state_field::before {
content: " ";
}
/* ウィンドウズ幅が980px以下では、姓・名・国・郵便番号フィールドが各1行になるので、上記の高さ調整を解除 */
@media all and (max-width:980px) {
/*
body.woocommerce-checkout #billing_first_name_field::before {
content: "";
}
*/
/* クライアントの要望で、名・姓の順番に変えるので、上記項目のCSS設定も入れ替える必要がある。*/
body.woocommerce-checkout #billing_last_name_field::before {
content: "";
}
body.woocommerce-checkout #billing_state_field::before {
content: "";
}
}
/** 年齢確認 **/
#min-age-woo-ask-dob {
border: 1px solid #333;
border-radius: 20px;
margin: 2em 0 2em;
padding: 2em 1em 1em;
}
#min-age-woo-ask-dob #min_age_woo_dob_year {
width: 90px;
}
/* 各注文フィールドの上margin設定 */
#order_comments_field,
#additional_kuroneko_email_field,
#additional_kuroneko_delivery_time_field {
margin-top: 1em;
}
#order_comments_field textarea#order_comments {
height: 8em;
}
/* クロネコヤマトお届けeメール */
#additional_kuroneko_email_field::before {
content: "＜クロネコヤマト国際便・コレクト便のみ＞\Aクロネコヤマト国際便・コレクト便を選択された方は、クロネコヤマトお届けeメールの有無を選択できます。\A※ご登録のメールアドレスを発送時に登録する事で、配達状況をメールで確認でき、ご都合が悪ければ配達日時等が変更できます。\A";
white-space: pre-wrap;
color: #006600;
}
/* クロネコヤマト配達時間指定 */
#additional_kuroneko_delivery_time_field::before {
content: "＜クロネコヤマト国際便・コレクト便のみ＞\Aクロネコヤマト国際便・コレクト便を選択された方は、配達時間を指定できます。\A";
white-space: pre-wrap;
color: #006600;
}
/* プライバシーポリシー（と利用規約） */
body.woocommerce-checkout .callie-privacy-policy {
margin-bottom: 1.618em;
padding: 1.618em;
border: 1px solid rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
background: rgba(0,0,0,.05);
}
body.woocommerce-checkout .woocommerce-invalid input#privacy_policy_checkout {
outline: 2px solid red;
outline-offset: 2px;
}
/*** 注文受付ページ ***/
/* 銀行振り込み（BACS）の場合の、振込口座情報 */
.woocommerce-bacs-bank-details {
border: 1px solid #333333;
margin: 2em 1em;
padding: 1em 1em 0;
}
/* 銀行振り込み（日本国内向け bankjp）の場合の、振込口座情報 */
ul.order_details.bankjp_details {
border: 1px solid #333333;
margin: 0em 2em 1em !important;
padding: 1em 1em !important;
font-size: 16px;
}
/* お支払いページ小見出し（h2） */
.woocommerce-order h2 {
padding: 1em 0 0.7em;
}
/*** 地図 ***/
/*** GooglemapのIframe ***/
/* iframe部分の中央寄せ。その1つ外側のdiv要素をtext-align:center */
.Google_iframe_map_section .et_pb_code_inner {
text-align: center;
}
/* iframe部分の中央寄せ。Chromeでは効かない。1つ上の text-align で指定する。*/
.Google_iframe_map_section iframe {
display: block;
margin: auto;
}
/*** SNSシェアボタン（AddToAny） ***/
.addtoany_content_bottom {
margin: 0 0 !important;
padding: 8px 0 2px 10px;
}
/* ランディング、ショップ、商品一覧ページでの、ページ下部のAddToAnyの行の背景色を白（透明）から別の色に変更する */
#post-431 .addtoany_content_bottom,
#post-172 .addtoany_content_bottom,
#post-322 .addtoany_content_bottom {
background-color: #5f9ea0;
}
/* AddToAnyのアイコンをページ上部に設置する際に、行の最大幅を第一ナビに合わせて、最大幅を1080px（中央寄せ）に設定する*/
/* なお、AddToAnyのデフォルトのmarginは、16px 0; ページ下部に設置する場合はこれぐらいでよい。*/
.addtoany_content {
max-width: 1080px;
margin: auto !important;
}
/* 他ページから読み込んだ部分にもAddtoAnyのシェアボタン類が表示されてしまうので、CSSで非表示にする。 */
.latest_news_section .addtoany_content,
.one_line_announce_section .addtoany_content,
.et_pb_shop .addtoany_content,
.product .addtoany_content {
display: none;
background-color: transparent;
}
/*** Worldpay(2018年) ***/
/** Donation **
article.post-1209 img {
max-width: 96px;
}
/** 支払いページ **
article.post-67 img {
max-width: 96px;
}
**/
/*** flycart Woo Discount Rulws プラグイン ***/
table#sort_customizable_table {
border: 2px solid #008000;
border-collapse: collapse;
margin: 20px 0px;
}
table#sort_customizable_table th,
table#sort_customizable_table td {
border: 1px solid #008000;
padding: 10px 15px;
}
/*** WP Sitemap Page ***/
/* 投稿のliの最初がたまたま「サイト表示」カテゴリになっているので、これを消去する。
今後、投稿のカテゴリを追加した場合には、これは効かなくなる（間違って効いてしまう）。nth-child() で指定する必要あり。 */
body.page-id-1573 .wsp-container ul.wsp-posts-list li:first-child {
display: none;
}
body.page-id-1573 .wsp-container h2.wsp-layout_types-title,
body.page-id-1573 .wsp-container ul.wsp-layout_types-list {
display: none;
}
body.page-id-1573 .wsp-container h2.wsp-scopes-title,
body.page-id-1573 .wsp-container ul.wsp-scopes-list {
display: none;
}
body.page-id-1573 .wsp-container h2.wsp-module_widths-title,
body.page-id-1573 .wsp-container ul.wsp-module_widths-list {
display: none;
}