@charset "UTF-8";

/* 余白(padding)
----------------------------------------------------------------
基本 coverflex
分割 --3-1 --2-1 --p-1 --2 --1-p --1-2 --1-3
機能 -reverse -early --keep
----------------------------------------------------------------*/
/* カバーflex */
.coverflex{
	display:flex;
	flex-wrap:wrap;
	--width-max:1200px;
	--width-image:.5;
	--width-content:.5;
	--void:calc((100% - var(--width-max)) / 2);
}
.coverflex.--3-1{
	--width-content:.75;
	--width-image:.25;
}
.coverflex.--2-1{
	--width-content:.666;
	--width-image:.334;
}
.coverflex.--p-1{
	--width-content:.618;
	--width-image:.382;
}
.coverflex.--2{
	--width-content:.5;
	--width-image:.5;
}
.coverflex.--1-p{
	--width-content:.382;
	--width-image:.618;
}
.coverflex.--1-2{
	--width-content:.334;
	--width-image:.666;
}
.coverflex.--1-3{
	--width-content:.25;
	--width-image:.75;
}
.coverflex.-reverse{ flex-direction:row-reverse; }
.coverflex > div{
	width:calc(var(--width-max) * var(--width-content));
	padding:var(--gap);
}
.coverflex > figure{ width:calc(var(--void) + var(--width-max) * var(--width-image)); }
.coverflex:not(.-reverse) > div:first-child,
.coverflex.-reverse > div:last-child{ margin:0 0 0 auto; }
.coverflex:not(.-reverse) > div:last-child,
.coverflex.-reverse > div:first-child{ margin:0 auto 0 0; }
.coverflex > figure > img{
	object-fit:cover;
	width:100%;
	height:100%;
	max-width:none;
}
@media screen and (max-width: 1200px){
	.coverflex{ --width-max:100%; }
	.coverflex:not(.-keep).-early > figure,
	.coverflex:not(.-keep).-early > div{ width:100%; }
}
@media screen and (max-width: 960px){
	.coverflex:not(.-keep) > figure,
	.coverflex:not(.-keep) > div{ width:100%; }
}

/* 余白(padding)
----------------------------------------------------------------
上下 p_ p__ p___
上 pt p_t p__t p___t
下 pb p_b p__b p___b
----------------------------------------------------------------*/
.p_{ padding-top:calc(var(--gap) / 1); padding-bottom:calc(var(--gap) / 1); }
.p__{ padding-top:calc(var(--gap) / 2); padding-bottom:calc(var(--gap) / 2); }
.p___{ padding-top:calc(var(--gap) / 4); padding-bottom:calc(var(--gap) / 4); }
.pt{ padding-top:calc(var(--gap) * 2); }
.p_t{ padding-top:calc(var(--gap) / 1); }
.p__t{ padding-top:calc(var(--gap) / 2); }
.p___t{ padding-top:calc(var(--gap) / 4); }
.pb{ padding-bottom:calc(var(--gap) * 2); }
.p_b{ padding-bottom:calc(var(--gap) / 1); }
.p__b{ padding-bottom:calc(var(--gap) / 2); }
.p___b{ padding-bottom:calc(var(--gap) / 4); }

