@charset "utf-8";

html {
	overflow-y:scroll;
}


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
table{border-collapse:collapse; border-spacing:0;}
/* --- /reset --- */



.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-table;min-height:1%;}
* html .clearfix {height:1%;}
*{zoom:1;}
.clearfix {display:block;}
/* --- /clearfix ---*/

img {
	vertical-align:bottom;
	outline:none;
	border:none;
	}

a,
a:link,
a:visited {
	color:#c93333;
	text-decoration:none;
	-webkit-transition: all .3s;
	transition: all .3s;
}
a:hover {
-	opacity:0.75;
-	filter:alpha(opacity=75);
	cursor:pointer;
	position:relative;
	top:-5px;
}
a:active {
}


body {
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:17px;
	color:#000;
	line-height:1.5;
	
	-webkit-text-size-adjust: 100% !important;
	-moz-text-size-adjust: 100% !important;
	text-size-adjust: 100% !important;

	min-width:320px;
	}
	
* {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	
	-webkit-text-size-adjust: 100% !important;
	-moz-text-size-adjust: 100% !important;
	text-size-adjust: 100% !important;
	-webkit-appearance
	}


.site-width {
	width:1280px;
	margin:0 auto;
	overflow:hidden;
}


#contents {
	padding:50px 0;
	position:relative;
	overflow:hidden;
}

h2 {
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: none;
}

.box_left {
	float:left;
}
.box_right {
	float:right;
}


#banner a,
#cbtn input,
#plating #contents p,
#gnav a,
#home_nav a,
#ft_view a,
#ft_nav .nav01 a {
	display:block;
	text-indent:200%;
	white-space:nowrap;
	overflow:hidden;
}









/* ---------------------------------------------------------
 ヘッダー
--------------------------------------------------------- */
#gnav {
	height:178px;
	background:url(img/header_nav_back.png) 0 0 /auto repeat-x;
	border-top:12px solid #000;
	padding-top:15px;
}

#gnav ul {
	width:1180px;
	overflow:hidden;
	margin:auto;
}
#gnav li {
	padding-top:5px;
	float:left;
}
#gnav .nav01 a {
	margin-right:60px;
}
#gnav li a {
	height:126px;
}
#gnav .nav01 a {
	width:239px;
	background:url(img/header_nav01.png) 0 0 /auto no-repeat;
}
#gnav .nav02 a {
	width:139px;
	background:url(img/header_nav02.png) 0 0 /auto no-repeat;
}
#gnav .nav03 a {
	width:152px;
	background:url(img/header_nav03.png) 0 0 /auto no-repeat;
}
#gnav .nav04 a {
	width:142px;
	background:url(img/header_nav04.png) 0 0 /auto no-repeat;
}
#gnav .nav05 a {
	width:160px;
	background:url(img/header_nav05.png) 0 0 /auto no-repeat;
}
#gnav .nav06 a {
	width:156px;
	background:url(img/header_nav06.png) 0 0 /auto no-repeat;
}
#gnav .nav07 a {
	width:131px;
	background:url(img/header_nav07.png) 0 0 /auto no-repeat;
}





/* ---------------------------------------------------------
 フッター
--------------------------------------------------------- */

#ft_view {
	height:190px;
	background:url(img/footer_ft_view.png) center 0 /auto repeat-x;
}
#ft_view ul {
	width:180px;
	margin:55px auto 0;
	overflow:hidden;
}
#ft_view li {
	float:left;
	width:49px;
	height:49px;
	margin-top:5px;
}
#ft_view a {
	width:49px;
	height:49px;
}
#ft_view .sb_tw {
	margin-left:16px;
	margin-right:16px;
}
#ft_view .sb_fb a {
	background:url(img/footer_sb_fb.png) 0 0 /auto no-repeat;
}
#ft_view .sb_tw a {
	background:url(img/footer_sb_tw.png) 0 0 /auto no-repeat;
}
#ft_view .sb_ln a {
	background:url(img/footer_sb_ln.png) 0 0 /auto no-repeat;
}
#ft_view li:hover {
}

#ft_nav {
	height:144px;
	background:#E2D8A6;
	border-top:10px solid #000;
	margin-top:-43px;
	font-size:82%;
}
#ft_nav ul {
	width:1180px;
	margin:35px auto 0;
	padding:0;
	overflow:hidden;
}
#ft_nav li {
	padding-top:19px;
	float:left;
	margin-right:50px;
}
#ft_nav li.nav01 {
	padding-top:0px;
}
#ft_nav li.nav07 {
	margin-right:0px;
}
#ft_nav a {
	margin-top:5px;
	padding:5px 10px;
	border-radius:5px;
	color:#000;
}
#ft_nav a:hover {
	background-color:#eceb9d;
}
#ft_nav .nav01 a {
	width:85px;
	height:51px;
	background:url(img/footer_ft_nav01.png) 0 0 /auto repeat-x;
	background-color:none;
}


