/*
Theme Name: seki-thermal_theme
Description: Welcart Basic Child Theme
Author:
Template: welcart_basic
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: seki-thermal_theme
*/

/*
 * CSS Cascade Layers（@layer）は使わない。親テーマCSSがレイヤー化されておらず、
 * レイヤー内のルールはレイヤー外に詳細度を問わず負けるため。優先順位は詳細度と enqueue
 * 順序で制御する。
 */

/*
 * =Web Fonts
 * Montserrat（英字ラベル用）をセルフホスト。可変フォント1ファイル（ウェイト100〜900、38KB）で、
 * ウェイト追加にファイル追加は不要。fontsource.org 配布物で、ライセンスは
 * assets/fonts/MONTSERRAT-LICENSE.txt（SIL OFL）。
 * font-display: swap（白抜け防止）、unicode-range（ラテン文字が出た時だけ取得。
 * 日本語のみのページでは取得しない）。
 */
@font-face {
	font-family: "Montserrat";
	src: url( "assets/fonts/montserrat-latin-wght-normal.woff2" ) format( "woff2" );
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * =游ゴシックのウェイト解決フック
 * Windows の游ゴシックは Regular/Bold と Medium が別ファミリーで、font-family
 * の並びだけでは本文=Medium・見出し=本物のBold を出し分けられない。そこで内部ファミリー "Yu
 * Gothic Web" を作り、local() でウェイトごとに実体を名指しする（500以下→Medium、501以上→Bold）。
 * どれも解決しない端末は --font-jp の次候補へ落ちる。
 * macOS 26 (Tahoe) の新しい游ゴシック（YuGo-Medium / YuGo-Bold）は字面が小さく貧弱に見えるため、
 * あえて local() から外している（Tahoe は次候補の Hiragino Sans に落ちる）。
 * 旧OS世代のMacは従来どおり游ゴシック。
 */
@font-face {
	font-family: "Yu Gothic Web";
	src: local( "Yu Gothic Medium" ), local( "YuGothic-Medium" ), local( "游ゴシック Medium" );
	font-weight: 1 500;
	font-style: normal;
}
@font-face {
	font-family: "Yu Gothic Web";
	src: local( "Yu Gothic Bold" ), local( "YuGothic-Bold" ), local( "游ゴシック Bold" ), local( "游ゴシック" );
	font-weight: 501 1000;
	font-style: normal;
}

/* =Design Tokens (Figma: セキサーマル様｜Webサイトリニューアル)
-------------------------------------------------------------- */
:root {
	scroll-behavior: smooth;

	/* ベースカラー（企業サイト／採用サイト共通） */
	--color-navy: #1d3557;      /* ヘッダー・フッター・共通背景 */
	--color-ivory: #f5f2ee;     /* 濃色背景上のテキスト／淡背景 */
	--color-white: #ffffff;
	--color-text: #333333;      /* 本文テキスト（淡色背景上） */
	--color-recruit-text: #111111; /* 採用サイトの本文テキスト */
	--color-corporate-heading: #002449; /* 企業サイトの見出しテキスト */

	/* 企業サイト（本サイト）アクセント */
	--color-corporate-accent: #e67e22; /* オレンジ：CTAボタン */

	/* 採用サイト（採用情報配下）アクセント */
	--color-recruit-accent: #2f80ed;   /* ブライトブルー：ナビ・見出し・CTA */
	--color-recruit-accent-sub: #6fcf97; /* グリーン系装飾 */
	--color-recruit-light-blue: #56ccf2; /* ライトブルー系装飾 */
	--color-recruit-bg: #f1f9ff;         /* 採用サイトの背景色（Figmaバリアブルコレクションより） */
	--color-recruit-background:#E8F3FC;

	/* クロスパイル（自社商品）ブランド専用 */
	--color-crosspile-blue-1: #0061c8;
	--color-crosspile-blue-2: #4a90e2;
	/* クロスパイルページのヘッダー背景。このページだけ背景色を差し替える. */
	--color-crosspile-header: #607284;

	/* レイアウト */
	--width-container: 1100px;  /* コンテンツの最大幅（フッター上段等の中央寄せコンテナ） */

	/*
	 * ヘッダーの実測高さ（header-scroll.js がセット）。fixed ヘッダーのため、body の padding-top と
	 * scroll-margin-top が同じ値を必要とする。縮小前の高さを使う（縮んでも本文が動かないように）。0px
	 * はJS未実行時のフォールバック。
	 */
	--header-height: 0px;

	/*
	 * フォント。OSごとの同系統フォントを順に並べ、目的の書体が無い端末でも近い印象に落とす。
	 * 日本語名の別名も併記（OS/言語設定で片方でしか解決しない場合があるため）。先頭の "Yu Gothic Web"
	 * は上部の@font-faceで出し分ける内部ファミリー。
	 */
	--font-jp:
		"Yu Gothic Web",
		"Hiragino Sans", "ヒラギノ角ゴシック",
		"Noto Sans JP", "Noto Sans CJK JP",
		Meiryo, "メイリオ",
		sans-serif;

	/*
	 * 英字ラベル用（Montserrat は可変フォント）。ウェイト運用: Regular(400)=既定 /
	 * SemiBold(600)=控えめなラベル（例 .c-site-header__nav-en、現状 normal） /
	 * Bold(700)=見出し内ラベル（親の bold を継承し、要素側に font-weight: 700 を直書きしない）。
	 */
	--font-en:
		"Montserrat",
		"Helvetica Neue", Helvetica, Arial,                  /* macOS / iOS / 汎用 */
		"Segoe UI", Roboto,                                  /* Windows / Android */
		sans-serif;

	/*
	 * 明朝体。クロスパイル見出し専用で、旧サイトの明朝スタックを踏襲。Shippori Mincho
	 * をクロスパイル限定で Google Fonts から読み込む（functions.php）ので、
	 * 他ページはシステムフォントに落ちる。読み込むウェイト以外の太字は合成太字になる。
	 */
	--font-mincho:
		"Shippori Mincho",                                   /* クロスパイル限定でGoogle Fontsから読み込み（Medium/500） */
		"游明朝体", "Yu Mincho", YuMincho,                     /* Windows / macOS */
		"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",         /* macOS / iOS */
		"HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝",                   /* 旧Windows */
		"Noto Serif JP",                                     /* Android / Linux */
		serif;

	/*
	 * Montserrat はセルフホスト（ファイル冒頭の @font-face を参照）。
	 * 可変フォントのため 100〜900 のどのウェイトを指定してもそのまま出せる。
	 */
}

/*
 * macOS/iOSのみ Zen Kaku Gothic New を使う。OS判定は header.php のJSで行い、該当時だけ is-apple
 * クラスとフォント読み込みを付ける。Yu Gothic系は意図的にフォールバックに含めない。
 */
html.is-apple {
	--font-jp:
		"Zen Kaku Gothic New",
		"Hiragino Sans", "Hiragino Kaku Gothic ProN",
		-apple-system, BlinkMacSystemFont,
		sans-serif;
}

.en-type{
	font-family: var( --font-en );
}

/* page API view-transition */
@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;
  }
}

