@charset "UTF-8";

/*** 共通タグ設定 ***/
html { scroll-behavior: smooth; }

body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	color: #4A5966;
	min-width: 1000px;
}
* { box-sizing: border-box; }
p { margin: 0; padding: 0; }
img { vertical-align: bottom; }
a { text-decoration: none; }
a[name] { scroll-margin-top: 96px; }
ul {
	margin: 0;
	padding: 0;
}
#top_main { margin-top: -90px; }

#to_top {
	position: fixed;
	bottom: 40px;
	right: 40px;
}
#to_top:hover { filter: brightness(80%); }

/* 補助 */
.invisible { visibility: hidden; }

.pc_hidden{
	display: none;
}
.phone_hidden{
	display: block;
}
/************************************************/
/* ヘッダー */
/************************************************/

/* ========== 基本レイアウト ========== */
header.index_header {
	position: sticky;
	top: 0;
	z-index: 1002;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-width: 1200px;
	background-color: transparent;
}
.header_logo img {
	max-height: 50px;
	margin: 20px 0;
	margin-left: 160px;
}

/* ナビ全体 */
#header_menu_block {
	flex: 1;
	text-align: right;
	height: 100%;
	margin-right: 160px;
}

/* メニューUL */
.header_menu {
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* メニュー項目（共通アンカー） */
.header_menu_item { display: flex; justify-content: center; align-items: center; }
.header_menu_item > a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 90px;
	padding: 0 12px;
	font-size: 14px;
}

/* お問い合わせボタン */
a.header_contact {
	background-color: #6E71AB;
	color: #fff;
	width: 130px;
	height: 36px;
	border-radius: 20px;
}
a.header_contact:hover { filter: brightness(120%); }

