@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* ==========================================================================
   テーマ統合用のCSS
   --------------------------------------------------------------------------
   デザイン用のCSSは assets/additional.css（.additional スコープ）に集約している。
   ここに置くのは「SWELL のレイアウト枠と噛み合わせるため」の指定のみ。
   ========================================================================== */

/* デザインページは各セクションが自前で余白を持ち、画面端まで背景を敷くため、
   SWELL のコンテンツコンテナ（.l-content）の上下余白を無効化する。
   - 上：メインビジュアル／パンくずと最初のセクションの間の白帯を消す
   - 下：最後のセクションとフッターの間の白帯を消す */
#content[data-design-page] {
	padding-top: 0;
	margin-bottom: 0;
}


/* ==========================================================================
   下層ページのコンテンツヘッダー（SWELL のタイトルエリア）
   --------------------------------------------------------------------------
   背景画像は SWELL の機能（カスタマイザー／各ページの「タイトル背景画像」）で
   差し替えられる状態を保ったまま、見た目だけを元デザインの
   .page-banner に合わせる。

   additional.css ではなくここに置いているのは、このタイトルエリアが
   本文（.additional）の外側、テーマが出力する領域だからである。

   セレクタを重ねて詳細度を上げているのは、SWELL 本体の
   .l-topTitleArea（0,1,0）と、カスタマイザーが <head> に直接書き出す
   .l-topTitleArea.c-filterLayer::before（0,2,0）に確実に勝たせるため。
   ========================================================================== */

.l-topTitleArea.l-topTitleArea {
	min-height: 220px;
	padding: 0;
}

@media (min-width: 600px) {
	.l-topTitleArea.l-topTitleArea {
		min-height: 300px;
		padding: 0;
	}
}

/* 黒のグラデーション（左が濃く、右へ抜ける）。
   画像フィルターを「なし」にしてあるので ::before は他で使われていない。 */
.l-topTitleArea.l-topTitleArea.l-topTitleArea::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: transparent;
	background-image: linear-gradient(
		90deg,
		rgba(20, 24, 30, 0.72) 0%,
		rgba(20, 24, 30, 0.5) 55%,
		rgba(20, 24, 30, 0.18) 100%
	);
	opacity: 1;
}

/* 本文（1040px）と左端を揃える */
.l-topTitleArea.l-topTitleArea .l-topTitleArea__body {
	max-width: 1088px;
	margin: 0 auto;
	padding: 0 24px;
	text-shadow: none;
}

.mihon-pageTitle__rule {
	display: block;
	width: 48px;
	height: 2px;
	margin: 0 0 24px;
	background: #d93a2b;
}

.mihon-pageTitle__eyebrow {
	display: block;
	margin: 0 0 18px;
	font: 400 12px/1 "Barlow", sans-serif;
	letter-spacing: 0.32em;
	color: rgba(255, 255, 255, 0.82);
}

.l-topTitleArea .mihon-pageTitle__heading {
	margin: 0;
	font: 700 36px/1.4 "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0.1em;
	color: #fff;
}

