/*
Theme Name: Nagata Theme
Author: Knet
Version: 1.0.1
*/

/* =====================================================
   CSS ファイル構成・使い分けルール
   （更新者へ：追記・修正の前に必ず確認すること）
   =====================================================

   ▼ このファイル（style.css）
     ・WordPress テーマ宣言（先頭コメント）が必須のため存在する
     ・記述するのは以下のみ：
         - @font-face（ローカルフォント定義）
         - CSS カスタムプロパティ（:root の変数）
         - フォントユーティリティクラス（.orbitron-fnt 等）
         - .site-header__cta（ヘッダーCTAボタン）
         - .content-header（内部ページ共通ヒーロー）
         - .breadcrumbs（パンくず共通レイアウト）
     ・ヘッダー・フッター・モバイルメニュー等の詳細は書かない

   ▼ assets/css/global.css
     ・全ページ共通のコンポーネントCSS
     ・ヘッダー / モバイルメニュー / フッター /
       カードグリッド / 設備一覧テーブル / 汎用クラス
     ・新規コンポーネントはここへ追加する

   ▼ assets/css/top.css
     ・TOP ページ・EN ページ専用（is_front_page / is_page('en') のみ読み込み）
     ・Splide スライダー / プログレスバー / ヒーロー

   ▼ assets/css/pages-common.css（旧 pages.css）
     ・内部ページ共通（TOP・EN 以外で読み込み）
     ・各内部ページのレイアウトはここへ追加する

   ▼ assets/css/pages-products.css
     ・製品・設備一覧系ページ専用（industrial_equipment / custom_business /
       custom_built / tape_reel / visual_inspection のみ追加読み込み）
     ・2026-07-03、pages.css から分離（詳細はテーマ CLAUDE.md 参照）
     ・上記5ページ以外でしか使わないスタイルはこちらへ

   ▼ ビルドツール不使用・CSS Nest 記法（&）使用可
   ▼ モダンブラウザ専用（IE 非対応・Babel / core-js 不要）
   ===================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
		animation-duration: 0.4s;
		animation-timing-function: cubic-bezier(.15,.81,.97,.97);
}
@media (prefers-reduced-motion: no-preference) {

}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
} 

@font-face {
	font-display: swap;
	font-family: 'Orbitron';
	font-style: normal;
	font-weight: 700;
	src: url('./fonts/orbitron-v35-latin-700.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Orbitron';
	font-style: normal;
	font-weight: 500;
	src: url('./fonts/orbitron-v35-latin-500.woff2') format('woff2');
}

/* ─────────────────────────────────────────
   CSS カスタムプロパティ
───────────────────────────────────────── */
:root {
	--header-height: 69px;
	--header-container-height: 18px;
	--sticky-offset: 300px;
	--gradient-1: linear-gradient(90deg, var(--wp--preset--color--corporate) 40%, #e2e2e2);
	/* --gradient-2: ; */
	--gradient-2: linear-gradient(90deg, #1d2345 46.63%, #075a87);
	/* 実装時に追加 */
	--gradient-3: linear-gradient(90deg, #4F4F50 0%, #AEB1B8 34%, #9E9EA4 50%, #AEB1B8 67%, #4B4E4A 100%);
	/* --gradient-cta: ; */
	/* 実装時に追加 */
	--inner-width: 1100px;
	--outside-width: 1320px;
	--top__block-width: 1580px;
	--inner-element-height: 100px;
}

@media (max-width: 1024px) {
	:root {
		--header-height: 55px;
	}
}

:where(*, *::before, *::after, * > *) {
	box-sizing: border-box;
	font-feature-settings: "palt";
}

/* WP ブロックエディタの自動マージンを固定ページのみ無効化（投稿は維持） */
body.page :where(.is-layout-flow)>* {
	margin-block-start: 0;
}

body {
	position: relative;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--text);
}

.shippori-mincho-b1-medium {
	font-family: "Shippori Mincho B1", serif;
	font-weight: 500;
	font-style: normal;
}

.shippori-mincho-b1-semibold {
	font-family: "Shippori Mincho B1", serif;
	font-weight: 600;
	font-style: normal;
}

.noto-sans-jp-fnt {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.orbitron-fnt {
	font-family: "Orbitron", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.1em;
	font-feature-settings: "salt" 1, "ss01" 1;
}

.site-header__cta {
	display: flex;
	gap: clamp(0.25rem, -0.05rem + 0.8vw, 0.75rem);
	font-weight: bold;
	font-size: 13px;
	margin-inline-start: clamp(0.2rem, -15.55rem + 18vw, 2.45rem);
}

/* ページヘッダー */
.content-header {
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--corporate);
	padding-block-start: calc(var(--header-container-height) + var(--header-height));
	/* padding-block-end: 170px; */
	display: grid;
	align-items: center;
	height: clamp(14.375rem, -7.411rem + 45.39vw, 33.438rem);
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	>div {
		max-width: 1200px;
		margin-inline: auto;
		width: 100%;
		display: grid;
		gap: clamp(0.313rem, -0.042rem + 0.81vw, 0.688rem);

		@media (max-width: 1024px) {
			padding-inline: 15px;
		}
	}

	p,
	h1 {
		margin-block: 0;
		line-height: 1;
		text-align: start;
	}

	h1 {
		font-size: clamp(1.5rem, 0.554rem + 2.16vw, 2.5rem);
	}

	p {
		font-size: clamp(0.75em, 0.277em + 1.08vw, 1.25em);
	}
}

/* パンクズbreadcrumbs */
div.breadcrumbs {
	margin-block: 0.685em 4.62em;
	width: 100%;
	max-width: var(--inner-width);
	margin-inline: auto;

	nav {
		width: fit-content;
		margin-inline: auto 0;

		a {
			text-decoration: none;
			color: inherit;
			transition: 0.3s linear;

			&:hover {
				opacity: 0.7;
			}
		}
	}

	/* 現在地（投稿タイトル）が長い場合は省略（…） */
	.breadcrumb--last {
		display: inline-block;
		max-width: 12em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: bottom;
	}
}

@media (max-width: 768px) {
	div.breadcrumbs .breadcrumb--last {
		max-width: 8.25em;
		overflow: clip;
	}
}

@media (1160px > width) {
	div.breadcrumbs {
		padding-inline: 15px;
	}
}

/* ─────────────────────────────────────────
   汎用
───────────────────────────────────────── */
.fnt48-32 {
	font-size: clamp(2rem, 1.286rem + 1.9vw, 48px);
}
.fnt42-32{
	font-size: clamp(2rem, 1.554rem + 1.19vw, 42px);
}

.fnt36-32 {
	font-size: clamp(2rem, 1.821rem + 0.48vw, 2.25rem)
}

.fnt36-24 {
	font-size: clamp(1.5rem, 0.75rem + 2vw, 36px);
}

.fnt36-20 {
	font-size: clamp(1.25rem, 0.536rem + 1.9vw, 2.25rem)
}

.fnt32-14 {
	font-size: clamp(0.875em, -0.25rem + 3vw, 32px);
}

.fnt24-22 {
	font-size: clamp(1.375rem, 1.286rem + 0.24vw, 24px);
}

.fnt24-20 {
	font-size: clamp(1.25rem, 1.071rem + 0.48vw, 24px);
}

.fnt24-18 {
	font-size: clamp(1.125rem, 0.857rem + 0.71vw, 24px);
}

/* a{text-decoration: none;} */
a[href$=".pdf" i] {
	color: inherit;
	text-decoration: none;
	padding-inline: 1.5em;
	background-image: url(./assets/img/icn-pdf.webp), url(./assets/img/icn-download.webp), linear-gradient(var(--wp--preset--color--sub), var(--wp--preset--color--sub));
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: left center, right 55%, left bottom;
	background-size: 1em, 1em, 0% 1px;
	transition: background-size 0.4s ease;
	font-size: 15px;
	font-weight: bold;

	&:hover {
		background-size: 1em, 1em, 100% 1px;
	}
}

.linkletter a {
	letter-spacing: -1px;
}

/* リンクボタンスタイル */
a[class*="btn-"] {
	padding-inline: clamp(0.5rem, -3.589rem + 6.39vw, 2.8rem);
	padding-block: 0.75em;
	border-radius: 3em;
	transition: 0.3s linear;
	display: block;
	text-decoration: none;
	color: inherit;

	&:hover {
		background-color: var(--wp--preset--color--corporate);
		color: var(--wp--preset--color--white);
		border: 1px solid #ccc;
	}
}

.btn-contact {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--corporate);
	border: 1px solid var(--wp--preset--color--corporate);
}

a.btn-member {
	background-color: var(--wp--preset--color--corporate);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--white);

	&:hover {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--corporate);
	}
}

