/**
 * 基本
----------------------------------------------------------------*/
a{ color:rgb(133,194,198); }
body{
	font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	min-width:1024px;
	font-size:14px;
	line-height:24px;
	color:rgb(51,51,51);
}
p,table{
	font-family:"Helvetica Neue", HelveticaNeue, "Segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
main{
	min-height:400px;
	padding-bottom:80px;
}
video{
	max-width:100%;
	margin:0 auto;
}
@media screen and (max-width: 768px){
	body{
		min-width:768px;
		font-size:24px;
		line-height:40px;
	}
}

/**
 * 共通
----------------------------------------------------------------*/
p{ text-align:justify; }
table{ width:100%; }
img{ display:block; max-width:100%; margin:0 auto; }
@media screen and (max-width: 768px){
	img{
		max-width:100%;
		height:auto;
	}
}
.r{ text-align:right; }
.c{ text-align:center; }

/* 分岐 */
.sp{ display:none; }
@media screen and (max-width: 768px){
	.pc{ display:none; }
	.sp{ display:block; }
}
.tab-tab{ display:none; }
@media screen and (max-width: 1024px){
	.tab-pc{ display:none; }
	.tab-tab{ display:block; }
}

/* 余白 */
.hmargin{
	margin-right:40px !important;
	margin-left:40px !important;
}
.vmargin{
	margin-top:40px !important;
	margin-bottom:40px !important;
}
.microtmargin{ margin-top:5px !important; }
.microbmargin{ margin-bottom:5px !important; }

/* 基準枠 */
.base{
	max-width:1024px;
	margin:0 auto;
	padding:40px;
	box-sizing:border-box;
}
.wide{
	max-width:1536px;
	margin:0 auto;
	position:relative;
}
.wide.alphawing::before,
.wide.alphawing::after{
	content:'';
	position:absolute;
	display:block;
	top:0;
	bottom:0;
	z-index:1;
	width:100px;
}
.wide.alphawing::before{
	left:50%;
	margin-left:-768px;
	background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.wide.alphawing::after{
	right:50%;
	margin-right:-768px;
	background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}
@media screen and (max-width: 1024px){
	.wide.alphawing::before,
	.wide.alphawing::after{ display:none; }
}
@media screen and (max-width: 768px){
	.base{ padding:40px; }
	.smart{ max-width:640px; }
	.smart.between,
	.smart.around{
		margin-right:auto;
		margin-left:auto;
	}
}

/**
 * プロトタイプ
----------------------------------------------------------------*/
/* 水平線 */
hr{
	display:block;
	background:url("./../image/interface/hr.png") scroll repeat-x center center;
	height:24px;
	margin:20px 0;
}

/* 背景 */
.bg_water10{ background:rgb(242,248,249); }
.bg_water{
	background:rgb(133,194,198);
	color:white;
}

/* 画像 */
figure > figcaption{
	text-align:center;
	font-size:20px;
	line-height:30px;
	margin:10px 10px 40px 10px;
}
@media screen and (max-width: 768px){
	figure > figcaption{
		font-size:30px;
		line-height:40px;
	}
}

/* 段組み */
.paragraph2{
	column-count:2;
	column-gap:40px;
}
@media screen and (max-width: 768px){
	.paragraph2{ column-count:1; }
}

/* テーブル */
.table th,
.table td{
	border-bottom:1px solid rgb(51,51,51);
	padding:4px 10px;
}
.table thead th{ padding:4px 10px; }
.table tr:first-child > th,
.table tr:first-child > td{
	border-top:1px solid rgb(51,51,51);
}
.table th{
	font-weight:normal;
	text-align:right;
}
.table thead{ background:#e5e5e5; }
.table thead th{ text-align:left; }
.table.head th{ background:#eee; }

/* ボタン */
.buttonlist{
	display:flex;
	justify-content:center;
	margin:40px;
}
.inlinebuttons{
	text-align:center;
	padding:20px 0;
}
.inlinebutton{
	display:inline-block;
	background:rgb(78,107,123);
	color:white;
	padding:4px 10px;
	margin:5px;
	transition:background .2s;
	font-size:16px;
	min-width:140px;
}
.inlinebutton:first--child{ margin-left:0; }
.inlinebutton:last-child{ margin-right:0; }
.inlinebutton.hover{ background:rgb(42,77,96); }
.inlinebutton::before{
	content:'';
	display:inline-block;
	background:url("./../image/interface/icon/arrow_white.png") scroll no-repeat center center / contain;
	width:16px;
	height:16px;
}
.button{
	display:block;
	width:320px;
	box-sizing:border-box;
	padding:24px 20px;
	margin:20px;
	color:white;
	background:rgb(78,107,123);
	font-size:28px;
	line-height:32px;
	text-align:center;
	transition:background .2s, box-shadow .2s;
	position:relative;
}
.button::before{
	content:'';
	display:inline-block;
	background:url("./../image/interface/icon/arrow_white.png") scroll no-repeat center center / contain;
	width:16px;
	height:16px;
}
.button.hover{
	background:rgb(42,77,96);
	box-shadow:0 0 30px 10px rgba(255,255,255,.5);
	z-index:1;
}
.button.small{
	width:240px;
	background:rgb(51,51,51);
	font-size:24px;
	line-height:26px;
	padding:17px 20px;
}
.button.small.hover{ background:black; }
.button.micro{
	width:140px;
	font-size:14px;
	line-height:20px;
	padding:8px 4px;
}
.button.micro::before{
	width:12px;
	height:12px;
}
@media screen and (max-width: 768px){
	.buttonlist{ flex-direction:column; }
	.button{ width:auto; }
	.button.small{
		width:400px;
		font-size:30px;
		line-height:40px;
		display:block;
		margin:10px auto;
	}
}

/* バナー */
.bun{
	display:block;
	transition:background .2s, opacity .2s, box-shadow .2s;
}
.bun.hover{
	background:rgb(42,77,96);
	opacity:.8;
	box-shadow:0 0 30px 10px rgba(0,0,0,.1);
	z-index:1;
}

/* 少し大きい文字 */
.big{
	font-size:18px;
	line-height:30px;
}
@media screen and (max-width: 768px){
	.big{
		font-size:30px;
		line-height:46px;
	}
}

/* MAP */
.gm > iframe{
	height:460px;
}

/* 見出し */
.h2{ margin:40px 0; }
.h2 > img{
	width:546px;
}
h3{
	font-size:24px;
	line-height:30px;
	margin:10px 0;
}
.h3{
	font-size:30px;
	line-height:40px;
	margin:10px 0;
}
@media screen and (max-width: 768px){
	h3,
	.h3{
		font-size:36px;
		line-height:60px;
	}
}

/* セクション */
.section{
	padding-top:80px;
	padding-bottom:80px;
}
.section.min{
	padding-top:20px;
	padding-bottom:20px;
}

/* ポイントリスト */
.pointlist{
	background:rgb(237,240,241);
	padding:12px 10px;
	margin:20px 0;
}
.pointlist > li{
	position:relative;
	padding-left:10px;
	text-align:justify;
}
.pointlist > li:not(:first-child){ margin-top:3px; }
.pointlist > li::before{
	content:'';
	background:url("./../image/interface/icon/arrow_blue.png") scroll no-repeat center center / contain;
	width:7px;
	height:12px;
	display:block;
	position:absolute;
	margin:6px 0 6px -10px;
}
@media screen and (max-width: 768px){
	.pointlist{ padding:20px; }
	.pointlist > li{ padding-left:20px; }
	.pointlist > li::before{
		width:14px;
		height:24px;
		margin-left:-20px;
	}
}

/* リードコピー */
.leadcopy{
	font-size:48px;
	line-height:74px;
	letter-spacing:.2em;
	margin:40px 0;
	text-align:justify;
}
.leadsummary{
	font-size:24px;
	line-height:42px;
	margin:-20px 0 40px;
	text-align:justify;
}
@media screen and (max-width: 768px){
	.leadcopy{
		font-size:40px;
		line-height:60px;
		letter-spacing:.1em;
		margin:80px 0;
	}
	.leadsummary{ margin:0 0 80px; }
}

/* 脚注 */
.footnote{
	background:rgb(78,107,123);
	padding:10px;
	font-size:13px;
	line-height:15px;
	color:white;
	margin:10px 0;
}
@media screen and (max-width: 768px){
	.footnote{
		font-size:20px;
		line-height:24px;
	}
}

/* 保存禁止フィルター */
.saveguard{ position:relative; }
.saveguard::after{
	content:'';
	display:block;
	background:rgba(0,0,0,0);
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}

/**
 * ヘッドカード
----------------------------------------------------------------*/
#headcard{
	position:absolute;
	top:0;
	left:0;
	right:0;
	padding:40px;
	height:91px;
	z-index:2;
}
#headcard img{ margin:0; }
@media screen and (max-width: 1024px){
	#headcard{
		width:728px;
		height:80px;
		padding:20px;
	}
}

/* ロゴ */
#logo{
	display:block;
	position:absolute;
	height:91px;
	transition: opacity .2s;
}
#logo.hover{ opacity: .7; }
#logo > img{
	max-width:auto;
	max-height:100%;
}
@media screen and (max-width: 1024px){
	#logo{ height:80px; }
}