/**
 * コンテンツ幅制限フレックスボックス
----------------------------------------------------------------
基本 wideflex
分割 --2 --1-p --p-1
方向 -reverse
その他 -keep
----------------------------------------------------------------*/
.wideflex{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:var(--gap);
	position:relative;
	margin:var(--gap) 0;
	--outside:calc((100% - var(--bp-pc)) / 2 + var(--gap));
	--inside:calc(var(--bp-pc) - var(--gap) * 3)
}
.wideflex > :nth-child(n){
	box-sizing:border-box;
	position:relative;
	min-width:0;
	overflow-wrap:break-word;
}
.wideflex > :nth-child(2n - 1) img{ width:100%; }
.wideflex > :nth-child(2n){ margin-right:var(--outside); }
.wideflex.-reverse > :nth-child(2n){ margin-right:0; }
.wideflex.-reverse > :nth-child(2n - 1){ margin-left:var(--outside); }
.wideflex.-reverse > :nth-child(2n - 1) img{ width:auto; }
.wideflex.-reverse > :nth-child(2n) img{ width:100%; }
.wideflex.--2 > :nth-child(2n - 1){ flex-basis:calc(var(--outside) + var(--inside) / 2); }
.wideflex.--2 > :nth-child(2n - 0){ flex-basis:calc(var(--inside) / 2); }
.wideflex.--1-p > :nth-child(2n - 1){ flex-basis:calc(var(--outside) + var(--inside) * 0.382); }
.wideflex.--1-p > :nth-child(2n - 0){ flex-basis:calc(var(--inside) * 0.618); }
.wideflex.--p-1 > :nth-child(2n - 1){ flex-basis:calc(var(--outside) + var(--inside) * 0.618); }
.wideflex.--p-1 > :nth-child(2n - 0){ flex-basis:calc(var(--inside) * 0.382); }
.wideflex.-reverse.--2 > :nth-child(2n - 1){ flex-basis:calc(var(--inside) / 2); }
.wideflex.-reverse.--2 > :nth-child(2n - 0){ flex-basis:calc(var(--outside) + var(--inside) / 2); }
.wideflex.-reverse.--1-p > :nth-child(2n - 1){ flex-basis:calc(var(--inside) * 0.618); }
.wideflex.-reverse.--1-p > :nth-child(2n - 0){ flex-basis:calc(var(--outside) + var(--inside) * 0.382); }
.wideflex.-reverse.--p-1 > :nth-child(2n - 1){ flex-basis:calc(var(--inside) * 0.382); }
.wideflex.-reverse.--p-1 > :nth-child(2n - 0){ flex-basis:calc(var(--outside) + var(--inside) * 0.618); }
@media screen and (max-width: 1200px){
	.wideflex{
		--outside:var(--gap);
		--inside:calc(100% - var(--gap) * 3)
	}
}
@media screen and (max-width: 960px){

	/* 継承しない場合は横幅を1カラム化 */
	.wideflex:not(.-keep) > :nth-child(n),
	.wideflex:not(.-keep).-reverse > :nth-child(n){ flex-basis:100%; }
	.wideflex:not(.-keep) > :nth-child(2n){ margin:0 var(--gap); }
	.wideflex:not(.-keep).-reverse > :nth-child(2n){ margin:0; }
	.wideflex:not(.-keep).-reverse > :nth-child(2n - 1){ margin:0 var(--gap); }

}