/* ─────────────────────────────────────────
   c-button（汎用ボタンコンポーネント）

   バリアント：
     デフォルト（白）  <a class="c-button"> … 暗い背景用
     -black            <a class="c-button -black"> … 明るい背景用
     -navy             <a class="c-button -navy"> … 白背景用 ★メイン

   HTML:
			<a href="{$url}" class="c-button -navy">
					<span class="_text">{$text}</span>
					<span class="_icon">
							<svg class="_arrow" viewBox="0 0 12 6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
									<path d="M12 3L6.59961 6V4.1543H4.2002V1.8457H6.59961V0L12 3ZM1.2002 4.1543H0V1.8457H1.2002V4.1543ZM3.59961 4.1543H1.7998V1.8457H3.59961V4.1543Z" fill="currentColor"/>
							</svg>
							<svg class="_iconBorder" viewBox="0 0 40 40" aria-hidden="true">
									<circle class="_circle" cx="20" cy="20" r="19"></circle>
							</svg>
					</span>
			</a>
───────────────────────────────────────── */
.c-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	border-radius: 3em;
	padding: 8px;
	width: 224px;
	box-sizing: border-box;
	text-decoration: none;
	cursor: pointer;
	color: #222;
	transition: color 0.5s;

	/* 白背景レイヤー（デフォルト状態） */
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 3em;
		background: #fefefe;
		transition: opacity 0.5s;
		z-index: 0;
	}

	/* ボーダー：左→右ワイプ */
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 3em;
		border: 1px solid #64739d;
		clip-path: inset(0 100% 0 0 round 3em);
		transition: clip-path 0.35s ease;
		z-index: 1;
		pointer-events: none;
	}

	._text {
		position: relative;
		z-index: 2;
		font-size: 0.9em;
		font-weight: 700;
		letter-spacing: 0.06em;
		line-height: 1;
		padding-left: 1.75em;
		white-space: nowrap;
		color: inherit;
	}

	._icon {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2em;
		height: 2em;
		margin-left: auto;
		flex-shrink: 0;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: 50%;
			border: 1px solid #b4b4b4;
			transition: opacity 0.5s;
		}
	}

	._arrow {
		display: block;
		width: 12px;
		height: 6px;
		overflow: visible;
		position: relative;
		z-index: 3;
	}

	._iconBorder {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		transform: rotate(-90deg);
		pointer-events: none;

		._circle {
			stroke: #64739d;
			stroke-width: 1;
			fill: none;
		}
	}

	/* ── ホバー共通（背景フェード・ボーダーワイプ） ── */
	&:hover {
		&::before {
			opacity: 0;
		}

		&::after {
			clip-path: inset(0 0% 0 0 round 3em);
		}

		._icon::before {
			opacity: 0;
		}
	}

	/* ── -navy variant（白背景用） ── */
	&.-navy {
		color: var(--wp--preset--color--corporate);
		background: var(--wp--preset--color--corporate);
		width: 280px;

		&::before {
			background: #ffffff;
			border: 1.15px solid var(--wp--preset--color--corporate);
		}

		&::after {
			border: 1.5px solid var(--wp--preset--color--corporate);
		}

		._icon::before {
			border-color: var(--wp--preset--color--corporate);
		}

		._iconBorder ._circle {
			stroke: #ffffff;
			stroke-width: 1.15;
		}

		&:hover {
			color: #ffffff;
		}

		/* -invert：初期状態とホバーの配色を丸ごと反転（デフォルト＝コーポレート色背景＋白文字／ホバー＝白背景＋コーポレート色文字） */
		&.-invert {
			color: #ffffff;

			&::before {
				opacity: 0;
			}

			._icon::before {
				border-color: #ffffff;
			}

			._iconBorder ._circle {
				stroke: var(--wp--preset--color--corporate);
			}

			&:hover {
				color: var(--wp--preset--color--corporate);

				&::before {
					opacity: 1;
				}
			}
		}
	}
}