/* 採用サイト名 */
#recruitsite{
	width:180px;
	position:absolute;
	margin-top:45px;
	margin-left:267px;
	display:block;
	transition: opacity .2s;
}
#recruitsite.hover{ opacity: .7; }
@media screen and (max-width: 1024px){
	#recruitsite{
		margin-top:91px;
		margin-left:0;
	}
}

/* スマホ開閉エリア */
#closearea{
	position:absolute;
	height:80px;
	right:300px;
	text-align:right;
	top:40px;
}
@media screen and (max-width: 1024px){
	#closearea{
		background:rgba(0,0,0,.9);
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		height:auto;
		padding-top:120px;
		z-index:1000;
		text-align:center;
		display:none;
	}
	.clicked > #closearea{ display:block; }
}

/* グローバルナビゲーション */
#gnav > li{ display:inline-block; }
#gnav > li:not(:first-child){ margin-left:20px; }
#gnav > li > a{
	font-weight:bold;
	font-size:22px;
	line-height:36px;
	color:white;
	transition:color .2s, background .2s;
}
#gnav > li > a.hover{ color:rgb(194,224,226); }
body[data-mode="recruit"] #gnav > li > a{ color:black; }
body[data-mode="recruit"] #gnav > li > a.hover{ color:rgb(78,107,123); }
@media screen and (max-width: 1280px){
	#gnav{ margin-right:-260px; }
}
@media screen and (max-width: 1024px){
	#gnav{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		padding:0 4%;
		margin-right:0;
	}
	#gnav > li{
		display:block;
		width:48%;
		margin-bottom:26px;
		background:rgba(255,255,255,.2);
		border:4px solid white;
		box-sizing:border-box;
	}
	#gnav > li > a{
		display:block;
		font-size:30px;
		line-height:45px;
		padding:20px;
		box-sizing:border-box;
	}
	#gnav > li > a.hover{
		background:rgb(78,107,123);
		color:white;
	}
	#gnav > li:not(:first-child){ margin-left:0; }
	body[data-mode="recruit"] #gnav > li > a{ color:white; }
	body[data-mode="recruit"] #gnav > li > a.hover{ color:white; }
}

/* 電話番号・お問い合わせ */
#closearea > div{
	display:flex;
	gap:10px;
}
#closearea > div > *{
}
#tel{
	color:white;
	font-weight:bold;
	font-size:30px;
	line-height:38px;
	transition:color .2s;
	position:relative;
	display:inline-block;
	min-width:400px;
	vertical-align:top;
	height:50px;
}
#tel.hover{ color:rgb(194,224,226); }
body[data-mode="recruit"] #tel{ color:black; }
body[data-mode="recruit"] #tel.hover{ color:rgb(78,107,123); }
#tel > small{
	font-size:26px;
	line-height:38px;
}
#tel > span{
	font-size:12px;
	line-height:12px;
	position:absolute;
	bottom:0;
	right:0;
	left:0;
}
#hcontact{
	background:black;
	color:white;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	padding:10px 20px;
	width:200px;
	font-size:18px;
	font-weight:bold;
	letter-spacing:.1em;
	transition:background .2s;
}
#hcontact.hover{ background:#444; }
@media screen and (max-width: 1280px){
	#closearea > div{ margin-right:-260px; }
}
@media screen and (max-width: 1024px){
	#closearea > div{
		display:block;
		max-width:640px;
		margin:0 auto;
	}
	#tel{
		margin:40px 20px;
		display:block;
		font-size:40px;
		line-height:50px;
	}
	#tel > span{
		font-size:18px;
		line-height:24px;
		position:relative;
		display:block;
	}
	body[data-mode="recruit"] #tel{ color:white; }
	body[data-mode="recruit"] #tel.hover{ color:rgb(194,224,226); }
	#hcontact{
		background:rgb(133,194,198);
		color:rgb(51,51,51);
		width:auto;
		font-size:30px;
		padding:20px;
		margin:0 20px;
	}
	#hcontact.hover{ background:rgb(169,212,215); }
}

/* カタログ・エントリーボタン */
#catalog,#entry{
	display:block;
	position:absolute;
	width:240px;
	right:40px;
	transition:background .2s, opacity .2s;
	top:40px;
}
#catalog.hover,#entry.hover{
	background:rgb(78,107,123);
	opacity: .8;
}
#catalog{
	background:rgb(236,188,12);
	background:linear-gradient(135deg,rgb(236,188,12),rgb(217,121,-231));
	transition:.2s;
}
#catalog.hover{
	background:linear-gradient(135deg,rgb(226,154,-110),rgb(198,54,-474));
}
@media screen and (max-width: 1280px){
	#catalog,#entry{ margin-top:100px; }
}
@media screen and (max-width: 1024px){
	#catalog,#entry{
		top:20px;
		margin-top:0;
		right:120px;
	}
}