/* ===== サブメニュー基礎 ===== */
.has-submenu { position: relative; }
.header_menu_item > a.menu_title {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

/* サブメニュー本体（非表示） */
.header_submenu_block {
	position: absolute;
	top: 100%;
	left: 0;
	opacity: 0;
	visibility: hidden;
	background: #fff;
	padding: 42px;
	z-index: 1000;
	text-align: left;
	transition: opacity 220ms ease, visibility 220ms ease;
}
.header_submenu_block a { color: #4A5966; text-decoration: none; }

.header_submenu_list { list-style: none; margin: 0; padding: 0; }
.header_submenu_list li { margin-bottom: 0; }
.header_submenu_list a{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

h3.header_submenu_class { font-size: 16px; font-weight: 700; margin: 0; }
h3.header_submenu_class:nth-of-type(2) { margin-top: 52px; }

.header_submenu_title { color: #6E71AB; font-size: 40px; font-weight: 700; }

.product_link { color: #4A5966; font-size: 16px; font-weight: 700; margin-left: 30px; }
.product_link:hover { text-decoration: underline; }
.product_link:visited { color: #4A5966; }

/* 商品/加工品リストのカード配置 */
section.header_submenu_section ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 24px;
}
section.header_submenu_section ul li {
	width: 165px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #777E90;
	margin-bottom: 8px;
	position: relative;
	transition: all 220ms;
}
section.header_submenu_section ul li:hover { opacity: 0.8; transition: all 220ms; }
section.header_submenu_section li a { color: #fff; }
section.header_submenu_section li a::after {
	content: ">";
	position: absolute;
	right: 16px;
}

/* ===== PC：ホバー＆キーボードで展開 ===== */
@media (hover: hover) and (pointer: fine) {
	.has-submenu:hover > .header_submenu_block,
	.has-submenu:focus-within > .header_submenu_block {
		opacity: 1;
		visibility: visible;
	}

	/* モバイル用トグルUIはPCでは非表示 */
	.has-submenu .submenu-toggle,
	.has-submenu .submenu-label { display: none; }

	/* サブメニューの位置・サイズ */
	.has-submenu .header_submenu_block {
		position: absolute;
		left: 50%;
		transform: translateX(-54.6%);
		top: 100%;
		width: 820px;
		max-width: 90vw;
		transition: all 220ms;
	}
	.has-submenu .company_section {
		position: absolute;
		left: 50%;
		transform: translateX(-54.2%);
		top: 100%;
		width: 520px;
		max-width: 90vw;
	}

	/* スクロール後の配色切替 */
	#top_header.is-scrolled {
		background: #fff;
		box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
		transition: all 220ms;
	}
	#top_header.is-scrolled .header_menu_item > a { color: #4A5966; }
	#top_header.is-scrolled .header_menu_item > a.header_contact { color: #fff; }

	.header_logo .logo--dark {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity 220ms;
	}
	#top_header.is-scrolled .logo--dark { opacity: 1; }
	#top_header.is-scrolled .logo--light { opacity: 0; }

	/************************************************/
	/* メニューhover時の下線 */
	/************************************************/
	:root {
		--link-underline-thickness: 3px;
		--link-underline-speed: 220ms;
	}
	.link_line {
		position: relative;
		display: inline;
		text-decoration: none;
		background-image: linear-gradient(white, white);
		background-repeat: no-repeat;
		background-position: 0 70%;
		background-size: 0 2px;
		transition: background-size 0.3s ease;
	}
	#top_header.is-scrolled .link_line {
		background-image: linear-gradient(#4A5966, #4A5966);
	}
	.link_line:hover,
	.link_line:focus-visible {
		background-size: 100% var(--link-underline-thickness);
	}

	/************************************************/
	/* メニューhover時の背景オーバーレイ */
	/************************************************/
	#header_menu_block { position: relative; z-index: 1002; }
	#top_header + #top_main::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .35);
		opacity: 0;
		pointer-events: none;
		transition: opacity 180ms ease;
		z-index: 1001;
	}
	#top_header:has(.has-submenu:hover) + #top_main::before,
	#top_header:has(.has-submenu:focus-within) + #top_main::before {
		opacity: 1;
	}
}

#top_header_phone{
	display: none;
}
/************************************************/
/* フッター */
/************************************************/
.footer_contact_block {
	padding: 44px;
	text-align: center;
	background-color: #6E71AB;
	color: white;
}
.footer_contact_title { margin: 0; margin-bottom: 18px; font-size: 28px; font-weight: 700; line-height: 1; }
.footer_contact_notice { line-height: 1.5; margin-bottom: 40px; }

.footer_contact_method {
	display: flex;
	justify-content: center;
	align-items: stretch;
}
.footer_contact_method > div { width: 360px; }
.footer_contact_method > div > div:first-child {
	font-size: 18px;
	font-weight: 700;
}
.footer_form_button {
	width: 326px;
	margin: 0 auto;
	border-radius: 40px;
	background-color: white;
	position: relative;
	margin-top: 30px;
}
.footer_form_button a {
	display: block;
	width: 100%;
	height: 100%;
	color: #6E71AB;
	font-size: 18px;
	font-weight: 700;
	padding: 12px;
}
.footer_form_button a:after {
	content: ">";
	position: absolute;
	right: 16px;
}
.footer_form_button a:hover { opacity: 0.8; }

.footer_contact_method span { font-size: 40px; font-weight: 700; }
.footer_contact_tel {
	border-left: solid 1px white;
	border-right: solid 1px white;
}
.footer_contact_tel a{
	color: white;
}

.footer_sitemap_area { padding: 72px 0 60px 0; background-color: #E1E5EE; }
.footer_sitemap_block {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	max-width: 1120px;
	margin: 0 auto;
}
.footer_sitemap_block p { font-weight: 700; line-height: 2; margin-bottom: 22px; }
.footer_sitemap_block a { color: #4A5966; line-height: 180%; }
.footer_sitemap_block a:hover { opacity: 0.8; text-decoration: underline; }
.footer_sitemap_block a:visited { color: #4A5966; }

.company_name { font-size: 24px; }
.about_company { margin: 30px 0 11px 0 !important; }
.Copyright {
	max-width: 1120px;
	margin: 0 auto;
	margin-top: 40px;
	text-align: right;
}

/************************************************/
/* スライダー */
/************************************************/

.carousel {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 calc(50% - 50%);
	overflow: hidden;
}
.slides { position: relative; width: 100%; height: 100%; overflow: hidden;}
.slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 700ms ease;
}
.slide.is-active { opacity: 1; }
.slide img {
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1);/* 初期は拡大 */
	display: block;
}
/* ← これが「最初だけ」効く。rootに .zoom-intro がある間だけ発火 */
#carouselFade.zoom-intro .slide.is-active img {
	transform: scale(1.1); /* 拡大状態から */
	animation: zoomToNormal 1000ms ease-out 1ms both; /* 元サイズへ */
}

@keyframes zoomToNormal {
	from { transform: scale(1.1); }
	to   { transform: scale(1); }
}

/* ドット */
.dots {
	position: absolute;
	left: 50%; bottom: 14px;
	transform: translateX(-50%);
	display: flex; gap: 10px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(0,0,0,.28);
	backdrop-filter: blur(4px);
}
.dot {
	width: 12px; height: 12px;
	border-radius: 50%; border: 0;
	background: rgba(255,255,255,.6);
	cursor: pointer;
}
.dot[aria-selected="true"] { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25) inset; }
.dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* SR */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.carousel{
	isolation: isolate;
}
/* スライダーテキスト */
.slide_word_area {
	position: absolute;
	width: 100%;
	top: 40%;
	left: 0;
	color: white;
	font-weight: 700;
	opacity: 0;
	transform: translateY(-48px);
	animation: areaIn 800ms ease-out 900ms both;
	will-change: opacity, transform;
	z-index: 1;
}
@keyframes areaIn {
	from { opacity: 0; transform: translateY(-48px); }
	to   { opacity: 1; transform: translateY(0); }
}
.title-band {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 40.9%;
	height: 106px;
	transform: translateY(-48px) scaleX(0.3);
	transform-origin: left center;
	/*background: rgba(119, 126, 144, 0.3);*/
	background: #777E90;
	mix-blend-mode: multiply;
	animation: bandWipe 800ms ease-out 900ms both;
	will-change: transform;
	opacity: 0;
}
@keyframes bandWipe {
	to { opacity: 0; transform: translateY(-48px) scaleX(0.3); }
	to { opacity: 1; transform: translateY(0) scaleX(1); }
}
.slide_title {
	display: block;
	font-size: 60px;
	color: white;
	width: 100%;
	margin: 0 0 32px 0;
	padding: 12px 0 12px 160px;
}
.slide_text {
	padding-left: 160px;
	font-size: 18px;
	line-height: 180%;
}

/* インデックス product エリア */
.index_product_link_block {
	position: relative;
	padding-top: 150px;
	height: 945px;
	outline: solid 1px blue;
}


.index_product_back {
	width: 100vw;
	min-width: 1370px; /* 必要なら残す（全体の最小幅） */
	height: 795px;
	position: absolute;
	right: max(0px, calc((100vw - min(100vw, 1048px)) / 2 - 150px));
	display: flex;
	justify-content: flex-end;
	overflow: hidden; /* はみ出しを見せたくないなら付ける */
	z-index: -1;
}

/* ★ 左カラムは “見せ窓”。min-width は付けない（縮めてトリミングさせる） */
.index_product_back > div {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

/* ★ 画像：幅を clamp(1280px, 100%, 100%) にして、
1280px 未満には縮まず、1280pxを超えたら箱幅にフィットさせる */
.index_product_back > div img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);    /* 中央トリミング */
	height: 100%;
	width: clamp(1280px, 100%, 100%);/* 画面≥1280→100%、画面<1280→1280px */
	max-width: none;                 /* グローバルの img{max-width:100%} を無効化 */
	object-fit: cover;               /* 縦横比を保って箱いっぱいにカバー */
	filter: brightness(80%);
}