/**
 * 3D直方体
----------------------------------------------------------------
基準直方体 cube
----------------------------------------------------------------*/
.cube{
	--cube-w:300px;
	--cube-h:100px;
	--cube-d:200px;
	--rotate-y:15deg;
	--rotate-x:-15deg;
	--outline:#ccc;
	position:absolute;
	transform-style:preserve-3d;
	width:var(--cube-w);
	height:var(--cube-h);
	transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(0deg);
	transform-origin:right top;
	transform-origin:center center;
}
.cube > *{
	position:absolute;
	box-sizing:border-box;
	border:1px solid var(--outline);
	text-align:center;
	padding-top:10px;
	color:var(--main);
}
.cube > :nth-child(1){
	width:var(--cube-w);
	height:var(--cube-h);
	transform:translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(2){
	width:var(--cube-w);
	height:var(--cube-h);
	transform:rotateY(180deg) translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(3){
	width:var(--cube-d);
	height:var(--cube-h);
	transform:rotateY(90deg) translateZ(calc(var(--cube-w) - var(--cube-d) / 2));
}
.cube > :nth-child(4){
	width:var(--cube-d);
	height:var(--cube-h);
	transform:rotateY(-90deg) translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(5){
	width:var(--cube-w);
	height:var(--cube-d);
	transform:rotateX(90deg) translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(6){
	width:var(--cube-w);
	height:var(--cube-d);
	transform:rotateX(-90deg) translateZ(calc(var(--cube-h) - var(--cube-d) / 2));
}

/**
 * 新着一覧
----------------------------------------------------------------
基本 topics
----------------------------------------------------------------*/
.topics > section{
	display:flex;
	gap:var(--gap);
	flex-wrap:wrap;
}
.topics > section:not(:first-child){
	border-top:1px solid #ccc;
	padding-top:var(--gap);
	margin-top:var(--gap);
}
.topics > section > figure{ width:calc(33.3333% - var(--gap)); }
.topics > section > figure + div{ width:66.6666%; }
.topics > section > div > time{ color:var(--sub); }
.topics > section > div > h2{ font-size:var(--l); }
@media screen and (max-width: 520px){
	.topics > section{ display:block; }
	.topics > section > figure{
		padding-top:var(--gap);
		width:auto;
	}
	.topics > section > figure + div{ width:auto; }
}

/**
 * 全体
----------------------------------------------------------------*/
:root{
	
	/* 配色 */
	--main:rgb(0,0,0);
	--sub:rgb(86,104,92);
	--main-hover:rgb(76,76,76);
	--sub-hover:rgb(136,149,140);
	--black:rgb(0,0,0);
	--gray:rgb(86,104,92);
	--yellow:rgb(252,203,44);
	
	--gap:clamp(
	
		/* 【最小余白】SP時の余白(半分) */
		calc(1px * var(--gap-base) / 2),
		
		/* 【推奨余白】SP時の余白(半分)相当の画面比値 */
		calc(var(--gap-base) / var(--tab) * 100vw),
		
		/* 【最大余白】PC時の余白 */
		calc(1px * var(--gap-base))
	
	);
}

/* リッチフォーム初期設定 */
.richform{

	/* 配色 */
	--black:rgb(0,0,0);
	--gray:rgb(86,104,92);
	--silver:#f5f5f5;
	--blue:rgb(252,203,44);
	--blue-disabled:rgb(253,229,149);
	--white:white;
	--red:crimson;
	--default-color:rgba(0,0,0,0);
	
	/* その他 */
	--border-radius:0;
	--border-radius-top:0;
	--border-radius-right:0;
	--border-radius-bottom:0;
	--border-radius-left:0;

}
:focus{ outline:none; }

/* ボディ */
body{
	color:var(--gray);
	font-family:var(--mincho);
	font-feature-settings:"palt";
}

/* WPバー */
#wpadminbar{ display:none; }

/* reCATPCHA */
.grecaptcha-badge{ visibility:hidden; }

/**
 * ヘッダー
----------------------------------------------------------------*/
body{ --height:80px; }
body > header{
	background:rgb(0,0,0);
	color:white;
	height:var(--height);
	display:flex;
	position:absolute;
	top:40px;
	left:0;
	right:0;
	z-index:10000;
}
#logo > a > img,
#tel > img{ height:var(--height); }
#spmenu{ margin-left:auto; }
#gnav > ul{
	display:flex;
	margin:0 20px;
}
#gnav > ul > li > a{
	display:block;
	line-height:calc(var(--height) - 20px);
	height:var(--height);
	box-sizing:border-box;
	padding:10px;
}
#gnav > ul > li > a.hover{ background:var(--gray); }
@media screen and (max-width: 1200px){
	body > header{
		position:fixed;
		top:0;
	}
	#tel{ margin-left:auto; }
	#open{
		display:block;
		width:var(--height);
		height:var(--height);
		padding:10px;
	}
	#open.hover{ background:rgba(255,255,255,.8); }
	#spmenu{
		display:none;
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background:rgba(0,0,0,0.9);
		z-index:20000;
	}
	#gnav{
		max-width:768px;
		margin:80px auto 40px;
	}
	#gnav > ul{
		display:block;
		padding:var(--half-gap);
	}
	#gnav > ul > li:not(:first-child){ border-top:1px solid rgb(86,104,92); }
	#gnav > ul > li > a{ text-align:center; }
	body.clicked #spmenu{ display:block; }
	#close{
		display:block;
		width:var(--height);
		height:var(--height);
		padding:10px;
		position:fixed;
		top:0;
		right:0;
	}
	#close.hover{ background:rgba(255,255,255,.8); }
}
@media screen and (max-width: 768px){
	body{ --height:clamp(40px,10vw,80px); }
}

