@charset "utf-8";

/*######################################################
全ページ共通（2026リニューアル）

Figma：共有用_東京新都心ロータリークラブ
　　　 260826_デザイン方向性_スタイルタイル（222:421）

・デザイントークン、本文の下地、ヘッダー／左サイドバー／
　SP下部固定バー／フッターのリニューアル配色をまとめたファイル。
・base.css の旧スタイルを上書きするため、body.renewal
　（functions/setup.php の body_class で全ページに付与）を噛ませて
　詳細度を揃えている。
・ヘッダーは .is-scrolled で白背景になる。トップページは
　page-top.js がスクロールに応じて付け外しし、下層ページは
　header.php で最初から付けている（常に白背景）。
######################################################*/


/*######################################################
デザイントークン
（Figma「260826_デザイン方向性_スタイルタイル」より）
######################################################*/
:root {
	/* Navy */
	--c-navy-900: #12233D;
	/* 見出し・本文の濃色 */
	--c-navy-700: #234065;
	/* 基準色／フッター・帯 */
	--c-navy-500: #3A5C88;
	/* グラデーション上端・ホバー */
	--c-navy-300: #8CA3C2;
	/* 罫線・補助テキスト */
	--c-navy-100: #E4EAF3;
	/* タグ・淡い面 */
	--c-navy-50: #F4F7FB;
	/* セクション背景 */

	/* Accent（ロゴのゴールド） */
	--c-gold-500: #E8A33D;
	--c-gold-200: #F6D9A8;
	--c-gold-ink: #8A5A12;

	/* Neutral */
	--c-ink: #1F2A37;
	--c-ink-muted: #5B6B7F;
	--c-warm-white: #FBFAF8;
	--c-white: #ffffff;
	--c-card-line: #E7E8EA;

	/* 書体 */
	--f-serif: "Noto Serif JP", serif;
	--f-sans: "Zen Kaku Gothic New", sans-serif;
	--f-en: "EB Garamond", serif;

	/* パーツ */
	--radius-card: 16px;
	--shadow-card: 0 2px 8px rgba(35, 64, 101, 0.06), 0 14px 32px rgba(35, 64, 101, 0.09);
	--shadow-card-s: 0 2px 6px rgba(35, 64, 101, 0.05), 0 10px 24px rgba(35, 64, 101, 0.07);

	/* レイアウト（左レール113px ＋ コンテンツ1399px、コンテナ1079px） */
	--w-container: 1079px;
	--pad-section: 120px;
}


/*######################################################
共通の下地（base.css の上書き。全ページ）
######################################################*/
body.renewal {
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 2;
	color: var(--c-ink);
	text-align: left;
	-webkit-hyphens: none;
	hyphens: none;
}

/* 最終セクションがフッターに接するページは余白を消す */
body.renewal.home .main,
body.renewal.is-renewal-page .main {
	padding-bottom: 0;
	min-height: 0;
}

/*
 下層ページの本文位置
 ・ヒーローあり：トップと同じく、ヒーローを透過ヘッダーの下に潜らせる
 ・ヒーローなし：固定ヘッダー（PC・タブレット72px／SP59px）の分だけ下げる
*/
body.renewal.has-hero .main {
	margin-top: 0;
}

body.renewal:not(.has-hero) .main {
	margin-top: 72px;
}

@media (max-width: 767px) {
	body.renewal:not(.has-hero) .main {
		margin-top: 59px;
	}
}

body.renewal a:hover {
	opacity: 1;
}

body.renewal img {
	max-width: 100%;
}

/*######################################################
ヘッダー（配色と書体を上書き）
######################################################*/
body.renewal .header__content {
	margin-block: 14px;
	min-height: 43px;
}

/*
 グローバルメニューは 1400px まで表示する。
 1400〜1512px の間でロゴ・ナビの間隔・ボタンの余白を少しずつ詰めて、
 1400px でもヘッダーが窮屈にならないようにする。
*/
body.renewal .header__title a {
	max-width: clamp(152px, calc(152px + (100vw - 1400px) * 21 / 112), 173px);
}

/* ナビゲーション */
body.renewal .drawer-menu__main {
	font-family: var(--f-sans);
}