/* 右側の画像（親高さに合わせる例） */
.index_product_back > img {
	flex-shrink: 0;
	height: 100%;
	width: auto;
}


.index_product_back_gray {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -2;
	overflow: hidden;
}
.index_product_grid_block {
	width: 1048px;
	margin: 0 auto;
	position: relative;
}
.index_product_title {
	font-size: 100px;
	font-weight: 700;
	color: #6E71AB;
	position: absolute;
	top: -242px;
	left: 0;
}
.product_text {
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 90px;
}
.product_text h3 { font-size: 32px; font-weight: 700; margin: 0; }
.product_text div { font-size: 18px; width: 700px; }
.index_product_grid ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	padding-left: 0;
}
.index_product_grid li { margin: 6px 0; position: relative; }
.index_product_grid img { transition: all 220ms; z-index: 2; }
.index_product_grid img:hover { opacity: 0; }
.index_product_grid div {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	color: white;
	font-weight: 700;
	line-height: 1.3;
	background-color: #8F97AA;
	z-index: -1;
}
.product_detail_button {
	position: absolute;
	right: 0;
	width: 287px;
	padding: 11px;
	margin-top: 24px;
	background-color: #6E71AB;
}
.product_detail_button:hover { filter: brightness(120%); }
.product_detail_button a {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	color: white;
	font-size: 22px;
	font-weight: 700;
}
.product_detail_button a:visited { color: white; }

/* インデックス 加工品エリア */
.index_processing_area { position: relative; padding-top: 130px; padding-bottom: 120px; }
.index_processing_block {
	width: 1120px;
	height: 100%;
	margin: 0 auto;
	position: relative;
	padding-left: 68px;
	box-sizing: content-box;
}
.index_processing_back {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to right,
			#C4C6EC 0,
			#C4C6EC calc(50% - 560px),
			#fff calc(50% - 560px),
			#fff calc(50% + 560px),
			#fff calc(50% + 560px),
			#fff 100%
		);
}
.processing_text {
	color: #777E90;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
}
.processing_text h3 { font-size: 32px; font-weight: 700; margin: 0; }
.processing_text div { font-size: 18px; width: 440px; }

