*{
	box-sizing:border-box;
}
li{
    list-style-type: none;
}

/**********************
 モバイル用
***********************/
@media screen and (max-width: 600px) {
	body{
		font-size:0.9em;
	}
	h1 .companyname{
		float:right;
		margin-top:0.25em;
	}
	h1.topimage{
		margin:0px;
		padding:0px;
	}
	h1.logo{
		margin:0px;
		padding:0px 0.25em;
	}
	span.tel{
		color:#666666;
		text-shadow:none;
		font-size:0.9em;
	}
	h2#subtitle{
		font-size:0.75em;
	}
	#topimage{
		width:100%;
		max-width:600px;
		margin:0 auto;
	}
	/* MENU */
	#menu_trigger{
		font-size:1.25em;
		display:block;
		position:relative;
		width:100%;
		padding:0.75em;
		color:#ffffff;
		background-color:#990000;
		text-align:center;
	}
	#menu_trigger:after{
		content:"\2261";
		font-weight:bold;
		font-size:1.25em;
		margin-top:-0.125em;
		margin-right:3%;
		float:right;
	}
	#navi {
		font-size:1.25em;
		display: none;
		width:100%;
		position:absolute;
		margin:0;
		padding:0;
		border:1px solid #990000;
		background-color: #ffeeee;
		box-shadow:0px 2px 8px #666666;
	}
	#navi li {
		width:100%;
		height:2em;
		display:inline-block;
		border-top:1px solid #ffdddd;
		text-align:center;
		padding:0.25em 0.5em;
	}
	#navi li:after{
		content:"\25B6";
		color:#990000;
		font-size:0.75em;
		float:right;
		margin-top:0.25em;
	}
	#navi li a{
		color:#990000;
	}
	#navi2{
		text-align:center;
		background-color:#f6f6f6;
		padding:0.5em;
	}
	#navi2 li{
		margin-top:1em;
		margin-left:-2em;
	}
	#contents{
		width:100%;
		margin:0;
		padding:0;
	}
	.subsection{
		width:100%;
		display:block;
	}
	.subsection.link h3{
		border:none;
		padding:0em;
	}
	.subsection.link a{
		display:block;
		margin-right:0.5em;
		padding:0.2em 0 0 0.5em;
		border:2px solid #990000;
		color:#990000;
	}
	.subsection.link h3 a:after{
		content:"\25B6";
		font-size:0.75em;
		float:right;
		margin-right:0em;
		padding:0.25em 0.5em 0.15em 0.5em;
	}
	.factory_images{
		text-align:center;
	}
	.factory_images img{
		margin:0.25em;
	}
	#showcase{
		margin:16px 8px;
	}
	.thumbnail{
		margin:8px 4px;
	}
	#navi3 li{
		display:block;
		margin:1em 0;
	}
	#footer ul{
		padding-left:0;
	}
	.map{
		display:block;
		width:67%;
		min-width:180px;
		height:12em;
		border:none;
	}
}