/* footer banner */
.site-footer__certs {
	width: fit-content;
	margin-inline: auto;
	display: flex;
	gap: 1em;
	margin-block-start: 3em;

	a {
		display: block;
		width: 100%;
		height: 100%;

		img {
			width: 100%;
			display: block;
			max-width: 226px;
			height: auto;
		}
	}
}


/* header BG設定 */
:where(.slug-industrial_equipment .content-header,
.slug-custom_built .content-header,
.slug-tape_reel .content-header,
.slug-visual_inspection .content-header){
	background-image: url(./assets/img/tape_reel_hbg.webp);
}
/* .slug-tape_reel .content-header {
	background-image: url(./assets/img/tape_reel_hbg.webp);
}
.slug-visual_inspection .content-header {
	background-image: url(./assets/img/visual_inspection_hbg.webp);
} */
/* .slug-custom_built .content-header {
	background-image: url(./assets/img/custom_built_hbg.webp);
} */

.slug-custom_business .content-header {
	background-image: url(./assets/img/custom_business_hbg.webp);
}
.slug-support .content-header {
	background-image: url(./assets/img/support_hbg.webp);
}

.slug-company .content-header {
	background-image: url(./assets/img/company_hbg.webp);
}

.slug-recruit .content-header {
	background-image: url(./assets/img/recruit_hbg.webp);
}

.slug-contact .content-header {
	background-image: url(./assets/img/contact_hbg.webp);
}

main[class*="is-archiveslug"] .content-header{
	background-image: url(./assets/img/contact_hbg.webp);
}
.slug-policy .content-header,
.slug-sitemap .content-header,
main[class*="-post"] .content-header {
	max-height: 300px;
}