/*
 * =Base Reset
 * --------------------------------------------------------------
 * 親テーマの style.css は読み込まないため、
 * リセットと基本タイポグラフィはここで持つ（見出し・段落の余白、リスト記号、画像の隙間など、
 * 邪魔なブラウザ既定値だけを打ち消す最小構成）。要素セレクタは :where() で詳細度0にし、
 * コンポーネント側は単一クラスで確実に上書きできる。
 * --------------------------------------------------------------
 */
*, *::before, *::after{
	box-sizing: border-box;
}

/*
 * ルートフォントサイズ。768px未満では15pxに縮小する（rem 指定の文字・余白が比例縮小する。
 * px固定の値は対象外）。
 */
:where( html ) {
	font-size: 16px;
	/*
	 * All menu を開くと body の overflow: hidden でスクロールバーが消え、その分（約15〜17px）
	 * ページ幅が変わってヘッダー右側のボタンが横にずれる。stable で常に同じ幅の余白を確保して防ぐ。
	 */
	scrollbar-gutter: stable;
}

@media ( max-width: 768px ) {
	:where( html ) {
		font-size: 15px;
	}
}

/*
 * fixed ヘッダーの下に本文が潜り込まないようにする補填。透過ページ（body.header-overlay）は、
 * MVを画面最上部から始めるため補填しない。
 */
body:not( .header-overlay ) {
	padding-top: var( --header-height );
}
/*
 * ページ内リンクの着地位置をヘッダーの高さぶん下げる。:where() で詳細度0（クラス1つで上書き可）。
 * JSの scrollIntoView() にも効かせるため :target ではなく [id] に当てている。
 */
