@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 */ /* ========================================================================== oyasma.jp 共通デザイン基盤 - 親CSS（cocoon-style）と WPデフォルトCSS（wp-block-library / global-styles）は functions.php で dequeue 済み。本ファイルがサイトCSSのほぼ全てを担う。 - クラス命名は全て "oy-" を接頭辞とする。 - 親世代・シニア向けのため、文字は大きめ・行間広め・余白広めを基本とする。 - 個別ページ専用CSSは原則書かず、ここで定義する共通部品の組み合わせで作る。 ========================================================================== */ /* ========================================================================== 1. ルート変数 ========================================================================== */ :root { /* --- カラー（落ち着いたグリーンを基調） --- */ --oy-color-primary: #2f8c5b; /* メイングリーン */ --oy-color-primary-dark: #246b46; /* hover/active */ --oy-color-primary-soft: #e8f5ed; /* 背景・チップに */ --oy-color-accent: #ff7a45; /* CTAの差し色（控えめに） */ --oy-color-accent-dark: #e96632; --oy-color-text: #2b2b2b; --oy-color-text-muted: #5b5b5b; --oy-color-text-light: #7a7a7a; --oy-color-link: #1f6d44; --oy-color-link-hover: #134a2d; --oy-color-bg: #ffffff; --oy-color-bg-soft: #f6f8f5; /* 全体背景の代替 */ --oy-color-bg-section: #f1f7f3; /* セクション帯 */ --oy-color-border: #e3e7e2; --oy-color-border-strong: #c8d1c8; /* --- 情報ボックス系 --- */ --oy-color-info-bg: #e7f1fb; --oy-color-info-border: #9bbfe0; --oy-color-info-icon: #2a6fa9; --oy-color-warning-bg: #fff7d6; --oy-color-warning-border: #f0c965; --oy-color-warning-icon: #b78510; --oy-color-check-bg: #e8f5ed; --oy-color-check-border: #9bd1b1; --oy-color-check-icon: #2f8c5b; /* --- フォントサイズ（base はやや大きめ） --- */ --oy-fs-base: 17px; --oy-fs-small: 15px; --oy-fs-tiny: 13px; --oy-fs-lead: 19px; --oy-fs-h1: 32px; --oy-fs-h2: 26px; --oy-fs-h3: 21px; --oy-fs-h4: 18px; /* --- 行間 --- */ --oy-lh-base: 1.9; --oy-lh-tight: 1.5; --oy-lh-heading: 1.45; /* --- 余白（4px刻み） --- */ --oy-space-1: 4px; --oy-space-2: 8px; --oy-space-3: 12px; --oy-space-4: 16px; --oy-space-5: 20px; --oy-space-6: 24px; --oy-space-8: 32px; --oy-space-10: 40px; --oy-space-12: 48px; --oy-space-16: 64px; --oy-space-20: 80px; --oy-space-24: 96px; /* --- 角丸 --- */ --oy-radius-sm: 6px; --oy-radius-md: 10px; --oy-radius-lg: 16px; --oy-radius-pill: 999px; /* --- 影 --- */ --oy-shadow-sm: 0 1px 2px rgba(35, 60, 45, .06); --oy-shadow-md: 0 2px 8px rgba(35, 60, 45, .08); --oy-shadow-lg: 0 8px 24px rgba(35, 60, 45, .10); /* --- コンテナ幅 --- */ --oy-container-max: 1080px; /* 通常（トップ／archive／ヒーロー帯） */ --oy-container-reading: 920px; /* 本文用（page / single の prose）。細く感じたら 960px へ */ --oy-container-narrow: 800px; /* タイト箱（404のボタン群／フォーム周辺） */ /* --- ヘッダー高さ（sticky / scroll-padding 等で参照） --- */ --oy-header-height: 76px; /* --- フォントスタック --- */ --oy-font-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; /* --- transition --- */ --oy-transition: .2s ease; } /* ========================================================================== 2. ベーススタイル（reset + base） ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--oy-fs-base); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* スムーススクロール（CSSのみで完結。アンカーリンクで sticky header 分のオフセット込み） */ scroll-behavior: smooth; scroll-padding-top: calc(var(--oy-header-height) + 12px); } /* 動きを抑えたい設定の人には急なジャンプにする */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* WordPress admin bar 表示時は scroll-padding を増やす */ body.admin-bar { /* PC: admin bar 32px */ --oy-admin-bar-h: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --oy-admin-bar-h: 46px; } /* SP: admin bar 46px */ } body.admin-bar { /* html ではなく body にも反映（古い WP の挙動差を吸収） */ } html:has(body.admin-bar) { scroll-padding-top: calc(var(--oy-header-height) + var(--oy-admin-bar-h, 32px) + 12px); } body { margin: 0; font-family: var(--oy-font-base); font-size: var(--oy-fs-base); line-height: var(--oy-lh-base); color: var(--oy-color-text); background: var(--oy-color-bg-soft); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-break: break-word; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--oy-space-4); line-height: var(--oy-lh-heading); font-weight: 700; color: var(--oy-color-text); letter-spacing: .02em; } h1 { font-size: var(--oy-fs-h1); } h2 { font-size: var(--oy-fs-h2); } h3 { font-size: var(--oy-fs-h3); } h4 { font-size: var(--oy-fs-h4); } p { margin: 0 0 var(--oy-space-4); } ul, ol { margin: 0 0 var(--oy-space-4); padding-left: 1.4em; } li + li { margin-top: var(--oy-space-2); } a { color: var(--oy-color-link); text-decoration: underline; text-underline-offset: .15em; transition: color var(--oy-transition); } a:hover, a:focus { color: var(--oy-color-link-hover); } img { max-width: 100%; height: auto; vertical-align: middle; } figure { margin: 0 0 var(--oy-space-4); } hr { border: 0; border-top: 1px solid var(--oy-color-border); margin: var(--oy-space-8) 0; } strong, b { font-weight: 700; } small { font-size: var(--oy-fs-small); } /* フォーカスリングは見やすく */ :focus-visible { outline: 3px solid rgba(47, 140, 91, .45); outline-offset: 2px; } /* ========================================================================== 3. レイアウト ========================================================================== */ /* コンテナ */ .oy-container { width: 100%; max-width: var(--oy-container-max); margin-left: auto; margin-right: auto; padding-left: var(--oy-space-5); padding-right: var(--oy-space-5); } .oy-container.is-narrow { max-width: var(--oy-container-narrow); } .oy-container.is-reading { max-width: var(--oy-container-reading); } /* セクション（縦の余白を担当） */ .oy-section { padding-top: var(--oy-space-16); padding-bottom: var(--oy-space-16); } .oy-section.is-soft { background: var(--oy-color-bg-section); } .oy-section.is-white { background: var(--oy-color-bg); } /* セクション見出し */ .oy-section-head { text-align: center; margin-bottom: var(--oy-space-10); } .oy-section-head .oy-eyebrow { display: inline-block; font-size: var(--oy-fs-small); color: var(--oy-color-primary); letter-spacing: .12em; margin-bottom: var(--oy-space-2); } .oy-section-head h2 { margin: 0 0 var(--oy-space-3); } .oy-section-head .oy-section-lead { color: var(--oy-color-text-muted); margin: 0; } /* グリッド */ .oy-grid { display: grid; gap: var(--oy-space-6); grid-template-columns: 1fr; } .oy-grid.is-2col { grid-template-columns: repeat(2, 1fr); } .oy-grid.is-3col { grid-template-columns: repeat(3, 1fr); } .oy-grid.is-4col { grid-template-columns: repeat(4, 1fr); } /* グリッド（カラム数指定の独立クラス。.oy-grid と併用不要） */ .oy-grid-2, .oy-grid-3, .oy-grid-4 { display: grid; gap: var(--oy-space-6); } .oy-grid-2 { grid-template-columns: repeat(2, 1fr); } .oy-grid-3 { grid-template-columns: repeat(3, 1fr); } .oy-grid-4 { grid-template-columns: repeat(4, 1fr); } /* セクションタイトル単体クラス（h2 でなく div/span に付けたいときも使える） */ .oy-section-title { font-size: var(--oy-fs-h2); font-weight: 700; line-height: var(--oy-lh-heading); margin: 0 0 var(--oy-space-3); color: var(--oy-color-text); } /* ========================================================================== 4. ボタン ========================================================================== */ .oy-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 56px; padding: .8em 1.6em; font-size: var(--oy-fs-lead); font-weight: 700; line-height: 1.3; text-decoration: none; border: 2px solid transparent; border-radius: var(--oy-radius-pill); cursor: pointer; transition: background var(--oy-transition), color var(--oy-transition), border-color var(--oy-transition), transform var(--oy-transition), box-shadow var(--oy-transition); } .oy-btn:hover { transform: translateY(-1px); } .oy-btn:active { transform: translateY(0); } .oy-btn .fas, .oy-btn .far, .oy-btn .fab { font-size: 1em; } /* primary：CTA向け（差し色のオレンジ） */ .oy-btn-primary { background: var(--oy-color-accent); color: #fff; border-color: var(--oy-color-accent); box-shadow: var(--oy-shadow-sm); } .oy-btn-primary:hover, .oy-btn-primary:focus { background: var(--oy-color-accent-dark); border-color: var(--oy-color-accent-dark); color: #fff; } /* secondary：ナビ・補助動作向け（グリーン） */ .oy-btn-secondary { background: var(--oy-color-primary); color: #fff; border-color: var(--oy-color-primary); } .oy-btn-secondary:hover, .oy-btn-secondary:focus { background: var(--oy-color-primary-dark); border-color: var(--oy-color-primary-dark); color: #fff; } /* ghost：枠線のみ */ .oy-btn-ghost { background: transparent; color: var(--oy-color-primary); border-color: var(--oy-color-primary); } .oy-btn-ghost:hover, .oy-btn-ghost:focus { background: var(--oy-color-primary-soft); color: var(--oy-color-primary-dark); } /* サイズ */ .oy-btn.is-lg { min-height: 64px; font-size: 21px; padding: 1em 2em; } .oy-btn.is-block { display: flex; width: 100%; } /* ボタンを並べる汎用ラッパー（CTA下、ヒーロー、ページ末尾の導線などで使用） */ .oy-btn-group { display: flex; flex-wrap: wrap; gap: var(--oy-space-3); } .oy-btn-group.is-center { justify-content: center; } /* 子ボタンを同幅にする（PCでは横並び同幅、SPでは flex-wrap で自然に縦積み） */ .oy-btn-group.is-equal > .oy-btn { flex: 1 1 240px; min-width: 0; } /* 縦積み（ヒーロー2ボタンなど）： inline-flex でコンテナが「最も長い子ボタンの幅」に収まり、 align-items: stretch で他の子ボタンも同幅に伸びる → 「縦並び・同幅・コンパクト」が成立 */ .oy-btn-group.is-stacked { display: inline-flex; flex-direction: column; align-items: stretch; /* 兄弟と同幅に揃える */ gap: var(--oy-space-3); } /* SP は親幅いっぱいに（縦積み・幅100%）— コンテナを block レベル flex に切替 */ @media screen and (max-width: 480px) { .oy-btn-group.is-stacked { display: flex; } } /* ========================================================================== 5. カード ========================================================================== */ .oy-card { display: block; background: var(--oy-color-bg); border: 1px solid var(--oy-color-border); border-radius: var(--oy-radius-md); padding: var(--oy-space-6); box-shadow: var(--oy-shadow-sm); transition: box-shadow var(--oy-transition), transform var(--oy-transition), border-color var(--oy-transition); } a.oy-card { text-decoration: none; color: inherit; } a.oy-card:hover { box-shadow: var(--oy-shadow-md); transform: translateY(-2px); border-color: var(--oy-color-border-strong); } /* カード上部の円形アイコン枠（fa-* と組み合わせて使う） */ .oy-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--oy-space-3); background: var(--oy-color-primary-soft); color: var(--oy-color-primary); border-radius: var(--oy-radius-pill); font-size: 24px; } .oy-card-icon.is-warning { background: var(--oy-color-warning-bg); color: var(--oy-color-warning-icon); } .oy-card-icon.is-info { background: var(--oy-color-info-bg); color: var(--oy-color-info-icon); } .oy-card-icon.is-accent { background: #fff0e6; color: var(--oy-color-accent-dark); } .oy-card-title { font-size: var(--oy-fs-h4); font-weight: 700; margin: 0 0 var(--oy-space-2); color: var(--oy-color-text); } .oy-card-text { margin: 0; color: var(--oy-color-text-muted); } .oy-card-link { display: inline-flex; align-items: center; gap: .4em; margin-top: var(--oy-space-3); font-weight: 700; color: var(--oy-color-primary); text-decoration: none; } .oy-card-link:hover { color: var(--oy-color-primary-dark); } /* ナンバー付きエントリーカード（手順、特集など） */ .oy-entry-card { position: relative; background: var(--oy-color-bg); border: 1px solid var(--oy-color-border); border-radius: var(--oy-radius-md); padding: var(--oy-space-8) var(--oy-space-6) var(--oy-space-6); box-shadow: var(--oy-shadow-sm); } .oy-entry-num { position: absolute; top: -16px; left: var(--oy-space-5); display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .6em; background: var(--oy-color-primary); color: #fff; font-weight: 700; border-radius: var(--oy-radius-pill); font-size: var(--oy-fs-small); letter-spacing: .04em; } /* ラベル（カード内のミニタグ） */ .oy-label { display: inline-block; padding: .25em .8em; font-size: var(--oy-fs-tiny); font-weight: 700; border-radius: var(--oy-radius-pill); background: var(--oy-color-primary-soft); color: var(--oy-color-primary-dark); letter-spacing: .04em; } .oy-label.is-iphone { background: #eef3f8; color: #2a6fa9; } .oy-label.is-android { background: #e8f5ed; color: #2f8c5b; } .oy-label.is-new { background: #fff0e6; color: #c2511f; } /* ========================================================================== 6. 導線部品（Finder, Link list, Link card） ========================================================================== */ /* Finder：「やりたいことから探す」用の入口ブロック */ .oy-finder { background: var(--oy-color-primary-soft); border-radius: var(--oy-radius-lg); padding: var(--oy-space-8); } .oy-finder-title { margin: 0 0 var(--oy-space-5); text-align: center; } .oy-finder-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--oy-space-4); } .oy-finder-box > a { display: flex; align-items: center; gap: var(--oy-space-3); padding: var(--oy-space-4) var(--oy-space-5); background: #fff; border: 1px solid var(--oy-color-border); border-radius: var(--oy-radius-md); color: var(--oy-color-text); text-decoration: none; font-weight: 700; transition: var(--oy-transition); } .oy-finder-box > a:hover { border-color: var(--oy-color-primary); box-shadow: var(--oy-shadow-sm); color: var(--oy-color-primary-dark); } .oy-finder-box > a .fas, .oy-finder-box > a .far, .oy-finder-box > a .fab { color: var(--oy-color-primary); font-size: 1.4em; flex-shrink: 0; } /* リンク一覧 */ .oy-link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--oy-space-2); } .oy-link-list > li { margin: 0; } .oy-link-list a { display: flex; align-items: center; gap: var(--oy-space-3); padding: var(--oy-space-3) var(--oy-space-4); background: #fff; border: 1px solid var(--oy-color-border); border-radius: var(--oy-radius-sm); color: var(--oy-color-text); text-decoration: none; transition: var(--oy-transition); } .oy-link-list a::after { content: "\f054"; /* fa-chevron-right */ font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: auto; color: var(--oy-color-primary); font-size: .9em; } .oy-link-list a:hover { border-color: var(--oy-color-primary); background: var(--oy-color-primary-soft); color: var(--oy-color-primary-dark); } /* 先頭アイコン（任意） */ .oy-link-list a > .fas, .oy-link-list a > .far, .oy-link-list a > .fab { color: var(--oy-color-primary); width: 1.4em; text-align: center; flex-shrink: 0; } /* リンクカード（画像つき大きめの導線） */ .oy-link-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--oy-color-border); border-radius: var(--oy-radius-md); overflow: hidden; text-decoration: none; color: inherit; transition: var(--oy-transition); box-shadow: var(--oy-shadow-sm); } .oy-link-card:hover { box-shadow: var(--oy-shadow-md); transform: translateY(-2px); border-color: var(--oy-color-border-strong); } .oy-link-card-thumb { aspect-ratio: 16 / 9; background: var(--oy-color-bg-soft); overflow: hidden; } .oy-link-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .oy-link-card-body { padding: var(--oy-space-5); display: flex; flex-direction: column; gap: var(--oy-space-2); } .oy-link-card-title { font-size: var(--oy-fs-h4); font-weight: 700; margin: 0; } .oy-link-card-text { margin: 0; color: var(--oy-color-text-muted); } /* ========================================================================== 7. 記事一覧部品 ========================================================================== */ .oy-list-card { display: grid; gap: var(--oy-space-4); } .oy-list-item { display: grid; grid-template-columns: 160px 1fr; gap: var(--oy-space-5); padding: var(--oy-space-4); background: #fff; border: 1px solid var(--oy-color-border); border-radius: var(--oy-radius-md); text-decoration: none; color: inherit; transition: var(--oy-transition); } .oy-list-item:hover { border-color: var(--oy-color-border-strong); box-shadow: var(--oy-shadow-sm); } .oy-list-item-thumb { aspect-ratio: 16 / 9; background: var(--oy-color-bg-soft); border-radius: var(--oy-radius-sm); overflow: hidden; } .oy-list-item-thumb img { width: 100%; height: 100%; object-fit: cover; } /* サムネ枠（16:9）の中で .oy-image-placeholder（既定 4:3）を使うとはみ出して 下が切れるため、サムネ枠の中ではアスペクト比を親に揃え、装飾を簡素化 */ .oy-list-item-thumb .oy-image-placeholder { width: 100%; height: 100%; aspect-ratio: auto; /* 親の 16:9 に従う */ border: 0; /* 破線をやめてコンパクトに */ border-radius: 0; /* 親の border-radius に任せる */ padding: var(--oy-space-3); font-size: var(--oy-fs-tiny); } .oy-list-item-thumb .oy-image-placeholder .fas, .oy-list-item-thumb .oy-image-placeholder .far { font-size: 24px; /* 小さめサムネ用 */ } .oy-list-item-thumb .oy-image-placeholder small { display: none; } .oy-list-title { font-size: var(--oy-fs-h4); font-weight: 700; margin: 0 0 var(--oy-space-2); } .oy-list-text { margin: 0; color: var(--oy-color-text-muted); font-size: var(--oy-fs-small); } /* ========================================================================== 8. チップ ========================================================================== */ .oy-chip-group { display: flex; flex-wrap: wrap; gap: var(--oy-space-2); } .oy-chip { display: inline-flex; align-items: center; gap: .35em; padding: .4em 1em; font-size: var(--oy-fs-small); font-weight: 700; background: #fff; color: var(--oy-color-text); border: 1px solid var(--oy-color-border-strong); border-radius: var(--oy-radius-pill); text-decoration: none; transition: var(--oy-transition); } a.oy-chip:hover { background: var(--oy-color-primary-soft); border-color: var(--oy-color-primary); color: var(--oy-color-primary-dark); } .oy-chip.is-active { background: var(--oy-color-primary); color: #fff; border-color: var(--oy-color-primary); } /* ========================================================================== 9. 情報ボックス（info / warning / check） ========================================================================== */ .oy-info-box, .oy-warning-box, .oy-check-box { display: grid; grid-template-columns: auto 1fr; gap: var(--oy-space-4); padding: var(--oy-space-5) var(--oy-space-6); border: 1px solid; border-radius: var(--oy-radius-md); margin: 0 0 var(--oy-space-5); } .oy-info-box { background: var(--oy-color-info-bg); border-color: var(--oy-color-info-border); } .oy-warning-box { background: var(--oy-color-warning-bg); border-color: var(--oy-color-warning-border); } .oy-check-box { background: var(--oy-color-check-bg); border-color: var(--oy-color-check-border); } .oy-box-icon { display: inline-flex; align-items: flex-start; justify-content: center; font-size: 22px; line-height: 1; padding-top: .15em; } .oy-info-box .oy-box-icon { color: var(--oy-color-info-icon); } .oy-warning-box .oy-box-icon { color: var(--oy-color-warning-icon); } .oy-check-box .oy-box-icon { color: var(--oy-color-check-icon); } .oy-box-content { min-width: 0; } .oy-box-title { font-weight: 700; margin: 0 0 var(--oy-space-1); font-size: var(--oy-fs-h4); } .oy-box-text { margin: 0; color: var(--oy-color-text); } .oy-box-text + .oy-box-text { margin-top: var(--oy-space-2); } /* ========================================================================== 10. CTA ========================================================================== */ .oy-cta { background: linear-gradient(180deg, #f3faf5 0%, #e8f5ed 100%); border: 1px solid var(--oy-color-check-border); border-radius: var(--oy-radius-lg); padding: var(--oy-space-10) var(--oy-space-8); text-align: center; } .oy-cta-eyebrow { display: inline-block; font-size: var(--oy-fs-small); font-weight: 700; color: var(--oy-color-primary); letter-spacing: .12em; margin-bottom: var(--oy-space-2); } .oy-cta-title { margin: 0 0 var(--oy-space-3); font-size: var(--oy-fs-h2); } .oy-cta-text { margin: 0 auto var(--oy-space-6); max-width: 640px; color: var(--oy-color-text-muted); } .oy-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--oy-space-4); } .oy-cta-note { margin: var(--oy-space-5) 0 0; font-size: var(--oy-fs-small); color: var(--oy-color-text-light); } /* ========================================================================== 11. FAQ ========================================================================== */ .oy-faq { display: grid; gap: var(--oy-space-3); } .oy-faq-item { background: #fff; border: 1px solid var(--oy-color-border); border-radius: var(--oy-radius-md); padding: var(--oy-space-5) var(--oy-space-6); } .oy-faq-q { display: grid; grid-template-columns: auto 1fr; gap: var(--oy-space-3); align-items: start; font-size: var(--oy-fs-h4); font-weight: 700; margin: 0 0 var(--oy-space-3); color: var(--oy-color-text); } .oy-faq-q::before { content: "Q"; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--oy-radius-pill); background: var(--oy-color-primary); color: #fff; font-size: 16px; flex-shrink: 0; } .oy-faq-a { display: grid; grid-template-columns: auto 1fr; gap: var(--oy-space-3); align-items: start; margin: 0; color: var(--oy-color-text-muted); } .oy-faq-a::before { content: "A"; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--oy-radius-pill); background: var(--oy-color-accent); color: #fff; font-size: 16px; flex-shrink: 0; } /* ========================================================================== 12. サイトヘッダー ========================================================================== */ /* スキップリンク（a11y） */ .oy-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: var(--oy-space-3) var(--oy-space-4); background: var(--oy-color-primary); color: #fff; text-decoration: none; border-radius: 0 0 var(--oy-radius-sm) 0; } .oy-skip-link:focus { left: 0; color: #fff; } .oy-site-header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--oy-color-border); position: sticky; top: 0; z-index: 100; transition: box-shadow var(--oy-transition), background var(--oy-transition); backdrop-filter: saturate(160%) blur(4px); -webkit-backdrop-filter: saturate(160%) blur(4px); } /* スクロールしたら控えめな影で「浮いている」ことを示す */ .oy-site-header.is-scrolled { background: #fff; box-shadow: var(--oy-shadow-sm); } /* WordPress admin bar が出ている場合、その高さ分下げる */ body.admin-bar .oy-site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .oy-site-header { top: 46px; } } /* === 上段：ロゴ中央 === */ .oy-site-header-top { padding-top: var(--oy-space-4); padding-bottom: var(--oy-space-3); transition: padding var(--oy-transition); } .oy-site-header-top-inner { display: flex; align-items: center; justify-content: center; /* PC：ロゴ中央 */ position: relative; gap: var(--oy-space-3); } /* ブランドエリア（テキスト or ロゴ画像差し替え可） */ .oy-site-brand { display: inline-flex; flex-direction: column; align-items: center; /* テキストを中央揃え */ gap: 2px; text-decoration: none; color: var(--oy-color-text); flex-shrink: 0; } .oy-site-brand:hover { color: var(--oy-color-primary-dark); } .oy-site-brand-logo { display: block; height: 56px; /* PC通常時：ヘッダー内で自然な存在感 */ width: auto; max-width: 280px; /* 横長安全網 */ transition: height var(--oy-transition); } /* スクロール後はロゴをコンパクトに（通常時より一段小さく） */ .oy-site-header.is-scrolled .oy-site-brand-logo { height: 40px; } @media screen and (max-width: 480px) { .oy-site-brand-logo { height: 44px; max-width: 220px; } .oy-site-header.is-scrolled .oy-site-brand-logo { height: 44px; /* SP: 通常時と同じ。scroll時に変化させない */ } } .oy-site-brand-main { font-size: 24px; font-weight: 700; letter-spacing: .03em; line-height: 1.15; transition: font-size var(--oy-transition); } .oy-site-brand-sub { font-size: var(--oy-fs-tiny); color: var(--oy-color-text-muted); letter-spacing: .04em; max-height: 24px; overflow: hidden; opacity: 1; transition: max-height .25s ease, opacity .2s ease; } /* === 下段：グローバルナビ＋右CTA === */ .oy-global-nav { /* PC：通常配置で「下段」として表示 */ border-top: 1px solid var(--oy-color-border); background: transparent; } .oy-site-header-bottom-inner { display: flex; align-items: center; justify-content: center; /* ナビは中央 */ gap: var(--oy-space-4); padding-top: var(--oy-space-2); padding-bottom: var(--oy-space-3); position: relative; transition: padding var(--oy-transition); } .oy-global-nav-list { list-style: none; margin: 0; /* ul のデフォルト余白を確実に消す */ padding: 0; display: flex; align-items: center; gap: var(--oy-space-2); flex-wrap: wrap; /* PCでも余裕がない時は折り返し許可（最終フォールバック） */ } .oy-global-nav-list li { margin: 0; } .oy-global-nav-link { display: inline-flex; align-items: center; /* 縦中央 */ justify-content: center; /* 高さを CTA ボタン（44px）と揃え、フレックスで縦中央配置 */ min-height: 44px; padding: 0 var(--oy-space-3); line-height: 1.2; font-size: var(--oy-fs-base); font-weight: 700; color: var(--oy-color-text); text-decoration: none; white-space: nowrap; /* メニュー名の途中改行を防ぐ */ border-radius: var(--oy-radius-sm); transition: background var(--oy-transition), color var(--oy-transition), min-height var(--oy-transition); } .oy-global-nav-link:hover, .oy-global-nav-link:focus { background: var(--oy-color-primary-soft); color: var(--oy-color-primary-dark); } /* current-menu-item / 自前 .is-active 両対応 */ .current-menu-item > .oy-global-nav-link, .oy-global-nav-link.is-active { color: var(--oy-color-primary-dark); background: var(--oy-color-primary-soft); } /* ヘッダー右側のアクション群（検索ボタン／カートアイコン／無料ガイド CTA） */ .oy-header-actions { display: flex; align-items: center; gap: var(--oy-space-2); margin-left: auto; /* 下段ナビの右端に寄せる */ flex-shrink: 0; } /* アイコン単体ボタン（検索／カート） */ .oy-header-action { position: relative; /* バッジ用 */ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; border-radius: var(--oy-radius-pill); color: var(--oy-color-text); font-size: 18px; text-decoration: none; cursor: pointer; transition: background var(--oy-transition), color var(--oy-transition); } .oy-header-action:hover, .oy-header-action:focus-visible { background: var(--oy-color-primary-soft); color: var(--oy-color-primary-dark); } /* カートバッジ（件数）。0件時は CSS で非表示 */ .oy-header-cart-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--oy-color-accent); color: #fff; border-radius: var(--oy-radius-pill); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; } .oy-header-cart-badge[data-cart-count="0"] { display: none; } /* ヘッダーCTA（小サイズ：ナビ並び用、actions グループ内に配置） */ .oy-header-cta.oy-btn { min-height: 44px; padding: .5em 1.2em; font-size: var(--oy-fs-base); flex-shrink: 0; /* margin-left: auto は actions グループに移譲 */ transition: min-height var(--oy-transition), padding var(--oy-transition), font-size var(--oy-transition); } /* ===== 検索ドロップダウンパネル ===== */ .oy-header-search { position: absolute; top: 100%; left: 0; right: 0; z-index: 99; background: #fff; border-top: 1px solid var(--oy-color-border); border-bottom: 1px solid var(--oy-color-border); box-shadow: var(--oy-shadow-md); padding: var(--oy-space-4) 0; } .oy-header-search[hidden] { display: none; } .oy-search-form { display: flex; gap: var(--oy-space-3); width: 100%; max-width: 720px; margin: 0 auto; } .oy-search-form-label { flex: 1; display: block; margin: 0; } .oy-search-form-label-text { /* visually-hidden */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .oy-search-form-input { width: 100%; padding: var(--oy-space-3) var(--oy-space-4); font-size: var(--oy-fs-base); font-family: inherit; color: var(--oy-color-text); background: #fff; border: 1px solid var(--oy-color-border-strong); border-radius: var(--oy-radius-md); -webkit-appearance: none; appearance: none; } .oy-search-form-input:focus { outline: none; border-color: var(--oy-color-primary); box-shadow: 0 0 0 3px rgba(47, 140, 91, .18); } .oy-search-form-submit { flex-shrink: 0; min-height: 48px; padding: .5em 1.2em; font-size: var(--oy-fs-base); } /* === スクロール後のコンパクト版（.is-scrolled） === */ .oy-site-header.is-scrolled .oy-site-header-top { padding-top: var(--oy-space-2); padding-bottom: var(--oy-space-1); } .oy-site-header.is-scrolled .oy-site-brand-main { font-size: 19px; letter-spacing: .02em; } .oy-site-header.is-scrolled .oy-site-brand-sub { max-height: 0; opacity: 0; } .oy-site-header.is-scrolled .oy-site-header-bottom-inner { padding-top: var(--oy-space-1); padding-bottom: var(--oy-space-2); } .oy-site-header.is-scrolled .oy-header-cta.oy-btn { min-height: 38px; padding: .4em 1em; font-size: var(--oy-fs-small); } .oy-site-header.is-scrolled .oy-global-nav-link { /* スクロール後は CTA ボタン高さ（38px）と揃える */ min-height: 38px; } /* ハンバーガートグル（PCでは非表示） */ .oy-menu-toggle { display: none; align-items: center; gap: var(--oy-space-2); padding: var(--oy-space-2) var(--oy-space-3); background: transparent; border: 1px solid var(--oy-color-border-strong); border-radius: var(--oy-radius-sm); font-size: var(--oy-fs-base); font-weight: 700; color: var(--oy-color-text); cursor: pointer; transition: var(--oy-transition); } .oy-menu-toggle:hover { background: var(--oy-color-primary-soft); border-color: var(--oy-color-primary); color: var(--oy-color-primary-dark); } .oy-menu-toggle-icon { position: relative; display: inline-block; width: 1.2em; height: 1em; } .oy-menu-toggle-icon .fa-bars, .oy-menu-toggle-icon .fa-times { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2em; transition: opacity var(--oy-transition); } .oy-menu-toggle-icon .fa-times { opacity: 0; } .oy-menu-toggle[aria-expanded="true"] .oy-menu-toggle-icon .fa-bars { opacity: 0; } .oy-menu-toggle[aria-expanded="true"] .oy-menu-toggle-icon .fa-times { opacity: 1; } /* ========================================================================== 13. メイン領域 ========================================================================== */ .oy-main { display: block; } /* ========================================================================== 14. サイトフッター ========================================================================== */ .oy-site-footer { background: var(--oy-color-bg-section); border-top: 1px solid var(--oy-color-border); color: var(--oy-color-text); padding: var(--oy-space-16) 0 var(--oy-space-8); margin-top: var(--oy-space-16); } .oy-site-footer a { color: var(--oy-color-link); text-decoration: none; } .oy-site-footer a:hover, .oy-site-footer a:focus { color: var(--oy-color-link-hover); text-decoration: underline; } .oy-site-footer-inner { /* .oy-container と併用するため余白だけ追加で持たせる */ } .oy-site-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--oy-space-10); } .oy-site-footer-col { min-width: 0; } .oy-site-footer-brand { margin: 0 0 var(--oy-space-2); font-size: var(--oy-fs-h4); font-weight: 700; color: var(--oy-color-text); } .oy-site-footer-title { margin: 0 0 var(--oy-space-3); font-size: var(--oy-fs-h4); font-weight: 700; color: var(--oy-color-text); } .oy-site-footer-text { margin: 0; font-size: var(--oy-fs-small); color: var(--oy-color-text-muted); } .oy-site-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--oy-space-2); } .oy-site-footer-list li { margin: 0; } .oy-site-footer-list a, .oy-site-footer-link { display: inline-block; padding: 4px 0; color: var(--oy-color-text); } .oy-site-footer-list a:hover, .oy-site-footer-link:hover { color: var(--oy-color-primary-dark); } .oy-site-footer-bottom { margin-top: var(--oy-space-10); padding-top: var(--oy-space-5); border-top: 1px solid var(--oy-color-border); text-align: center; } .oy-site-footer-copy { margin: 0; font-size: var(--oy-fs-small); color: var(--oy-color-text-muted); } /* ========================================================================== 13. トップ共通ヒーロー ========================================================================== */ .oy-hero { background: linear-gradient(180deg, #f1f7f3 0%, #e8f5ed 100%); padding: var(--oy-space-16) 0 var(--oy-space-12); } /* ヒーロー専用：リード文が途中改行しない幅にゆとり */ .oy-hero .oy-container { max-width: 1140px; } .oy-hero-grid { display: grid; grid-template-columns: 1fr 560px; gap: var(--oy-space-10); align-items: stretch; } .oy-hero-main h1 { font-size: 36px; margin: 0 0 var(--oy-space-4); letter-spacing: .02em; } .oy-hero-lead { font-size: var(--oy-fs-lead); color: var(--oy-color-text-muted); margin: 0 0 var(--oy-space-6); } .oy-hero-actions { display: flex; flex-wrap: wrap; gap: var(--oy-space-3); } .oy-hero-note { margin: var(--oy-space-4) 0 0; font-size: var(--oy-fs-small); color: var(--oy-color-text-light); } .oy-hero-side { display: flex; align-items: center; /* 画像をヒーロー欄内で上下中央配置 */ justify-content: center; } .oy-hero-side img { width: 100%; height: auto; /* 12:9 を厳密に維持し、cell 内では上揃え。h1上端から自然に降りる構図に */ aspect-ratio: 12 / 9; max-height: none; object-fit: cover; object-position: center; border-radius: var(--oy-radius-lg); box-shadow: var(--oy-shadow-lg); display: block; } @media screen and (max-width: 1023px) { /* タブレット以下では縦積みになるので max-height は外して自然サイズに */ .oy-hero-side img { max-height: none; } } /* 画像プレースホルダー（実画像未確定のとき差し替え位置を視覚化） そのまま に差し替えればOK。aria-label でスクリーンリーダーにも意味を伝える。 */ .oy-image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--oy-space-2); width: 100%; aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, #f1f7f3 0 14px, #e8f5ed 14px 28px); border: 2px dashed var(--oy-color-primary); border-radius: var(--oy-radius-lg); color: var(--oy-color-primary-dark); font-weight: 700; font-size: var(--oy-fs-small); text-align: center; padding: var(--oy-space-5); } .oy-image-placeholder .fas, .oy-image-placeholder .far { font-size: 36px; color: var(--oy-color-primary); } .oy-image-placeholder small { font-weight: 400; color: var(--oy-color-text-muted); } /* ========================================================================== 固定ページ／投稿の本文（再利用前提：page.php / 将来 single.php でも使う） ========================================================================== */ /* ページヘッダー（タイトル領域） */ .oy-page-header { margin-bottom: var(--oy-space-10); padding-bottom: var(--oy-space-6); border-bottom: 1px solid var(--oy-color-border); text-align: center; } .oy-page-title { margin: 0; font-size: var(--oy-fs-h1); line-height: var(--oy-lh-heading); color: var(--oy-color-text); letter-spacing: .02em; } /* 投稿固有メタ（カテゴリ + 投稿日）— single.php の本文パネル上部で使用 本文の冒頭にカテゴリチップ＋日付を左揃えで並べ、本文への自然な導入とする */ .oy-post-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; /* 本文に合わせて左揃え */ gap: var(--oy-space-3) var(--oy-space-5); margin: 0 0 var(--oy-space-8); /* 本文との間に十分な余白 */ padding-bottom: var(--oy-space-5); border-bottom: 1px solid var(--oy-color-border); font-size: var(--oy-fs-small); color: var(--oy-color-text-muted); } .oy-post-meta-category { display: inline-flex; align-items: center; gap: .4em; padding: .25em .9em; background: var(--oy-color-primary-soft); color: var(--oy-color-primary-dark); border-radius: var(--oy-radius-pill); font-weight: 700; font-size: var(--oy-fs-tiny); letter-spacing: .04em; text-decoration: none; transition: background var(--oy-transition), color var(--oy-transition); } /* hover/focus 可読化（最重要）： global a:hover や Cocoon 由来の任意ルール、各種コンテキスト override に どこからでも勝てるよう、specificity を a.body.* レベルまで引き上げ ＋!important を全プロパティに付与。WCAG AA コントラスト 5.8。 */ .oy-post-meta-category:hover, .oy-post-meta-category:focus, .oy-post-meta-category:focus-visible, .oy-page-hero .oy-post-meta-category:hover, .oy-page-hero .oy-post-meta-category:focus, .oy-page-hero .oy-post-meta-category:focus-visible, body .oy-post-meta-category:hover, body .oy-post-meta-category:focus, body.single a.oy-post-meta-category:hover, body.single a.oy-post-meta-category:focus, body.single a.oy-post-meta-category:focus-visible, .oy-page-panel a.oy-post-meta-category:hover, .oy-page-panel a.oy-post-meta-category:focus, .oy-page-panel a.oy-post-meta-category:focus-visible, /* 新 single の構造に直撃：oy-post-meta（本文上部メタ行）の中の chip */ .oy-post-meta a.oy-post-meta-category:hover, .oy-post-meta a.oy-post-meta-category:focus, .oy-post-meta a.oy-post-meta-category:focus-visible { background: var(--oy-color-primary-dark) !important; color: #fff !important; border-color: var(--oy-color-primary-dark) !important; text-decoration: none !important; } .oy-post-meta-date { display: inline-flex; align-items: center; gap: .4em; } .oy-post-meta-date .far, .oy-post-meta-date .fas { color: var(--oy-color-text-light); } /* 記事末尾の戻り導線 — single.php で使用 */ .oy-post-footer-nav { margin-top: var(--oy-space-12); padding-top: var(--oy-space-6); border-top: 1px solid var(--oy-color-border); text-align: center; } /* ========================================================================== ページヒーロー — 下層ページ共通の帯ヘッダー archive.php / search.php / 404.php / page.php / single.php で使用。 トップページの oy-hero と同じ薄緑グラデで「サイトの続き」感を出す。 ========================================================================== */ .oy-page-hero { /* 上下を対称（48px / 48px）に。h1 が帯の上に張り付かないよう中央寄りバランス */ padding: var(--oy-space-12) 0; text-align: center; background: linear-gradient(180deg, #f1f7f3 0%, #e8f5ed 100%); } .oy-page-hero-eyebrow { display: inline-block; margin: 0 0 var(--oy-space-3); padding: .25em 1em; background: rgba(255, 255, 255, .7); color: var(--oy-color-primary); border-radius: var(--oy-radius-pill); font-size: var(--oy-fs-small); font-weight: 700; letter-spacing: .14em; } .oy-page-hero-title { /* 帯内で h1 だけが置かれるケース（page / single / archive）で上下が対称になるよう h1 の bottom margin はゼロに。description が続く場合は description 側で margin-top を持たせる */ margin: 0; font-size: var(--oy-fs-h1); line-height: var(--oy-lh-heading); color: var(--oy-color-text); letter-spacing: .02em; } /* description が h1 の下に続く場合のみ、上にスペースを確保 */ .oy-page-hero-title + .oy-page-hero-description { margin-top: var(--oy-space-4); } .oy-page-hero-description { margin: 0 auto; max-width: 680px; color: var(--oy-color-text-muted); font-size: var(--oy-fs-base); line-height: var(--oy-lh-base); } .oy-page-hero-description p { margin: 0; } .oy-page-hero-description p + p { margin-top: var(--oy-space-2); } .oy-page-hero-count { display: inline-block; margin-top: var(--oy-space-3); padding: .2em 1em; background: rgba(255, 255, 255, .8); border: 1px solid var(--oy-color-border); border-radius: var(--oy-radius-pill); font-size: var(--oy-fs-small); color: var(--oy-color-text-muted); } .oy-page-hero-count strong { color: var(--oy-color-primary-dark); margin: 0 .15em; } /* （旧 single.php の hero メタ用クラスは削除済み。本文上部メタは .oy-post-meta を使う） */ /* SP：ヒーローの上下余白を圧縮 */ @media screen and (max-width: 834px) { .oy-page-hero { padding: var(--oy-space-8) 0 var(--oy-space-6); } } /* ========================================================================== ページパネル — page.php / single.php で本文を白いカードに収める 外側はトップページに近い 1080px の広いシェル（薄緑）。 その中に白パネル（角丸＋薄い枠線＋十分な padding）。 さらにその中に oy-reading-inner で読みやすい本文幅（920px）。 ========================================================================== */ .oy-page-panel { background: #fff; border: 1px solid var(--oy-color-border); border-radius: var(--oy-radius-lg); box-shadow: var(--oy-shadow-sm); /* たっぷり padding でしょぼさを消す */ padding: var(--oy-space-16) var(--oy-space-12); } .oy-reading-inner { max-width: var(--oy-container-reading); margin-left: auto; margin-right: auto; } /* SP のパネル padding 圧縮 */ @media screen and (max-width: 834px) { .oy-page-panel { padding: var(--oy-space-10) var(--oy-space-6); } } @media screen and (max-width: 480px) { .oy-page-panel { padding: var(--oy-space-8) var(--oy-space-4); border-radius: var(--oy-radius-md); } } /* ========================================================================== サムネ無し時のフォールバック絵（プレースホルダ感ゼロの「意図ある絵」） archive.php / search.php のカードで使う ========================================================================== */ .oy-thumb-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #e8f5ed 0%, #c5e6d2 50%, #a9d8bb 100%); color: #fff; } .oy-thumb-fallback i { font-size: 42px; opacity: .9; filter: drop-shadow(0 1px 2px rgba(0,0,0,.08)); } /* ========================================================================== アーカイブ／検索カード一覧（oy-link-card のグリッドで使う） 既存 .oy-link-card / .oy-link-card-thumb / .oy-link-card-body を流用しつつ、 メタ（カテゴリラベル＋日付）の余白を整える。 ========================================================================== */ .oy-link-card-body .oy-label { align-self: flex-start; margin-bottom: var(--oy-space-1); } .oy-link-card-meta { margin: var(--oy-space-2) 0 0; padding-top: var(--oy-space-3); border-top: 1px solid var(--oy-color-border); font-size: var(--oy-fs-tiny); color: var(--oy-color-text-light); } .oy-link-card-meta time { display: inline-flex; align-items: center; gap: .35em; } /* card の本文をやや増しの行間で読みやすく */ .oy-link-card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; line-height: 1.7; } /* PC: 1023px 以下のタブレットで .oy-grid-3 を 2カラムに（archive を綺麗に見せる） */ @media screen and (max-width: 1023px) and (min-width: 835px) { .oy-grid-3 { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== アーカイブ／検索／404 共通（再利用前提：archive.php / search.php / 404.php） ========================================================================== */ /* アーカイブヘッダー（カテゴリ名・説明） */ .oy-archive-eyebrow { display: inline-block; margin: 0 0 var(--oy-space-2); font-size: var(--oy-fs-small); font-weight: 700; color: var(--oy-color-primary); letter-spacing: .12em; } .oy-archive-description { margin-top: var(--oy-space-4); color: var(--oy-color-text-muted); font-size: var(--oy-fs-base); line-height: var(--oy-lh-base); } .oy-archive-description p { margin: 0; } .oy-archive-description p + p { margin-top: var(--oy-space-2); } /* リスト項目内のボディ（archive.php / search.php） */ .oy-list-item-body { display: flex; flex-direction: column; gap: var(--oy-space-2); min-width: 0; justify-content: center; } .oy-list-item-body .oy-list-title { margin: 0; } .oy-list-item-body .oy-label { align-self: flex-start; } .oy-list-item-body .oy-list-text { margin: 0; } .oy-list-meta { margin: var(--oy-space-1) 0 0; font-size: var(--oy-fs-tiny); color: var(--oy-color-text-light); } .oy-list-meta time { display: inline-flex; align-items: center; gap: .35em; } /* ========================================================================== WooCommerce 商品ページのヘッダーロゴ肥大化対策 ---------------------------------------------------------------------------- 本サイトはテキストロゴ（.oy-site-brand-*）運用だが、.single-product 文脈で 親テーマ／WooCommerce／関連プラグイン由来の CSS が画像ロゴ系クラスを 膨張させる事象を確認したため、子テーマ側で防御。 実セレクタは DevTools で確認推奨。下記は WooCommerce／Cocoon／一般的な 命名（custom-logo / site-logo / header-logo）を網羅した安全網。 親テーマ／WC プラグイン CSS を上書きするため !important が必須。 ========================================================================== */ /* 画像ロゴ系：WooCommerce 関連ページで出現しうる全ロゴ画像クラスをサイズキャップ - .single-product / .woocommerce-cart / .woocommerce-checkout / .woocommerce-page を網羅 - 当サイトの実ロゴは .oy-site-brand-logo（高さ44px）。それを基準に強制 */ body.single-product .oy-site-header img, body.single-product .oy-site-brand-logo, body.single-product .custom-logo, body.single-product .custom-logo-link img, body.single-product .site-logo img, body.single-product .header-logo img, body.single-product .logo-image img, body.woocommerce-cart .oy-site-header img, body.woocommerce-cart .oy-site-brand-logo, body.woocommerce-cart .custom-logo, body.woocommerce-checkout .oy-site-header img, body.woocommerce-checkout .oy-site-brand-logo, body.woocommerce-checkout .custom-logo, body.woocommerce-page .oy-site-header img, body.woocommerce-page .oy-site-brand-logo, body.woocommerce-page .custom-logo { max-width: 280px !important; max-height: 56px !important; height: 56px !important; width: auto !important; } /* テキストロゴ safety net：WooCommerce 文脈で .oy-site-brand-main が 膨張するルールがあっても基準サイズに戻す */ body.single-product .oy-site-brand-main, body.woocommerce-cart .oy-site-brand-main, body.woocommerce-checkout .oy-site-brand-main, body.woocommerce-page .oy-site-brand-main { font-size: 24px !important; line-height: 1.15 !important; } body.single-product .oy-site-brand-sub, body.woocommerce-cart .oy-site-brand-sub, body.woocommerce-checkout .oy-site-brand-sub, body.woocommerce-page .oy-site-brand-sub { font-size: var(--oy-fs-tiny) !important; } /* スクロール後コンパクト時のテキストロゴサイズも WooCommerce ページで強制 */ body.single-product .oy-site-header.is-scrolled .oy-site-brand-main, body.woocommerce-cart .oy-site-header.is-scrolled .oy-site-brand-main, body.woocommerce-checkout .oy-site-header.is-scrolled .oy-site-brand-main, body.woocommerce-page .oy-site-header.is-scrolled .oy-site-brand-main { font-size: 19px !important; } /* SP 表示：ロゴをさらに小さく */ @media screen and (max-width: 480px) { body.single-product .oy-site-header img, body.single-product .oy-site-brand-logo, body.single-product .custom-logo, body.single-product .custom-logo-link img, body.single-product .site-logo img, body.single-product .header-logo img, body.single-product .logo-image img, body.woocommerce-cart .oy-site-header img, body.woocommerce-cart .oy-site-brand-logo, body.woocommerce-cart .custom-logo, body.woocommerce-checkout .oy-site-header img, body.woocommerce-checkout .oy-site-brand-logo, body.woocommerce-checkout .custom-logo, body.woocommerce-page .oy-site-header img, body.woocommerce-page .oy-site-brand-logo, body.woocommerce-page .custom-logo { max-width: 220px !important; max-height: 44px !important; height: 44px !important; } body.single-product .oy-site-brand-main, body.woocommerce-cart .oy-site-brand-main, body.woocommerce-checkout .oy-site-brand-main, body.woocommerce-page .oy-site-brand-main { font-size: 19px !important; } } /* ========================================================================== WooCommerce 商品画像（ギャラリー）の表示調整 ---------------------------------------------------------------------------- - 高さ固定でアスペクト比が崩れる事象を防ぐ - width: 100% / height: auto で画像本来の比率を維持 - object-fit でクロップしない - 虫眼鏡ズームUI（.woocommerce-product-gallery__trigger）を非表示 ========================================================================== */ .woocommerce-product-gallery, .woocommerce-product-gallery__wrapper, .woocommerce-product-gallery__image { height: auto !important; } .woocommerce-product-gallery__image img, .woocommerce div.product .woocommerce-product-gallery img, .woocommerce-product-gallery img { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; object-fit: initial !important; object-position: initial !important; } /* ズームの虫眼鏡UI（虫眼鏡アイコン）を非表示 — functions.php で theme_support を剥がしているので元から出ないが、念のため CSS でも閉鎖 */ .woocommerce-product-gallery__trigger { display: none !important; } /* ライトボックス無効化に伴い、ギャラリー画像をリンクとして無効化 */ .woocommerce-product-gallery__image > a { pointer-events: none; cursor: default; } /* 記事ゼロ件ステート */ .oy-archive-empty { text-align: center; padding: var(--oy-space-12) var(--oy-space-5); background: var(--oy-color-bg-section); border: 1px solid var(--oy-color-border); border-radius: var(--oy-radius-md); } .oy-archive-empty-title { margin: 0 0 var(--oy-space-2); font-weight: 700; font-size: var(--oy-fs-h4); } .oy-archive-empty-text { margin: 0 0 var(--oy-space-5); color: var(--oy-color-text-muted); } /* ページネーション */ .oy-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--oy-space-2); margin-top: var(--oy-space-12); padding-top: var(--oy-space-6); border-top: 1px solid var(--oy-color-border); } .oy-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-width: 44px; min-height: 44px; padding: 0 var(--oy-space-3); background: #fff; color: var(--oy-color-text); border: 1px solid var(--oy-color-border); border-radius: var(--oy-radius-sm); text-decoration: none; font-weight: 700; font-size: var(--oy-fs-base); transition: background var(--oy-transition), border-color var(--oy-transition), color var(--oy-transition); } .oy-pagination .page-numbers:hover, .oy-pagination .page-numbers:focus-visible { border-color: var(--oy-color-primary); background: var(--oy-color-primary-soft); color: var(--oy-color-primary-dark); } .oy-pagination .page-numbers.current { background: var(--oy-color-primary); border-color: var(--oy-color-primary); color: #fff; } .oy-pagination .page-numbers.dots { border-color: transparent; background: transparent; cursor: default; } .oy-pagination .prev, .oy-pagination .next { padding: 0 var(--oy-space-4); } /* 検索フォーム */ .oy-search-form { display: flex; flex-wrap: wrap; gap: var(--oy-space-2); margin: var(--oy-space-5) auto 0; max-width: 560px; } .oy-search-form-input { flex: 1 1 240px; min-height: 48px; padding: 0 var(--oy-space-4); border: 1px solid var(--oy-color-border-strong); border-radius: var(--oy-radius-sm); font-size: var(--oy-fs-base); background: #fff; color: var(--oy-color-text); font-family: inherit; } .oy-search-form-input:focus { outline: none; border-color: var(--oy-color-primary); box-shadow: 0 0 0 3px rgba(47, 140, 91, .2); } .oy-search-form-submit.oy-btn { flex-shrink: 0; min-height: 48px; padding: 0 var(--oy-space-5); font-size: var(--oy-fs-base); } /* visually-hidden（スクリーンリーダー専用） */ .oy-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 本文ラッパー（"prose"） WordPress 本文の