/**********************
 デスクトップ用
***********************/
@media screen and (min-width:601px) {
	.sponly{
		display:none !important;
	}
	h1 .companyname{
		display:inline-block;
		margin-left:20%;
	}
	h1.topimage{
		text-align:center;
		padding:0px;
		margin:0px;
	}
	h1.logo{
		text-align:left;
		margin:0px 10%;
	}
	h2#subtitle{
		font-size:1em;
	}
	#topimage{
		width:100%;
		max-width:1100px;
		margin:0 auto;
	}
	#menu_trigger{
		display:none;
	}
	ul#navi {
		display:block;
		background-color: #990000;	/* バーの背景色 */
		margin: 0px;				/* バー外側の余白 */
		padding: 0px;				/* バー内側の余白 */
		border: 1px solid #990000;	/* バーの枠線 */
		width:100%;
	}
	ul#navi li {
	    width: 25%;					/* 項目の横幅 */
	    min-width:146px;
	    max-width:200px;
	    height: 2em;					/* 項目の高さ（「バーの高さ」と一致させる） */
	    border-right: 1px solid #cc6666;	/* 項目の区切り線 */
	    border-bottom:1px solid #cc6666;
	    list-style-type: none;
	    display:inline-block;
	    margin:0;
	}
	ul#navi li.home{
		float:right;
		border:none;
		width:auto;
		min-width:0px;
		margin-right:0.5em;
	}
	ul#navi li.home a{
		text-align:right;
	}
	ul#navi li.home a:after{
		content:"\25B2";
		float:right;
		margin-left:0.5em;
	}
	ul#navi li a {
		background-color: #990000;	/* 項目の背景色 */
	    color: white;				/* 項目の文字色 */
	    text-align: center;			/* 文字列の配置（中央寄せ） */
	    text-decoration: none;		/* 項目の装飾（下線を消す） */
	    display: block;
		width: 100%;
	    height: 100%;
	    padding-top:0.25em;
	}
	/* -------------------- */
	/* ▽現在位置項目の装飾 */
	/* -------------------- */
	ul#navi li.selected a {
		font-weight: bold;
		background-color: #cc6666;
	}
	/* ---------------------------------------- */
	/* ▽メニュー項目にマウスが載ったときの装飾 */
	/* ---------------------------------------- */
	ul#navi li a:hover {
		/*background-color: #dd7777;*/
		color: #ffffcc;
	}
	
	#contents{
		width:75%;
		float:left;
		margin:0;
		padding:0 0.5em;
	}
	.section{
	}
	#navi2{
		width:25%;
		float:right;
		margin-top:1em;
		padding-right:0.5em;
		border-left:1px solid #eeeeee;
	}
	#navi2 li{
		margin-left:-2em;
		margin-top:1em;
	}
	.subsection{
		width:46%;
		margin-left:1.6%;
		margin-right:1.6%;
		display:inline-block;
	}
	.subsection.w100{
		width:96%;
	}
	.subsection.link h3 a:after{
		content:"\25B6";
		font-size:0.75em;
		margin-top:0.2em;
		margin-left:1em;
	}
	.factory_images{
		text-align:left;
		padding-left:1em;
	}
	.factory_images img{
		margin:0em;
	}
	.subsection.narrow{
		margin-left:8%;
		margin-right:8%;
		width:84%;
	}
	#showcase{
		margin:1em 8px;
	}
	.thumbnail{
		margin:32px 26px;
	}
	footer, #footer{
		clear:both;
	}
	#navi3 li{
		display:inline-block;
		margin:0 1em;
	}
	.address{
		width:50%;
	}
	.map{
		display:block;
		width:67%;
		min-width:200px;
		height:12em;
		border:none;
	}
}