.index_processing_grid {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
.index_processing_grid a {
	color: white;
	font-size: 18px;
	font-weight: 700;
	display: block;
	width: 100%;
	height: 100%;
}
.index_processing_grid a:hover { filter: brightness(130%); opacity: 0.9; }
.index_processing_grid a:visited { color: white; }

.index_processing_grid a div {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(30, 46, 85, 0.6);
	padding: 8px;
	margin-top: 7px;
	position: relative;
}
.index_processing_grid a div::after {
	content: ">";
	position: absolute;
	right: 24px;
}

div.processing_other_block {
	width: 257px;
	background-color: rgba(30, 46, 85, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}
div.processing_other_block a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
div.processing_other_block a::after {
	content: ">";
	position: absolute;
	right: 24px;
}
div.processing_other_block:hover { filter: brightness(130%); opacity: 0.9; }

.processing_detail_button {
	width: 287px;
	padding: 11px;
	margin-top: 34px;
	background-color: #6E71AB;
}
.processing_detail_button:hover { filter: brightness(120%); }
.processing_detail_button a {
	color: white;
	display: block;
	width: 100%;
	text-align: center;
}

.index_strength_area { position: relative; padding: 100px 0; }
.strength_back {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	background: linear-gradient(115deg, #C4C6EC 50%, #F5F6F7 50%);
}
.index_strength_block { width: 1136px; margin: 0 auto; text-align: center; }
.index_strength_title { font-size: 42px; font-weight: 700; }
.index_strengh_text { line-height: 240%; }

/* 当社の強み */
.index_strength_link_block {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 50px;
}
.index_strength_link_block a:hover { filter: brightness(120%); opacity: 0.9; }
.index_strength_link_02 { padding-top: 145px; }

.strength_link_button {
	padding: 21px;
	text-align: center;
	margin-top: 13px;
	color: white;
	font-size: 30px;
	line-height: 80%;
	font-weight: 700;
	background-color: #4A5966;
	position: relative;
}
.strength_link_button::after {
	content: ">";
	position: absolute;
	right: 24px;
}

/* 会社概要・採用情報 */
.index_link_line_area { background-color: #E1E5EE; }
.index_link_line {
	width: 1100px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.index_link_line > div { width: 50%; position: relative; }
.index_link_line > div:first-child::after {
	content: "";
	position: absolute;
	top: 15%;
	bottom: 15%;
	right: 0;
	width: 0;
	border-right: 1px solid #4A5966;
}
.index_link_line a {
	color: #696B8F;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	flex-direction: column;
	padding: 120px 0;
	background-color: #E1E5EE;
	font-size: 20px;
}
.index_link_line a:hover { filter: brightness(80%); }
.index_link_line a:visited { color: #696B8F; }
.index_link_line h2 {
	font-size: 48px;
	font-weight: 700;
	line-height: 75%;
	margin-bottom: 24px;
}

/* お知らせエリア */
.index_news_area { padding: 90px 0 100px 0; }
.index_news_block { width: 820px; margin: 0 auto; }
.index_news_block h2 { text-align: center; font-size: 24px; font-weight: 700; }
.index_news_block ul { list-style: none; }
.index_news_block li a{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 12px 0;
	color: #4A5966;
	font-size: 22px;
	font-weight: 600;
}
.news_date { width: 20%; }


/*************************************************************************/
/*************************************************************************/
/*　ここまでindex　*/
/*************************************************************************/
/*************************************************************************/





/*************************************************************************/


/*products ****************************************/
#products_top_area img{
	width: 100%;
}
.products_about_block,.products_list_block,.processing_list_block{
	width: 1048px;
	margin: 0 auto;
}
#products_about_area{
	padding: 86px 0;
}
.products_about_block{
	margin-bottom: 60px;
}
.products_about_block h2{
	font-size: 48px;
	font-weight: 700;
	margin-top: 0px;
	margin-bottom: 16px;
}
.products_list_block ul {
	display: flex;
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;    /* ベース線のために必要 */
}

.products_list_block{
	margin-top: 32px;
}
.products_list_block ul::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* 線の“中心”をボトムから0.5pxの位置に置く（中央揃えの基準） */
	top: calc(100% - 0.5px);
	height: 1px;
	transform: translateY(-50%);
	background: #AAAFBE;
}
.products_list_block li {
	position: relative;         /* 擬似要素配置の基準に */
	padding: 12px 28px;
	width: 100%;
}
.products_list_block li.item_name{
	width: 18%;
	padding: 12px 0px;
	font-weight: 700;
}

.products_list_block li.item_name::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* ベース線と同じ中心位置に合わせてから、高さで太さ表現 */
	top: calc(100% - 0.5px);
	height: 3px;          /* ← 太さを変えるだけ */
	transform: translateY(-50%);
	background: #AAAFBE;
}
.products_list_block li a{
	color: #4A5966;
}

#products_intro_area{
	background-color: #F5F6F7;
	padding: 86px 0;
}
.products_area{
	margin-bottom: 160px;
}
.large_bottom_margin{
	margin-bottom: 240px;
}
.products_block{
	width: 1440px;
	margin: 0 auto;
	position: relative;
}
.products_item_block{
	position: absolute;
	top: 100px;
	box-shadow: 0px 4px 4px 0px #00000040;
	padding-right: 32px;
	padding-bottom: 32px;
	background-color: white;
}
.products_item_block h3{
	font-size: 50px;
	font-weight: 700;
	line-height: 1;
	margin: 0;
	margin-right: 18px;
	margin-bottom: 32px;
	padding: 0;
	padding-left: 24px;
	padding-top: 24px;
	display: inline-block;
	border-left: solid 8px #6E71AB;
}
.products_item_block >span{
	font-size: 30px;
	font-weight: 300;
	font-style: italic;
}
.products_item_block ul{
	display: grid;
	gap: 5px;
	list-style: none;
	margin-top: 5px;
	margin-left: 32px;
}
.grid_2{
	grid-template-columns: repeat(2, 1fr);
}
.grid_4{
	grid-template-columns: repeat(4, 1fr);
}
.grid_5{
	grid-template-columns: repeat(5, 1fr);
}
.products_item_block li{
	width: 125px;
}
li.products_item_2column{
	width: 255px;
}
.lead_block .products_item_block{
	width: 650px;
}
.products_item_block li a{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	width: 100%;
	height: 100%;
	font-size: 14px;
	color: white;
	background-color: #4A5966;
	padding: 12px 0;
}
.products_item_block li a:hover{
	filter: brightness(130%);
}
.products_item_block li a span{
	font-size: 22px;
	font-weight: 700;
}
.products_processing_item_block h3{
	font-size: 1em;
}
.right_area .products_item_block{
	left: 705px;
}
.left_area .products_item_block{
	left: 165px;
}
.left_area img{
	margin-left: 444px;
}
.products_item_block li a span.products_item_18{
	font-size: 18px;
	line-height: 1.2;
}
.span_block{
	display: inline-block;
	line-height: 1;
}

/*processing ***********************************************************/
#products_processing_area{
	padding: 180px 0;
}
.products_processing_block{
	width: 1146px;
	margin: 0 auto;
}
p.products_processing_text{
	text-align: center;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	color: #4A5966;
	margin-bottom: 46px;
}
.products_processing_item_block{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 66px;
}
.products_processing_item_block a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 540px;
	height: 186px;
	text-align: right;
	color: #4A5966;
	font-size: 35px;
	font-weight: 700;
	padding-right: 12px;
	border-right: solid 8px #6E71AB;
}
.products_processing_item_block a:hover{
	filter: brightness(80%);
	background-color: rgba(0,0,0,0.2);
}