/* メニュー */
#menu{
	display:none;
	width:80px;
	height:80px;
	border-radius:0;
	position:fixed;
	right:20px;
	margin:0;
	padding:0;
	background:rgba(0,0,0,.1);
	transition:background .2s;
	z-index:1001;
}
#menu.hover{ background:rgba(0,0,0,.3); }
@media screen and (max-width: 1024px){
	#menu{ display:block; }
}

/**
 * メインビジュアル
----------------------------------------------------------------*/
#mvis{
	background:rgb(78,107,123);
	min-height:400px;
}
body[data-mode="recruit"] #mvis{
	background:rgb(230,242,243);
}
#mvis > img{
	max-width:auto;
	width:100%;
	min-width:1024px;
	object-fit:cover;
	min-height:400px;
}
@media screen and (max-width: 768px){
	#mvis > img{ min-width:768px; }
}
body#page\:product_wall #mvis,
body#page\:product_roof #mvis,
body#page\:product_color #mvis,
body#page\:product_accessory #mvis{ min-height:151px; }
body#page\:recruit_requirement #mvis{
	margin-top:151px;
	border-top:1px solid black;
	border-bottom:1px solid black;
}
@media screen and (max-width: 1280px){
	body#page\:product_wall #mvis,
	body#page\:product_roof #mvis,
	body#page\:product_color #mvis,
	body#page\:product_accessory #mvis{ min-height:230px; }
	body#page\:recruit_requirement #mvis{ margin-top:210px; }
}
@media screen and (max-width: 1024px){
	body#page\:product_wall #mvis,
	body#page\:product_roof #mvis,
	body#page\:product_color #mvis,
	body#page\:product_accessory #mvis{ min-height:120px; }
	body#page\:recruit_requirement #mvis{ margin-top:170px; }
}

/**
 * 営業エリアメッセージ
----------------------------------------------------------------*/
#areamessage{
	background:black;
	color:white;
	text-align:center;
	padding:10px 20px;
	display:block;
	font-size:20px;
	line-height:30px;
	margin-top:1px;
	transition:background .2s, box-shadow .2s;
	position:relative;
}
#areamessage.hover{
	background:rgb(78,107,123);
	box-shadow:0 0 20px 5px white;
	z-index:1;
}
@media screen and (max-width: 768px){
	#areamessage{
		margin-top:40px;
		font-size:24px;
	}
}

/**
 * ショートカット
----------------------------------------------------------------*/
#shortcut{
	display:flex;
	gap:10px;
	justify-content:space-between;
	margin-top:-240px;
	position:relative;
	z-index:1;
}
#shortcut a{
	display:block;
	transition:background .2s, opacity .2s, box-shadow .2s;
}
#shortcut a.hover{
	background:rgb(78,107,123);
	opacity: .9;
	box-shadow:0 0 20px 5px white;
}
@media screen and (max-width: 768px){
	#shortcut > *{ width:324px; }
}

/**
 * ページ名
----------------------------------------------------------------*/
#pagename{
	width:500px;
	font-size:50px;
	line-height:90px;
	padding:15px;
	box-sizing:border-box;
	position:absolute;
	margin-top:-200px;
	color:white;
	background:black;
	text-align:center;
	left:50%;
	margin-left:-250px;
}
body#page\:product_color #pagename{
	width:600px;
	margin-left:-300px;
}
@media screen and (max-width: 1280px){
	#pagename{
		width:400px;
		margin-top:-140px;
		font-size:40px;
		line-height:70px;
	}
}

/**
 * 記事背景
----------------------------------------------------------------*/
#page\:business_manufacture > main{ background:url("./../image/interface/bg/business_manufacture.png") scroll no-repeat center top / 100%; }
#page\:business_sales > main{ background:url("./../image/interface/bg/business_sales.png") scroll no-repeat center top / 100%; }
#page\:company > main{ background:url("./../image/interface/bg/company.png") scroll no-repeat center top / 100%; }
@media screen and (max-width: 768px){
	#page\:business_manufacture > main{ background:url("./../image/interface/bg/business_manufacture_sp.png") scroll no-repeat center top / 100%; }
	#page\:business_sales > main{ background:url("./../image/interface/bg/business_sales_sp.png") scroll no-repeat center top / 100%; }
	#page\:company > main{ background:url("./../image/interface/bg/company_sp.png") scroll no-repeat center top / 100%; }
}

/**
 * パン屑リスト
----------------------------------------------------------------*/
#pan{ padding:20px 40px; }
#pan > ol > li,
#pan > ol > li > .tip{
	display:inline-block;
	vertical-align:middle;
}
#pan > ol > li > .tip{
	color:rgb(51,51,51);
	transition:color .2s, text-decoration .2s;
}
#pan > ol > li:not(:first-child) > .tip::before{
	content:'';
	display:inline-block;
	vertical-align:middle;
	background:url("./../image/interface/icon/arrow_black.png") scroll no-repeat center center / contain;
	width:14px;
	height:14px;
	margin-top:-3px;
	margin-right:3px;
}
#pan > ol > li:not(:first-child) > .tip.hover{
	color:rgb(133,194,198);
	text-decoration:underline;
}
#pan > ol > li:first-child > .tip{
	background:url("./../image/interface/icon/home_blue.png") scroll no-repeat center center / contain;
	width:24px;
	height:24px;
	transition:background .2s;
}
#pan > ol > li:first-child > .tip.hover{ background-image:url("./../image/interface/icon/home_black.png"); }
@media screen and (max-width: 768px){
	#pan{ padding:20px 40px; }
}

/**
 * 製品ナビ
----------------------------------------------------------------*/
#pnav{ height:62px; }
#pnav > div{ background:black; }
#pnav > div > ul{
	width:1024px;
	margin:0 auto;
}
#pnav > div > ul > li > a{
	display:block;
	font-size:20px;
	line-height:30px;
	padding:16px;
	color:white;
	text-align:center;
	transition:background .2s;
	border-right:1px solid white;
}
#pnav > div > ul > li:first-child > a{ border-left:1px solid white; }
#pnav > div > ul > li > a.hover{ background:rgba(255,255,255,.2); }
#pnav > div > ul > li > a > span:last-child{ display:none; }
#pnav.active > div{
	position:fixed;
	top:-62px;
	left:0;
	right:0;
	z-index:100;
	transition:top 1s, bottom 1s;
}
#pnav.active > div > ul > li > a > span:first-child{ display:none; }
#pnav.active > div > ul > li > a > span:last-child{ display:inline; }
#pnav.active.view > div{ top:0; }
@media screen and (max-width: 768px){
	#pnav{ height:200px; }
	#pnav > div > ul{ width:768px; }
	#pnav > div > ul > li{ width:50%; }
	#pnav > div > ul > li > a{
		font-size:30px;
		line-height:40px;
		padding:30px 20px;
		border-right:0;
		border-bottom:1px solid white;
	}
	#pnav > div > ul > li:nth-child(odd) > a{ border-right:1px solid white; }
	#pnav > div > ul > li:first-child > a{ border-left:0; }
	#pnav.active > div{
		top:auto;
		bottom:-200px;
	}
	#pnav.active.view > div{
		top:auto;
		bottom:0;
	}
	#pnav.active > div > ul > li > a{
		border-bottom:0;
		border-top:1px solid white;
	}
	#pnav.active > div > ul > li{ width:25%; }
	#pnav.active > div > ul > li:nth-child(odd) > a{ border-right:none; }
	#pnav.active > div > ul > li:not(:first-child) > a{ border-left:1px solid white; }
}

