@charset "UTF-8";
/*
    Template: swell
    Theme Name: KomatsuSousyoku（SWELL子テーマ）
    Theme URI: https://w3planning.com/
    Description: 小松装飾様サイト専用 SWELL子テーマ
    Version: 1.0.0
    Author: Wonder3
    Author URI: https://w3planning.com/

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

/* =========================================================
   ヘッダーロゴサイズ（SWELLカスタマイザー上限: PC 120px を上書き）
   ========================================================= */
@media (min-width: 960px) {
	:root {
		/* 通常ヘッダー（カスタマイザーでは120pxまで） */
		--logo_size_pc: 160px;
		/* 追従ヘッダー（スクロール後）。通常ロゴ（160px）の50% */
		--logo_size_pcfix: 80px;
	}
}

/* =========================================================
   フッター直前：Googleマップのみ余白調整（#map_access）
   ========================================================= */

/* マップ直上の余白（.w-beforeFooter の margin-top: 6em） */
#before_footer_widget {
	margin-top: 0;
}

/* マップ直上の余白（#content / .l-content の margin-bottom: 6em） */
body:has(#map_access) #content {
	margin-bottom: 0;
}

/* マップブロック内の余白 */
#map_access,
#map_access .swell-block-fullWide__inner {
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* マップとCTAの間（.c-widget + .c-widget の 2em） */
#before_footer_widget #custom_html-2 + #custom_html-3 {
	margin-top: 0;
}

/* iframe 下の1px程度の隙間対策 */
#map_access iframe {
	display: block;
}

/* =========================================================
   横並び：ボタン下揃え（.is-btn-bottom-align）
   ========================================================= */
.is-btn-bottom-align > .swell-block-columns__inner {
	align-items: stretch;
}

.is-btn-bottom-align > .swell-block-columns__inner > .swell-block-column {
	display: flex;
	flex-direction: column;
}

.is-btn-bottom-align > .swell-block-columns__inner > .swell-block-column > .swell-block-columns {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.is-btn-bottom-align > .swell-block-columns__inner > .swell-block-column .swell-block-columns__inner {
	flex: 1;
	flex-direction: column;
	flex-wrap: nowrap;
}

.is-btn-bottom-align .is-btn-area {
	margin-top: auto;
}

.is-btn-bottom-align > .swell-block-columns__inner > .swell-block-column > .swell-block-columns > .swell-block-columns__inner > .swell-block-column:last-child:not(.is-btn-area) {
	margin-top: auto;
}

/* =========================================================
   お便りバックナンバー：横並び行内のカード高さ揃え
   .newsletter-columns-row を wp:loos/columns の外側 div に付与
   スマホ（1列）は対象外
   ========================================================= */
@media (min-width: 600px) {
	.newsletter-columns-row > .swell-block-columns__inner {
		align-items: stretch;
	}

	.newsletter-columns-row > .swell-block-columns__inner > .swell-block-column {
		display: flex;
		flex-direction: column;
	}

	.newsletter-columns-row > .swell-block-columns__inner > .swell-block-column > .wp-block-group {
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 100%;
		box-sizing: border-box;
	}

	.newsletter-columns-row > .swell-block-columns__inner > .swell-block-column > .wp-block-group > .wp-block-group__inner-container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.newsletter-columns-row .wp-block-list {
		flex: 1;
		margin-bottom: 0;
	}
}

/* =========================================================
   固定ページ：SWELL自動タイトル非表示
   （見出しはブロックエディター側で各ページに配置）
   ※ SWELLは body_class() を #body_wrap に出力する
   ========================================================= */
#body_wrap.page #main_content .c-pageTitle {
	display: none;
}

#body_wrap.page #top_title_area {
	display: none;
}

/* =========================================================
   施工事例・特殊加工 詳細：表示調整
   ========================================================= */
#body_wrap.single-product .c-postTitle__date,
#body_wrap.single-product .p-articleMetas__times,
#body_wrap.single-product .p-articleMetas__author,
#body_wrap.single-product .l-articleBottom__section.-author,
#body_wrap.single-product .l-articleBottom__section.-related,
#body_wrap.single-method .c-postTitle__date,
#body_wrap.single-method .p-articleMetas__times,
#body_wrap.single-method .p-articleMetas__author,
#body_wrap.single-method .l-articleBottom__section.-author,
#body_wrap.single-method .l-articleBottom__section.-related {
	display: none;
}