/**
 * フッター
----------------------------------------------------------------*/
body > footer{ background:rgb(238,239,238); }

/* フッター */
#footer{
	max-width:900px;
	margin:0 auto;
	padding:80px 40px;
	align-items:center;
}
#flogo > img{
	max-width:320px;
	margin:0;
}
#comcard > p{
	font-size:var(--xs);
	margin-top:20px;
}
#comcard > div{
	font-size:var(--l);
	color:var(--black);
	letter-spacing:.1em;
}
#comcard > a > img{
	max-width:278px;
	margin:0;
	display:inline-block;
	margin-top:10px;
}
@media screen and (max-width: 768px){
	#footer{ padding:0; }
	#fcard{ padding:40px 20px; }
	#flogo > img{ margin:0 auto; }
	#comcard{ text-align:center; }
	#comcard > p{
		font-size:var(--s);
		text-align:center;
	}
	#comcard > div{ font-size:var(--xl); }
}

/* フッターナビゲーション */
#fnav > ul{
	display:flex;
	flex-wrap:wrap;
	gap:3px 20px;
}
#fnav > ul > li{ flex-basis:calc(50% - 20px); }
#fnav > ul > li > a.hover{ color:var(--black); }
@media screen and (max-width: 768px){
	#fnav > ul{
		gap:0;
		background:white;
	}
	#fnav > ul > li{ flex-basis:50%; }
	#fnav > ul > li > a{
		display:block;
		border-bottom:1px solid #ccc;
		padding:10px 20px 10px;
		background:url("https://metaltec-inc.com/wp-content/themes/metaltec/image/interface/icons/arrow.png") scroll no-repeat right center / 20px;
	}
	#fnav > ul > li > a.hover{ background-color:rgb(238,239,238); }
	#fnav > ul > li:nth-child(2n - 1) > a{ border-right:1px solid #ccc; }
	#fnav > ul > li:nth-child(1) > a,
	#fnav > ul > li:nth-child(2) > a{ border-top:1px solid #ccc; }
	#fnav > ul > li:last-child > a,
	#fnav > ul > li:nth-child(2n - 1):nth-last-child(2) > a{
		border-bottom:0;
	}
}

/* 著作権表記 */
#cr{
	background:var(--black);
	color:white;
	text-align:center;
	padding:4px 20px;
}

/**
 * コンテンツ
----------------------------------------------------------------*/
#cont{ min-height:500px; }

/* ページ名 */
#pagename{
	background:var(--black) url("https://metaltec-inc.com/wp-content/themes/metaltec/image/interface/bg/bg_grating.png") scroll no-repeat center top / cover;
	min-height:384px;
	padding:calc(120px + 40px) 20px 40px;
	color:white;
}
#pagename > h1{
	max-width:560px;
	font-size:var(--xl);
}
@media screen and (max-width: 1200px){
	#pagename{
		min-height:0;
		margin-top:var(--height);
		padding:30px 20px;
	}
	#pagename > h1{ font-size:var(--l); }
}
@media screen and (max-width: 768px){
	#pagename{ padding:20px; }
}

/**
 * プロトタイプ
----------------------------------------------------------------*/
img.l{
	margin-left:0;
	margin-right:0;
}
.inlineblock{ display:inline-block; }
.figcaption{
	text-align:center;
	font-size:var(--m);
	font-weight:bold;
	padding:5px 10px;
}

/* 映像 */
.video > video{
	width:100%;
	max-width:768px;
	margin:0 auto;
	display:block;
}

