/* ========================================================== common.css — 全ページ共通スタイル ========================================================== */ /* ---------------------------------------------------------- カラー変数 ---------------------------------------------------------- */ :root { --color-accent: #ea3341; --color-text: #333333; --color-text-light: #666666; --color-text-muted: #999999; --color-bg-white: #ffffff; --color-bg-gray: #f5f5f5; --color-border: #e5e7eb; --font-base: 'Noto Sans JP', sans-serif; } /* ---------------------------------------------------------- 親テーマ（Twenty Twenty-One）インラインCSS上書き ※ WordPress親テーマが 末尾で `font-family: sans-serif` を強制するため、 同じセレクタを !important で再宣言して上書きする ---------------------------------------------------------- */ body, input, textarea, button, .button, .faux-button, .wp-block-button__link, .wp-block-file__button, .has-drop-cap:not(:focus)::first-letter, .entry-content .wp-block-archives, .entry-content .wp-block-categories, .entry-content .wp-block-cover-image, .entry-content .wp-block-latest-comments, .entry-content .wp-block-latest-posts, .entry-content .wp-block-pullquote, .entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large, .entry-content .wp-block-archives *, .entry-content .wp-block-categories *, .entry-content .wp-block-latest-posts *, .entry-content .wp-block-latest-comments *, .entry-content p, .entry-content ol, .entry-content ul, .entry-content dl, .entry-content dt, .entry-content cite, .entry-content figcaption, .entry-content .wp-caption-text, .comment-content p, .comment-content ol, .comment-content ul, .comment-content dl, .comment-content dt, .comment-content cite, .comment-content figcaption, .comment-content .wp-caption-text, .widget_text p, .widget_text ol, .widget_text ul, .widget_text dl, .widget_text dt, .widget-content .rssSummary, .widget-content cite, .widget-content figcaption, .widget-content .wp-caption-text { font-family: var(--font-base) !important; } /* ---------------------------------------------------------- リセット・基本設定 ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-base); color: var(--color-text); background-color: var(--color-bg-white); overflow-x: hidden; line-height: 1.7; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ---------------------------------------------------------- 共通コンテナ ---------------------------------------------------------- */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 2rem; } .container--narrow { max-width: 800px; } @media (max-width: 768px) { .container { padding-inline: 1.25rem; } } /*------------------------------------ 改行制御ユーティリティ ------------------------------------*/ .br-sp { display: block; } .br-pc { display: none; } @media (min-width: 1024px) { .br-sp { display: none; } .br-pc { display: block; } } /* ---------------------------------------------------------- セクション共通 ---------------------------------------------------------- */ .section { padding-block: 8rem; } .section--white { background-color: var(--color-bg-white); } .section--gray { background-color: var(--color-bg-gray); } .section--red { background-color: var(--color-accent); } .section--overflow { overflow: hidden; } @media (max-width: 768px) { .section { padding-block: 5rem; } } /* ---------------------------------------------------------- セクション見出し（共通パターン） ---------------------------------------------------------- */ .section-head { text-align: center; margin-bottom: 2.5rem; } @media (min-width: 768px) { .section-head { margin-bottom: 4rem; } } .section-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.75rem; } .section-title { font-size: 1.25rem; font-weight: 700; line-height: 1.4; color: var(--color-text); } @media (min-width: 768px) { .section-title { font-size: 2.25rem; } } /* 背景装飾テキスト（コンセプトセクション等） */ .section-bg-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(8rem, 18vw, 20rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; color: var(--color-bg-gray); opacity: 0.4; user-select: none; pointer-events: none; white-space: nowrap; z-index: 0; } /* ---------------------------------------------------------- ヘッダー ---------------------------------------------------------- */ #main-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding-block: 0.75rem; transition: padding 0.4s ease, background-color 0.4s ease; background-color: #fff; } #main-header.scrolled { padding-block: 0.5rem; } .header-inner { max-width: 1200px; margin-inline: auto; padding-inline: 2rem; display: flex; justify-content: space-between; align-items: center; } .header-logo { display: block; width: 12rem; position: relative; z-index: 110; } .header-logo-img { width: 100%; transition: transform 0.3s ease; } .header-actions { display: flex; align-items: center; gap: 2rem; position: relative; z-index: 110; } /* ヘッダー：お問い合わせボタン（PC のみ） */ .btn-contact-header { display: none; align-items: center; gap: 0.5rem; background-color: var(--color-accent); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 0.75rem 2rem; border-radius: 9999px; transition: opacity 0.2s ease; box-shadow: 0 8px 20px rgba(234, 51, 65, 0.2); } .btn-contact-header:hover { opacity: 0.9; } @media (min-width: 768px) { .btn-contact-header { display: flex; } .header-logo { width: 14rem; } } @media (max-width: 768px) { .header-inner { padding-inline: 1.25rem; } } /* ---------------------------------------------------------- ハンバーガーボタン ---------------------------------------------------------- */ .hamburger { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; } /* [fix] iOS Safari の opacity トランジション不具合対策： visibility を追加し、GPU レイヤー合成のタイミングズレを回避 */ .hamburger span { display: block; width: 2rem; height: 2px; background-color: var(--color-text); transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; } #main-header.scrolled .hamburger span { background-color: var(--color-text); } /* ×アイコンへ変形 */ #menu-toggle.open span:nth-child(1) { transform: translateY(calc(0.5rem + 2px)) rotate(45deg); background-color: var(--color-text); } /* [fix] opacity だけでなく transform・visibility も併用して iOS Safari での描画漏れを防ぐ */ #menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); visibility: hidden; } #menu-toggle.open span:nth-child(3) { transform: translateY(calc(-0.5rem - 2px)) rotate(-45deg); background-color: var(--color-text); } /* ---------------------------------------------------------- モバイルメニュー ---------------------------------------------------------- */ #mobile-menu { position: fixed; inset: 0; z-index: 90; background-color: rgba(255, 255, 255, 0.98); display: flex; justify-content: flex-end; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } #mobile-menu.open { opacity: 1; visibility: visible; } .menu-inner { width: 100%; max-width: 500px; padding: 2rem 4rem; text-align: right; transform: translateX(30px); transition: transform 0.5s ease; } #mobile-menu.open .menu-inner { transform: translateX(0); } .menu-nav { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; } .mobile-link { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 700; color: var(--color-text); transition: color 0.2s ease; } .mobile-link:hover { color: var(--color-accent); } .mobile-link--accent { color: var(--color-accent); } .mobile-link--accent:hover { opacity: 0.7; } .mobile-link--small { font-size: 0.875rem; color: var(--color-text-muted); } .menu-sub { padding-top: 2rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: flex-end; gap: 1.25rem; } .menu-social { display: flex; justify-content: flex-end; gap: 1rem; } .menu-social-link { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid var(--color-border); color: var(--color-text-muted); transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .menu-social-link:hover { color: #fff; border-color: #cc2366; background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } @media (max-width: 768px) { .menu-inner { padding: 2rem; } } /* ---------------------------------------------------------- フェードインアニメーション ---------------------------------------------------------- */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ---------------------------------------------------------- アコーディオン（共通） ---------------------------------------------------------- */ summary::-webkit-details-marker { display: none; } summary { list-style: none; } /* ---------------------------------------------------------- 固定ページ共通：ページヒーロー ---------------------------------------------------------- */ #page-hero { margin-top: 4rem; /* ヘッダー高さ分オフセット */ background: linear-gradient(135deg, var(--color-accent) 0%, #c0192a 100%); padding: 5rem 0 4rem; text-align: center; color: #fff; position: relative; overflow: hidden; } #page-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='4' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E") repeat; } .page-hero-inner { position: relative; z-index: 1; } .page-hero-en { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.75rem; } .page-hero-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 900; line-height: 1.3; } .page-hero-sub { margin-top: 0.75rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); } @media (max-width: 768px) { #page-hero { padding: 4rem 0 3rem; } } /* ---------------------------------------------------------- 固定ページ共通：パンくずリスト（All in One SEO Pro対応） ※ AIOSEO は