@media (max-width: 599px) {
	.mihon-pageTitle__rule { margin-bottom: 16px; }
	.mihon-pageTitle__eyebrow { margin-bottom: 12px; }
	.l-topTitleArea .mihon-pageTitle__heading { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   グローバルナビの現在地（加工事例）

   SWELL は現在地の下線を、JSが付ける .-current だけで出している
   （build/js/main.min.js：a の href と location が文字列一致したら付与）。
   そのため加工事例の詳細・絞り込み一覧では、PHP側で current-menu-item を
   付けても下線が出ない。WordPress が出すクラスでも下線が出るようにする。
   （current-menu-item を付け直す側は swell_child/inc/works.php）

   直下の li だけを対象にする。サブメニューの項目（マシニング等）は
   SWELL の既定どおり下線なしのままにする。
   -------------------------------------------------------------------------- */
.c-gnav > li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   フッター

   元デザイン（static-site の .site-footer）に合わせた2段構成。
   本文（.additional）の外＝テーマが出力する領域なので、ここに置く。
   マークアップは parts/footer/footer_contents.php（SWELLの同名ファイルの差し替え）。

   SWELL 既定のフッター装飾を打ち消すため、l-footer 側の指定も含む。
   -------------------------------------------------------------------------- */
.l-footer .mihon-footer {
	padding: 0;
	background: transparent;
}

/* ===== 上段：リンク2列 ===== */
.mihon-footerNav {
	background: #333538;
	padding: 56px 24px;
}

.mihon-footerNav__grid {
	max-width: 1088px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}

.mihon-footerNav__heading {
	margin: 0 0 18px;
	font: 700 14px/1 "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0.1em;
	color: #fff;
}

.mihon-footerNav__links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mihon-footerNav__links li { margin: 0; }

.mihon-footerNav__links a {
	display: inline-block;
	font: 400 13px/1.8 "Zen Kaku Gothic New", sans-serif;
	color: #ccc;
	text-decoration: none;
}

.mihon-footerNav__links a::before { content: "・"; }

.mihon-footerNav__links a:hover { color: #fff; }

/* ===== 下段：会社情報 ===== */
.mihon-footerInfo {
	background: #fff;
	padding: 56px 24px 40px;
}

.mihon-footerInfo__inner {
	max-width: 1088px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.mihon-footerInfo__logo {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 18px;
}

.mihon-footerInfo__logoPrefix {
	font: 700 12px/1 "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0.1em;
	color: #1b3c8e;
}

.mihon-footerInfo__logoName {
	font: 700 22px/1 "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0.12em;
	color: #1b3c8e;
}

.mihon-footerInfo__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 8px 20px;
	margin: 0 0 6px;
	font: 400 13px/1.9 "Zen Kaku Gothic New", sans-serif;
	color: #222;
}

.mihon-footerInfo__num {
	font-family: "Barlow", sans-serif;
	letter-spacing: 0.02em;
}

.mihon-footerInfo__iso {
	margin: 0 0 28px;
	font: 400 13px/1.9 "Zen Kaku Gothic New", sans-serif;
	color: #222;
}

.l-footer .mihon-footerInfo__copyright {
	margin: 0;
	padding: 0;
	font: 400 11px/1.6 "Barlow", sans-serif;
	letter-spacing: 0.06em;
	color: #6b7078;
	text-align: center;
}

@media (max-width: 860px) {
	.mihon-footerNav__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 599px) {
	.mihon-footerNav { padding: 40px 24px; }
	.mihon-footerNav__links { grid-template-columns: 1fr; }
	.mihon-footerInfo { padding: 40px 24px 32px; }
	.mihon-footerInfo__meta { gap: 6px 16px; font-size: 12px; }
}


/* ==========================================================================
   電話番号リンク（[site_tel_link] / mihon_site_tel_link() が出力する a.mihon-tel）
   --------------------------------------------------------------------------
   タップで発信できるのはスマホ幅（599px以下）のときだけ。
   PC幅では assets/js/tel-link.js が href を外し、ただの文字として扱わせる。
   pointer-events: none で止めないのは、カーソルが矢印のままになり、
   ドラッグで番号を選択（コピー）することもできなくなるため。
   下の cursor: text は、JS が動く前の一瞬もカーソルを文字用にしておくための指定。

   フッター（本文の外）と本文の両方で使うため、additional.css ではなくここに置く。
   本文内の色は .additional.additional a に負けるので、additional.css 側でも
   色を引き継ぐ指定をしている。
   ========================================================================== */

/* 番号の途中（ハイフンの後ろ）で折り返さない。
   幅が足りないときは「TEL」と番号のあいだで改行される。 */
a.mihon-tel {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

@media (min-width: 600px) {
	a.mihon-tel {
		cursor: text;
	}
}