/*各製品詳細ページ ***********************************************************/
.product_intro_block{
	width: 1120px;
	margin: 0 auto;
	margin-top: 250px;
	margin-bottom: 64px;
	position: relative;
}
.product_intro_block img{
	position: absolute;
	top: -186px;
	right: -110px;
	z-index: -1;
	
	/* 標準プロパティ */
	mask-image: linear-gradient(
		to right, 
		rgba(0,0,0,1) 98%, 
		rgba(0,0,0,0) 100%
	);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;

	/* マスク（WebKit系ブラウザ用） */
	-webkit-mask-image: linear-gradient(
		to right, 
		rgba(0,0,0,1) 98%,   /* 90%まで不透明 */
		rgba(0,0,0,0) 100%  /* 最後の10%で透明 */
	);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
}
.lead_block{
	margin-top: 220px;
}
.lead_block img{
	top: -100px;
}
.product_intro_block h1{
	font-size: 24px;
	font-weight: 700;
	border-left: solid 9px #4A5966;
	padding-left: 10px;
}
.product_intro_block ul{
	width: 620px;
	margin-left: 1em;
}
.product_intro_block li{
	line-height: 200%;
}

#product_sheet_block{
	width: 1120px;
	margin: 0 auto;
}

.pdf_button a{
	color: white;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	margin: 0 auto;
	margin-top: 236px;
	margin-bottom: 132px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 540px;
	height: 68px;
	border-radius: 10px;
	background-color: #6E71AB;
}

.pdf_button a:hover{
	opacity: 0.8;
}
.printing{
	width: 1120px;
	margin: 0 auto;
	text-align: right;
	margin-top: 12px;
}


/*加工全般 ***********************************************************/
#processing_area{
	width: 1120px;
	margin: 0 auto;
}
.processing_top_block{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
}
.processing_top_block div{
	display: flex;
	align-items: flex-end;
}
.processing_top_block div:first-child{
	width: 328px;
	height: 270px;
	justify-content: center;
	margin-right: 46px;
	background-color: #CED2DC;
}
.processing_section_title{
	font-size: 24px;
	font-weight: 700;
	margin-top: 80px;
	margin-bottom: 32px;
	padding-left: 7px;
	border-left: solid 9px #4A5966;
}
.processing_section_title span{
	font-size: 20px;
}

/*鍛造品 ***********************************************************/
.forging_img_block{
	display: flex;
	gap: 32px;
	font-size: 14px;
	line-height: 2;
	margin-top: 58px;
}



/* --- 画像の見た目を忠実に再現するための最小CSS --- */
.forging-table {
	width: 1040px;
	border-collapse: separate;
	border-spacing: 0;
}
.forging-table th,
.forging-table td {
	border: 1px solid #fff;
	padding: 12px 16px;
	vertical-align: middle;
	line-height: 1.6;
	word-break: break-word;
	text-align: center;
}

/* ヘッダー（画像の青みがかったグレー） */
.forging-table thead th {
	background: #AAAFBE;
	font-weight: 700;
	text-align: center;
	color: white;
}
/* 一番左の「製作方法」列（画像では薄グレーの帯） */
.forging-table tbody th.method {
	background: #AAAFBE80 !important;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
	width: 140px;
}