#ft_copy {
	background:#000;
	color:#fff;
	font-size:70%;
}
#ft_copy div {
	text-align:center;
	padding:1em;
}





/* ---------------------------------------------------------
 ホーム
--------------------------------------------------------- */
#home header {
	padding:12px 0;
	background:#000;
}


@keyframes rotateX {
    0% {
        transform:rotateX(270deg);
    }
    100% {
        transform:rotateX(360deg);
    }
}

#home h1 {
	width:1280px;
	height:384px;
	background:url(img/home_h1.png) 0 0 /auto no-repeat;
	margin:0 auto;
	text-indent:200%;
	white-space:nowrap;
	overflow:hidden;
	animation:rotateX 1s linear 0s;
}

#home_nav {
	display:block;
	width:1109px;
	margin:0 auto;
	overflow:hidden;
}
#home_nav li {
	float:left;
}
#home_nav .nav02,
#home_nav .nav03,
#home_nav .nav04,
#home_nav .nav05 {
	padding-top:5px;
}
#home_nav .nav02 a {
	width:278px;
	height:295px;
	background:url(img/home_nav02.png) 0 0 /auto no-repeat;
	margin:0;
}
#home_nav .nav03 a {
	width:286px;
	height:295px;
	background:url(img/home_nav03.png) 0 0 /auto no-repeat;
	margin:0;
}
#home_nav .nav04 a {
	width:257px;
	height:295px;
	background:url(img/home_nav04.png) 0 0 /auto no-repeat;
	margin:0;
}
#home_nav .nav05 a {
	width:288px;
	height:295px;
	background:url(img/home_nav05.png) 0 0 /auto no-repeat;
	margin:0;
}
#home_nav .nav06 a {
	width:675px;
	height:322px;
	background:url(img/home_nav06.png) 0 0 /auto no-repeat;
	margin:0;
}
#home_nav .nav07 a {
	width:434px;
	height:322px;
	background:url(img/home_nav07.png) 0 0 /auto no-repeat;
	margin:0;
}


@keyframes rotateY {
    0% {
        transform:rotateY(0deg);
    }
    50% {
        transform:rotateY(90deg);
    }
    100% {
        transform:rotateY(0deg);
    }
}
#home_nav li:hover {
    animation:rotateY 0.5s linear 0s;
}
#home_nav a:hover {
	position:static;
}


#banner {
	width:960px;
	display:flex;
	justify-content: center;
	margin:70px auto 0;
}
#banner a {
	width:calc(100% / 3);
	margin:0 20px;
	height:100px;
}
#bnr1 {
	background:url(img/home_banner1.png) 0 0 /auto no-repeat;
}
#bnr2 {
	background:url(img/home_banner2.png) 0 0 /auto no-repeat;
}
#bnr3 {
	background:url(img/home_banner3.png) 0 0 /auto no-repeat;
}




/* ---------------------------------------------------------
 メッキの歴史
--------------------------------------------------------- */
#contents .site-width {
	padding:0 75px;
}

h2 {
	font-weight:bold;
	font-size:129%;
	margin-bottom:0.5em;
}
p {
	margin-bottom:0.5em;
}


#contents h1 {
	background:#000;
	font-weight:bold;
	font-size:188%;
	color:#fff;
	text-align:center;
	padding:0.5em;
}

#cont_in {
	padding:0 57px;
}

h1,
#sec04,
#sec03,
#sec02,
#sec01 {
	margin-bottom:60px;
	overflow:hidden;
}

.side_border {
	background:url(history/img/back.png) 0 0 /auto repeat-y;
	padding:2em 60px;
	overflow:hidden;
}
.img_center {
	display:block;
	margin:10px auto;
}

#history #sec03 .box_left {
	width:430px;
}

#history #sec03 span {
	display:block;
	text-indent:-79px;
	padding-left:79px;
	color:#c93333;
}


#history #contents,
#founder #contents {
	padding-bottom:140px;
}


a#next_link {
	display:block;
	width:50%;
	height:90px;
	position:absolute;
	bottom:20px;
	right:0;
	color:#fff;
	text-indent:200%;
	white-space:nowrap;
	overflow:hidden;
}
a#next_link:hover {
	position:absolute;
	top:auto;
	right:-10px;
	-webkit-transition: all .1s;
	transition: all .1s;
}
#history a#next_link {
	background:#000 url(history/img/next.png) 45px center /auto no-repeat;
}