@media (min-width: 1400px) {
	/* ドロワー用の余白を外し、ヘッダーを72pxに収める */
	body.renewal .header__drawer {
		margin-left: 0;
	}

	body.renewal .drawer-menu__content {
		padding-block: 0;
	}

	body.renewal .drawer-menu__main {
		display: flex;
		align-items: center;
		gap: clamp(20px, calc(20px + (100vw - 1400px) * 10 / 112), 30px);
		list-style: none;
		padding-left: 0;
	}

	body.renewal .drawer-menu__main a {
		padding: 0;
		font-size: 16px;
		font-weight: 500;
		line-height: 2;
		white-space: nowrap;
		color: var(--c-navy-900);
		text-decoration: none;
		/* 背景の切り替わりと同じ速度で色を変える */
		transition: color 0.4s ease, opacity 0.3s ease;
	}

	body.renewal .drawer-menu__main a:hover {
		opacity: 0.7;
	}
}

/* 翻訳ボタン・会員専用ページボタン */
body.renewal .header__button-menu {
	align-items: center;
	gap: 8px;
}

body.renewal .header__button-menu a {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: clamp(14px, calc(14px + (100vw - 1400px) * 6 / 112), 20px);
	white-space: nowrap;
	border-radius: 42px;
	border: 1px solid var(--c-navy-900);
	background-color: var(--c-navy-900);
	font-family: var(--f-sans);
	font-size: 14px;
	font-weight: 500;
}

body.renewal a:has(.trp-menu-ls-label) {
	min-height: 42px;
	padding-inline: clamp(14px, calc(14px + (100vw - 1400px) * 6 / 112), 20px);
	white-space: nowrap;
	border: 1px solid var(--c-navy-900);
	border-radius: 42px;
	background-color: transparent;
	font-family: var(--f-en);
	font-size: 16px;
	letter-spacing: 0.1em;
	color: var(--c-navy-900);
	transition: color 0.4s ease, border-color 0.4s ease;
}

