/* ============================================================
社長プロ名鑑 — 共通スタイル（style.css）
全ページ共通。WordPress テーマの style.css に記述。
フォント読み込み（functions.php の wp_enqueue_scripts で対応）:
https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700
&family=Noto+Sans+JP:wght@300;400;500
&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400
&display=swap
============================================================ */
/* ============================================================
CSS 変数
============================================================ */
:root {
--navy: #0F3460;
--navy-deep: #071828;
--navy-mid: #164080;
--navy-light: #2050A0;
--gold: #4A7EC7;
--gold-light: #8AB0E0;
--gold-pale: #E8F0FB;
--gray-dark: #000000;
--gray-mid: #6b6b6b;
--gray-light: #acacac;
--off-white: #F0F6FF;
--white: #ffffff;
--border: rgba(15, 52, 96, 0.1);
--border-gold: rgba(74, 126, 199, 0.25);
--content-w: 1200px;
--transition: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 900px) {
:root {
--content-w: 860px;
}
}
/* ============================================================
CSS 変数 — professional・inheritance 系ページ用の配色
header-professional.php / header-inheritance.php が
を出力し、ここで上書きする。
============================================================ */
body.pro-theme {
--navy: #1a2744;
--navy-deep: #0e1829;
--navy-mid: #243156;
--navy-light: #2d3e6e;
--gold: #b8986a;
--gold-light: #d4b483;
--gold-pale: #f5ede0;
--off-white: #f8f7f4;
--border: rgba(26, 39, 68, 0.1);
--border-gold: rgba(184, 152, 106, 0.25);
}
/* ============================================================
ユーティリティ
.arrow-hover → 親要素をhoverすると矢印(→)が右にスライド
使い方: →
.btn-arrow → 親要素をhoverするとバー矢印が伸びる（ボタン共通）
使い方:
色は currentColor を継承。個別に color で上書き可。
============================================================ */
.arrow-hover {
display: inline-block;
transition: transform 0.2s;
}
a:hover .arrow-hover {
transform: translateX(3px);
}
.btn-arrow {
width: 28px;
height: 1px;
background: currentColor;
position: relative;
display: inline-block;
transition: width 0.3s;
flex-shrink: 0;
}
.btn-arrow::after {
content: '';
position: absolute;
right: 0;
top: -3px;
width: 7px;
height: 7px;
border-right: 1px solid currentColor;
border-top: 1px solid currentColor;
transform: rotate(45deg);
}
a:hover .btn-arrow {
width: 36px;
}
/* ============================================================
リセット
============================================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
font-family: 'Noto Sans JP', sans-serif;
background: var(--off-white);
color: var(--gray-dark);
font-weight: 300;
line-height: 1.8;
overflow-x: hidden;
}
img {
height: auto;
max-width: 100%;
}
/* ============================================================
HEADER
============================================================ */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 300;
height: 72px;
padding: 0 48px;
display: flex;
align-items: center;
justify-content: space-between;
transition: background 0.5s var(--transition), box-shadow 0.5s var(--transition);
}
/* 透明状態（トップページヒーロー上） */
header.transparent {
background: transparent;
}
/* スクロール後 / 記事・固定ページ */
header.scrolled,
header.solid {
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 1px 0 var(--border);
}
/* ロゴ */
.logo {
display: flex;
align-items: baseline;
gap: 10px;
text-decoration: none;
}
.logo-jp {
font-family: 'Noto Serif JP', serif;
font-size: 18px;
font-weight: 500;
color: var(--navy);
letter-spacing: 0.1em;
transition: color 0.4s;
}
.logo-en {
font-family: 'Cormorant Garamond', serif;
font-size: 11px;
font-weight: 300;
letter-spacing: 0.3em;
color: var(--gold);
text-transform: uppercase;
}
/* 透明ヘッダー時のロゴ色 */
header.transparent .logo-jp {
color: var(--white);
}
/* ナビゲーション */
nav {
display: flex;
align-items: center;
gap: 40px;
}
nav a {
font-size: 13px;
font-weight: 400;
letter-spacing: 0.08em;
text-decoration: none;
color: var(--gray-mid);
transition: color 0.3s;
position: relative;
}
nav a:not(.sp-nav-item)::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: var(--gold);
transition: width 0.3s var(--transition);
}
nav a:not(.sp-nav-item):hover {
color: var(--navy);
}
nav a:not(.sp-nav-item):hover::after {
width: 100%;
}
/* 透明ヘッダー時のナビ */
header.transparent nav a {
color: rgba(255, 255, 255, 0.75);
}
header.transparent nav a:hover {
color: var(--white);
}
/* お問い合わせボタン */
nav a.nav-contact {
color: var(--navy);
border: 1px solid rgba(26, 39, 68, 0.3);
padding: 8px 20px;
font-size: 12px;
letter-spacing: 0.1em;
transition: background 0.3s, color 0.3s, border-color 0.3s;
display: inline-flex;
align-items: center;
gap: 6px;
}
nav a.nav-contact .icon-inquiry {
display: inline-block;
width: 14px;
height: 14px;
background: url(../../uploads/icon_mail_color.svg) no-repeat center / contain;
transition: background-image 0.3s;
flex-shrink: 0;
}
nav a.nav-contact:hover .icon-inquiry {
background-image: url(../../uploads/icon_mail_white.svg);
}
header.transparent nav a.nav-contact .icon-inquiry {
background-image: url(../../uploads/icon_mail_white.svg);
}
nav a.nav-contact::after {
display: none;
}
nav a.nav-contact:hover {
background: var(--navy);
color: var(--white);
border-color: var(--navy);
}
header.transparent nav a.nav-contact {
color: rgba(255, 255, 255, 0.85);
border-color: rgba(255, 255, 255, 0.3);
}
header.transparent nav a.nav-contact:hover {
background: rgba(255, 255, 255, 0.15);
color: var(--white);
}
/* ============================================================
BREADCRUMB
============================================================ */
.breadcrumb,
.rank-math-breadcrumb {
display: block;
margin-top: 72px;
padding: 18px 0;
border-bottom: 1px solid var(--border);
background: var(--white);
}
.breadcrumb-inner,
.rank-math-breadcrumb > p {
max-width: 1200px;
margin: 0 auto;
padding: 0 48px;
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--gray-light);
letter-spacing: 0.06em;
}
.breadcrumb a,
.rank-math-breadcrumb a,
.rank-math-breadcrumb span {
font-size: 12px;
font-weight: 300;
color: var(--gray-light);
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb a:hover,
.rank-math-breadcrumb a:hover {
color: var(--navy);
}
.breadcrumb-sep,
.rank-math-breadcrumb .separator {
color: var(--border);
}
.rank-math-breadcrumb a::after {
display: none;
}
/* ============================================================
CONTAINER
============================================================ */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 48px;
}
/* ============================================================
SECTION 共通ラベル・タイトル
============================================================ */
.section-label {
font-family: 'Cormorant Garamond', serif;
font-size: 11px;
letter-spacing: 0.4em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 16px;
display: block;
}
.section-title {
font-family: 'Noto Serif JP', serif;
font-size: clamp(24px, 3vw, 36px);
font-weight: 400;
color: var(--navy);
letter-spacing: 0.08em;
line-height: 1.5;
margin-bottom: 16px;
}
.section-subtitle {
font-size: 13.5px;
color: var(--gray-mid);
line-height: 2;
letter-spacing: 0.04em;
max-width: 560px;
font-weight: 300;
}
/* ============================================================
SCROLL REVEAL
============================================================ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s var(--transition), transform 0.7s var(--transition);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-d1 {
transition-delay: 0.1s;
}
.reveal-d2 {
transition-delay: 0.2s;
}
.reveal-d3 {
transition-delay: 0.3s;
}
.reveal-d4 {
transition-delay: 0.4s;
}
/* ============================================================
FOOTER
============================================================ */
footer {
background: #0c1420;
padding: 72px 0 40px;
}
.footer-top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
padding: 0 0px 56px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 40px;
}
.footer-brand .logo {
display: inline-flex;
gap: 10px;
align-items: baseline;
}
.footer-brand .logo-jp {
color: rgba(255, 255, 255, 0.8);
}
.footer-brand .logo-en {
color: var(--gold);
}
.footer-brand-text {
font-size: 15px;
color: rgba(255, 255, 255, 0.7);
line-height: 2;
font-weight: 300;
margin-top: 20px;
max-width: 280px;
letter-spacing: 0.04em;
}
.footer-col-title {
font-family: 'Cormorant Garamond', serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 22px;
}
.footer-nav {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-nav a {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
letter-spacing: 0.06em;
transition: color 0.2s;
}
.footer-nav a:hover {
color: rgba(255, 255, 255, 0.9);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}
.copyright {
font-family: 'Cormorant Garamond', serif;
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.1em;
}
.footer-policy {
display: flex;
gap: 28px;
}
.footer-policy a {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
letter-spacing: 0.08em;
transition: color 0.2s;
}
.footer-policy a:hover {
color: rgba(255, 255, 255, 0.9);
}
/* ============================================================
PAGE HERO
============================================================ */
.page-hero {
background: var(--navy);
padding: 72px 48px 64px;
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(184, 152, 106, 0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.page-hero-label {
font-family: 'Cormorant Garamond', serif;
font-size: 11px;
letter-spacing: 0.4em;
color: var(--gold);
text-transform: uppercase;
display: block;
margin-bottom: 18px;
}
/* ページタイトル h1 */
.page-title,
.entry-title {
font-family: 'Noto Serif JP', serif;
font-size: clamp(26px, 3.5vw, 42px);
font-weight: 500;
color: var(--white);
letter-spacing: 0.1em;
line-height: 1.5;
margin-bottom: 20px;
}
.page-title-deco {
width: 40px;
height: 1px;
background: var(--gold);
margin: 0 auto;
opacity: 0.6;
}
/* ============================================================
MAIN LAYOUT
============================================================ */
.page-wrap {
max-width: var(--content-w);
margin: 0 auto;
padding: 72px 48px 120px;
}
.category-footer {
display: flex;
justify-content: center;
margin-top: 56px;
}
/* ============================================================
SP MENU（ハンバーガー＋ドロワー）
============================================================ */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
z-index: 300;
position: absolute;
right: 8px;
}
.hamburger span {
display: block;
width: 24px;
height: 1px;
background: var(--navy);
transition: transform 0.35s var(--transition), opacity 0.25s;
transform-origin: center;
}
header.transparent .hamburger span {
background: var(--white);
}
.hamburger.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.sp-menu {
display: none;
position: fixed;
inset: 0;
background: var(--white);
z-index: 250;
padding-top: 72px;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.4s var(--transition);
}
.sp-menu.is-open {
transform: translateX(0);
}
.sp-nav {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.sp-nav-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
font-family: 'Noto Serif JP', serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--navy);
text-decoration: none;
border-bottom: 1px solid var(--border);
transition: background 0.2s;
}
.sp-nav-item:first-child {
border-top: 1px solid var(--border);
}
.sp-nav-item svg {
color: var(--gray-light);
flex-shrink: 0;
}
.sp-nav-item:active {
background: var(--off-white);
}
/* ============================================================
RESPONSIVE 共通
============================================================ */
@media (max-width: 900px) {
.section-title {
margin-bottom: 0;
}
header {
padding: 0 24px;
}
nav {
display: none;
}
.hamburger {
display: flex;
}
.sp-menu {
display: block;
}
.container {
padding: 0 20px;
}
.footer-top {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 0px 40px;
}
.footer-brand-text {
max-width: 100%;
}
.footer-bottom {
flex-direction: column;
gap: 16px;
text-align: center;
}
.breadcrumb-inner,
.rank-math-breadcrumb > p {
padding: 0 24px;
flex-wrap: nowrap;
overflow: hidden;
}
.rank-math-breadcrumb span:last-child,
.rank-math-breadcrumb a:last-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
}
.rank-math-breadcrumb a:not(:last-child),
.rank-math-breadcrumb .separator {
flex-shrink: 0;
white-space: nowrap;
}
}
/* ============================================================
EXPERTS SECTION
============================================================ */
.experts-section {
background: var(--white);
padding: 100px 0 120px;
}
.filter-bar {
display: flex;
align-items: center;
gap: 8px;
margin: 48px 0 56px;
flex-wrap: wrap;
}
.filter-btn {
padding: 8px 22px;
border: 1px solid var(--border);
background: transparent;
font-family: "Noto Sans JP", sans-serif;
font-size: 15px;
font-weight: 400;
color: var(--gray-mid);
letter-spacing: 0.06em;
cursor: pointer;
transition: all 0.3s var(--transition);
}
.filter-btn.active,
.filter-btn:hover {
background: var(--navy);
color: var(--white);
border-color: var(--navy);
}
/* ============================
EXPERT LIST（リスト型 2列）
============================= */
.experts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.expert-card {
position: relative;
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
gap: 28px;
padding: 28px 32px;
padding-right: 56px;
background: var(--white);
border-bottom: 1px solid var(--border);
opacity: 0;
transform: translateY(20px);
transition: background 0.3s var(--transition), opacity 0.5s, transform 0.5s var(--transition);
}
/* 右端矢印 */
.expert-card::after {
content: '';
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 1px;
background: var(--gold);
transition: width 0.3s var(--transition);
}
.expert-card::before {
content: '';
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 7px;
height: 7px;
border-right: 1px solid var(--gold);
border-top: 1px solid var(--gold);
}
.expert-card:hover::after {
width: 28px;
}
.expert-card.visible {
opacity: 1;
transform: translateY(0);
}
.expert-card:hover {
background: var(--gold-pale);
transform: translateY(0);
box-shadow: none;
}
.card-photo {
width: 72px;
height: 72px;
flex-shrink: 0;
overflow: hidden;
background: #e8e6e0;
position: relative;
border-radius: 50%;
}
.card-photo-inner {
width: 100%;
height: 100%;
background: linear-gradient(150deg, #d4cfc6 0%, #c8c3b8 100%);
position: relative;
transition: transform 0.7s var(--transition);
}
.expert-card:hover .card-photo-inner {
transform: scale(1.06);
}
.card-photo-inner img {
object-fit: cover;
height: 100%;
width: auto;
z-index: 1;
position: relative;
}
.card-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(26, 39, 68, 0.2) 0%, transparent 50%);
pointer-events: none;
}
/* .card-badge 削除済み */
.card-body {
flex: 1;
min-width: 0;
}
.card-name {
font-family: "Noto Serif JP", serif;
font-size: 18px;
font-weight: 500;
color: var(--navy);
letter-spacing: 0.1em;
margin-bottom: 3px;
}
.card-office {
font-size: 12px;
color: var(--gray-light);
letter-spacing: 0.05em;
}
.card-message {
display: none;
}
.card-link {
display: none;
}
.card-link-arrow {
width: 24px;
height: 1px;
background: var(--gold);
position: relative;
transition: width 0.3s;
}
.card-link-arrow::after {
content: '';
position: absolute;
right: 0;
top: -3px;
width: 6px;
height: 6px;
border-right: 1px solid var(--gold);
border-top: 1px solid var(--gold);
transform: rotate(45deg);
}
.expert-card:hover .card-link-arrow {
width: 36px;
}
/* experts header */
.experts-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.experts-header .section-title {
margin-bottom: 0;
}
.experts-header-right {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: var(--navy);
text-decoration: none;
letter-spacing: 0.1em;
transition: gap 0.3s;
}
.experts-header-right:hover {
gap: 16px;
}
.experts-header-right .arrow {
width: 32px;
height: 1px;
background: var(--gold);
position: relative;
display: inline-block;
}
.experts-header-right .arrow::after {
content: '';
position: absolute;
right: 0;
top: -3px;
width: 7px;
height: 7px;
border-right: 1px solid var(--gold);
border-top: 1px solid var(--gold);
transform: rotate(45deg);
}
/* ============================================================
404 NOT FOUND
============================================================ */
.not-found-section {
padding: 56px 0 72px;
text-align: center;
}
.not-found-text {
font-size: 15px;
line-height: 2;
color: var(--gray-mid);
font-weight: 300;
letter-spacing: 0.04em;
margin-bottom: 40px;
}
/* .btn-outline → ボーダーボタン（共通）
使い方: テキスト
hover時: navy 塗りつぶし＋白文字 */
.btn-outline {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 13px;
letter-spacing: 0.12em;
color: var(--navy);
text-decoration: none;
border: 1px solid rgba(26, 39, 68, 0.3);
padding: 14px 32px;
transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-outline:hover {
background: var(--navy);
color: var(--white);
border-color: var(--navy);
}
.not-found-recent {
padding: 72px 0 96px;
background: var(--navy-deep);
}
.not-found-recent .section-label {
color: var(--gold);
}
.not-found-recent-title {
font-family: 'Noto Serif JP', serif;
font-size: 22px;
font-weight: 400;
color: var(--white);
letter-spacing: 0.1em;
margin: 8px 0 40px;
}
/* ============================================================
PAGINATION
============================================================ */
.navigation.pagination {
display: flex;
justify-content: center;
padding: 16px 0;
}
.nav-links {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.nav-links a,
.nav-links span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
font-family: 'Cormorant Garamond', serif;
font-size: 14px;
letter-spacing: 0.1em;
color: var(--navy);
text-decoration: none;
border: 1px solid var(--border);
background: var(--white);
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-links a::after {
display: none !important;
}
.nav-links a:hover {
background: var(--navy);
color: var(--white) !important;
border-color: var(--navy);
}
.nav-links .current {
background: var(--navy);
color: var(--white);
border-color: var(--navy);
}
.nav-links .dots {
border: none;
background: transparent;
color: var(--gray-light);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 900px) {
.experts-grid {
grid-template-columns: 1fr;
}
.expert-card {
padding: 20px 24px;
padding-right: 56px;
}
.card-link {
display: none;
}
}