/**********************
 共通
***********************/
html{
	background-color:#fdfdfd;
}
body{
	max-width:1202px;
	margin:0px auto;
	color:#666666;
	background-color:#ffffff;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
	box-shadow:0px 0px 8px #cccccc;
}
p{
	margin-top:0.5em;
	margin-bottom:0.5em;
	text-indent:1em;
}
#menu_trigger{
	
}
#menu_trigger a{
	color:#ffffff;
	text-decoration:none;
}
#navi a{
	text-decoration:none;
}
h1 .companyname{
	font-size:20px;
	color:#993333;
	text-shadow:2px 2px 2px #cc9999;
}
h1 img{
	vertical-align:-12px;

}
h2#subtitle{
	font-weight:normal;
	color:#666666;
	text-align:left;
	margin:0;
	padding-left:2em;
}
#contents{
	overflow:hidden;
}
#contents h2{
	color:#990000;
	text-shadow:2px 2px 2px #cccccc;
	background-color:#f6f6f6;
	font-weight:bold;
	margin:1em 0 0.5em 0;
	padding:0.25em;
}
.section h3{
	color:#990000;
	text-shadow:2px 2px 2px #eeeeee;
	margin:1em 0.25em 0.5em 0.25em;
	padding:0.25em;
	border-left:4px solid #993333;
	border-top:1px dotted #cccccc;
}
.subsection{
	margin-bottom:1em;
	padding:0.25em;
	vertical-align:top;
}
.subsection h3{
	color:#990000;
	text-shadow:2px 2px 2px #eeeeee;
	margin-top:0em;
	margin-bottom:0em;
	padding:0.25em;
	border-left:4px solid #993333;
	border-top:1px dotted #cccccc;
}
.section.flow .subsection.next{
	margin-bottom:0;
}
.section.flow .subsection h4{
	border-left:none;
	text-indent:-1.75em;
	padding-left:1.75em;
}
.section.flow .subsection h4:before{
	background-color:#0066cc;
	color:#ffffff;
	text-shadow:none;
	box-shadow:1px 1px 1px #99ccff;
	padding:0.25em 0.5em 0.15em 0.5em;
	margin-right:0.5em;
	border-radius:0.33em;
}
.section.flow .subsection.step1 h4:before{content:"1";}
.section.flow .subsection.step2 h4:before{content:"2";}
.section.flow .subsection.step3 h4:before{content:"3";}
.section.flow .subsection.step4 h4:before{content:"4";}
.section.flow .subsection.step5 h4:before{content:"5";}
.section.flow .subsection.step6 h4:before{content:"6";}
.section.flow .subsection.step7 h4:before{content:"7";}
.section.flow .subsection.step8 h4:before{content:"8";}
.section.flow .subsection.next:after{
	content:"\25BC";
	display:block;
	width:100%;
	text-align:left;
	color:#999999;
	margin:0;
	padding-left:3em;
}
.subsection h3 a{
	text-decoration:none;
}
.subsection h4{
	margin-top:0.5em;
	margin-bottom:0.5em;
	margin-left:1.25em;
}
.subsection h4:not(:empty):before{
	content:'\002726';
	color:#9999ff;
	margin:-0.25em 0.25em 0em -1.25em;
}
.subsection .caution{
	color:#cc3333;
	text-indent:0em;
	margin-left:1.5em;
}
.subsection .caution:before{
	content:"※";
	margin-left:-1.5em;
	margin-right:0.5em;
}
.subnavi a{
	text-decoration:none;
	display:inline-block;
	margin:0 1em;
	padding:0.25em 0.5em;
	color:#990000;
	font-size:0.8em;
}
.subnavi a:hover{
	text-decoration:underline;
}
.subnavi a:after{
	content:" \21E9";
}
.qst{
	border-bottom:1px dotted #cccccc;
	padding:0.5em 1em 0em 0em;
	font-weight:bold;
	margin-left:2.75em;
	text-indent:-2.75em;
}
.qst:before{
	content:"Q";
	background-color:#0066cc;
	color:#ffffff;
	text-shadow:none;
	box-shadow:1px 1px 1px #ddeeff;
	padding:0.25em 0.5em 0.15em 0.5em;
	margin-right:1em;
	border-radius:0.33em;
}
.ans{
	padding:0.5em 1em 0em 0em;
	margin-top:1em;
	margin-bottom:2em;
	margin-left:2.75em;
	text-indent:-2.75em;
}
.ans:before{
	content:"A";
	background-color:#ffffff;
	color:#0066cc;
	font-weight:bold;
	text-shadow:none;
	box-shadow:1px 1px 1px #ddeeff;
	padding:0.25em 0.5em 0.15em 0.5em;
	margin-right:0.5em;
	border:1px solid #0066cc;
	border-radius:0.33em;
}
.ans p{
	text-indent:0;
	margin-top:0;
	line-height:1em;
}
.totop{
	float:right;
	font-size:0.75em;
}
#navi2 ul{
	margin:0px;
}
#navi2 li{
	list-style-type: none;
}
#navi2 li img{
	max-width:210px;
	width:100%;
}
#showcase{
	color:#ffffff;
	border:2px inset #cccccc;
	background-color:#333333;
	padding-bottom:2em;
}
#showcase .empty{
	width:100%;
	margin:2em;
	text-align:center;
}
#showcase h4{
	margin:2em 1.5em 0em 1.5em;
	padding-top:0.25em;
	border-top:1px solid #555555;
}
#showcase h4:not(:empty):before{
	content:"\25B8";
	color: #ffff00;
}
#showcase h4:first-child{
	border-top:none;
	margin-top:0.5em;
}
#showcase .group_description{
	margin-left:2em;
	font-size:0.9em;
}
.thumbnail{
	width:135px;
	height:162px;
	display:inline-block;
	vertical-align:top;
}
.thumbnail .error{
	width:150px;
	height:150px;
	display: table-cell;
	text-align:center;
	vertical-align:middle;
	color:#333333;
	font-size:0.75em;
}
.thumbnail a{
	width:150px;
	height:150px;
	display: table-cell;
	background-color:#444444;
	box-shadow:3px 3px 3px #000000;
	text-align:center;
	vertical-align:middle;
}
.thumbnail figcaption{
	text-align:center;
	overflow:hidden;
	font-size:0.9em;
	margin-top:4px;
}
.thumbnail figcaption .description{
	display:none;
}
.pswp__caption__center .title{ /*モーダルのタイトル*/
	font-size:1.1em;
	font-weight:bold;
	text-align:center;
}
.pswp__caption__center .description{ /*モーダルの説明*/
	margin-top:0.25em;
}
.noimages {
	color:#ffffff;
	text-align:center;
	margin:1em;
}
table.company{
	width:100%;
	margin-top:1em;
	margin-bottom:2em;
	border:1px solid #666666;
	border-collapse:collapse;
	font-size:0.9em;
}
table.company th{
	width:10em;
	border:1px solid #999999;
	text-align:center;
	padding:0.5em 1em;
	font-weight:normal;
	background-color:#eeeeee;
	color:#000000;
}
table.company td{
	border:1px solid #999999;
	text-align:left;
	padding:0.25em 1em;
}
ul.history{
	width:100%;
	margin-top:1em;
	margin-bottom:2em;
	border:1px solid #666666;
	font-size:0.9em;
	padding:1em 2em 2em 2em;
}
ul.history li{
	padding:1em 0.25em 0em 0.25em;
	border-bottom:1px dotted #cccccc;
	padding-left:2em;
	text-indent:-2em;
}
ul.history li.inline{
	display:inline-block;
}
ul.history li:before{
	content:"\25B8";
	color:#0099ff;
	margin-right:1em;
}
ul.history.no-border{
	margin:0em;
	border:none;
}
div.form{
	width:100%;
}
div.form_header{
	width:100%;
	border-top:1px solid #dddddd;
	padding-top:0.25em;
	color:#993333;
}
div.form_input{
	width:100%;
	margin-bottom:1em;
	padding-left:2em;
	padding-top:0.5em;
}
div.form_input label{
	display:inline-block;
	margin-right:2em;
}
div.form_input .sublabel{
	font-size:0.8em;
	color:#333333;
	margin-top:0.75em;
}
div.form_input .w90{width:90%;}
div.form_input .w40{width:40%;}
div.form_input .w25{width:25%;}
div.form_input .w7{width:7em;}
div.form_input .w4{width:4em;}
div.form_input .content{height:8em;}
div.form_button_container{
	border-top:1px solid #dddddd;
	margin-top:3em;
	padding:2em;
	text-align:center;
}
div.form span.error{
	color:#ff0000;
	font-size:0.9em;
	font-weight:bold;
	margin-left:1em;
}
div.form span.error:before{
	content:"!";
	display:inline-block;
	color:#ffffff;
	background-color:#ff0000;
	border-radius:0.5em;
	font-size:0.8em;
	font-weight:bold;
	padding:0 0.6em;
	margin-right:0.55em;
	vertical-align:0.17em;
}
div.form div.error{
	color:#ff0000;
	font-size:0.9em;
	font-weight:bold;
	border:1px solid #cc0000;
	background-color:#ffeeee;
	margin:0.5em;
	padding:0.25em 1em;
}
.required{
	color:#ff0000;
	font-size:0.8em;
	margin-left:0.25em;
}
a.button{
	display:inline-block;
	width:6em;
	border-radius:0.75em;
	padding:0.5em;
	font-size:1.2em;
	text-decoration:none;
	text-align:center;
}
a.button.left{
	margin-right:2em;
}
a.submit{
	color:#ffffff;
	background-color:#993333;
}
.sitemap{
	margin:0;
	padding:0;
}
.sitemap a{
	display:inline-block;
	color:#000099;
	text-decoration:none;
}
.sitemap a:link{
}
.sitemap a:visited{
}
.sitemap a:hover{
	color:#cc0000;
	background-color:#ffffee;
	text-decoration:underline;
}
.sitemap a:active{
	color:#cc0000;
	background-color:#ffffee;
	text-decoration:underline;
}
.sitemap ul{
	margin:0;
	padding:0 0 0 2em;
}
.sitemap li.branch{
	margin:0;
	padding:0;
}
.sitemap li.branch.current{
	font-weight:bold;
}
.sitemap li.branch:before{
	content:'\2514';
	color:#999999;
	margin-right:0.5em;
}
footer, #footer{
	background-color:#996666;
	color:#ffffff;
	text-align:center;
}
div#footer{
	padding:0.25em;
}
#navi3{margin:0;}
#navi3 li{
	font-size:0.8em;
}
#navi3 li a{
	color:#ffffff;
}
#copyright{
	font-size:0.8em;
}
