/*
Theme Name: Notio Child Theme
Template: notio-wp
Description: Notio の子テーマです。
Version: 1.0
*/

/* カスタムスタイルはここに記述します */

/* 全てのテキストに色を適用 */
body, body * {
  color: #69683c !important;
}

/* メインタイトル */
.single-portfolio .portfolio-title,
.single-portfolio .portfolio-title a {
  color: #69683c !important;
}

/* サブタイトルや小見出し */
.single-portfolio .portfolio-meta dt {
  color: #69683c !important;
}

/* サブタイトルの値の部分（dd）も色変更したい場合 */
.single-portfolio .portfolio-meta dd {
  color: #69683c !important;
}

/* 通常のボタン系（黒背景 → グレーに） */
button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce input[type=submit],
.woocommerce-cart .button,
.woocommerce-checkout .button,
.single_add_to_cart_button.button {
  background-color: #69683c !important;
  border-color: #69683c !important;
  color: #FFFFFF !important;
}

/* ホバー時（任意で濃いグレーに） */
button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input[type=submit]:hover,
.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover,
.single_add_to_cart_button.button:hover {
  background-color: #7d7c5a !important;
  border-color: #7d7c5a !important;
  color: #FFFFFF !important;
}



/* 検索アイコンとカートアイコンのSVGの色を変更 */
.header .quick_search svg path,
.header .quick_cart svg path {
  fill: #69683c !important;
}

/* カート内アイテム数の色（必要なら） */
.header .float_count {
  color: #69683c !important;
  background-color: #d0d0d0 !important;
}

/* ハンバーガーメニューアイコン（スマホ用） */
.mobile-toggle span {
  background-color: #69683c !important;
}



/* マイアカウント左メニュー：通常時の文字と背景 */
.woocommerce-MyAccount-navigation ul li a {
  color: #69683c !important;       /* 通常時の文字色 */
  background-color: transparent !important; /* 背景を透明または白に */
}

/* マイアカウント左メニュー：ホバー時の背景と文字色 */
.woocommerce-MyAccount-navigation ul li a:hover {
  background-color: #d0d0d0 !important;  /* ホバー時の背景色 */
  color: #000 !important;                /* ホバー時の文字色 */
}

/* マイアカウント左メニュー：現在のページ（アクティブ） */
.woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: #d0d0d0 !important;  /* 選択中の背景色 */
  color: #000 !important;                /* 選択中の文字色 */
}






#particles-js {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}




/* プリローダー（読み込み時のアニメーション）を非表示にする */
.ft-loader-wrapper,
.ft-loader {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}





/* より強力にプリローダーを非表示 */
html.loading,
html.loading body,
html.loading .ft-loader-wrapper,
html.loading .ft-loader,
.ft-loader-wrapper,
.ft-loader,
#ft-loader-wrapper,
#ft-loader {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}





.ft-loader-wrapper,
html.loading,
body.loading {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}





.portfolio-holder h2 {
  font-size: 15px !important; /* お好みのサイズに変更してください */
}




/* 商品ページのタイトルサイズを調整 */
.woocommerce div.product .product_title {
  font-size: 28px !important; /* お好みのサイズに変更（例：28px） */
  line-height: 1.2 !important;
  color: #69683c !important;  /* ご希望の文字色も合わせて指定可 */
}





/* WooCommerce カート追加通知バーの背景色と文字色 */
.woocommerce-message {
  background-color: #69683c !important; /* ←お好みの背景色に */
  color: #FFFFFF !important;              /* ←文字色 */
}

/* メッセージ内のリンク（例：カートを見る）も色変更する場合 */
.woocommerce-message a {
  color: #69683c !important;
  text-decoration: underline;
}

/* WooCommerceの「カートに追加しました」メッセージを中央揃えに */
.woocommerce-message {
  text-align: center !important;
}

/* メッセージ内のリンク（例：カートを見る）も中央に */
.woocommerce-message a {
  display: inline-block;
  margin-left: 5px;
}

/* WooCommerceの通知メッセージのテキストを中央揃えにする */
.woocommerce-message,
.woocommerce-message li {
  text-align: center !important;
}

/* 通知エリアの表示中央寄せ補助（横幅などがある場合） */
.woocommerce-message {
  width: 100%;
  display: block;
  justify-content: center;
}

/* WooCommerceブロック版ボタンの文字を黒にする */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
  color: #000000 !important;
}

/* コメントを削除した際のComments are closed.を消す */
.comments-area,
.comments-closed,
.nocomments {
    display: none !important;
}


/* 記事タイトルのサイズ変更 */
.single-post header.post-title h1 {
    font-size: 25px !important;  /* 好きなサイズに調整 */
    line-height: 1.4;
}


/* 記事本文のサイズ変更 */
.single-post p {
    font-size: 15px !important;
}


