@charset "UTF-8"; /*! Theme Name: Cocoon Child Description: Cocoon専用の子テーマ Theme URI: https://wp-cocoon.com/ Author: わいひら Author URI: https://nelog.jp/ Template: cocoon-master Version: 1.1.3 */ /* login後にlogout表示ボタン */ /* 親コンテナをフレックスレイアウトに */ .site-header { display: flex; align-items: center; justify-content: space-between; /* 左にタイトル、右にメニュー */ } /* メニューを右寄せに */ .main-navigation { margin: 0; } /* メニューアイテムの余白調整 */ .main-navigation .menu-item-csc-login-logout { margin-left: 1em; } /* 固定ページのタイトル下に出るメタ情報を非表示 */ .page .entry-meta, .page .post-meta { display: none !important; } /* 固定ページ本文下に出るメタ情報も非表示（テーマによってクラス名が違う場合があります） */ .page .entry-footer, .page .post-footer { display: none !important; } /* 固定ページ（page）全体のをターゲットにメタ情報を非表示 */ body.page .post-date, body.page .post-update, body.page .post-author, body.page .author-link, body.page .fa-pencil, body.page .fa-clock-o, body.page .fa-history { display: none !important; } /* さらに特定の固定ページだけ消したい場合は page-id-XX を使う例（ID が 123 の場合） */ body.page-id-123 .post-date, body.page-id-123 .post-update, body.page-id-123 .post-author, body.page-id-123 .author-link, body.page-id-123 .fa-pencil, body.page-id-123 .fa-clock-o, body.page-id-123 .fa-history { display: none !important; } /* ────────────────────────────────────── 固定ページのヘッダー／フッター内メタを丸ごと非表示 ────────────────────────────────────── */ /* ヘッダー内の日付／更新日／投稿者 */ .entry-header .entry-meta, .entry-header .entry-meta * { display: none !important; } /* フッター内（もし何か出ていれば）のメタ */ .entry-footer, .entry-footer * { display: none !important; } /* さらに、念のためページ本文直下に出る更新日時 */ .entry-content + .post-update, .entry-content + .post-date { display: none !important; } /* タイトルの二重表記を強制的に消す　*/ .entry-content > h1:first-of-type { display: none; } /* ──────────────────────────────────────── 全ページ（固定ページも含む）の日付表示を丸ごと非表示 ──────────────────────────────────────── */ /* 投稿日（アイコン＋日付テキスト） */ .post-date, .post-date * { display: none !important; } /* 更新日（アイコン＋日付テキスト） */ .post-update, .post-update * { display: none !important; } /* プラン - 解約 */ .confirm-cancel-title{ font-size: 24px; } .cancel-modal { position: fixed; top: 0; left: 0; width:100%; height:100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; } .cancel-modal-content { background: #fff; padding: 2rem; border-radius: .5rem; max-width: 400px; text-align: center; } .button--danger { background: #e53e3e; color: #fff; } /* 本登録クレジット入力フォーム　Stripe Element container */ #card-element { box-sizing: border-box; width: 100%; /* take full width of its parent */ max-width: 400px; /* or whatever fits your form */ height: 40px; /* fixed height matching your input style */ margin-bottom: 1em; /* space below */ border: 1px solid #ccc; padding: 10px; border-radius: 3px; } /* 本登録クレジット入力フォーム　the actual Stripe Element inside */ #card-element .__PrivateStripeElement, #card-element iframe { height: 100% !important; /* force to fill the 40px container */ width: 100% !important; } /* 本登録 Free／Enterprise 選択時はProfプランカテゴリ選択を無効化（クリックできず、見た目もグレーアウト） .plan-btn.disabled { opacity: 0.5; cursor: not-allowed; }*/ /* 本登録プランカテゴリ選択 .plan-btn.csc-selected { background-color: #0073aa !important; color: #fff !important; border-color: #0073aa !important; }*/ .plan-btn { border: 1px solid #ccc; background: #f5f5f5; color: #333; padding: 8px 12px; margin: 4px; cursor: pointer; border-radius: 4px; transition: background 0.2s ease; } /* 本登録プランカテゴリ選択 */ .plan-btn.selected { background-color: #0073aa !important; color: #fff !important; border-color: #0073aa !important; } .plan-btn.disabled { opacity: 0.4; pointer-events: none; } /* */ /* Stripe Elements カードフィールドの調整 */ #card-element { box-sizing: border-box; width: 100%; max-width: 420px; height: 48px; background: #fff; } #postal-annotation { margin-bottom: 4px; font-size: 0.9em; color: #777; } @media (max-width: 480px) { #card-element { height: auto; padding: 8px; } } /* パスワード入力フォーム Showボタンは常に隠す */ .om-pw-toggle { display: none !important; } /* 目アイコンの色味をよりビジネス寄りに */ .om-pass-eye { color: #4b5563; } /* 通常: グレー600 */ .om-pass-eye[aria-pressed="true"] { color: #374151; } /* 表示中: グレー700 */ .om-pass-eye:hover { color: #111827; } /* ホバー: ほぼ黒 */ .menu-item-profile { width: 250px !important; height:50px !important; } .menu-item { display: flex!important; align-items: center !important; justify-content: center !important; width: 100px !important; height:50px !important; text-align: center !important; border-radius: 5px !important; margin: 0px 5px !important; } .black-button{ background-color: #333333!important; } .black-button:hover{ background-color: #707070!important; cursor: pointer; } .white-button{ background-color: #ffffff!important; } .menu-item a { width: auto !important; height: auto !important; font-weight: bold !important; font-size: 16px !important; } .black-button a { color: #ffffff!important; } .black-button a:hover{ background-color: transparent!important; } .white-button a { color: #333333!important; } .white-button a:hover{ background-color: transparent!important; } .navi-in > ul{ justify-content: right !important; margin-top:-60px !important; padding-bottom:20px !important; } .navi-menu-content { max-width: 250px !important; } .error { color: var(--om-color-info); padding-bottom: 2px !important; padding-top: 2px !important; font-size: 16px !important; } .checkbox-area { width:15px; height:15px; margin-right:10px; } /* 4. アクションボタンの配置 */ .om-modal-actions { display: flex; justify-content: flex-end; /* ボタンを右寄せ */ gap: 10px; /* ボタン間のスペース */ margin-top: 20px; } .om-button-xlarge { width: 250px; height: 40px; } .om-button-large { width: 200px; height: 40px; } .om-button-medium { width: 120px; height: 40px; } .om-black-button { background-color: #333333; color: #ffffff; border-radius: 5px; font-weight: bold; border: none; } .om-black-button:hover { background-color: #707070; cursor: pointer; color: #ffffff; } .om-white-button { background-color: #ffffff; color: #333333; border-radius: 5px; font-weight: bold; border: 1px solid #333333 !important; } .om-white-button:hover { background-color: #f7f9fa; cursor: pointer; } .om-account-btn-base { display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; } .om-bm-link { display:flex !important; width:100% !important; height:auto !important; justify-content:space-between !important; padding-bottom:10px !important; } .om-bm-thumb { width: 40% !important; margin: 0; overflow: hidden; line-height: 0; } .om-bm-thumb img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; /* Cocoon等の標準的な比率 */ object-fit: cover; display: block; transition: transform 0.3s ease; /* ホバー時の動き用 */ } .remove-bookmark-btn{ height:32px !important; border:1px solid #ddd; background:#fff; } /************************************ ** 子テーマ用のスタイルを書く ************************************/ /*必要ならばここにコードを書く*/ /************************************ ** レスポンシブデザイン用のメディアクエリ ************************************/ /*1023px以下*/ @media screen and (max-width: 1023px) { .menu-drawer { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 0 !important; margin: 0 !important; border-top: 1px solid #ccc !important; } .menu-drawer .menu-item { display: flex !important; width: 100% !important; height: 60px !important; margin: 0 !important; border-bottom: 1px solid #ccc !important; list-style: none !important; } .menu-drawer .menu-item a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; color: #333333 !important; text-decoration: none !important; background-color: #ffffff !important; } /* ホバー・タップ時の演出 */ .menu-drawer .menu-item a:hover, .menu-drawer .menu-item a:active { background-color: #f5f5f5 !important; /* 少し明るめのグレーに変更 */ cursor: pointer; } .menu-item-profile { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: auto !important; padding: 10px !important; margin: 0 auto !important; } .om-bm-thumb { width: 35% !important; /* 文字情報を増やすために少し縮小、あるいは調整 */ } } /*834px以下*/ @media screen and (max-width: 834px){ .checkbox-area { width:20px; height:20px; margin-right:10px; } .button-area { flex-direction: column !important; } .om-account-btn-base { margin: 5px 0!important; } .om-bm-thumb { width: 50% !important; /* スマホでは横幅いっぱい */ aspect-ratio: 16 / 9; /* 比率は維持 */ } } /*480px以下*/ @media screen and (max-width: 480px){ .om-modal-actions { flex-direction: column; /* モバイルでは縦に並べる */ gap: 8px; } .om-modal-actions button { width: 100%; /* ボタンを幅いっぱいに広げる */ height:60px !important; padding: 12px; line-height: 1; /* ボタン内のテキストの高さを調整 */ } .remove-bookmark-btn{ height:50px !important; } .om-bm-thumb { width: 80% !important; /* スマホでは横幅いっぱい */ aspect-ratio: 16 / 9; /* 比率は維持 */ } /* 1. 不要な要素の非表示 */ .pagination-next, .pagination .page-numbers:not(.next):not(.prev):not(.current) { display: none !important; } /* 2. 全体のレイアウトを中央揃えに固定 */ .pagination { display: flex !important; align-items: center !important; justify-content: center !important; /* 要素全体を中央に */ gap: 10px !important; margin: 40px 0 !important; padding: 0 10px !important; width: 100% !important; } /* 3. 「前へ」「次へ」共通デザイン */ .pagination a.prev.page-numbers, .pagination a.next.page-numbers { display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 !important; /* 伸び縮み可能に */ max-width: 35% !important; /* 最大幅を制限 */ height: 80px !important; background-color: #fafafa !important; color: #333 !important; text-decoration: none !important; border-radius: 4px !important; border: 1px solid #eee !important; font-weight: bold !important; font-size: 18px !important; border: 1px solid; border-color: #ddd !important; } /* 4. 現在のページ番号（中央）のデザイン */ .pagination .current { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* 勝手に伸びないように固定 */ background: none !important; border: none !important; color: #666 !important; font-size: 16px !important; font-weight: bold !important; min-width: 80px !important; /* 中央のスペースを確保 */ text-align: center !important; } .pagination .current::after { content: " ページ" !important; font-size: 12px; margin-left: 2px; font-weight: bold !important; } /* 5. 1ページ目や最終ページでボタンが消えても中央を維持するための工夫 */ /* 「前へ」がない時は、左側にボタンと同じ幅の空白を作る */ .pagination:not(:has(.prev))::before { content: ""; flex: 1; max-width: 35%; } /* 「次へ」がない時は、右側にボタンと同じ幅の空白を作る */ .pagination:not(:has(.next))::after { content: ""; flex: 1; max-width: 35%; } /* 6. テキストの書き換えとアイコン消去 */ .pagination a.prev.page-numbers span, .pagination a.prev.page-numbers i, .pagination a.next.page-numbers span, .pagination a.next.page-numbers i { display: none !important; } .pagination a.prev.page-numbers::before { content: "前へ" !important; } .pagination a.next.page-numbers::before { content: "次へ" !important; } } }