/* 見出し */
.h2{
	padding:40px 20px 50px;
	background:url("https://metaltec-inc.com/wp-content/themes/metaltec/image/interface/theme/h2.png") scroll no-repeat center bottom / 60px 60px;
}
.h2 > h2{ color:rgb(0,0,0); }
.h3{
	font-size:var(--xl);
	color:var(--black);
}
.h4{
	font-size:var(--m);
	color:var(--black);
}
.h2set{
	position:relative;
	padding-left:30px;
}
.h2set::before{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:8px;
	height:200px;
	background:var(--gray);
}
.h2set > h2{
	font-size:var(--xl);
	color:var(--black);
	margin-top:10px;
}
.h2set > p{ margin:20px 0; }
.h2set.yellow::before{ background:var(--yellow); }
.h2set.yellow > h2{ color:white; }
.h2set.yellow > p{ color:white; }
@media screen and (max-width: 960px){
	.h2set{ padding-left:20px; }
}

/* ボタン */
.buttons > a{
	border:1px solid var(--gray);
	color:var(--gray);
	letter-spacing:.1em;
	padding:10px 20px;
	font-size:var(--m);
	font-weight:bold;
	text-align:center;
	width:300px;
	background:none;
}
.buttons > :hover{
	background:var(--black);
	color:white;
	border-color:var(--black);
}
.buttons.white > a{
	background:rgba(255,255,255,.2);
	border-color:white;
	color:white;
}
.buttons.white > :hover{
	background:white;
	color:var(--black);
	border-color:white;
}
.buttons.gray > a{
	background:var(--gray);
	color:white;
	border:none;
}
.buttons.gray > :hover{
	background:var(--black);
	border:none;
}
.buttons.l{
	justify-content:flex-start;
	margin-left:0;
	margin-right:0;
}
@media screen and (max-width: 768px){
	.buttons > a{ width:auto; }
}

/* テーブル */
.table.-white{
	background:white;
	padding:30px 20px;
	margin:0 20px;
}

/* 背景 */
.bg_gray{ background:rgb(238,239,238); }
.bg_delivery{ background:url("https://metaltec-inc.com/wp-content/themes/metaltec/image/article/strength/bg_delivery.png") scroll no-repeat center center / cover; }
.bg_grating{ background:url("https://metaltec-inc.com/wp-content/themes/metaltec/image/interface/bg/bg_grating.png") scroll no-repeat center center / cover; }
.bg_grating.black{ background-color:var(--black); }
.bg_loop_grating{ background:url("https://metaltec-inc.com/wp-content/themes/metaltec/image/interface/bg/bg_loop_grating.png") scroll repeat center center; }
.bg_loop_grating.gray{ background:rgb(221,224,222) url("https://metaltec-inc.com/wp-content/themes/metaltec/image/interface/bg/bg_loop_grating.png") scroll repeat center center; }
@media screen and (max-width: 768px){
	.bg_delivery{ background:url("https://metaltec-inc.com/wp-content/themes/metaltec/image/article/strength/bg_delivery_sp.png") scroll no-repeat center center / cover; }
	.bg_grating{ background-image:url("https://metaltec-inc.com/wp-content/themes/metaltec/image/interface/bg/bg_grating_sp.png"); }
}

/* 代表名 */
.president{
	font-size:var(--l);
	color:var(--black);
	text-align:right;
}

/* ロゴ */
.biglogo{ padding:40px 0; }
.biglogo > img{
	max-width:360px;
	margin:0;
	width:100%;
}
@media screen and (max-width: 960px){
	.biglogo > img{ margin:0 auto; }
}

/* マージン相殺解除 */
.clearmargin{
	padding-top:1px;
	padding-bottom:1px;
}

/* 左寄せ半幅画像 */
.img768{
	width:100%;
	max-width:384px;
}
@media screen and (max-width: 768px){
	.img768{ max-width:auto; }
}

/* お問い合わせボックス */
.contactbox{
	background:rgb(238,239,238);
	padding:40px;
	margin:80px auto;
	max-width:768px;
	text-align:center;
}
.contactbox > h2{ font-size:var(--l); }
.contactbox > p{ text-align:center; }
.contactbox > .buttons{ margin:20px 0 0; }
.contactbox > .buttons > a{ font-size:100%; }
@media screen and (max-width: 768px){
	.contactbox{ margin:80px 20px; }
}

