@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: 12px 0 24px; width: auto; height: auto; text-align: center; }
header#globalHeader p { margin: 0 10px 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 / メインビジュアル
-------------------------------------------------- */

div#main { margin: 0 0 1px; text-align: center; position: relative; }
div#main div.title { width: 100%; position: absolute; z-index: 2; }
div#main div.title strong { margin: 0 auto 1em; padding: 5px 50px; width: auto; background: rgba(93,135,56,0.75); color: #fff; font-size: 150%; display: inline-block; }
div#main div.title h1 { color: #fff; font-size: 320%; text-shadow: #162431 1px 1px 10px, #162431 -1px 1px 10px, #162431 1px -1px 10px, #162431 -1px -1px 10px; }
div#main div.title h1 br:nth-child(2) { display: none; }
div#main img { width: 100%; height: auto; position: relative; z-index: 1; }
div#main img.pc { display: block; }
div#main img.sp { display: none; }

@media screen and (max-width: 1500px) {
div#main div.title strong { font-size: 145%; }
div#main div.title h1 { font-size: 300%; }
}

@media screen and (max-width: 1400px) {
div#main div.title strong { font-size: 140%; }
div#main div.title h1 { font-size: 280%; }
}

@media screen and (max-width: 1300px) {
div#main div.title strong { font-size: 135%; }
div#main div.title h1 { font-size: 260%; }
}

@media screen and (max-width: 1200px) {
div#main div.title strong { font-size: 130%; }
div#main div.title h1 { font-size: 240%; }
}

@media screen and (max-width: 1100px) {
div#main div.title strong { font-size: 125%; }
div#main div.title h1 { font-size: 220%; }
}

@media screen and (max-width: 1000px) {
div#main div.title strong { font-size: 120%; }
div#main div.title h1 { font-size: 200%; }
}

@media screen and (max-width: 900px) {
div#main div.title strong { font-size: 115%; }
div#main div.title h1 { font-size: 180%; }
}

@media screen and (max-width: 800px) {
div#main div.title strong { font-size: 110%; }
}

@media screen and (max-width: 767px) {
div#main div.title strong { margin: 0 auto 1em; padding: 4px 20px; }
div#main div.title h1 { font-size: 180%; line-height: 1.5; }
div#main div.title h1 br:nth-child(2) { display: block; }
div#main img.pc { display: none; }
div#main img.sp { display: block; }
}

/* --------------------------------------------------
	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 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: #5d8738; 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; }
}

/* --------------------------------------------------
	POINT / クライミング製品の特徴
-------------------------------------------------- */

section#point { background: #e5f1da; }
section#point div.inner { margin: 0 auto; width: 1000px; }
section#point div.title { text-align: center; }
section#point div.title h2 { font-size: 200%; }
section#point ul { width: 1040px; list-style: none; }
section#point li { margin: 0 40px 0 0; width: 212px; background: #fff; border: solid 4px #85a567; font-size: 120%; font-weight: bold; text-align: center; float: left; position: relative; }
section#point li img { width: 100%; height: auto; }
section#point li p { padding: 20px 0; line-height: 1.6; }
section#point li span { width: 100%; font-size: 13px; font-weight: normal; line-height: 1.3; position: absolute; top: 160px; left: 0; }

@media screen and (max-width: 767px) {
section#point div.inner { width: auto; }
section#point div.title h2 { font-size: 140%; }
section#point ul { width: auto; }
section#point li { margin: 0 auto 10px; float: none; }
}

/* --------------------------------------------------
	DIFFERENCE / 他社製品との違い
-------------------------------------------------- */

section#difference { background: url(/theme/climbing/img/lp03/cow.gif) center no-repeat; background-size: cover; }
section#difference div.inner { margin: 0 auto; width: 1000px; }
section#difference div.title { text-align: center; }
section#difference div.title h2 { font-size: 200%; }
section#difference div.title span { font-size: 75%; display: block; }
section#difference div.list { margin: 0 auto; width: 750px; background: #e7f9fc; border: solid 3px #738fa6; }
section#difference div.list h3 { background: #738fa6; color: #fff; font-size: 150%; text-align: center; }
section#difference div.list.coloured { background: #fcf5e4; border: solid 3px #ff7800; }
section#difference div.list.coloured h3 { background: #ff7800; }
section#difference ul { margin: 20px 50px; }
section#difference div.arrow { margin: 10px 0; text-align: center; }
section#difference div.arrow img { width: 120px; height: auto; vertical-align: middle; }
section#difference div.image { text-align: center; }
section#difference div.image ul { list-style: none; }
section#difference div.image li { margin: 0 0.5em; display: inline-block; }
section#difference div.image li img { margin: 0 0 5px; }
section#difference div.image p {}
section#difference div.message { margin: 30px 0 0; color: #5d8738; font-size: 170%; font-weight: bold; text-align: center; }

@media screen and (max-width: 767px) {
section#difference div.inner { width: auto; }
section#difference div.title h2 { font-size: 140%; }
section#difference div.list { margin: 0 10px; width: auto; }
section#difference div.list h3 { font-size: 120%; }
section#difference ul { margin: 12px 24px; }
section#difference div.arrow img { width: 100px; }
section#difference div.image li { margin: 0 0 10px; width: 100%; text-align: center; display: block; }
section#difference div.message { padding: 0 10px; font-size: 120%; }
}

/* --------------------------------------------------
	PRODUCTS / 乳脂計・透視度計・特注品
-------------------------------------------------- */

#products { background: #f4f4f4; }
#products div.title { text-align: center; }
#products div.title h2 { font-size: 200%; }
#products div.title span { font-size: 75%; display: block; }
#products div.inner { margin: 0 auto; width: 1000px; }
#products ul { list-style: none; }
#products li { margin: 0 0 20px; padding: 0 10px; width: 230px; float: left; }
#products li img { margin: 0 0 0.5em; }
#products { background: #e5f1da; }

@media screen and (max-width: 767px) {
#products div.title h2 { font-size: 140%; }
#products div.inner { width: auto; }
#products li { margin: 0 0 10px; width: auto; height: auto !important; text-align: center; float: none; }
}

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

#contact h2 { font-size: 200%; }
#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 form td select { font-size: 1.2em; }
#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 #5d8738; border-radius: 30px; color: #5d8738; font-size: 105%; font-weight: bold; text-align: center; display: block; }
input#BtnMessageConfirm:hover, input#BtnMessageBack:hover, input#BtnMessageSubmit:hover { background: #5d8738; color: #fff; }

@media screen and (max-width: 767px) {
#contact h2 { font-size: 140%; }
#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: #5d8738; }
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; }
}