/**
 * 前後ナビ
----------------------------------------------------------------*/
#anav{
	margin:auto;
	padding:40px 20px;
}
#anav > a{
	display:block;
	width:100%;
	max-width:324px;
	height:100px;
	color:rgb(51,51,51);
	margin:20px;
	transition:color .2s;
}
#anav > a.hover{ color:rgb(133,194,198); }
#anav > a.prev{
	padding-left:30px;
	background:url("./../image/interface/anav_prev.png") scroll no-repeat left bottom / contain;
}
#anav > a.next{
	padding-right:30px;
	background:url("./../image/interface/anav_next.png") scroll no-repeat right bottom / contain;
}
#anav > a > div{
	font-size:24px;
	line-height:30px;
	margin-bottom:10px;
	overflow:hidden;
	height:30px;
}
#anav > a > p{
	overflow:hidden;
	height:48px;
}
@media screen and (max-width: 768px){
	#anav{
		flex-direction:row;
		padding:40px 20px;
	}
	#anav > a{
		height:150px;
		margin:20px 10px;
	}
	#anav > a > div{
		font-size:34px;
		line-height:40px;
		margin-bottom:20px;
		height:40px;
	}
	#anav > a > p{
		height:70px;
		overflow:hidden;
		font-size:20px;
		line-height:35px;
		height:70px;
	}
}

/**
 * 製品前後ナビ
----------------------------------------------------------------*/
#proanav{
	padding:40px;
	margin:40px 0;
}
#proanav > ul{
	max-width:768px;
	margin:-20px auto;
}
#proanav > ul > li{
}
#proanav > ul > .prev{
}
#proanav > ul > .next{
}
#proanav > ul > li > div{
	font-size:30px;
	line-height:40px;
	text-align:center;
	margin-bottom:10px;
}
#proanav > ul > li > a{
	display:block;
	transition:opacity .2s;
	color:rgb(51,51,51);
}
#proanav > ul > li > a.hover{ opacity:.5; }
#proanav > ul > li > a > p{
	font-size:20px;
	line-height:30px;
	text-align:center;
	margin:10px 0;
}
@media screen and (max-width: 768px){
	#proanav{ padding:40px 0; }
	#proanav > ul > li > a > p{
		font-size:30px;
		line-height:40px;
	}
}

/**
 * フッターカード
----------------------------------------------------------------*/
#footcard{ background:rgb(78,107,123); }
#footcard > .base{
	padding:70px;
	box-sizing:border-box;
	display:flex;
	justify-content:space-between;
}
#footcard > .base > figure> img{
	width:247px;
	margin:0;
}
#footcard > .base > address{
	display:block;
	font-size:24px;
	line-height:32px;
	color:white;
}
#footcard > .base > address > small{
	display:block;
	font-size:16px;
	line-height:22px;
}
#footcard > .base > div > .button{ margin-top:20px; }
@media screen and (max-width: 768px){
	#footcard > .base{ flex-direction:column; }
	#footcard > .base > figure{ height:auto; }
	#footcard > .base > figure > img{
		width:370px;
		margin:40px auto;
	}
	#footcard > .base > address{
		margin:40px auto;
		text-align:center;
		font-size:40px;
		line-height:60px;
	}
	#footcard > .base > address > small{
		font-size:24px;
		line-height:32px;
	}
	#footcard > .base > div > .button{ margin:0 auto; }
}

/**
 * フッターナビゲーション
----------------------------------------------------------------*/
#fnav{
	background:rgb(51,51,51);
	color:white;
}
#fnav ul::after{
	content:' ';
	display:block;
	clear:both;
	height:0;
	line-height:0;
	visibility:hidden;
	overflow:hidden;
}
#fnav li > :not(ul){ color:white; }
#fnav a{
	border-bottom:1px solid rgba(0,0,0,0);
	transition:color .2s, border-bottom-color .2s, background .2s;
}
#fnav a.hover{
	color:rgb(194,224,226);
	border-bottom:1px solid rgb(194,224,226);
}
#fnav li.tip{ width:236px; }
#fnav li:not(.tip){ float:left; }
#fnav li:not(.tip) > :not(ul){
	font-size:18px;
	line-height:28px;
	font-weight:bold;
}
#fnav > div > ul > li:not(.tip) > :not(ul){
	font-size:22px;
	line-height:60px;
}
@media screen and (max-width: 768px){
	#fnav > .base{ padding:0; }
	#fnav a.hover{
		background:rgba(255,255,255);
		color:rgb(78,107,123);
	}
	#fnav li.tip{
		float:left;
		width:50%;
		box-sizing:border-box;
	}
	#fnav li.tip > :not(ul),
	#fnav li:not(.tip) > :not(ul),
	#fnav > div > ul > li:not(.tip) > :not(ul){
		font-size:24px;
		line-height:40px;
		padding:14px;
		border-bottom:1px solid #888;
	}
	#fnav > div > ul > li:not(.tip) > :not(ul){
		text-align:center;
		padding:24px;
		border-top:1px solid #888;
		margin-top:-1px;
		letter-spacing:.2em;
	}
	#fnav li.tip > :not(ul)::before{
		content:'';
		display:inline-block;
		width:20px;
		height:20px;
		background:url("./../image/interface/icon/arrow_white.png") scroll no-repeat center center / contain;
		width:16px;
		height:16px;
	}
	#fnav li:not(.tip) > span{
		text-align:center;
		background:#888;
		padding:4px 14px !important;
		letter-spacing:.2em;
	}
	#fnav li.tip:nth-child(2n-1){ border-right:1px solid #888; }
	#fnav li > :not(ul){ display:block; }
	#fnav li:not(.tip){ float:none; }
}

/**
 * 著作権表記
----------------------------------------------------------------*/
#cr{
	font-size:16px;
	line-height:24px;
	font-weight:bold;
	padding:10px 20px;
	text-align:center;
	color:white;
	background:black;
}
@media screen and (max-width: 768px){
	#cr{
		font-size:24px;
		line-height:36px;
		padding:20px;
	}
}