/* 2列目（熱間／冷間）の幅を画像に合わせてやや狭く */
.forging-table .temp{ width: 74px; background: #AAAFBE80; }

/* 形状セルの括弧を改行表示 */
.forging-table .shape small { display: block; opacity: .9; }

/* 余白・高さのニュアンス合わせ */
.forging-table td,
.forging-table th.method { padding-top: 16px; padding-bottom: 16px; }

/* tbody 内の奇数行 */
.forging-table tbody tr:nth-child(odd) {
	background-color: #D9D9D980; /* 好きな色に変更可 */
}

/* tbody 内の偶数行 */
.forging-table tbody tr:nth-child(even) {
	background-color: #D9D9D94D; /* 好きな色に変更可 */
}


.forging-table tbody.text_left td{
	text-align: left;
	padding-right: 24px;
}

.notes{
	margin: 12px 0;
}

.processing_item {
	display: grid;
	grid-template-columns: 1fr 1fr; /* 2列 */
	gap: 8px 16px; /* 行間・列間の隙間 */
	max-width: 680px; /* 適宜調整 */
	padding: 20px;
	padding-left: 46px;
	background-color: #C4C6EC4D;
}

.processing_item div {
	display: flex;       /* アイコンとテキストを横並び */
	align-items: center; /* 垂直中央寄せ */
	gap: 4px;            /* ■ と文字の間隔 */
	padding: 16px;
}

.processing_item div span{
	color: #6E71AB;
}
.forging_section_end{
	margin-bottom: 140px;
}

/*鋳造品 ***********************************************************/
.casting_weight{
	margin-bottom: 42px;
	position: relative;
}
.casting_weight img{
	position: absolute;
	bottom: 0;
	right: 0;
}
table.casting_table{
	table-layout: fixed;
	width: 1120px;
}
table.casting_table th:first-child{
	width: 180px;
}
th.method span{
	font-weight: 400;
}
.casting_contact_block{
	width: 700px;
	padding: 20px 0;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	background-color: #F0F2F7;
	margin: 50px 0 140px 0;
}


/*シムライナー ***********************************************************/
.shimliner_page{
	margin-left: 140px;
}
.shimliner_page .processing_section_title:first-child{
	margin-top: 134px;
}


/*その他の加工品 ***********************************************************/
.other_text{
	font-size: 20px;
	margin: 134px 0 38px 0;
	text-align: center;
}
.other_item {
	grid-template-columns: 1fr 1fr; /* 2列 */
	max-width: 740px; /* 適宜調整 */
	margin: 0 auto;
	margin-bottom: 140px;
}
.other_item div {
	padding: 4px 16px;
}

/*社長メッセージ ***********************************************************/
#top_message_area{
	margin-top: 100px;
}

.top_message_block{
	width: 1120px;
	margin-left: 160px;
	
	padding-top: 70px;
	margin-bottom: 24px;
}
.top_message_block h1{
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 10px;
}
.top_message_block div{
	color: #D9D9D9;
	font-size: 24px;
}
.message_text_block{
	width: 1000px;
	margin: 0 auto;
	margin-top: 36px;
	margin-bottom: 120px;
}
.top_message{
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 24px;
}
.top_message_text{
	font-size: 18px;
	line-height: 200%;
}
.top_name_block{
	text-align: right;
}
.top_name_block div{
	font-size: 40px;
	margin-top: 12px;
}

#corporate_philosophy_area{
	background: linear-gradient(90deg, #FFFFFF 0%, rgba(196, 198, 236, 0.3) 50%, #FFFFFF 100%);
	margin-bottom: 145px;
	padding-bottom: 52px;
}
.corporate_philosophy_block, .action_guideline_block{
	width: 1000px;
	margin: 0 auto;
	text-align: center;
	font-size: 26px;
	line-height: 180%;
}
.corporate_philosophy_block h2, .action_guideline_block h2{
	font-size: 40px;
	font-weight: 700;
	transform: translateY(-25px);
}
#action_guideline_area{
	margin-bottom: 140px;
	padding-bottom: 52px;
}
.action_guideline_block ol{
	list-style: none;
	text-align: left;
	width: 680px;
	margin: 0 auto;
}
.action_guideline_block li {
	counter-increment: num;
	margin: 0.4em 0;
	padding-left: 2em;
	position: relative;
}

.action_guideline_block li::before {
	content: counter(num) ".";
	position: absolute;
	left: 0;
	color: #6E71AB; 
	font-weight: bold;
}


/*会社概要 ***********************************************************/
#overview_top_area{
	position: relative;
	background-color: #F0F2F7;
	height: 280px;
	margin-bottom: 195px;
}
.overview_top_block{
	position: absolute;
	width: 480px;
	height: 160px;
	bottom: -80px;
	left: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding-left: 150px;
	background-color: #CED2DC;
	font-size: 24px;
	
}
.overview_top_block h1{
	margin: 0;
	margin-bottom: 6px;
	font-size: 40px;
	font-weight: 700;
}