:where( [id] ) {
	scroll-margin-top: var( --header-height );
}

:where( body ) {
	margin: 0;
	font-family: var( --font-jp );
	font-weight: 500;
	color: var( --color-text );
	background: var( --color-white );
	line-height: 1.8;
	font-feature-settings: "palt";
	-webkit-text-size-adjust: 100%;
}

/* 見出しは既定の大きさ・余白を持たない。サイズは c-section-heading 等のコンポーネント側で決める. */
:where( h1, h2, h3, h4, h5, h6 ) {
	margin: 0;
	font-size: inherit;
	font-weight: bold;
	line-height: 1.4;
}

:where( p, figure, blockquote, dl, dd ) {
	margin-block: 0;
	font-feature-settings: "palt";
	margin-inline: unset;
}
:where(em,address){font-style: normal;}

:where( ul, ol ) {
	margin-block-start: 0;
	padding-inline-start: 1em;
}
:where( a ) {
	color: inherit;
}
:where( img, picture, video, canvas, svg ) {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(main p){
	text-align: justify;
}

/*
 * フォーム部品はブラウザ既定のフォントを引き継がないため明示する。
 * appearance: none は、読み込まない親テーマ（welcart_basic/style.css）が持っていたリセットの移植。
 * 無いとOS/ブラウザ既定の立体的なボタン装飾（input[type=submit]等）がそのまま出る。
 */
:where( input, button, textarea, select ) {
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--color-white);
	border:1px solid #D9D9D9;
}
/*
 * チェックボックス・ラジオは appearance: none
 * にするとチェック状態が見えなくなる（親テーマも同様に、この2つだけネイティブ描画へ戻していた）。
 */
:where( input[type="checkbox"] ) {
	-webkit-appearance: checkbox;
	appearance: checkbox;
}
:where( input[type="radio"] ) {
	-webkit-appearance: radio;
	appearance: radio;
}
/*
 * select は appearance: none で▼矢印が消える。親テーマは select-arrow.gif
 * で矢印を付けていたが読み込まないため、外部画像に依存しないインラインSVGの矢印を背景に置く。
 */
:where( select ) {
	padding-inline-end: 2em;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M6 8 0 0h12z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.75em center;
	background-size: 0.75em;
}
:where( input, button, textarea, select ):focus-visible {
	outline: 1px solid var( --color-accent );
}
:where( table,th,td ) {
	border-collapse: collapse;
	border-spacing: 0;
	color: inherit;
	font-size: inherit;
}