/**
 * TOPページ
----------------------------------------------------------------*/
/* 製品情報パネル */
#spot_index_propanel{
	display:flex;
	border-top:1px solid white;
	border-bottom:1px solid white;
	background:rgb(78,107,123);
}
#spot_index_propanel a{
	display:block;
	position:relative;
	transition:opacity .2s, box-shadow .2s;
}
#spot_index_propanel a.hover{
	opacity:.9;
	box-shadow:0 0 20px 5px white;
	z-index:1;
}
#spot_index_propanel a::after{
	content:'';
	display:block;
	position:absolute;
}
#spot_index_propanel > a::after{
	top:0;
	bottom:0;
	right:0;
	border-right:1px solid white;
}
#spot_index_propanel > div > a:not(:last-child):after{
	left:0;
	right:0;
	bottom:0;
	border-bottom:1px solid white;
}
@media screen and (max-width: 768px){
	#spot_index_propanel{ flex-wrap:wrap; }
	#spot_index_propanel > a{
		width:50%;
		border-bottom:1px solid white;
	}
	#spot_index_propanel > div{
		width:100%;
		display:flex;
	}
	#spot_index_propanel > div > a:not(:last-child):after{
		top:0;
		left:auto;
		border-bottom:0;
		border-right:1px solid white;
	}
}

/* ピックアップ */
#spot_index_pickup > section{
	background:white;
	padding:20px;
	margin:20px 0;
}
#spot_index_pickup > section h3{
}

/* 製品情報 */
#spot_index_product{
	background:url("./../image/interface/bg/index_leadimage.png") scroll no-repeat center center / cover;
	box-sizing:border-box;
}
#spot_index_product > div > .leadcopy{
	color:white;
	margin-bottom:20px;
}
#spot_index_product > div > .leadsummary{ color:white; }
@media screen and (max-width: 768px){
	#spot_index_product{ background-image:url("./../image/interface/bg/index_leadimage_sp.png"); }
}

/* 新製品のご案内 */
#spot_index_newproducts{
	background:url("./../image/interface/mvis/product_index.png") scroll no-repeat center center / cover;
	box-sizing:border-box;
}
@media screen and (max-width: 768px){
	#spot_index_newproducts{ background-image:url("./../image/interface/mvis/product_index_sp.png"); }
}

/* 会社案内 */
#spot_index_company{ background:url("./../image/interface/bg/index_company.png") scroll no-repeat center center / cover; }
#spot_index_company > .base > .leadcopy{
	color:white;
	text-shadow:0 0 6px rgba(0,0,0,1);
}
@media screen and (max-width: 768px){
	#spot_index_company{ background-image:url("./../image/interface/bg/index_company_sp.png"); }
}

/**
 * 事業紹介
----------------------------------------------------------------*/
/* 4枚パネル */
.fourpanel{ margin:40px auto; }
@media screen and (max-width: 768px){
	.fourpanel.flex:not(.keep){
		flex-direction:row;
		flex-wrap:wrap;
	}
	.fourpanel > img{ width:50%; }
}

/* 事業紹介 > 販売 > ご注文の流れ */
#spot_business_sales_flow > div > ol{ counter-reset:flow; }
#spot_business_sales_flow > div > ol > li:not(:last-child)::after{
	content:'';
	display:block;
	background:url("./../image/interface/hr.png") scroll repeat-x center center;
	height:24px;
}
#spot_business_sales_flow > div > ol > li{
	counter-increment:flow;
	position:relative;
}
#spot_business_sales_flow > div > ol > li::before{
	content:counter(flow);
	position:absolute;
	font-size:50px;
	line-height:50px;
	left:0;
}
#spot_business_sales_flow > div > ol > li > *{ padding-left:60px; }
#spot_business_sales_flow > div > ol > li > div{
	font-size:24px;
	line-height:30px;
}

/**
 * 会社案内
----------------------------------------------------------------*/
/* 会社案内 > 代表挨拶 > 代表者名 */
.sign{
	font-size:30px;
	line-height:40px;
	font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	text-align:right;
	margin-top:20px;
}
.sign > small{
	display:block;
	font-size:20px;
	line-height:30px;
}

/* 電話ボックス */
.telbox > *{
	width:210px;
	display:inline-block;
	margin-top:30px;
	position:relative;
	margin-right:20px;
}
.telbox > .label_tel,
.telbox > .label_fax{ padding-left:70px; }
.telbox > .label_tel::before,
.telbox > .label_fax::before{
	content:'';
	display:inline-block;
	background:scroll no-repeat center center / contain;
	width:60px;
	height:60px;
	position:absolute;
	top:0;
	left:0;
}
.telbox > .label_tel::before{ background-image:url("./../image/interface/label_tel.png"); }
.telbox > .label_fax::before{ background-image:url("./../image/interface/label_fax.png"); }
@media screen and (max-width: 768px){
	.telbox > *{ width:auto; }
}

/* 沿革 */
.history{
	text-align:center;
	font-size:20px;
	line-height:30px;
	margin:40px;
}
.history > dt{
	color:rgb(78,107,123);
	margin:30px 0 5px;
}
.history > dd{ margin:5px 0; }
@media screen and (max-width: 768px){
	.history{
		font-size:30px;
		line-height:46px;
	}
}

/* インタビュー質問 */
.q{
	font-weight:bold;
	margin-bottom:10px;
	font-size:16px;
}
.q:not(:first-child){ margin-top:20px; }
.q::before{
	content:'';
	border-bottom:1px solid rgb(51,51,51);
	width:40px;
	display:inline-block;
	vertical-align:middle;
}
@media screen and (max-width: 768px){
	.q{
		font-size:28px;
		line-height:40px;
		margin-bottom:20px;
	}
	.q:not(:first-child){ margin-top:60px; }
}

/* 営業エリア */
#spot_company_area > ul > li{
	position:relative;
	padding-left:120px;
}
#spot_company_area > ul > li > span{
	border:1px solid rgb(51,51,51);
	width:100px;
	height:40px;
	line-height:40px;
	display:block;
	text-align:center;
	margin-right:10px;
	position:absolute;
	left:0;
}
#spot_company_area > ul > li:nth-child(1) > span{ background:rgb(134,222,241); }
#spot_company_area > ul > li:nth-child(2) > span{ background:rgb(237,198,30); }
#spot_company_area > ul > li:nth-child(3) > span{ background:white; }
#spot_company_area > a{ transition:opacity .2s; }
#spot_company_area > a.hover{ opacity:.5; }
@media screen and (max-width: 768px){
	#spot_company_area > ul > li > span{ line-height:40px; }
}

/**
 * 新着情報
----------------------------------------------------------------*/
/* ページャー */
#pager{
	font-family:"Helvetica Neue", HelveticaNeue, "Segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	line-height:30px;
	font-weight:bold;
}
#pager > *{
	display:block;
	border:3px solid rgb(51,51,51);
	text-align:center;
	margin:5px;
}
#pager > a{ transition:border-color .2s, background .2s, color .2s; }
#pager > a.hover{
	border-color:rgb(51,51,51);
	background:rgb(51,51,51);
	color:white;
}
#pager > span{
	color: #ccc;
	border-color:#ccc;
}
#pager > .prev,
#pager > .next{ width:100px; }
#pager > .page{ min-width:30px; }
#pager > .current{
	border-color:rgb(51,51,51);
	background:rgb(51,51,51);
	color:white;
}
@media screen and (max-width: 768px){
	#pager{
		font-size:24px;
		line-height:40px;
	}
	#pager > *{
		border-width:4px;
		margin:5px;
		padding:6px 0;
	}
	#pager > .prev,
	#pager > .next{ width:150px; }
	#pager > .page{ min-width:40px; }
}