#overview_company_area{
	margin-bottom: 180px;
}
.overview_company_block{
	width: 928px;
	margin: 0 auto;
}
.overview_company_block li.item_name{
	width: 192px;
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 700;
	color: #6E71AB;
}
.overview_address_block{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 68px;
}
.overview_company_block ul{
	margin-bottom: 28px;
}
.overview_company_block li{
	padding-bottom: 12px;
	padding-left: 4px;
}
.overview_map iframe{
	width: 440px;
	height: 300px;
}

.overview_img_block{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 10px;
}
.overview_img_block span{
	font-size: 18px;
	font-weight: 700;
}
.overview_img_block ul{
	display: block;
	margin-bottom: 0;
}
.overview_img_block ul li{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding-bottom: 0;
	padding-top: 6px;
}

.overview_img_block ul::after {
	content: none;
}

.overview_img_block ul li dt{
	font-weight: 700;
	white-space: nowrap;
}
.overview_img_block ul li dd{
	margin-left: 24px;
	white-space: nowrap;
}
ul.overview_maker_list{
	width: 100%;
	display: grid;
	grid-template-columns: 50% 50%;
}
ul.overview_maker_list::after{
	content: none;
}
#overview_top_area.history_area{
	height: 196px;
}


:root{
	--w: 740px;              /* 全体幅（元画像準拠） */
	--col-year: #5b63a6;     /* 年号の青 */
	--col-text: #55616a;     /* 本文のグレー */
	--col-rule: #AAAFBE;     /* 罫線の薄グレー */
}

.timeline{
	box-sizing:border-box;
	width:var(--w);
	margin:24px auto;
	margin-bottom: 140px;
	position:relative;
	padding-left: 40px;   /* 縦線とドットの余白 */
}
/* 左の縦ガイド */
.timeline::before{
	content:"";
	position:absolute;
	left:0px;
	top:0;
	bottom:0;
	width:1px;
	background:var(--col-rule);
}
/* 1行（イベント） */
.event{
	position:relative;
	display:grid;
	grid-template-columns: 120px 1fr;  /* 左：年号 右：本文 */
	align-items:center;
	column-gap:28px;
	padding:38px 0 32px;
}
.event:first-child{
	padding-top: 0;
}
/* 下の薄い水平線 */
.event::after{
	content:"";
	position:absolute;
	left:148px;
	right:0;
	bottom:0;
	height:1px;
	background:var(--col-rule);
}
/* 年号（大） */
.date{
	color:var(--col-year);
	letter-spacing:0.5px;
	font-size:32px;            /* 視覚比率を画像に近似 */
	font-weight: 700;
	line-height:1;
	position: relative;
}
/* ドット */
.date::before{
	content:"";
	position:absolute;
	left:-43px;
	top:0;
	width:6px;
	height:10px;
	background:var(--col-rule);
}
/* 本文 */
.desc{
	font-size:18px;
	line-height:1.5;
	word-break:keep-all;
}
/* 最後の線は下まで伸ばす（画像の見え方に寄せる） */
.event:last-child::after{
	left:140px; right:0; bottom:0;
}

/* 少しだけ狭い画面へのフォールバック */
@media (max-width:640px){
	:root{ --w: 92vw; }
	.timeline{ padding-left:72px; }
	.timeline::before{ left:52px; }
	.event{ grid-template-columns: 112px 1fr; }
	.date{ font-size:32px; }
	.desc{ font-size:15px; }
}


.overview_last_area{
	background-color: #F0F2F7;
	margin-bottom: 0;
	height: 90px;
}



/*稲垣3本の矢 ***********************************************************/
#top_strength_area{
	padding-bottom: 120px;
	background-image: url(../img/strength_back.png);
	background-size: cover;
}
.strength_title_block{
	margin-top: 100px !important;
	padding-top: 70px;
	margin-bottom: 32px;
}
.strength_block{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
}
.strength_02{
	margin-top: -112px;
	padding-left: 224px;
}
.strength_block h2{
	font-size: 40px;
	font-weight: 700;
	margin: 0;
	margin-bottom: 10px;
}
.strength_block div{
	text-align: left;
	margin-bottom: 130px;
}
.strength_03 div{
	margin-bottom: 50px;
}
.strength_block div div{
	margin-top: 22px;
}



/*課題解決 ***********************************************************/
#top_solution_area{
	margin-top: 175px;
	margin-left: 160px;
	display: flex;
}
.solution_text{
	margin-right: 42px;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
}
.solution_text span{
	font-size: 21px;
	font-weight: 700;
	display: block;
	margin-bottom: 8px;
}
.solution_text div{
	width: 360px;
	margin-top: 20px;
}

