/*
Theme Name: VISTA コーポレートサイト
Theme URI: https://vista-mobility.com/
Author: 株式会社VISTA
Description: 株式会社VISTA コーポレートサイト用の独自テーマ。Claude Design で作成したデザインをそのままテンプレート化したもの。実際のスタイルは assets/css/base.css と assets/css/page-*.css に入っています。フォルダ名は vista-corp（同名の他テーマとの衝突を避けるため）。
Version: 1.12.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vista
*/

/*
 * このファイルはテーマ情報のヘッダーを持つためだけに存在します。
 * 見た目の指定は assets/css/ 側にまとめてあるので、編集はそちらで。
 *
 * ここに書くのは、WordPress が出力する要素（管理バー、キャプション、
 * ページャなど）に対する最低限の調整だけにしてください。
 */

/* キーボード操作でだけ現れる本文スキップリンク */
.vista-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: #1f3864;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}
.vista-skip:focus {
	left: 8px;
	top: 8px;
}

/*
 * 記事本文（ブロックエディタの出力）
 *
 * 他のページはインラインstyleで組まれているが、本文だけは管理画面から
 * 書くのでここで見た目を揃える。数値は元デザインの本文段落に合わせている。
 */
.vista-article-body p {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 2.15;
	color: #37527a;
}
.vista-article-body h2 {
	margin: 44px 0 20px;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.5;
	color: #1f3864;
}
.vista-article-body h3 {
	margin: 36px 0 16px;
	font-size: 20px;
	font-weight: 900;
	color: #1f3864;
}
.vista-article-body a {
	color: #1f8fa0;
}
.vista-article-body ul,
.vista-article-body ol {
	margin: 0 0 24px;
	padding-left: 1.4em;
	font-size: 16px;
	line-height: 2.15;
	color: #37527a;
}
.vista-article-body img {
	height: auto;
	border-radius: 10px;
}
.vista-article-body figure {
	margin: 0 0 24px;
}
.vista-article-body blockquote {
	margin: 0 0 24px;
	padding: 4px 0 4px 20px;
	border-left: 4px solid #49b5c3;
	color: #37527a;
}

/*
 * 写真の差し込み枠
 *
 * デザイン段階で写真が未指定だった箇所。公開前に <img> に差し替える。
 * どこに何の写真が要るかが見て分かるよう、指示文をそのまま出している。
 */
.vista-photo-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: repeating-linear-gradient(
		45deg,
		#eef4f7,
		#eef4f7 12px,
		#e6eef3 12px,
		#e6eef3 24px
	);
	border: 2px dashed #b9cedd;
	text-align: center;
}
.vista-photo-slot span {
	max-width: 28em;
	font-size: 13px;
	line-height: 1.8;
	font-weight: 700;
	color: #6d8aa3;
}

/*
 * ヘッダー
 *
 * スクロールに追従させたいので position:fixed。
 * トップページだけは初期状態でヒーロー画像に重ね、背景を薄くする。
 * 少しスクロールしたら .is-scrolled が付いて通常の白背景に戻る（assets/js/vista.js）。
 */
.vista-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid #eaf1f5;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/*
 * 固定ヘッダーの分だけ本文を下げる。トップページは重ねるので下げない。
 *
 * --vista-header-h は assets/js/vista.js がヘッダーの実測値を入れる。
 * 画面幅やフォント読み込みで高さが変わるため、固定値だと数pxずれて本文が隠れる。
 * JSが動かない場合に備えて 80px を既定値にしている。
 */
body {
	padding-top: var(--vista-header-h, 80px);
}

/*
 * トップページの重ね表示は PC のみ。
 *
 * スマホ幅ではヒーローの見出しが画面いっぱいに回り込むため、
 * 半透明のヘッダーを重ねるとロゴと文字がぶつかる。
 * 狭い画面では他のページと同じ「白背景・重ねない」に揃える。
 */
@media (min-width: 821px) {
	body.vista-home {
		padding-top: 0;
	}
	body.vista-home .vista-header {
		background: rgba(255, 255, 255, 0.34);
		border-bottom-color: transparent;
	}
	body.vista-home .vista-header.is-scrolled {
		background: rgba(255, 255, 255, 0.92);
		border-bottom-color: #eaf1f5;
		box-shadow: 0 4px 18px rgba(31, 56, 100, 0.07);
	}
}

/* 下層ページでもスクロール中は少し影を落とす */
.vista-header.is-scrolled {
	box-shadow: 0 4px 18px rgba(31, 56, 100, 0.07);
}

/*
 * トップページのヒーロー（狭い画面）
 *
 * PC用の大きな見出しのままだと画像の中で文字が詰まり、変な位置で折り返す。
 * 画面幅に応じて文字と行間・余白を一緒に縮め、画像内に自然に収める。
 * base.css 側が h1 に !important を当てているので、こちらも !important が要る。
 */
/*
 * ヒーローの文字の左端を、下のセクション本文と揃える。
 *
 * ヒーローの内側の箱は section の直下ではないため、base.css の
 * `section > div[style*="max-width"]` の余白調整が効かず 40px のまま残っていた。
 * 同じ値を明示的に当てて左端を合わせる。
 */
@media (max-width: 1024px) {
	.vista-hero-inner {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}
@media (max-width: 560px) {
	.vista-hero-inner {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

@media (max-width: 820px) {
	.vista-hero-title {
		font-size: 24px !important;
		line-height: 1.5 !important;
		letter-spacing: 0.02em !important;
	}
	.vista-hero-lead {
		font-size: 14px !important;
		line-height: 1.9 !important;
		margin-top: 14px !important;
	}
}
@media (max-width: 560px) {
	.vista-hero-title {
		font-size: 20px !important;
		line-height: 1.55 !important;
	}
	.vista-hero-lead {
		font-size: 12.5px !important;
		line-height: 1.85 !important;
		margin-top: 10px !important;
	}
	/* 文字が小さくなると、装飾のスクロール表示は場所を取るだけなので隠す */
	.vista-hero-scroll {
		display: none !important;
	}
}

/*
 * スマホ幅のヘッダーは完全な白。
 * この幅では backdrop-filter を切っている（base.css）ので、
 * 半透明のままだと下の本文が透けて見えてしまう。
 */
@media (max-width: 820px) {
	.vista-header,
	.vista-header.is-scrolled {
		background: #fff;
		border-bottom-color: #eaf1f5;
	}
}

/* 管理バー表示時に固定ヘッダーが隠れないように */
.admin-bar .vista-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .vista-header {
		top: 46px;
	}
}

/*
 * トップページ 3本柱
 *
 * PCでは小さく見えるという指摘があったので、デザインの 108px から少し大きくしている。
 * スマホ側は page-home.css のメディアクエリが優先される。
 */
/* 各要素にインラインstyleが付いているので !important が要る */
@media (min-width: 821px) {
	.pillars > div > div {
		width: 124px !important;
		height: 124px !important;
		margin-bottom: 26px !important;
	}
	.pillars svg {
		width: 64px !important;
		height: 64px !important;
	}
	.pillars h3 {
		font-size: 21px !important;
		margin-bottom: 14px !important;
	}
	.pillars p {
		font-size: 15px !important;
		line-height: 1.9 !important;
	}
}