/**
 * 製品情報
----------------------------------------------------------------*/
/* 製品情報 > 取扱商品 */
#spot_product_index_3rd > section{
	max-width:768px;
	margin:0 auto;
}
#spot_product_index_3rd > section > table > tbody > colgroup > .thirdchart_maker{ width:200px; }
#spot_product_index_3rd > section > table .thirdchart_name{ width:264px; }
#spot_product_index_3rd > section > table .thirdchart_site{ width:148px; }
#spot_product_index_3rd > section .button{ margin:0; }

/**
 * 採用TOP
----------------------------------------------------------------*/
/* 仕事を理解する・カネブンを知る */
#spot_recruit_index_job,
#spot_recruit_index_company{
	background:scroll no-repeat center center / cover;
	padding-top:40px;
	padding-bottom:40px;
}
#spot_recruit_index_job{
	background-image:url("./../image/interface/bg/recruit_index_job.png");
	color:white;
}
#spot_recruit_index_job > .base > *{ margin-left:50%; }
#spot_recruit_index_company{ background-image:url("./../image/interface/bg/recruit_index_company.png"); }
#spot_recruit_index_company .button{ margin-left:0; }
@media screen and (max-width: 768px){
	#spot_recruit_index_job{ background-image:url("./../image/interface/bg/recruit_index_job_sp.png"); }
	#spot_recruit_index_job > .base > *{ margin-left:0; }
	#spot_recruit_index_job > .base > .button{ margin-left:20px; }
	#spot_recruit_index_company{ background-image:url("./../image/interface/bg/recruit_index_company_sp.png"); }
	#spot_recruit_index_company .button{ margin-left:20px; }
}

/* 現場の声を聞く */
#spot_recruit_index_voice > a{
	display:block;
	transition:background .2s, box-shadow .2s, opacity .2s;
	position:relative;
}
#spot_recruit_index_voice > a.hover{
	background:rgb(230,242,243);
	box-shadow:0 0 30px 10px rgba(0,0,0,.4);
	opacity:.9;
	z-index:1;
}

/* 募集要項 */
#spot_recruit_index_requirement{ position:relative; }
#spot_recruit_index_requirement > h2{
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:2;
}
#spot_recruit_index_requirement > ul{
	border-right:1px solid rgb(51,51,51);
	border-left:1px solid rgb(51,51,51);
	margin:0 -1px;
}
#spot_recruit_index_requirement > ul > li > a{
	display:block;
	color:rgb(51,51,51);
	border-top:1px solid rgb(51,51,51);
	border-bottom:1px solid rgb(51,51,51);
	position:relative;
	transition:background .2s, box-shadow .2s, opacity .2s;
}
#spot_recruit_index_requirement > ul > li:not(:last-child) > a::after{
	border-right:1px solid rgb(51,51,51);
	content:'';
	display:block;
	position:absolute;
	right:0;
	top:0;
	height:100%;
}
#spot_recruit_index_requirement > ul > li > a.hover{
	background:rgb(230,242,243);
	box-shadow:0 0 30px 10px rgba(0,0,0,.4);
	opacity:.9;
	z-index:1;
}
#spot_recruit_index_requirement > ul > li > a > h3{ padding:10px 10px 0; }
#spot_recruit_index_requirement > ul > li > a > p{
	padding:0 10px 20px;
	height:70px;
}
@media screen and (max-width: 768px){
	#spot_recruit_index_requirement > h2{
		width:50%;
		background:black;
		height:806px;
		border-bottom:1px solid rgb(51,51,51);
		z-index:0;
	}
	#spot_recruit_index_requirement > h2 > img{margin-top:115px;}
	#spot_recruit_index_requirement > h2::after{
		border-right:1px solid rgb(51,51,51);
		content:'';
		display:block;
		position:absolute;
		right:0;
		top:0;
		height:100%;
	}
	#spot_recruit_index_requirement > ul{
		flex-wrap:wrap;
		flex-direction:row;
		border-right:0;
		border-left:0;
		margin:0 0 80px;
	}
	#spot_recruit_index_requirement > ul::before{
		content:'';
		display:block;
		width:50%;
		background:red;
		height:200px;
	}
	#spot_recruit_index_requirement > ul > li{width:50%;}
	#spot_recruit_index_requirement > ul > li > a{border-top:0;}
	#spot_recruit_index_requirement > ul > li:not(:last-child) > a::after{border-right:0;}
	#spot_recruit_index_requirement > ul > li:nth-child(even) > a::after{ border-right:1px solid rgb(51,51,51); }
	#spot_recruit_index_requirement > ul > li:first-child > a::after{ border-top:1px solid rgb(51,51,51); }
	#spot_recruit_index_requirement > ul > li > a > p{ height:120px; }
}

/* エントリーボタン */
#bigentry > a{
	transition:box-shadow .2s;
	border-radius:60px;
	margin:80px 40px;
}
#bigentry > a.hover{
	box-shadow:0 0 30px 10px rgb(239,201,60);
}

/**
 * カネブンを知る
----------------------------------------------------------------*/
/* カネブンを知る > 社内アンケート */
#spot_recruit_company_quest > div{ width:768px; }
#spot_recruit_company_quest > div > section{ margin:40px 0; }
#spot_recruit_company_quest > div > section > h3::before{
	content:'';
	display:inline-block;
	border-bottom:1px solid rgb(51,51,51);
	width:100px;
	vertical-align:middle;
}

/* メッセンジャー */
.messanger > li{
	font-family:"Helvetica Neue", HelveticaNeue, "Segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif}
.messanger > li > span{
	display:inline-block;
	background:rgb(78,107,123);
	color:white;
	padding:10px 20px;
	margin:10px 0;
	border-radius:10px;
	max-width:500px;
	text-align:left;
}
.messanger > li:nth-child(odd)::before,
.messanger > li:nth-child(even)::after{
	background:scroll no-repeat center center / contain;
	content:'';
	width:20px;
	height:30px;
	display:inline-block;
}
.messanger > li:nth-child(even){ text-align:right; }
.messanger > li:nth-child(odd)::before{ background-image:url("./../image/article/recruit/company/quest_comment_left.png"); }
.messanger > li:nth-child(even)::after{ background-image:url("./../image/article/recruit/company/quest_comment_right.png"); }

/**
 * 働く場所を見る
----------------------------------------------------------------*/
body#page\:recruit_place #mvis{ position:relative; }
body#page\:recruit_place #mvis::after{
	content:'本社／外観';
	position:absolute;
	bottom:0;
	left:0;
	color:white;
	background:black;
	margin:0;
	padding:4px 10px;
	font-size:30px;
	line-height:40px;
}
#spot_recruit_place > section > figure{
	border-top:1px solid white;
	position:relative;
}
#spot_recruit_place > section > figure > figcaption{
	position:absolute;
	bottom:0;
	left:0;
	color:white;
	background:black;
	margin:0;
	padding:4px 10px;
	font-size:30px;
	line-height:40px;
}
#spot_recruit_place > section.split2 > figure::after{
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	border-right:1px solid white;
	content:'';
	display:block;
}
@media screen and (max-width: 768px){
	#spot_recruit_place > section.split2 > figure::after{ display:none; }
}

