@charset "UTF-8";
@font-face { font-family: YuGothicM; src: local(Yu Gothic Medium); }

* { margin: 0; padding: 0; }
body { color: #333; font-family: YuGothic,YuGothicM,'ＭＳ Ｐゴシック',sans-serif; font-size: 90%; line-height: 1.8; -webkit-text-size-adjust: 100%; }
img { border: 0; vertical-align: top; -ms-interpolation-mode: bicubic; }
a { outline: none; }
a:link { color: #; text-decoration: none; }
a:visited { color: #; text-decoration: none; }
a:hover { color: #; text-decoration: underline; transition: all 0.3s ease; }
a:hover img { opacity: 0.8; transition: all 0.3s ease; }
button { background: transparent; border: none; appearance: none; cursor: pointer; outline: none; }
.clearfix:after { content: ''; display: block; clear: both; }


/* --------------------------------------------------
	HEADER / ヘッダ
-------------------------------------------------- */

header#globalHeader div.inner { margin: 0 auto; width: 1000px; height: 104px; position: relative; }
header#globalHeader p { margin: 0.4em 0 0 0; }
header#globalHeader img.logo { position: absolute; top: 34px; }
header#globalHeader div.tel { text-align: right; line-height: 1.4; position: absolute; top: 28px; right: 0; }
header#globalHeader div.tel strong { font-size: 200%; display: block; }
header#globalHeader div.tel a { color: #333; }

@media screen and (max-width: 767px) {
header#globalHeader div.inner { width: auto; height: auto; text-align: center; }
header#globalHeader p { margin: 12px 0 10px; }
header#globalHeader img.logo { margin: 0 0 16px 0; position: static; }
header#globalHeader div.tel { text-align: center; position: static; }
header#globalHeader div.tel strong { font-size: 120%; }
header#globalHeader div.tel a { text-decoration: underline; }
header#globalHeader div.tel a:hover { text-decoration: none; }
}

/* --------------------------------------------------
	MAIN VISUAL / メインビジュアル
-------------------------------------------------- */

#main { width: 1600px; height: 700px; position: relative; z-index: 2; }
#main div.title { width: 100%; text-align: center; position: absolute; top: 70px; }
#main div.title strong { margin: 0 0 16px 0; display: block; }
#main div.title h1 { margin: 0 auto 40px; width: 460px; height: 60px; background: #3c5175; color: #fff; font-size: 32px; line-height: 60px; }
#main div.title p { margin: 0 auto; padding: 20px; width: 660px; background: rgba(255,255,255,0.6); color: #3c5175; font-size: 20px; font-weight: bold; }
#main img.products { margin: 0 auto; display: block; position: absolute; top: 495px; left: 0; right: 0; }

@media screen and (max-width: 767px) {
#main div.title { top: 60px; }
#main div.title strong { margin: 0 0 30px 0; }
#main div.title strong img { width: 80%; height: auto; }
#main div.title h1 { margin: 0 auto; padding: 20px 40px; width: auto; height: auto; font-size: 64px; line-height: 1; display: inline-block; }
#main div.title p { display: none; }
}

/* --------------------------------------------------
	MAIN / メイン
-------------------------------------------------- */

main { display: block; }
section { padding: 70px 0; }
section.coloured { background: #f8f6f3; }
div.block { margin: 0 auto; width: 1000px; }
div.titleWrapper { margin: 0 auto; width: 100%; }
div.titleLeft { width: 50px; color: #ff7800; font-size: 600%; line-height: 1.2; float: left; }
div.titleRight { width: 50px; color: #ff7800; font-size: 600%; line-height: 1.2; text-align: right; float: left; }
div.title { text-align: center; float: left; }
div.title strong { color: #ff7800; font-size: 105%; text-indent: 0.2em; letter-spacing: 0.2em; display: block; }
div.title h2 { margin: 0 0 70px 0; color: #ff7800; font-size: 240%; display: inline-block; position: relative; }
div.title h2:before { content: ""; width: 60px; height: 1px; background-color: #ffbb7f; display: inline-block; position: absolute; left: 50%; bottom: -24px; transform: translate(-50%); }
div.title h2 span { color: #333; }

@media screen and (max-width: 767px) {
section { padding: 35px 0; }
div.block { padding: 0 12px; width: auto; }
div.titleLeft { width: 30px; font-size: 400%; }
div.titleRight { width: 30px; font-size: 400%; }
div.title strong { font-size: 100%; text-indent: 0.1em; letter-spacing: 0.1em; }
div.title h2 { margin: 0 0 40px 0; font-size: 130%; }
div.title h2:before { width: 36px; bottom: -16px; }
}

/* --------------------------------------------------
	REASON / 選ばれている理由
-------------------------------------------------- */

#reason { padding: 0; color: #fff; background: #3c5175; position: relative; z-index: 1; }
#reason div.title { width: 100%; position: absolute; z-index: 2; }
#reason div.title h2 { margin: 42px 0; color: #fff; line-height: 1.4; }
#reason div.title h2::before { height: 0; }
#reason div.title span { color: #fff; font-size: 50%; display: block; }
#reason ul { list-style: none; }
#reason li { padding: 180px 0 64px; width: 25%; border-left: solid 1px #637491; float: left; position: relative; box-sizing: border-box; }
#reason li div { margin: 0 auto; width: 80%; position: relative; z-index: 2; }
#reason li strong { margin: 0 0 0.5em; font-size: 140%; line-height: 1.4; display: block; }
#reason li img { width: 72px; height: auto; position: absolute; top: 192px; right: 12px; z-index: 1; }

@media screen and (max-width: 767px) {
#reason div.title { position: static; }
#reason div.title h2 { margin: 24px 0; }
#reason div.title span { font-size: 70%; }
#reason li { padding: 24px 0; width: 50%; border-top: solid 1px #637491; }
#reason li:nth-child(odd) { border-left: none; }
#reason li div { width: 88%; }
#reason li strong { font-size: 120%; }
#reason li img { width: 48px; top: 18px; right: 18px; }
}

@media screen and (max-width: 479px) {
#reason div.title h2 { margin: 24px 0 16px 0; }
#reason li { width: 100%; border-width: 1px 0 0; }
#reason li div { width: 90%; height: auto !important; }
}

/* --------------------------------------------------
	ABOUT / 酸洗い・不動態化について
-------------------------------------------------- */

#about dl.imgR { margin: 0 0 70px 0; min-height: 380px; }
#about dl.imgR dt { width: 530px; float: right; position: relative; }
#about dl.imgR dt img { position: absolute; right: 100px; z-index: -1; }
#about dl.imgR dt img.back { top: -17px; right: auto !important; left: -213px; z-index: -2; }
#about dl.imgR dd { width: 330px; float: left; }
#about dl.imgR dd h3 { margin: 0 0 0.5em 0; color: #ff7800; font-size: 180%; line-height: 1.2; }
#about dl.imgR dd p { font-size: 105%; line-height: 2; }
#about dl.imgL { min-height: 380px; }
#about dl.imgL dt { width: 530px; float: left; position: relative; }
#about dl.imgL dt img { position: absolute; left: 100px; z-index: -1; }
#about dl.imgL dt img.back { top: -17px; left: auto !important; right: -213px; z-index: -2; }
#about dl.imgL dd { width: 330px; float: right; }
#about dl.imgL dd h3 { margin: 0 0 0.5em 0; color: #ff7800; font-size: 180%; text-align: right; line-height: 1.2; }
#about dl.imgL dd p { font-size: 105%; line-height: 2; }

@media screen and (max-width: 767px) {
#about dl.imgR { margin: 0 0 32px 0; }
#about dl.imgR dt { margin: 0 0 15px 0; width: auto; text-align: center; float: none; }
#about dl.imgR dt img { max-width: 100%; height: auto; position: static; }
#about dl.imgR dt img.back { display: none; }
#about dl.imgR dd { width: auto; float: none; }
#about dl.imgR dd h3 { margin: 0 0 0.5em 0; font-size: 120%; }
#about dl.imgR dd p { line-height: 1.8; }
#about dl.imgL dt { margin: 0 0 15px 0; width: auto; text-align: center; float: none; }
#about dl.imgL dt img { max-width: 100%; height: auto; position: static; }
#about dl.imgL dt img.back { display:  none; }
#about dl.imgL dd { width: auto; float: none; }
#about dl.imgL dd h3 { margin: 0 0 0.5em 0; padding: 0 0 0 16px; border-left: solid 3px #ff7800; border-right: none; font-size: 120%; text-align: left; }
#about dl.imgL dd p { line-height: 1.8; }
}

/* --------------------------------------------------
	CASE / 用途・施工事例
-------------------------------------------------- */

#case ul { margin: 0 0 40px 0; width: 1050px; list-style: none; }
#case li { margin: 0 50px 50px 0; width: 475px; float: left; }
#case li div { margin: 0 0 16px 0; border-radius: 2px; }
#case img { width: 100%; height: auto; border-radius: 2px; }
#case h3 { margin: 0 0 0.4em 0; font-size: 130%; line-height: 1.2; }
#case p { line-height: 2; }
#case div.button { text-align: center; }
#case div.button a { margin: 10px; padding: 0; width: 296px; height: 56px; background: #fff; border: solid 2px #000; border-radius: 30px; color: #333; font-size: 120%; font-weight: bold; text-align: center; line-height: 56px; display: inline-block; }
#case div.button a.button:hover { background: #000; color: #fff; text-decoration: none; }

@media screen and (max-width: 767px) {
#case ul { width: auto; }
#case li { margin: 0 0 30px 0; width: auto; text-align: center; float: none; }
#case li div { margin: 0 auto 15px auto; width: auto; }
#case img { width: 100%; }
#case li p { height: auto !important; text-align: left; }
#case div.button a { width: 286px; height: 46px; line-height: 46px; }
}

/* --------------------------------------------------
	PRODUCT / 製品について
-------------------------------------------------- */

#product {}
#product h3 { margin: 0 0 1em 0; padding: 0 0 0 12px; border-left: solid 10px #ff7800; color: #ff7800; font-size: 160%; line-height: 1.2; }
#product h3 span { margin: 0.4em 0 0 0; font-size: 70%; font-weight: normal; display: block; }
#product h4 { padding: 5px 20px; background: #f4f0e9; font-size: 140%; text-align: center; }
#product h4 span { font-size: 80%; }
#product div.about h3 { color: #333; }
#product div.about dl.left { margin: 0 0 50px 0; }
#product div.about dl.left dt { float: left; }
#product div.about dl.left dt h3 { margin: 0 45px 0 0; padding: 0; border: none; }
#product div.about dl.left dt h3 strong { color: #ff7800; }
#product div.about dl.left dd { padding: 0 0 0 45px; border-left: solid 5px #ff7800; float: right; box-sizing: border-box; }
#product div.about dl.right { margin: 0 0 50px 0; }
#product div.about dl.right dt { float: right; }
#product div.about dl.right dt h3 { margin: 0 0 0 45px; padding: 0; border: none; }
#product div.about dl.right dt h3 strong { color: #ff7800; }
#product div.about dl.right dd { padding: 0 45px 0 0; border-right: solid 5px #ff7800; float: left; box-sizing: border-box; }
#product div.about dl.right dd a { color: #ff7800; text-decoration: underline; }
#product div.about dl.right dd a:hover { text-decoration: none; }
#product div.product { margin: 0 0 40px 0; border: solid 5px #f4f0e9; }
#product div.product div.detail { padding: 25px 35px 40px 35px; }
#product div.product div.detail strong { color: #ff7800; font-size: 130%; display: block; }
#product div.product div.detail p { margin: 0 0 1em 0; }
#product div.product div.features { padding: 15px 20px; background: #f7f7f7; }
#product div.product div.features strong { color: #333; font-size: 120%; }
#product div.product div.features ul { list-style: none; }
#product div.product div.features li { padding: 0 0 0 30px; background: url(/theme/climbing/img/lp01/productIcon.png) 7px 0.3em no-repeat; }
#product div.product div.items { margin: 0 30px 30px; padding: 15px 20px; background: #f7f7f7; }
#product div.product div.items p { margin: 0 0 0.5em 0; }
#product div.product div.items strong { font-size: 115%; }
#product div.product.right { margin: 0 40px 40px 0; }
#product div.product.right dt { float: right; }
#product div.product.right dd { float: left; }
#product div.product.left { margin: 0 0 40px 40px; }
#product div.product.left dt { float: left; }
#product div.product.left dt img { margin: 0 0 0 -80px; }
#product div.product.left dd { float: right; }
#product div.product.fc1 dl { padding: 25px 35px 20px 35px; }
#product ul.product { width: 1080px; list-style: none; }
#product ul.product li { margin: 0 80px 30px 0; width: 460px; float: left; }
#product ul.product li h4 { margin: 0 0 10px 0; padding: 5px 0; }
#product table { margin: 0 0 1em 0; width: 100%; border-top: solid 2px #f4f0e9; border-collapse: collapse; }
#product tr { border-bottom: solid 2px #f4f0e9; }
#product thead th { padding: 10px 20px; background: #fdfcf7; border-right: solid 2px #f4f0e9; }
#product thead th:last-child { border-right: none; }
#product tbody th { padding: 10px 20px; background: #fdfcf7; border-right: solid 2px #f4f0e9; }
#product tbody td { padding: 10px 0; text-align: center; }
#product div.button { margin: 0 0 30px 0; text-align: center; }
#product div.button p { margin: 0 0 1em 0; font-size: 105%; }
#product div.button a { margin: 10px; padding: 0; width: 296px; height: 56px; background: #fff; border: solid 2px #000; border-radius: 30px; color: #333; font-size: 120%; font-weight: bold; text-align: center; line-height: 56px; display: inline-block; }
#product div.button a.button:hover { background: #000; color: #fff; text-decoration: none; }
#product div.appendix { margin: 0 auto; padding: 32px 100px; width: 594px; border: solid 3px #f4f0e9; }
#product div.appendix strong { margin: 0 0 1em 0; font-size: 130%; text-align: center; display: block; }
#product div.appendix p { margin: 0; }

@media screen and (max-width: 767px) {
#product h3 { font-size: 120%; }
#product h4 { font-size: 110%; }
#product div.about dl.left dt { float: none; }
#product div.about dl.left dt h3 { margin: 0 0 1em 0; }
#product div.about dl.left dd { padding: 0; width: auto !important; border: none; float: none; }
#product div.about dl.right dt { float: none; }
#product div.about dl.right dt h3 { margin: 0 0 1em 0; }
#product div.about dl.right dd { padding: 0; width: auto !important; border: none; float: none; }
#product div.product { margin: 0 0 30px 0; }
#product div.product div.detail { padding: 15px !important; }
#product div.product div.detail strong { font-size: 120%; }
#product div.product div.features { padding: 10px; }
#product div.product div.features strong { font-size: 120%; }
#product div.product div.items { margin: 0 15px 15px 15px; padding: 10px; }
#product div.product.right { margin: 0 0 20px 0; }
#product div.product.left { margin: 0 0 20px 0; }
#product div.product.left dt img { margin: 0; }
#product ul.product { width: auto; }
#product ul.product li { margin: 0 0 30px 0; width: auto; height: auto !important; float: none; }
#product table { margin: 0; }
#product div.button a { width: 286px; height: 46px; line-height: 46px; }
#product div.wrapper { margin: 0 0 1.5em 0; overflow: auto; white-space: nowrap; }
#product div.wrapper::-webkit-scrollbar { height: 5px; }
#product div.wrapper::-webkit-scrollbar-track { background: #f1f1f1; }
#product div.wrapper::-webkit-scrollbar-thumb { background: #bcbcbc; }
#product div.appendix { padding: 16px 20px; width: auto; }
#product div.appendix strong { margin: 0 0 0.5em 0; font-size: 120%; }
}

/* --------------------------------------------------
	CONTACT / お問い合わせ
-------------------------------------------------- */

#contact { background: url(../img/lp01/main.jpg) center; }
/*#contact { background: url(../img/lp01/main.jpg) center no-repeat; background-size: cover; }*/
#contact div.title { margin: 0 auto; padding: 54px 100px 0; width: 400px; background: #f4f0e9; border-radius: 10px 10px 0 0; float: none; }
#contact div.title h2 { color: #333; }
#contact div.title h2::before { background: #333; }
#contact p { margin: 0 auto; padding: 0 100px 24px; width: 400px; background: #f4f0e9; text-align: center; }
#contact form { margin: 0 auto; padding: 0 100px 54px; width: 400px; background: #f4f0e9; border-radius: 0 0 10px 10px; }
#contact div#MessageBox { margin: 0 auto; padding: 0 100px 2em; width: 400px; background: #f4f0e9; text-align: center; }
#contact div#MessageBox div.alert-message { color: #f00; font-size: 110%; font-weight: bold; }
#contact form table { width: 100%; }
#contact form th { margin: 0 0 0.3em 0; width: 100%; text-align: left; display: block; }
#contact form th span.required { margin: 0 0 0 0.1em; color: #ff7800; }
#contact form td { margin: 0 0 1.5em 0; width: 100%; display: block; }
#contact form td input { margin: 0.2em; padding: 0.5em; font-size: 100%; box-sizing: border-box; }
#contact form td textarea { padding: 0.5em; width: 100%; height: 10em; font-size: 100%; display: block; box-sizing: border-box; }
#contact p.privacy { margin: 0 0 30px 0; font-size: 90%; text-align: left; }
#contact p.privacy a { color: #333; text-decoration: underline; }
#contact p.privacy a:hover { text-decoration: none; }
#contact div.submit { text-align: center; }
#contact div.submit input[type="reset"] { display: none; }
#contact div.error-message { margin: 0.2em 0 0 0; color: #f00; font-weight: 700; }
input#BtnMessageConfirm, input#BtnMessageBack, input#BtnMessageSubmit { margin: 10px auto; padding: 0; width: 296px; height: 56px; background: #fff; border: solid 2px #000; border-radius: 30px; color: #333; font-size: 120%; font-weight: bold; text-align: center; display: block; }
input#BtnMessageConfirm:hover, input#BtnMessageBack:hover, input#BtnMessageSubmit:hover { background: #000; color: #fff; }

@media screen and (max-width: 767px) {
#contact div.title { padding: 30px 15px 0; width: auto; }
#contact p { padding: 0 15px 20px; width: auto; }
#contact form { padding: 0 15px 30px; width: auto; }
#contact form td input#MessageEmail { width: 100% !important; }
#contact form td input#MessageAddress1 { width: 100% !important; }
#contact form td input#MessageAddress2 { width: 100% !important; }
#contact form td input#MessageAddress3 { width: 100% !important; }
#contact form td textarea { width: 100% !important; }
#contact div#MessageBox { width: auto; }
input#BtnMessageConfirm, input#BtnMessageBack, input#BtnMessageSubmit { width: 270px; height: 46px; }
}

/* --------------------------------------------------
	FOOTER / フッタ
-------------------------------------------------- */

footer#globalFooter { padding: 50px 0 30px 0; background: #222; }
footer#globalFooter p { color: #fff; font-size: 90%; text-align: center; }
a.contact { width: 150px; height: 150px; display: block; position: fixed; bottom: 20px; right: 20px; z-index: 999; }

@media screen and (max-width: 767px) {
footer#globalFooter { padding: 30px 12px; }
a.contact { width: 90px; height: 90px; }
a.contact img { width: 100%; height: auto; }
}