/* ==============================
ヘッダーの状態
　最上部　　：背景なし・白ロゴ・白文字
　スクロール：白背景・通常ロゴ・濃色文字
　（.is-scrolled は page-top.js が付け外しする）
============================== */
body.renewal .header {
	background-color: transparent;
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

body.renewal .header.is-scrolled {
	background-color: var(--c-white);
	box-shadow: 0 1px 12px rgba(18, 35, 61, 0.08);
}

/* ロゴの出し分け */
body.renewal .header:not(.is-scrolled) .header__title a::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url(../img/common/logo_white.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

body.renewal .header:not(.is-scrolled) .header__title a img {
	opacity: 0;
}

body.renewal .header.is-scrolled .header__title a::before {
	content: none;
}

body.renewal .header.is-scrolled .header__title a img {
	opacity: 1;
}

/*
 ナビゲーションと翻訳ボタンの文字色。
 base.css が「MV上にいる間（.is-on-mv）は白」を指定しているため、
 スクロール後に白背景＋白文字にならないよう、詳細度を上げて上書きする。
*/
@media (min-width: 1400px) {
	body.renewal .header:not(.is-scrolled) .drawer-menu__main a {
		color: var(--c-white);
	}

	body.renewal .header.is-scrolled .drawer-menu__main a {
		color: var(--c-navy-900);
	}
}

body.renewal .header:not(.is-scrolled) .header__button a:has(.trp-menu-ls-label) {
	border-color: var(--c-white);
	color: var(--c-white);
}

body.renewal .header:not(.is-scrolled) .header__button a:has(.trp-menu-ls-label)::before {
	filter: invert(1) brightness(2);
}

body.renewal .header.is-scrolled .header__button a:has(.trp-menu-ls-label) {
	border-color: var(--c-navy-900);
	color: var(--c-navy-900);
}

body.renewal .header.is-scrolled .header__button a:has(.trp-menu-ls-label)::before {
	filter: invert(0) brightness(1);
}


/*######################################################
左サイドバー（配色と書体を上書き）
構造・寸法は現行実装のまま
######################################################*/
@media (min-width: 768px) {
	body.renewal .fixed-pc__link {
		background-image: linear-gradient(160deg, #ffffff 0%, var(--c-navy-50) 100%);
		background-color: transparent;
	}

	body.renewal .fixed-pc__text {
		font-family: var(--f-serif);
		font-size: 16px;
		line-height: 1.5;
		color: var(--c-navy-900);
	}

	body.renewal .fixed-pc__line {
		background-color: var(--c-navy-300);
	}

	body.renewal .fixed-pc__button {
		background-image: linear-gradient(160deg, var(--c-navy-700) 0%, var(--c-navy-900) 100%);
		background-color: transparent;
		font-family: var(--f-sans);
		font-size: 13px;
		font-weight: 500;
		line-height: 1.5;
	}

	body.renewal .fixed-pc__link:hover .fixed-pc__button {
		background-image: linear-gradient(160deg, var(--c-navy-500) 0%, var(--c-navy-700) 100%);
		color: var(--c-white);
	}

	body.renewal .fixed-pc__link:hover .fixed-pc__button::before {
		filter: none;
	}
}


/*######################################################
フッター
######################################################*/
body.renewal .footer {
	background-color: transparent;
	background-image: linear-gradient(160deg, var(--c-navy-700) 0%, var(--c-navy-900) 100%);
	padding-block: 56px 48px;
	font-family: var(--f-sans);
	text-align: center;
}

body.renewal .footer__nav-list {
	gap: 28px;
	font-size: 14px;
	line-height: 1.8;
}

body.renewal .footer__nav-list li a {
	padding: 0;
	color: var(--c-white);
	transition: opacity 0.3s ease;
}

body.renewal .footer__nav-list li a:hover {
	opacity: 0.7;
}

body.renewal .footer__logo {
	margin-top: 26px;
	padding-top: 27px;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
}

body.renewal .footer__logo a {
	display: inline-block;
	width: 173px;
}

body.renewal .footer__info {
	margin-top: 26px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--c-white);
}

body.renewal .footer__info a {
	color: inherit;
}

body.renewal .footer__privacy {
	margin-top: 26px;
	font-size: 12px;
	line-height: 1.8;
}

body.renewal .footer__privacy a {
	color: var(--c-white);
	text-decoration: none;
}

body.renewal .footer__privacy a:hover {
	text-decoration: underline;
}

body.renewal .footer__copyright {
	padding: 0;
	margin-top: 6px;
	font-family: var(--f-en);
	font-size: 12px;
	line-height: 1.8;
	color: var(--c-white);
}


/*######################################################
スマートフォン：ヘッダー／下部固定バー／フッター
（Figma 254:2657 SPヘッダー・254:3153・254:3111）
######################################################*/
@media (max-width: 767px) {

	/* ===== ヘッダー ===== */
	body.renewal .header__content {
		margin-inline: 16px;
		margin-block: 14px;
		min-height: 31px;
		padding-right: 56px;
	}

	body.renewal .header__title a {
		max-width: 127px;
	}

	/* ハンバーガー：3本線＋MENU */
	body.renewal .hum-btn {
		top: 12px;
		right: 16px;
	}

	body.renewal .hum-btn__text {
		font-family: var(--f-en);
		font-size: 8px;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	/* ===== 下部固定バー ===== */
	body.renewal .fixed-sp--renewal {
		gap: 9px;
		align-items: center;
		height: 84px;
		padding-inline: 20px;
		background-color: var(--c-white);
		box-shadow: 0 -4px 16px rgba(18, 35, 61, 0.1);
	}

	body.renewal .fixed-sp--renewal a {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 52px;
		padding: 0;
		border-radius: 26px;
		font-family: var(--f-sans);
		font-size: 16px;
		font-weight: 500;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
	}

	body.renewal .fixed-sp__primary {
		background-image: linear-gradient(160deg, var(--c-navy-700) 0%, var(--c-navy-500) 100%);
		color: var(--c-white);
		box-shadow: 0 6px 16px rgba(35, 64, 101, 0.24);
	}

	body.renewal .fixed-sp__primary::before {
		content: none;
	}

	body.renewal .fixed-sp__secondary {
		border: 1px solid var(--c-navy-700);
		background-color: var(--c-white);
		color: var(--c-navy-700);
	}

	/* ===== フッター ===== */
	body.renewal .footer {
		/* 下部固定バーに隠れないよう余白を確保 */
		padding-block: 56px 140px;
		display: flex;
		flex-direction: column;
	}

	body.renewal .footer__logo {
		order: 1;
	}

	body.renewal .footer__logo {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	body.renewal .footer__logo a {
		width: 222px;
	}

	body.renewal .footer__nav {
		order: 2;
	}

	body.renewal .footer__info {
		order: 4;
	}

	body.renewal .footer__copyright {
		order: 5;
	}

	/* ナビは1行1項目、右端に「›」を置く */
	body.renewal .footer__nav-list {
		display: block;
		margin-top: 24px;
		border-top: 1px solid rgba(255, 255, 255, 0.35);
	}

	body.renewal .footer__nav-list li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	}

	body.renewal .footer__nav-list li a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 15px 0;
		font-size: 15px;
		line-height: 1.8;
		text-align: left;
	}

	body.renewal .footer__nav-list li a::after {
		content: "";
		flex: none;
		width: 6px;
		height: 6px;
		border-top: 1px solid currentColor;
		border-right: 1px solid currentColor;
		transform: rotate(45deg);
	}

	body.renewal .footer__info {
		margin-top: 24px;
		font-size: 13px;
		line-height: 1.85;
	}

	/* プライバシーポリシーもナビの1行として見せる */
	body.renewal .footer__privacy {
		order: 3;
		margin-top: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	}

	body.renewal .footer__privacy a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 15px 0;
		font-size: 15px;
		line-height: 1.8;
	}

	body.renewal .footer__privacy a::after {
		content: "";
		flex: none;
		width: 6px;
		height: 6px;
		border-top: 1px solid currentColor;
		border-right: 1px solid currentColor;
		transform: rotate(45deg);
	}

	body.renewal .footer__copyright {
		margin-top: 24px;
		font-size: 13px;
	}
}


/*######################################################
ハンバーガーボタンの配色

base.css は「MV上にいる間（.is-on-mv）は白」という指定だが、
トップページのヘッダーは .is-scrolled で白背景に切り替わるため、
同じ基準に揃えないと「白背景に白い線」「暗い写真に濃紺の線」で
ボタンが見えなくなる。
######################################################*/
@media (max-width: 1399px) {

	/* 最上部：背景なし（写真の上）なので白 */
	body.renewal .header:not(.is-scrolled) + .hum-btn .hum-btn__line,
	body.renewal .header:not(.is-scrolled) + .hum-btn .hum-btn__line::before,
	body.renewal .header:not(.is-scrolled) + .hum-btn .hum-btn__line::after {
		background-color: var(--c-white);
	}

	body.renewal .header:not(.is-scrolled) + .hum-btn .hum-btn__text {
		color: var(--c-white);
	}

	/* スクロール後：白背景なので濃紺 */
	body.renewal .header.is-scrolled + .hum-btn .hum-btn__line,
	body.renewal .header.is-scrolled + .hum-btn .hum-btn__line::before,
	body.renewal .header.is-scrolled + .hum-btn .hum-btn__line::after {
		background-color: var(--c-navy-900);
	}

	body.renewal .header.is-scrolled + .hum-btn .hum-btn__text {
		color: var(--c-navy-900);
	}
}


/*######################################################
ドロワー内のボタン配色

ヘッダー右側用に指定した body.renewal のボタン配色が、
詳細度の関係でドロワー内にも効いてしまい、濃紺の地に
濃紺の文字で読めなくなるため、ドロワー内だけ戻す。
######################################################*/
@media (max-width: 1399px) {
	body.renewal .header__drawer .header__button-menu a {
		border-color: var(--c-white);
		background-color: var(--c-white);
		color: var(--c-navy-700);
	}

	body.renewal .header__drawer a:has(.trp-menu-ls-label) {
		border-color: var(--c-white);
		background-color: transparent;
		color: var(--c-white);
	}

	body.renewal .header__drawer a:has(.trp-menu-ls-label)::before {
		filter: invert(1) brightness(2);
	}
}


/*######################################################
WordPress管理バー対応（ログイン中のみ）

SPではハンバーガーの位置を top:12px にしているため、
parts.css の共通指定（8px基準）では足りない。
######################################################*/
@media (max-width: 767px) {
	body.admin-bar.renewal .hum-btn {
		top: 58px;
		/* 12px + 管理バー46px */
	}
}

/*
 600px以下ではフロント側の管理バーが絶対配置になり、
 スクロールすると画面外へ消える。最上部にいる間だけ下げる。
*/
@media (max-width: 600px) {
	body.admin-bar.renewal .header.is-scrolled {
		top: 0;
	}

	body.admin-bar.renewal .header.is-scrolled + .hum-btn {
		top: 12px;
	}
}


/*######################################################
ドロワーメニュー（〜1399px）
Figma 296:2153「SP_メニュー展開（ハンバーガー）」

並び：ロゴ → ナビ → 例会を見学する → English／会員専用ページ
　　　→ ロータリー文庫 → 住所
header.php の構造（情報ブロック／ナビブロック）はPCのヘッダーと共用のため、
display: contents で2つのブロックを解いて order で並べ替えている。
######################################################*/
/* PCではヘッダー内に並ぶため、ドロワー専用の要素は出さない */
@media (min-width: 1400px) {
	body.renewal .drawer-menu__cta {
		display: none;
	}
}

@media (max-width: 1399px) {
	body.renewal .header__drawer {
		padding-inline: 0;
		background: linear-gradient(160deg, #1B3054 0%, #0E1C31 100%);
	}

	body.renewal .drawer-menu__content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		width: min(100%, 480px);
		min-height: 100%;
		margin-inline: auto;
		padding: 0 24px 40px;
	}

	body.renewal .drawer-menu__info,
	body.renewal .drawer-menu__nav {
		display: contents;
	}

	/* ロゴ（閉じるボタンと同じ高さの帯） */
	body.renewal .drawer-menu__info-logo {
		order: 1;
		width: 168px;
		max-width: none;
		margin: 14px 0 14px -4px;
	}

	/* ナビ */
	body.renewal .drawer-menu__main {
		order: 2;
		margin-top: 4px;
		padding: 0;
	}

	body.renewal .drawer-menu__main li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	body.renewal .drawer-menu__main a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 14px 0;
		border-bottom: 0;
		font-family: var(--f-serif);
		font-size: 20px;
		font-weight: 500;
		line-height: 1.5;
		color: var(--c-white);
	}

	body.renewal .drawer-menu__main a::after {
		content: "›";
		font-family: var(--f-sans);
		font-size: 16px;
		color: var(--c-gold-500);
	}

	/* 例会を見学する（ゴールド） */
	body.renewal .drawer-menu__cta {
		order: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 56px;
		margin-top: 20px;
		border-radius: 28px;
		background-image: linear-gradient(160deg, #F0B75A 0%, var(--c-gold-500) 100%);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
		font-size: 17px;
		font-weight: 500;
		line-height: 1.5;
		color: var(--c-navy-900);
		text-decoration: none;
	}

	body.renewal .drawer-menu__cta::after {
		content: "›";
		font-size: 15px;
	}

	/* English／会員専用ページ（横並び2つ） */
	body.renewal .header__drawer .header__button-menu {
		order: 4;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-top: 12px;
	}

	body.renewal .header__drawer .header__button-menu a,
	body.renewal .header__drawer a:has(.trp-menu-ls-label) {
		width: 100%;
		min-height: 46px;
		padding-inline: 8px;
		border-radius: 24px;
		font-family: var(--f-sans);
		font-size: 14px;
		letter-spacing: 0;
	}

	body.renewal .header__drawer a:has(.trp-menu-ls-label) {
		border-color: rgba(255, 255, 255, 0.55);
	}

	body.renewal .header__drawer .header__button-menu a:not(:has(.trp-menu-ls-label)) {
		color: var(--c-navy-900);
	}

	/* ロータリー文庫 */
	body.renewal .drawer-menu__nav .header__bunko {
		order: 5;
		align-self: center;
		margin-top: 12px;
	}

	/* 住所 */
	body.renewal .drawer-menu__info-address {
		order: 6;
		max-width: none;
		margin: 12px 0 0;
		padding-top: 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
		font-size: 13px;
		line-height: 1.8;
		text-align: left;
		color: var(--c-white);
	}

	body.renewal .drawer-menu__info-address ._address {
		margin-top: 0;
		font-size: 13px;
	}

	body.renewal .drawer-menu__info-address ._map-link {
		display: inline-block;
		margin-top: 4px;
		font-weight: 500;
		color: #C7D2E0;
	}

	body.renewal .drawer-menu__info-address ._tel {
		margin-top: 4px;
	}

	body.renewal .drawer-menu__info-address ._tel a {
		color: inherit;
	}
}


/* ==============================
呼びかけ文：1文字ずつ現れる演出（assets/js/common.js）
入会について・お問い合わせ・トップページ（template-parts/contact-lead.php）
============================== */
.js-type-in.is-ready .char {
	display: inline-block;
	opacity: 0;
	transform: translateX(-0.4em);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: var(--d, 0s);
}

.js-type-in.is-visible .char {
	opacity: 1;
	transform: translateX(0);
}

/* 英語は単語の途中で改行しない */
.js-type-in .word {
	display: inline-block;
	white-space: nowrap;
}

/* 呼びかけ文（ページ冒頭に大きく。template-parts/contact-lead.php） */
.contact-lead__text {
	font-family: var(--f-serif);
	font-weight: 500;
	font-size: clamp(24px, 2.2vw, 34px);
	line-height: 1.95;
	letter-spacing: 0.04em;
	text-align: center;
	color: #165E83;
}

@media (max-width: 767px) {
	.contact-lead__text {
		font-size: 19px;
		line-height: 2;
		letter-spacing: 0.02em;
	}
}