/**
 * 募集要項
----------------------------------------------------------------*/
/* 募集要項 > 職場環境 */
#spot_recruit_requirement_envi > table{
	width:640px;
	margin:0 auto;
}
#spot_recruit_requirement_envi > table th{ width:140px; }

/* 募集要項パネル */
.reqpanel{
	position:relative;
	border-top:1px solid black;
}
.reqpanel > h2{
	position:absolute;
	z-index:-1;
}
.reqpanel > div > div{ min-height:576px; }
@media screen and (max-width: 768px){
	.reqpanel > h2{ position:static; }
	.reqpanel > div > div{
		min-height:0;
		margin-bottom:80px !important;
	}
}

/**
 * その他
----------------------------------------------------------------*/
/* 推奨ナビ */
.rnav{
	width:840px;
	margin:40px auto;
	text-align:center;
}
.rnav > ul > li > a{
	display:inline-block;
	transition:background .2s, opacity .2s, box-shadow .2s;
	position:relative;
}
.rnav > ul > li > a.hover{
	background:rgb(42,77,96);
	opacity:.8;
	box-shadow:0 0 30px 10px rgba(0,0,0,.1);
	z-index:1;
}
@media screen and (max-width: 768px){
	.rnav{ width:auto; }
}

/* 社員インタビューナビ */
.voicenav > h2{
	font-size:50px;
	line-height:60px;
	margin:80px 0;
	text-align:center;
}
.voicenav > h2 > small{
	font-size:32px;
	line-height:40px;
	display:block;
}

/**
 * 製品ページ
----------------------------------------------------------------*/
/* 製品 > 役物：オーダー加工品 */
#spot_product_accesory_order > table{
	max-width:768px;
	margin:0 auto;
	font-size:20px;
	line-height:30px;
}
#spot_product_accesory_order > table th,
#spot_product_accesory_order > table td{ padding:10px; }
@media screen and (max-width: 768px){
	#spot_product_accesory_order > table{
		font-size:30px;
		line-height:40px;
	}
}


/* 製品記事 */
#product > h1{
	font-size:50px;
	line-height:60px;
	margin-bottom:40px;
}
#product > h1 > small{
	display:block;
	font-size:30px;
	line-height:34px;
}
#product > a{
	display:inline-block;
	margin-bottom:80px;
}
#product > div > div > .h3{
	margin-top:0;
	text-align:center;
	letter-spacing:.1em;
	margin-bottom:20px;
}
#product > div > div > a{ display:inline-block; }
#product > div > div > a:not(:last-child){ margin-bottom:20px; }
#product > a,
#product > div > div > a{ transition:opacity .2s, box-shadow .2s; }
#product > a.hover,
#product > div > div > a.hover{
	opacity:.8;
	box-shadow:0 0 30px 4px rgba(0,0,0,.1);
}
#product .table th{ min-width:100px; }
@media screen and (max-width: 768px){
	#product .table th{ min-width:200px; }
}

/* 製品ナビ */
.pronav{ position:relative; }
.todiagram{
	position:absolute;
	top:110px;
	right:0;
}
#catalogpage .todiagram{ top:0; }
.todiagram > a.button{
	width:160px;
	padding:6px;
	font-size:20px;
}
.pronav > .between{ justify-content:flex-start; }
.pronav > section a{
	display:block;
	color:rgb(51,51,51);
	transition:color .2s;
}
.pronav > section a > figure > img{ transition:opacity .2s, box-shadow .2s; }
.pronav > section a.hover{ color:rgb(78,107,123); }
.pronav > section a.hover > figure > img{
	opacity:.8;
	box-shadow:0 0 20px 4px rgba(0,0,0,.1);
}
@media screen and (max-width: 768px){
	.pronav .split3 > *{ width:50%; }
	.todiagram{ position:static; }
	#catalogpage .todiagram{ position:absolute; }
	.todiagram > a.button{
		font-size:24px;
		margin-right:auto;
		margin-left:auto;
	}
}

/* 早見表 */
.prochart > table{ overflow:hidden; }
.prochart > table > thead,
.prochart > table > tbody{ border:3px solid black; }
.prochart > table,
.prochart > table th,
.prochart > table td{
	border:2px solid black;
	padding:6px 2px;
	text-align:center;
	font-size:14px;
	line-height:16px;
	vertical-align:middle;
}
.prochart > table tbody th > a{
	display:block;
	height:100%;
	margin:-6px -2px;
	padding:6px 2px;
	color:rgb(51,51,51);
}
.prochart > table tbody .hasdown > th > a{ line-height:46px; }
.prochart > table tbody th:hover,
.prochart > table tbody td:hover{ background:rgba(133,194,198,0.5); }
.prochart > table tbody th,
.prochart > table tbody td{ position:relative; }
.prochart > table tbody th:hover::before,
.prochart > table tbody th:hover::after,
.prochart > table tbody td:hover::before,
.prochart > table tbody td:hover::after{
	content:'';
	display:block;
	background:rgba(133,194,198,0.1);
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:-1;
}
.prochart > table tbody th:hover::before,
.prochart > table tbody td:hover::before{
	top:-2000px;
	bottom:-1000px;
}
.prochart > table tbody th:hover::after,
.prochart > table tbody td:hover::after{
	left:-2000px;
	right:-1000px;
}
.prochart > table > thead th{
	background:rgb(206,230,232);
	font-size:16px;
	line-height:18px;
}
.prochart > table > thead td{
	background:rgb(230,242,243);
}
.prochart > table tbody th{ text-align:left; }
.prochart > table .prochart_name{
	text-align:left !important;
	width:200px;
}
.prochart > table .prochart_down,
.prochart > table .prochart_work{ width:60px; }
.prochart > table .prochart_min,
.prochart > table .prochart_glmolding{ width:75px; }
.prochart > table .prochart_colorgl,
.prochart > table .prochart_stainless{ width:50px; }
.prochart > table .prochart_colorgl:first-child,
.prochart > table .prochart_stainless:first-child{ border-left-width:3px; }
.prochart > table .elongate{
	display:inline-block;
	transform: scale(0.7, 1);
	margin:0 -30px;
}
@media screen and (max-width: 768px){
	.prochart{
		overflow-x:scroll;
		-webkit-overflow-scrolling:touch;
		margin-top:120px;
	}
	.prochart::before{
		display:block;
		color:white;
		background:black;
		content:'表を左右にスクロール出来ます';
		position:absolute;
		width:440px;
		left:50%;
		margin:-80px 0 0 -220px;
		text-align:center;
		padding:10px;
	}
	.prochart > table{
		width:1536px;
	}
	.prochart > table th,
	.prochart > table td{
		padding:9px 4px;
		font-size:21px;
		line-height:24px;
	}
	.prochart > table > thead th{
		font-size:24px;
		line-height:27px;
	}
	.prochart > table .prochart_down,
	.prochart > table .prochart_work{ width:90px; }
	.prochart > table .prochart_min,
	.prochart > table .prochart_glmolding{ width:113px; }
	.prochart > table .prochart_colorgl,
	.prochart > table .prochart_stainless{ width:60px; }
}