.solution_block{
	width: 980px;
	margin: 0 auto;
	margin-bottom: 46px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.solution_3arrow{
	margin-right: -15px;
	margin-left: 20px;
	z-index: 3;
}

.answer_block{
	width: 550px;
	height: 220px;
	padding: 52px 80px;
	background-color: #EBECF9;
	font-size: 18px;
	color: #000;
}
.solution_red{
	color: red;
	font-weight: 700;
}
.solution_note{
	font-size: 14px;
	color: #222222;
}
.solution_block2_text{
	font-size: 20px;
	padding: 64px 80px;
}

.solution_delivery_area{
	margin-top: 90px;
	background: linear-gradient(90deg, #FFFFFF 0%, rgba(196, 198, 236, 0.3) 50%, #FFFFFF 100%);
	padding: 58px 0 98px 0;
	position: relative;
}
.solution_delivery_block{
	width: 1120px;
	margin: 0 auto;
}
h2.delivery_title{
	margin: 0;
	position: absolute;
	top: -25px;
	font-size: 30px;
	font-weight: 700;
}
.delivery_text{
	font-size: 20px;
	color: #222222;
}

.flow_chart{
	margin-top: 38px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flow_chart img{
	margin-right: -10px;
	padding-left: 10px;
	z-index: 3;
}
.flow_chart_block{
	width: 256px;
	height: 222px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 1px #6E71AB;
	background-color: #FFF;
	color: #6E71AB;
	font-size: 30px;
	font-weight: 700;
}
.flow_chart_block p{
	text-align: center;
	margin-top: -15px;
}
.delivery_note{
	font-size: 15px;
}


/*採用、ポリシー、お問い合わせ *************************************************/
#top_title_area{
	background-color: #E1E5EE;
	padding-top: 100px;
	margin-bottom: 132px;
	height: 200px;
	position: relative;
	text-align: center;
}
#top_title_area div{
	color: #4A5966;
	transform: translateY(60px);
	font-size: 24px;
}
#top_title_area h1{
	margin: 8px 0;
	font-size: 40px;
	font-weight: 700;
	color: #4A5966;
}
#content_block{
	width: 928px;
	margin: 0 auto;
	margin-top: 160px;
	margin-bottom: 140px;
}
.policy_title_block h2{
	font-size: 32px;
	font-weight: 700;
}
.policy_title_02{
	margin-top: 115px;
}

#content_block ul{
	margin-top: 36px;
}
#content_block ul span{
	color: red;
}
.recruit_list_block{
	width: 928px;
}
.recruit_item_name{
	font-size: 20px;
	font-weight: 700;
	color: #6E71AB;
}
.recruit_contact_block{
	width: 1120px;
	margin: 84px auto;
	padding: 42px;
	background-color: #E1E5EE;
	text-align: center;
}
.recruit_contact_title{
	font-size: 20px;
	font-weight: 700;
	color: #6E71AB;
	margin-bottom: 20px;
}
.recruit_contact_block{
	line-height: 180%;
}
.recruit_contact_block span{
	font-weight: 700;
}
.recruit_contact_block a{
	color: #4A5966;
	text-decoration: underline;
}




.wrap { max-width: 980px; margin: 24px auto 64px; padding: 0 16px; }


.lead { margin: 6px 0 28px 0; }


/* form table-like layout */
.form { width: 100%; border-collapse: separate; border-spacing: 0 14px; margin-bottom: 42px;}
.row { 
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 30px;
}


.label { font-size: 20px; font-weight: 700; }
.label.req::after { content: " ※"; color: red; font-weight: 700; }


.control { width: 100%; }


input[type="text"], input[type="email"], textarea {
	width: 100%;
	font-size: 14px;
	line-height: 1.6;
	padding: 9px 12px;
	border: 1px solid #4A5966;
	border-radius: 2px;
	outline: none;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
	border-color: #6E71AB;
	box-shadow: 0 0 0 2px rgba(110, 113, 171,.3);
}


.zip-wrap { display: flex; align-items: center; gap: 10px; }
.zip-mark { font-size: 14px; }
.zip { max-width: 130px; }


textarea { min-height: 230px; resize: vertical; }


.note-block {
	text-align: center;
	margin-bottom: 48px;
}


.agree { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 20px; margin: 8px 0 55px; }
.agree input { width: 18px; height: 18px; }


.actions { text-align: center; margin-top: 14px; }
.btn {
	appearance: none; -webkit-appearance: none;
	border: 1px solid #c6c6c6; background: #3a3a3a; color: #fff;
	font-size: 14px; letter-spacing: .05em;
	padding: 12px 28px; border-radius: 2px; cursor: pointer;
	transition: filter .15s ease, transform .02s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }


/* tiny help text below inputs if needed */
.hint { font-size: 12px; margin-top: 6px; }

.btn:disabled { opacity: .5; cursor: not-allowed; }


.check_form div.control{
	margin-left: 24px;
}

.btnBox{
	text-align: center;
}
.btnBox input{
	width: 120px;
	height: 30px;
	margin: 12px;
}
.form_result{
	width: 1000px;
	margin: 0 auto;
	padding: 0 0 120px 0;
	text-align: center;
}









/* デバッグ用アウトライン
* { outline: 1px red solid; }*/