/* テーブルデザイン */
.designTable.wp-block-table {
	table {
		margin-block: 1em;
		border: none;
		display: grid;
		font-weight: 700;
	}

	tr {
		display: flex;
	}

	td {
		border-color: #D9D9D9;
		border-left: none;
		border-right: none;
		border-bottom: transparent;
		display: block;
		width: 100%;
		padding-block: 1.5em;
		padding-inline: 1.5em;
	}

}
@media(600px >width) {
	.designTable.wp-block-table {
	tr{flex-direction: column;border-top: 1px solid #D9D9D9;}
	tr:nth-last-of-type(1){border-bottom: 1px solid #D9D9D9;}
	tr td{border:none;}
	tr td:nth-child(1){padding-block-end: 0.25em;}
	tr td:nth-child(2){padding-block-start: 0.25em;font-weight: 500;}
	}
}
@media(600px <=width) {
	.designTable.wp-block-table {
	tr {
			flex-direction: row;
			column-gap: 2em;
		}
		td:nth-child(1) {
			width: 35%;
			padding-inline-start: 1em;
		}
	 tr td {
			border-top: 1px solid #D9D9D9;
			padding-block: 1.75em;
			line-height: 2;
		}
		tr td:nth-child(2){
		padding-inline-start: 2em;
	}
		tr:nth-last-of-type(1) td {
			border-bottom: 1px solid #D9D9D9;
		}
	}
}
/*
 * =Layout
 * --------------------------------------------------------------
 * #main（本文エリア）の共通の幅・余白。付与クラスは functions.php の
 * seki_thermal_theme_main_classes() を参照。
 * --------------------------------------------------------------
 */
.l-main {
	margin-inline: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	:root {
		scroll-behavior: auto;
	}
}

/* サイト種別ごとのアクセントカラー切り替え（body_class で出し分け） */
body.site-corporate {
	--color-accent: var(--color-corporate-accent);
}
body.site-recruit {
	--color-accent: var(--color-recruit-accent);
}

/*
 * .hero は #main の幅にそのまま追従する（width: 100%）。画面幅ブレイクアウト（100vw）は、
 * scrollbar-gutter との組み合わせで左端に隙間が出るため使わない。
 */
.hero{min-height: calc( var( --header-height ) * 2 );width:100%;}
/*
 * .header-overlay の hero にサイトヘッダー（fixed）を重ねる。透過ページは body の padding-top
 * 補填が外れて hero が最上部から始まるため、見出しが隠れないよう hero
 * の内側に余白を確保する（border-box なので総高さは変わらない）。
 * Welcart系・クロスパイル・採用は重ねない。
 */
.header-overlay .hero {
	padding-top: var( --header-height );
}

.hero{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	.entry-title-en{
		display: block;
		font-family: var( --font-en );
	}
}
header.hero{
	color: var(--color-white);
}


@media(1140px > width){
		div.c-breadcrumbs,div.c-archive-products {
			margin-inline: 1em;
			/* 共有ルールの width: 100% のままだと、左右の margin ぶん右にはみ出す */
			width: auto;
		}
	}

	:where(.c-archive-posts, .category-news .entry-content,.c-archive-products, .storycontent,.cart-page, .c-site-footer__inner, .error-404.not-found, .site-content, .l-main--policy .entry-content, .inner-element-content){
	width: 100%;
	max-width: var(--width-container);
	margin-inline: auto;
	margin-block-end: 7.5em;
	@media(1140px > width){
		padding-inline: 1rem;
	}
}
	:where(.inner-element-w){
	width: 100%;
	max-width: var(--width-container);
	margin-inline: auto;
	@media(1140px > width){
		padding-inline: 1rem;
	}
}

.c-archive-pagination{
	max-width: fit-content;
		margin-inline: auto;
		margin-block: 2em 3em;

		.page-numbers:not(.dots) {
			color: var(--color-text);
			aspect-ratio: 1 / 1;
			text-align: center;
			width: 3em;
			cursor: pointer;
			border:1px solid transparent
		}

		.page-numbers.current {
			color: var(--color-white);
			border: 1px solid var(--color-accent);
			background-color: var(--color-accent);
			border-radius: 50%;
			width: 3em;
		}
		.page-numbers.prev, .page-numbers.next {
			width: fit-content;
		}

}




/* 改行デスクトップ、スマホでの非表示切り替え */
@media(768px <= width){br.dknone{display: none;}.dknone{display: none;}}
@media(768px >= width){br.none{display: none;}.spnone{display: none;}}


/* テーブル */
.c-company-table {
	margin-block-start: 3.5rem;
}
.c-company-table table{
	width: 100%;
	border-collapse: collapse;
	font-weight: 600;

	tr,td{border:unset}

	tbody{
	tr {
		border-bottom: 1px solid #D9D9D9;
	}

	tr td:nth-child(1) {
		background-color: var(--color-corporate-heading);
		color: var(--color-white);
		padding: 1.25rem 1.5rem;
		text-align: center;
		vertical-align: middle;
		font-weight: 700;
		white-space: nowrap;
	}

	td {
		background-color: var(--color-white);
		padding: 1.25rem 2rem 1.25rem 4rem;
		line-height: 1.8;
		vertical-align: middle;
		text-align: left;
	}
	iframe{
		margin-block-start: 1rem;
		width: 100%;
		max-width: 422px;
	}
}
}

@media(600px > width) {
	.c-company-table table{
		display: block;
		tbody{
			tr{
				display: grid;
			}
		tr td:nth-child(1){
			text-align: start;
			padding-block: 0.5rem;
		}
		td {
			padding: 0.75rem 1rem 1rem;
			a[href="https://www.seki-thermal.jp/kobayashi-tk/"]{font-size: 0.9em;}
		}
	}
}
}

.emphasis {
	-webkit-text-emphasis-style: dot; /* Safari対応 */
	text-emphasis-style: dot;
	-webkit-text-emphasis-color: var(--color-recruit-accent-sub);;
	text-emphasis-color: var(--color-recruit-accent-sub);;
	-webkit-text-emphasis-position: over right;
	text-emphasis-position: over right;
}