/**
 * カタログ
----------------------------------------------------------------*/
/* カタログページ */
#catalogpage{ margin-top:140px; }
body#page\:catalog_index #catalogpage{ margin-top:70px; }

/* カタログタイトル */
#catalogtitle{
	position:fixed;
	top:70px;
	left:0;
	right:0;
	background:rgb(51,51,51);
	color:white;
	z-index:1000;
	text-align:center;
	padding:20px;
	font-size:30px;
	line-height:40px;
	border-bottom:1px solid white;
}

/* カタログナビ */
#catalognav{
	position:fixed;
	top:0;
	left:0;
	right:0;
	background:black;
	border-bottom:1px solid white;
	z-index:1000;
}
#catalognav > ul{
	width:1024px;
	margin:0 auto;
	height:70px;
	overflow:hidden;
}
#catalognav > ul > li > a{
	display:block;
	color:white;
	text-align:center;
	font-size:18px;
	line-height:30px;
	padding:20px 4px;
	border-right:1px solid white;
	transition:background .2s;
}
#catalognav > ul > li > a.hover{ background:rgba(255,255,255,.2); }
#catalognav > ul > li:first-child > a{ border-left:1px solid white; }

/* カタログパネル */
#catalogpanel > h1{ background:rgb(157,206,209); }
#catalogpanel > h1 img{
	max-width:1024px;
	margin:0 auto;
}
#catalogpanel > .base > div > a{ display:block; }
#catalogpanel > .base > div > a > div{
	transition:opacity .2s, box-shadow .2s;
	position:relative;
	width:288px;
	height:288px;
}
	#catalogpanel > .base > div > a[name="roof"] > div{
		background:url("./../image/article/catalog/catalognav/roof.png") scroll no-repeat center center / cover;
	}
	#catalogpanel > .base > div > a[name="wall"] > div{
		background:url("./../image/article/catalog/catalognav/wall.png") scroll no-repeat center center / cover;
	}
	#catalogpanel > .base > div > a[name="color"] > div{
		background:url("./../image/article/catalog/catalognav/color.png") scroll no-repeat center center / cover;
	}
	#catalogpanel > .base > div > a[name="acc"] > div{
		background:url("./../image/article/catalog/catalognav/acc.png") scroll no-repeat center center / cover;
	}
	#catalogpanel > .base > div > a[name="colorsample"] > div{
		background:url("./../image/article/catalog/catalognav/colorsample.png") scroll no-repeat center center / cover;
	}
	#catalogpanel > .base > div > a[name="3rd"] > div{
		background:url("./../image/article/catalog/catalognav/3rd.png") scroll no-repeat center center / cover;
	}
	#catalogpanel > .base > div > a[name="chart"] > div{
		background:url("./../image/article/catalog/catalognav/chart.png") scroll no-repeat center center / cover;
	}
	#catalogpanel > .base > div > a[name="top"] > div{
		background:url("./../image/article/catalog/catalognav/top.png") scroll no-repeat center center / cover;
	}
#catalogpanel > .base > div > a.hover > div{
	opacity:.8;
	box-shadow:0 0 40px rgba(0,0,0,.5);
	z-index:1;
}
#cataloghome,
#catalogtel{
	display:block;
	position:fixed;
	width:100px;
	bottom:20px;
	z-index:2000;
	background:rgba(0,0,0,.05);
	transition:background .2s, box-shadow .2s;
}
#cataloghome{ right:20px; }
#catalogtel{
	right:140px;
	display:none;
}
#cataloghome.hover,
#catalogtel.hover{
	box-shadow:0 0 40px rgba(0,0,0,.4);
	background:rgba(255,255,255,.5);
}
@media screen and (max-width: 1024px){
	#catalognav > ul > li:first-child > a{ border-left:none; }
	#catalognav > ul > li:last-child > a{ border-right:none; }
}
@media screen and (max-width: 768px){
	body#page\:catalog_index > main{ padding-bottom:0; }
	body#page\:catalog_index #catalogpage{ margin-top:80px; }
	#catalogtel{ display:block; }
	#catalogtitle{ top:80px; }
	#catalognav > ul{
		width:768px;
		height:80px;
	}
	#catalognav > ul > li > a{
		font-size:26px;
		line-height:40px;
	}
	#catalogpanel > .base{ padding:0; }
	#catalogpanel > .base > .between{ margin:0; }
	#catalogpanel > .base > .between > *{
		padding:0;
		width:384px;
		height:384px;
		display:block;
	}
	#catalogpanel > .base > .between > * > div{
		width:100%;
		height:100%;
	}
	#catalogpanel > h1{
		background:rgb(51,51,51);
		font-size:30px;
		line-height:40px;
		padding:20px;
		color:white;
		border-bottom:1px solid white;
		text-align:center;
	}
	/*
	#catalogpanel{
		position:absolute;
		top:80px;
		bottom:0;
		left:0;
		width:768px;
		z-index:1000;
	}
	#catalogpanel > :first-child > img{ max-width:100%; }
	#catalogpanel > .base{ padding:0; }
	#catalogpanel > .base > .between{ margin:0; }
	#catalogpanel > .base > .between > *{
		padding:0;
		width:50%;
	}
	#catalogpanel > .base,
	#catalogpanel > .base > div{ height:100%; }
	#catalogpanel > .base > div > a{ height:33.3333%; }
	#catalogpanel > .base > div > a > div{
		width:100%;
		height:100%;
	}
	*/
}

/**
 * お問い合わせ
----------------------------------------------------------------*/
#spot_contact_faq > section:not(:last-child){ margin-bottom:20px; }
#spot_contact_faq > section > h4{
	font-size:20px;
	color:rgb(78,107,123);
}
#spot_contact_faq > section > h4::before{
	content:'Q';
	display:inline-block;
	background:rgb(78,107,123);
	color:white;
	border-radius:50%;
	line-height:44px;
	font-size:80%;
	width:44px;
	height:44px;
	box-sizing:border-box;
	text-align:center;
	margin-right:10px;
}
#spot_contact_faq > section > p{
	font-size:18px;
	margin-top:10px;
}
@media screen and (max-width: 768px){
	#spot_contact_faq > section > h4{ font-size:24px; }
	#spot_contact_faq > section > p{ font-size:22px; }
}