/**
 * スポット：TOP
----------------------------------------------------------------*/
/* メインビジュアル */
#spot_index_mvis{
	background:url("https://metaltec-inc.com/wp-content/themes/metaltec/image/article/index/bg_mvis.png") scroll no-repeat center center / cover;
	height:1024px;
	position:relative;
}
#spot_index_mvis > .base > div{
	padding:40px;
	max-width:630px;
	position:absolute;
	bottom:150px;
}
#spot_index_mvis > .base > div > p{
	color:white;
	border-top:1px solid white;
	padding-top:20px;
	margin-top:20px;
}
@media screen and (max-width: 768px){
	#spot_index_mvis{
		background-image:url("https://metaltec-inc.com/wp-content/themes/metaltec/image/article/index/bg_mvis_sp.png");
		height:768px;
	}
	#spot_index_mvis > .base > div{
		bottom:50px;
		padding:20px;
	}
	#spot_index_mvis > .base > div > p{
		text-align:center;
		text-shadow:1px 1px 2px rgba(0,0,0,.5);
	}
}

/* 弊社について */
#spot_index_about{ padding:40px; }
#spot_index_about > .flex > .h2set > img{ margin:0; }
@media screen and (max-width: 768px){
	#spot_index_about{ padding:20px 0; }
}

/* ツールズ */
#spot_index_tools{ background:#f5f5f5; }
#spot_index_tools > .base{ padding:1px 0; }
#spot_index_tools > .base > .flex{
	gap:20px;
	margin:20px;
}
#spot_index_tools > .base > .flex > section{
	background:white;
	padding:20px;
	display:flex;
	max-width:400px;
	position:relative;
}
#spot_index_tools > .base > .flex > section > figure{
	max-width:90px;
	margin-right:20px;
}
#spot_index_tools > .base > .flex > section > div > h3{
	font-size:var(--m);
	font-weight:bold;
	color:var(--black);
}
#spot_index_tools > .base > .flex > section > div > a{
	border:1px solid rgb(41,171,226);
	color:rgb(41,171,226);
	font-size:var(--s);
	text-align:center;
	padding:8px 20px;
	display:inline-block;
	margin-top:10px;
}
#spot_index_tools > .base > .flex > section > div > a.hover{
	background:rgb(41,171,226);
	color:white;
}
@media screen and (max-width: 768px){
	#spot_index_tools > .base > .flex{
		gap:10px;
		margin:10px;
	}
	#spot_index_tools > .base > .flex > section{
		max-width:none;
		padding:10px 40px 10px 10px;
	}
	#spot_index_tools > .base > .flex > section > figure{
		max-width:50px;
		margin-right:10px;
	}
	#spot_index_tools > .base > .flex > section > div > a{
		border:none;
		font-size:0;
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:0;
		background:rgba(255,255,255,0) url("https://metaltec-inc.com/wp-content/themes/metaltec/image/interface/icons/arrow.png") scroll no-repeat right center / 30px;
		border:1px solid rgba(0,0,0,0);
	}
	#spot_index_tools > .base > .flex > section > div > a.hover{
		background:rgba(255,255,255,.3) url("https://metaltec-inc.com/wp-content/themes/metaltec/image/interface/icons/arrow.png") scroll no-repeat right center / 30px;
		border:1px solid #ccc;
	}
}