/* =========================================================
   サイドバー「最近の◯◯」：リスト下の余白
   （特殊加工・施工事例・お知らせ）
   ========================================================= */
#sidebar .widget_recent_entries {
	margin-bottom: 2em;
}

/* =========================================================
   パンくずリスト
   ========================================================= */
#breadcrumb,
.p-breadcrumb {
	background-color: #F7F6F2;
}

/* シングルページ：現在地タイトルを表示（SWELL標準は非表示） */
#body_wrap.single .p-breadcrumb__item:last-child > span.p-breadcrumb__text {
	display: inline-flex;
}

/* =========================================================
   メインビジュアル：キャッチコピー位置（ヘッダー下の残りエリア内）
   --mv-header-offset / --mv-text-shift-up は assets/js/mv-text-position.js で設定
   --mv-text-position-ratio: 0.5=中央, 0.4=やや上
   ========================================================= */
#main_visual {
	--mv-header-offset: 100px;
	--mv-text-bottom-offset: 48px;
	--mv-text-position-ratio: 0.4;
}

@media (min-width: 960px) {
	#main_visual {
		--mv-header-offset: 220px;
	}
}

#main_visual .p-mainVisual__textLayer {
	justify-content: center;
	padding-top: var(--mv-header-offset, 0px);
	padding-bottom: var(--mv-text-bottom-offset, 48px);
	box-sizing: border-box;
	transform: translateX(-50%) translateY(calc(-1 * var(--mv-text-shift-up, 0px)));
}

/* =========================================================
   メインビジュアル・ヘッダー：文字の読みやすさ
   （文字周辺のみ薄い暗幕＋サイズ／text-shadow。写真全体は暗くしない）
   ========================================================= */

/* キャッチ周辺だけ薄い暗幕（写真全体は変えない） */
#main_visual .p-mainVisual__textLayer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 65% 50% at 50% 48%,
		rgba(0, 0, 0, 0.32) 0%,
		rgba(0, 0, 0, 0.12) 42%,
		transparent 72%
	);
	pointer-events: none;
	z-index: 0;
}

#main_visual .p-mainVisual__textLayer > * {
	position: relative;
	z-index: 1;
}

#main_visual .p-mainVisual__slideTitle {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.85),
		0 2px 8px rgba(0, 0, 0, 0.6),
		0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

#main_visual .p-mainVisual__slideText {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.8),
		0 2px 8px rgba(0, 0, 0, 0.55),
		0 3px 14px rgba(0, 0, 0, 0.35) !important;
}

/* SWELL標準: PC 28px / 16〜18px → ヒーロー向けに拡大 */
@media (min-width: 600px) {
	#main_visual .p-mainVisual__slideTitle {
		font-size: 36px;
	}

	#main_visual .p-mainVisual__slideText {
		font-size: 18px;
	}

	#main_visual.-height-full .p-mainVisual__slideText {
		font-size: 20px;
	}
}

/* ナビ文言は .ttl（14px固定）側を上書き。a への指定では効かない */
@media (min-width: 960px) {
	.c-gnav > .menu-item > a .ttl {
		font-size: 17px;
		font-weight: 500;
	}

	#header.-transparent .c-gnav > .menu-item > a .ttl {
		text-shadow:
			0 1px 2px rgba(0, 0, 0, 0.85),
			0 2px 8px rgba(0, 0, 0, 0.55),
			0 3px 12px rgba(0, 0, 0, 0.35);
	}
}

@media (max-width: 959px) {
	[data-scrolled=false] #header.-transparent .l-header__menuBtn,
	[data-scrolled=false] #header.-transparent .l-header__customBtn {
		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
	}
}

/*
  [w3] Blocks Animation 移動距離ユーティリティは style.css ではなく
  assets/css/w3-blocks-animation-move.css に分離（プラグインCSSより後に読ませるため）。
  読み込みは functions.php を参照。
*/