/* ---------------------------------------------------------
 メッキの始祖
--------------------------------------------------------- */
#founder #sec02 span {
	color:#ca3333;
}

#founder a#next_link {
	background:#000 url(founder/img/next.png) 45px center /auto no-repeat;
}



/* ---------------------------------------------------------
 電気メッキの工業化
--------------------------------------------------------- */
#industrialization #sec01 span {
	color:#ca3333;
}





/* ---------------------------------------------------------
 電気メッキの付け方
--------------------------------------------------------- */
#plating_c {
	width:1270px;
	margin:auto;
}



#plating #contents #sec01 {
	width:610px;
	height:432px;
	background:url(plating/img/p1.png) 0 0 /auto no-repeat;
	margin-bottom:230px;
}
#plating #contents #sec02 {
	width:627px;
	height:434px;
	background:url(plating/img/p2.png) 0 0 /auto no-repeat;
	margin-top:236px;
	margin-bottom:320px;
}
#plating #contents #sec03 {
	width:610px;
	height:543px;
	background:url(plating/img/p3.png) 0 0 /auto no-repeat;
	margin-bottom:236px;
}
#plating #contents #sec04 {
	width:627px;
	height:449px;
	background:url(plating/img/p4.png) 0 0 /auto no-repeat;
	margin-bottom:304px;
}
#plating #contents #sec05 {
	width:637px;
	height:536px;
	background:url(plating/img/p5.png) 0 0 /auto no-repeat;
}
#plating #contents #sec06 {
	width:628px;
	height:469px;
	background:url(plating/img/p6.png) 0 0 /auto no-repeat;
}






/* ---------------------------------------------------------
 プライバシーポリシー
--------------------------------------------------------- */
#privacy h2 {
	border:2px solid #000;
	padding:3px 8px;
	margin-top:2em;
}

#privacy #contents ul {
}
#privacy #contents ul,
#privacy #contents p {
	padding:0 10px;
	font-size:16px;
}
#privacy #contents li {
	text-indent:-1em;
	padding-left:1em;
}
#privacy #contents a {
	display:block;
	padding:5px 10px;
	margin-left:-10px;
	float:left;
	border-radius:10px;
}
#privacy #contents a:hover {
	position:static;
	background:#fee;
}



/* ---------------------------------------------------------
 お問い合わせ
--------------------------------------------------------- */
#inquiry #contents table {
	width:100%;
	font-size:16px;
	margin:40px 0;
}
#inquiry #contents th {
	width:210px;
	vertical-align:middle;
}
#inquiry #contents th,
#inquiry #contents td {
	padding:12px 0;
}
#inquiry #contents span {
	color:#c93333;
}
#inquiry #contents textarea,
#inquiry #contents input {
	width:100%;
	padding:0.5em;
	border:3px solid #989898;
	font-size:16px;
}

#inquiry #contents #zip,
#inquiry #contents #tel,
#inquiry #contents #addr {
	width:40%;
}


#cbtn {
	width:360px;
	margin:auto;
	overflow:hidden;
}
#inquiry #contents #cbtn input {
	width:165px;
	height:94px;
	border:none;
	margin-top:5px;
}
#inquiry #contents #cbtn input:hover {
	cursor:pointer;
	position:relative;
	top:-5px;
}
#sbmt,
#send {
	float:right;
}
#rest,
#back {
	float:left;
}
#rest {
	background:url(inquiry/img/btn_reset.png) 0 0 /auto no-repeat;
}
#sbmt {
	background:url(inquiry/img/btn_sbmt.png) 0 0 /auto no-repeat;
}
#back {
	background:url(inquiry/img/btn_back.png) 0 0 /auto no-repeat;
}
#send {
	background:url(inquiry/img/btn_send.png) 0 0 /auto no-repeat;
}

#inquiry #contents h3 {
	font-weight:bold;
	font-size:22px;
	margin-bottom:0.5em;
}
#inquiry #contents h4 {
	margin-bottom:1em;
}

#inquiry #contents .formTable {
	border-top:1px solid #666;
	border-bottom:1px solid #666;
	padding:0 3em;
}
#inquiry #contents .formTable th {
	font-weight:bold;
	padding-left:3em;
	width:250px;
}
#inquiry #contents .formTable th,
#inquiry #contents .formTable td {
	border-bottom:1px dotted #ccc;
}

.error_messe {
	color:#c93333;
}