/* リードコピー */
#spot_index_leadcopy > div{
	display:flex;
	justify-content:center;
	padding:80px 0 240px;
}
#spot_index_leadcopy > div > figure{
	width:900px;
	height:600px;
	margin-right:-160px;
	position:relative;
	z-index:1;
}
#spot_index_leadcopy > div > div{
	width:900px;
	height:600px;
	background:#f5f5f5;
	margin-left:-160px;
	margin-top:160px;
	margin-bottom:-160px;
	padding:40px 40px 40px 360px;
}
#spot_index_leadcopy > div > div > img{
	max-width:360px;
	margin-bottom:20px;
}
@media screen and (max-width: 1536px){
	#spot_index_leadcopy > div{ padding-bottom:80px; }
	#spot_index_leadcopy > div > div{ height:450px; }
}
@media screen and (max-width: 768px){
	#spot_index_leadcopy > div{
		display:block;
		padding:40px 20px;
		max-width:512px;
		margin:0 auto;
	}
	#spot_index_leadcopy > div > figure{
		width:auto;
		height:auto;
		margin-right:0;
	}
	#spot_index_leadcopy > div > div{
		width:auto;
		height:auto;
		margin:0;
		padding:0;
		background:none;
		margin-top:20px;
	}
	#spot_index_leadcopy > div > div > img{ max-width:200px; }
}

/* メタルテックの強み */
#spot_index_strength{
	position:relative;
	min-height:500px;
}
#spot_index_strength > header{
	position:absolute;
	top:80px;
	left:80px;
	width:420px;
}
#spot_index_strength > header > img{
	max-width:auto;
	object-fit:cover;
	object-position:left top;
	width:384px;
	height:110px;
	margin:0;
}
#spot_index_strength > ul{
	display:flex;
	gap:var(--gap);
	padding:var(--gap);
	margin-left:500px;
}
#spot_index_strength > ul > li:nth-child(2){ margin-top:-80px; }
#spot_index_strength > ul > li:nth-child(3){ margin-top:40px; }
#spot_index_strength > ul > li > img:last-child{ display:none; }
@media screen and (max-width: 1536px){
	#spot_index_strength > ul{
		display:block;
		margin-left:500px;
	}
	#spot_index_strength > ul > li:nth-child(2){ margin-top:0; }
	#spot_index_strength > ul > li:nth-child(3){ margin-top:0; }
	#spot_index_strength > ul > li:not(:first-child){ margin-top:20px; }
	#spot_index_strength > ul > li > img{
		margin:0;
		max-width:400px;
		width:100%;
	}
	#spot_index_strength > ul > li > img:first-child{ display:none;}
	#spot_index_strength > ul > li > img:last-child{ display:block; }
}
@media screen and (max-width: 960px){
	#spot_index_strength{ padding-top:1px; }
	#spot_index_strength > header{
		position:static;
		margin:40px 20px 20px 8px;
		width:auto;
	}
	#spot_index_strength > header > img{
		object-fit:fill;
		width:auto;
		height:auto;
	}
	#spot_index_strength > ul{
		margin-left:0;
		padding:0 28px 40px;
	}
	#spot_index_strength > ul > li > img{ max-width:512px; }
}

/**
 * スポット：事業案内
----------------------------------------------------------------*/
#spot_business_flow > .base > .alone > section{ padding:var(--gap); }
#spot_business_flow > .base > .alone > section:nth-child(2n - 1){ background:rgb(234,240,246); }

/**
 * スポット：当社の強み
----------------------------------------------------------------*/
#spot_strength_welding > .base{
	position:relative;
	z-index:1;
}
#spot_strength_welding > .base > div{
	border:1px solid #ccc;
	margin:var(--gap);
	margin-top:-200px;
	background:rgba(255,255,255,.9);
}
@media screen and (max-width: 1920px){
	#spot_strength_welding > .base > div{ margin-top:-5vw; }
}
@media screen and (max-width: 1536px){
	#spot_strength_welding > .base > div{ margin-top:0; }
}
@media screen and (max-width: 960px){
	#spot_strength_welding > .base > div{ margin-top:-20vw; }
}

/**
 * スポット：よくあるご質問
----------------------------------------------------------------*/
#spot_faq > .alone > section{ padding-left:20px; }
#spot_faq > .alone > section:not(:first-child){ margin-top:40px; }
#spot_faq > .alone > section > header{ position:relative; }
#spot_faq > .alone > section > header::before{
	position:absolute;
	top:0;
	bottom:0;
	left:-20px;
	content:'';
	display:block;
	width:4px;
	background:var(--gray);
}
#spot_faq > .alone > section > header > h2{ margin-top:4px; }