/* サイト全体の背景を白に */
body,
.site,
.site-content,
.page,
.single-post {
    background-color: #ffffff !important;
}

/* グリッドやコンテナの背景も白に統一 */
.container,
.row,
.columns,
.post-title,
.post-content {
    background-color: #ffffff !important;
}

/* カートとチェックアウトのボタン背景と文字色を統一 */
.wc-block-cart__submit-button.contained,
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button.contained {
    background-color: #69683c !important;
    color: #ffffff !important;
    border: none !important;
}

/* クーポン「適用」ボタンを白に */
form.wc-block-components-totals-coupon__form button.wc-block-components-totals-coupon__button,
form.wc-block-components-totals-coupon__form button.wc-block-components-totals-coupon__button .wc-block-components-button__text {
    color: #ffffff !important;
}

/* 「配送オプションを確認」ボタンを白に */
button.wc-block-components-shipping-calculator-address__button,
button.wc-block-components-shipping-calculator-address__button .wc-block-components-button__text {
    color: #ffffff !important;
}

/* 属性セレクタを併用 */
button[type="submit"].wc-block-components-shipping-calculator-address__button,
button[type="submit"].wc-block-components-shipping-calculator-address__button .wc-block-components-button__text {
    color: #ffffff !important;
}

/* 「購入手続きに進む」ボタンの文字を白に */
a.wc-block-cart__submit-button.contained .wc-block-components-button__text {
    color: #ffffff !important;
}

/* 「注文を確定」ボタンの文字を白に */
.wc-block-components-checkout-place-order-button__text {
    color: #ffffff !important;
}

/* 商品リスト（上段）を中央寄せ + 最大幅指定 */
.wc-block-cart .wc-block-cart-items {
    margin: 0 auto 40px auto !important;
    max-width: 800px !important;  /* 読みやすい幅（調整可） */
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 20px;              /* 左右の余白で見切れ防止 */
}

/* 合計額カラム（下段）は現状維持しつつセンター揃え */
.wc-block-cart .wc-block-components-sidebar {
    margin: 0 auto 40px auto !important;
    max-width: 700px !important; /* 合計額は少し狭めが見やすい */
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 20px;
}

/* 2カラムレイアウトを壊さずに上下にする */
.wc-block-cart {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央寄せ */
}

/* カートページ内のボタン文字色を白に */
.wc-block-cart .wc-block-components-button,
.wc-block-cart .wc-block-components-button.wp-element-button {
    color: #fff !important;   /* 白文字 */
}

/* ホバー時の文字色も白のままにする */
.wc-block-cart .wc-block-components-button:hover,
.wc-block-cart .wc-block-components-button.wp-element-button:hover {
    color: #fff !important;
}

/* 投稿・カテゴリーページ両方で日付を非表示にする */
aside.post-meta.cf {
    font-size: 0 !important;
}

aside.post-meta.cf a {
    font-size: 14px !important; /* テーマに合わせて調整 */
}

/* カテゴリリンクの間に余白を追加 */
.post-meta.cf a {
    margin-right: 0.5em;  /* 右側に少し余白 */
}

/* カートページの商品リスト（上段）を中央寄せ + 最大幅指定 */
.wc-block-cart .wc-block-cart-items {
    margin: 0 auto 40px auto !important;
    max-width: 800px !important;  /* 読みやすい幅（調整可） */
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 20px;              /* 左右の余白で見切れ防止 */
}

/* チェックアウトページのPC幅でを1カラム中央揃えにし、注文概要を最上段に移動 */
@media (min-width: 1025px) {
  .wc-block-checkout .wc-block-components-main,
  .wc-block-checkout .wc-block-components-sidebar {
    width: 100% !important;
    max-width: 850px; /* お好みで調整 */
    margin: 0 auto !important;
    float: none !important;
    display: block !important;
  }

  /* チェックアウトページの注文概要を一番上に配置 */
  .wc-block-checkout .wc-block-components-form {
    display: flex;
    flex-direction: column;
  }
  .wc-block-checkout .wc-block-components-sidebar {
    order: -1; /* 最上段に移動 */
    margin-bottom: 40px !important;
  }
}

/* --- チェックアウトページ 上下カラムを中央揃え --- */
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wc-block-components-main,
body.woocommerce-checkout .wc-block-components-sidebar {
    max-width: 900px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* 上下1カラム化 + 注文概要を上に強制 */
body.woocommerce-checkout .wc-block-checkout {
    display: flex;
    flex-direction: column;
}

/* 注文概要を必ず上に */
body.woocommerce-checkout .wc-block-components-sidebar {
    order: -1; /* 最上段に移動 */
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* 入力フォームはその下 */
body.woocommerce-checkout .wc-block-components-main {
    order: 0;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}