@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 { padding: 24px 0; 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: 620px; position: relative; }
#main div#title { width: 100%; color: #fff; text-align: center; position: absolute; top: 60px; }
#main div#title strong { font-size: 40px; display: block; }
#main div#title strong span { font-size: 54px; }
#main div#title h1 { padding: 8px 40px; background: rgba(0,0,0,0.3); border-radius: 6px; font-size: 26px; display: inline-block; }
#main div.description { width: 100%; background: rgba(0,0,0,0.7); position: absolute; }
#main div.description p { padding: 15px 0; color: #fff; font-size: 22px; font-weight: 700; text-align: center; }
#main img { position: absolute; top: 0; left: 0; z-index: -1; }

@media screen and (max-width: 767px) {
#main div#title { top: 120px; }
#main div#title strong { font-size: 60px; }
#main div#title strong span { font-size: 72px; }
#main div#title h1 { font-size: 60px; }
#main div.description { display: none; }
}

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

main { display: block; }
section { padding: 70px 0; }
section.coloured { background: #eff0f0; }
div.block { margin: 0 auto; width: 1000px; }
div.title { text-align: center; }
div.title strong { color: #fff; font-family: serif; font-size: 105%; text-indent: 0.2em; letter-spacing: 0.2em; display: block; }
div.title h2 { margin: 0 0 70px 0; font-size: 300%; display: inline-block; position: relative; }
div.title h2:before { content: ""; width: 60px; height: 1px; background-color: #fff; display: inline-block; position: absolute; left: 50%; bottom: -24px; transform: translate(-50%); }
section.coloured div.title strong { color: #5d5d5d; }
section.coloured div.title h2:before { background: #5d5d5d; }

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

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

#reason { padding: 0; color: #fff; background: #000; position: relative; z-index: 1; }
#reason div.title { width: 100%; position: absolute; z-index: 2; }
#reason div.title h2 { margin: 42px 0; }
#reason div.title h2::before { height: 0; }
#reason ul { list-style: none; }
#reason li { padding: 180px 0 64px; width: 25%; border-left: solid 1px #2d2d2d; 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 li { padding: 24px 0; width: 50%; border-top: solid 1px #2d2d2d; }
#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: 16px 0; }
#reason li { width: 100%; border-width: 1px 0 0; }
#reason li div { width: 100%; height: auto !important; }
}

/* --------------------------------------------------
	CASE / こんなところに使われています
-------------------------------------------------- */

#case {}
#case div.title strong { color: #5d5d5d; }
#case div.title h2::before { background: #5d5d5d; }
#case ul { margin: 0 0 3em 0; width: 1040px; list-style: none; }
#case li { margin: 0 40px 0 0; width: 220px; float: left; }
#case li div.image { margin: 0 0 15px; position: relative; }
#case li div.image img { border-radius: 115px; display: block; }
#case li div.image img.icon { margin: 0 auto; border-radius: 0; position: absolute; top: 210px; left: 0; right: 0; }
#case li h3 { margin: 0 0 15px; font-size: 130%; text-align: center; }
#case li p {}
#case div.button { text-align: center; }
#case div.button a { margin: 0 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; line-height: 56px; display: block; }
#case div.button a: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; float: none; }
#case li img { margin: 0 auto 15px; }
#case div.button a { width: 286px; height: 46px; line-height: 46px; }
}

/* --------------------------------------------------
	ABOUT / 国内トップの技術環境
-------------------------------------------------- */

#about { background: url(/theme/climbing/img/lp02/about.jpg) center no-repeat; background-size: cover; }
#about div.title strong { color: #5d5d5d; }
#about div.title h2::before { background: #5d5d5d; }
#about ul { list-style: none; }
#about li { width: 300px; float: left; }
#about li div.image { position: relative; }
#about li div.image h3 { padding: 5px 10px; width: 100%; background: rgba(0,0,0,0.8); color: #fff; font-size: 120%; position: absolute; box-sizing: border-box; }
#about li div.image img { margin: 0 0 15px 0; border-radius: 3px; display: block; }
#about li.plus { width: 50px; text-align: center; }
#about li.plus img { margin: 76px 0 0 0; border-radius: 0; display: inline; }
#about li p { margin: 0 0 15px 0; }
#about li div.button { text-align: center; }
#about li div.button a { margin: 0 auto; padding: 0; width: 196px; height: 36px; background: #fff; border: solid 2px #000; border-radius: 30px; color: #333; font-size: 110%; font-weight: bold; text-align: center; line-height: 36px; display: block; }
#about li div.button a:hover { background: #000; color: #fff; text-decoration: none; }

@media screen and (max-width: 767px) {
#about li { margin: 0 0 20px 0; width: auto; float: none; }
#about li div.image h3 { margin: 0 0 12px 0; position: static; }
#about li div.image img { margin: 0 auto 15px ; }
#about li.plus { display: none; }
}

/* --------------------------------------------------
	ORDER / ご注文までの流れ
-------------------------------------------------- */

#order { background: url(/theme/climbing/img/lp02/order.gif) center no-repeat; background-size: cover; color: #fff; }
#order div.order { margin: 0 auto; width: 500px; }
#order div.step { padding: 15px 0; width: 490px; background: #fff; border: solid 5px #000; color: #333; font-size: 120%; font-weight: 700; text-align: center; text-align: center; }
#order div.arrow { margin: 0 0 5px 0; text-align: center; }
#order div.button { text-align: center; }
#order div.button input { margin: 10px auto; padding: 0; width: 296px; height: 56px; background: #fff; border: solid 2px #000; border-radius: 30px; color: #333; font-size: 105%; font-weight: bold; text-align: center; display: block; }
#order div.button input:hover { background: #000; color: #fff; }

@media screen and (max-width: 767px) {
#order div.order { width: auto; }
#order div.arrow img { width: 30px; height: auto; }
#order div.step { width: auto; border: solid 3px #000; }
}

/* --------------------------------------------------
	PRODUCT / 製品紹介
-------------------------------------------------- */

#product div.title strong { color: #5d5d5d; }
#product div.title h2::before { background: #5d5d5d; }
#product ul { list-style: none; }
#product li { margin: 0 0 3em 0; }
#product li dt { width: 660px; float: left; }
#product li dt div.image { margin: 0 0 15px 0; position: relative; }
#product li dt div.image h3 { padding: 6px 24px; width: 100%; background: rgba(0,0,0,0.8); color: #fff; font-size: 130%; position: absolute; box-sizing: border-box; }
#product li dt div.image.product3 h3 { position: static; }
#product li dd { width: 300px; float: right; }
#product div.button { text-align: center; }
#product div.button a { margin: 0 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; line-height: 56px; display: block; }
#product div.button a:hover { background: #000; color: #fff; text-decoration: none; }

@media screen and (max-width: 767px) {
#product li dt { width: auto; float: none; }
#product li dt div.image img { width: 100%; height: auto; }
#product li dt div.image h3 { padding: 4px 16px; font-size: 110%; }
#product li dd { width: auto; float: none; }
#product div.button a { width: 286px; height: 46px; line-height: 46px; }
}

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

#contact p { margin: 0 0 2em 0; text-align: center; }
#contact form { margin: 0 auto; width: 400px; }
#contact div#MessageBox { margin: 0 0 2em 0; 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: 105%; 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 form { 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; }
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; }
}