/*
Theme Name: Sayama Kensetsu
Theme URI: https://example.com/
Author: 狭山建設株式会社
Author URI: https://example.com/
Description: 狭山建設株式会社コーポレートサイトの静的HTMLを、そのままの意匠でWordPressテーマ化したものです。デザインCSSは css/ ディレクトリに分割して保持し、このファイルはテーマ情報の宣言と上書き用の余白として使用します。
Version: 1.0.0
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: sayamakensetsu
Tags: corporate, construction, japanese, custom-menu, translation-ready
*/
/* -------------------------------------------------------------------------
* デザイン本体は css/ 以下に格納されており、functions.php から読み込まれます。
* css/style.css … 全ページ共通のベース＋TOPページ
* css/mobile-navigation.css … ハンバーガーメニュー（〜768px）
* css/about.css 他 … 下層ページ個別
* 個別の微調整をここに書くと、上記すべてのあとに読み込まれます。
* ---------------------------------------------------------------------- */
/* WordPress 標準クラス（管理バー・添付ファイル・キャプション等）の最低限の担保 */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #fff;
clip: auto !important;
clip-path: none;
color: #08a95b;
display: block;
font-size: 14px;
font-weight: 700;
height: auto;
left: 8px;
line-height: normal;
padding: 12px 20px;
text-decoration: none;
top: 8px;
width: auto;
z-index: 100000;
}
.alignleft { float: left; margin-right: 24px; }
.alignright { float: right; margin-left: 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: #65707a; margin-top: 8px; }
/* 全ページ共通：表示端末ごとの改行
*
… PC（769px以上）だけで改行
*
… SP（768px以下）だけで改行
*/
br.br-pc { display: inline; }
br.br-sp { display: none; }
@media screen and (max-width: 768px) {
br.br-pc { display: none; }
br.br-sp { display: inline; }
}
/* 管理バー表示時にヘッダーが隠れないように */
body.admin-bar .mobile-menu { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .mobile-menu { top: 46px; }
}
/* -------------------------------------------------------------------------
* 元デザインに存在しなかったWordPress由来のパーツの最低限のスタイル
* （検索フォーム・コメント欄・ページ分割リンク）
* ---------------------------------------------------------------------- */
.sayama-search {
display: flex;
gap: 8px;
margin: 24px 0;
}
.sayama-search__field {
flex: 1 1 auto;
min-width: 0;
padding: 12px 16px;
border: 1px solid rgba(18, 67, 39, .2);
border-radius: 8px;
font: inherit;
font-size: 15px;
}
.sayama-search__submit {
padding: 12px 24px;
border: 0;
border-radius: 8px;
background: #08a95b;
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.sayama-search__submit:hover { background: #008d49; }
.article-comments { margin-top: 56px; }
.article-comments__title { font-size: 20px; margin-bottom: 24px; }
.article-comments .comment-list { padding-left: 0; }
.article-comments .comment-list li { margin-bottom: 24px; }
.page-links { margin-top: 32px; display: flex; gap: 8px; }
/* TOPの施工事例カード全体をリンクとして操作できるようにする。 */
.works-swiper .swiper-slide > a { display: block; }
/* -------------------------------------------------------------------------
* PC（769px以上）：スクロールに追従するグローバルナビ（全ページ共通）
*
* 元デザインのヘッダーは position:absolute でヒーローに重ねているだけなので、
* 下へスクロールするとそのまま流れて見えなくなっていました。
* js/main.js が一定量スクロールした時点で .is-stuck を付けるので、
* ここではその状態を「画面上部に浮かぶ白いバー」として固定します。
* 意匠は下層ページ（.about-page）の浮遊バーに全ページを揃えています。
*
* このファイルは全CSSの最後に読み込まれるため、各ページ個別のヘッダー指定
* （about.css / recruit.css / members.css など）より優先されます。
* ---------------------------------------------------------------------- */
@media (min-width: 769px) {
/* ---------------------------------------------------------------------
* TOP page: PC layout spacing adjustments from the design review.
* Keep these overrides desktop-only so the dedicated SP flow is unchanged.
* ------------------------------------------------------------------ */
.sayama-view-front .mv__lead {
width: 500px;
}
.sayama-view-front .ourstory {
margin-top: 170px;
}
.sayama-view-front .value {
margin-top: 180px;
}
.sayama-view-front .business {
margin-top: 170px;
}
.sayama-view-front .business__crane {
right: auto;
bottom: auto;
left: 55.18%;
top: -192px;
width: 194.428px;
height: 206px;
}
.sayama-view-front .business__crane img {
object-fit: contain;
}
.sayama-view-front .business__row:last-child {
align-items: stretch;
}
.sayama-view-front .numbers {
margin-top: 140px;
}
.sayama-view-front .recruit {
margin-top: 80px;
}
.page > .header.is-stuck {
position: fixed;
top: 12px;
z-index: 60;
box-sizing: border-box;
width: min(1344px, calc(100% - 48px));
min-height: 76px;
padding: 14px 20px;
border: 1px solid rgba(255, 255, 255, .72);
border-radius: 18px;
background: rgba(249, 252, 250, .92);
box-shadow: 0 18px 48px rgba(5, 24, 15, .16);
backdrop-filter: blur(16px) saturate(125%);
-webkit-backdrop-filter: blur(16px) saturate(125%);
/* fill-mode は付けない。再生後は .header 本来の translateX(-50%) に戻るため、
アニメーションが走らない環境でも必ず正しい位置に収まる。 */
animation: sayama-header-stick .28s cubic-bezier(.16, 1, .3, 1);
}
@keyframes sayama-header-stick {
from { opacity: 0; transform: translate(-50%, -16px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* バー下端の緑ライン（下層ページのヘッダーと同じ意匠） */
.page > .header.is-stuck::after {
content: "";
position: absolute;
right: 20px;
bottom: -1px;
left: 20px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--brand) 0 72px, rgba(13, 164, 79, .08) 72px 100%);
}
/* 白いバーに載るので、ロゴはカラー版をそのまま・ナビは濃色に統一する */
.page > .header.is-stuck .header__logo { width: 192px; height: 48px; }
.page > .header.is-stuck .header__logo img { object-fit: contain; mix-blend-mode: normal; }
.page > .header.is-stuck .header__nav { color: #17231d; }
.page > .header.is-stuck .header__nav a:hover,
.page > .header.is-stuck .header__nav a:focus-visible { color: var(--brand); opacity: 1; }
/* ログイン中の管理バーに隠れないように */
body.admin-bar .page > .header.is-stuck { top: 44px; }
/* ページ内リンク（#history / #entry など）の着地点が追従バーの下に
潜り込まないよう、スクロール位置をバーの高さぶんずらす。
SP用の scroll-padding-top: 80px は css/style.css 側に既にある。 */
html { scroll-padding-top: 104px; }
/* 上の scroll-padding と二重に効いて行き過ぎるため、
個別ページで指定済みの同種の余白は打ち消す。 */
.article-content > h2,
.work-card,
.ps-story { scroll-margin-top: 0; }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
.page > .header.is-stuck { animation: none; }
}