/**
 * スポット：お問い合わせ
----------------------------------------------------------------*/
#spot_contact form footer p{
	text-align:center;
	padding:40px 20px;
}
#spot_contact form footer [type="submit"]{
	width:200px;
	padding:8px;
	color:var(--black);
}
#spot_contact form .table th{
	background:var(--sub);
}

/**
 * スポット：料金シミュレーター
----------------------------------------------------------------*/
#simulator{ padding:40px 0; }
#simulator .secs > :not(:last-child){ margin-bottom:20px; }
#simulator .secs.wide > :not(:last-child){ margin-bottom:60px; }
#simulator .sec{ font-size:var(--xl); }
#calc{
	background:white;
	padding:var(--gap);
	margin:80px auto;
	max-width:768px;
}
#calc .mid{
	color:steelblue;
	font-weight:bold;
	font-size:var(--m);
}
#calc .big{
	font-size:var(--l);
	color:var(--black);
}
#calc .xbig{
	font-size:var(--xl);
	color:var(--black);
}
#calc .table > .r{
	font-size:var(--l);
	color:var(--black);
}
@media screen and (max-width: 768px){
	#calc .table{ overflow:visible; }
	#calc .table,
	#calc .table tr,
	#calc .table th,
	#calc .table td{ display:block; }
	#calc .table th{
		border:none;
		background:var(--black);
		color:white;
		padding:2px 10px;
	}
	#calc .table td{
		text-align:right;
		padding-right:0;
		padding-left:0;
	}
	#calc .table td > header{ text-align:left; }
}

/**
 * スポット：採用情報
----------------------------------------------------------------*/
#spot_recruit_mvis{
	background:url("https://metaltec-inc.com/wp-content/themes/metaltec/image/article/recruit/pvis.png") scroll no-repeat center top / cover;
	height:768px;
	position:relative;
}
#spot_recruit_mvis > header{
	background:rgba(86,104,92,0.5);
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	padding:40px 20px;
}
#spot_recruit_mvis > header > h1{
	font-size:var(--xl);
	letter-spacing:.1em;
	color:white;
	text-align:center;
}
@media screen and (max-width: 960px){
	#spot_recruit_mvis{ height:512px; }
}
@media screen and (max-width: 768px){
	#spot_recruit_mvis{
		background-image:url("https://metaltec-inc.com/wp-content/themes/metaltec/image/article/recruit/pvis_sp.png");
		height:100vw;
	}
	#spot_recruit_mvis > header{ padding:20px; }
	#spot_recruit_mvis > header > h1{ font-size:4vw; }
}

/**
 * ContactFormカスタマイズ
----------------------------------------------------------------*/
/* メッセージ：成功時 */
.wpcf7 form.sent .wpcf7-response-output{
	background:#d5edda;
	color:#185626;
	border:1px solid #c4e5cc !important;
	padding:10px
}

/* メッセージ：失敗時 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{
	background:#f7d7da;
	color:#711d26;
	border:1px solid #f4c6cb !important;
	padding:10px
}

/* 個別：エラー文 */
.wpcf7-not-valid-tip{
	color:red !important;
	margin-top:5px;
	font-size:12px !important;
}

/**
 * 投稿コンテンツ
----------------------------------------------------------------*/
#post{ padding-bottom:80px; }
#post > *{
	max-width:1024px;
	margin:0 auto;
}
#post .wp-block-columns{
	padding:40px 20px;
	box-sizing:border-box;
}
#post_post{
	padding:20px;
}
#post_post h2{
	font-size:30px;
	padding-top:20px;
}
#post_post h3{
	font-size:16px;
	padding-top:10px;
	font-weight:bold;
	color:var(--main);
}
#post_post table tr > td:first-child{ min-width:120px; }
#post_post table tr > td{ padding:10px; }
@media screen and (max-width: 768px){
	#post_post h2{ font-size:18px; }
}