@charset "UTF-8";

* { margin: 0; padding: 0; box-sizing: border-box;}

html { height: 100%; font-size: 62.5%;}
html, body { height: 100%;}

body { font-family: sans-serif, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: 1.6rem; line-height: 1.8em; letter-spacing: 0.06em; color: #333; font-feature-settings: "palt"; position: relative;}

a:link { color: #1d2088; text-decoration: underline;}
a:visited { color: #816698;}
a:hover { color: #00479d;}
a:active { color: #1d2088;}

img {
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}

a.zoomup img { user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;}

/* ********************************************************** */
/* bootstrap */
/* ********************************************************** */

@media (min-width: 1200px) {
  .container { width: 1170px; position: relative;}
}

img.img-responsive { width: 100%; height: auto;}



/* ********************************************************** */
/* テキスト */
/* ********************************************************** */

h1 { font-size: 2.4rem; line-height: 1.6em; margin-bottom: 0;}
h2 { font-size: 2.4rem; line-height: 1.6em; color: #32b598; margin: 0 0 20px 0; padding: 0;}
h3 { font-size: 2.0rem; line-height: 1.6em; color: #32b598; margin: 0 0 20px 0; padding: 0;}
h4 { font-size: 1.8rem; line-height: 1.6em; margin-bottom: 0;}
h5 { font-size: 1.6rem; line-height: 1.6em; margin-bottom: 0;}

p { font-size: 1.6rem; margin-bottom: 0; line-height: 1.8em; text-align: justify;}
p.caption { font-size: 1.2rem; line-height: 1.6em;}

h2.course_name { font-family: Arial, Helvetica, "sans-serif"; padding-left: 96px; position: relative;}
h2.course_name span { font-size: 1.4rem; line-height: 1.0em;}
h2.course_name span:after { content: "\A"; white-space: pre;}
h2.course_name.course01:before { content: "01"; font-size: 8.0rem; color: #ffde00; font-weight: bold; position: absolute; top: 20px; left: 0;}
h2.course_name.course02:before { content: "02"; font-size: 8.0rem; color: #ffde00; font-weight: bold; position: absolute; top: 20px; left: 0;}
h2.course_name.course03:before { content: "03"; font-size: 8.0rem; color: #ffde00; font-weight: bold; position: absolute; top: 20px; left: 0;}
h2.course_name.course04:before { content: "04"; font-size: 8.0rem; color: #ffde00; font-weight: bold; position: absolute; top: 20px; left: 0;}

@media screen and (max-width: 767px) {
 h2.course_name { font-size: 2.0rem; padding-left: 70px;}
 h2.course_name.course01:before { font-size: 6.0rem;}
 h2.course_name.course02:before { font-size: 6.0rem;}
 h2.course_name.course03:before { font-size: 6.0rem;}
 h2.course_name.course04:before { font-size: 6.0rem;}
 h3 { font-size: 1.8rem;}
 p { font-size: 1.4rem;}
 p.caption { font-size: 1.0rem; line-height: 1.6em;}
}

a:link { color: #1b9e81; text-decoration: underline;}
a:visited { color: #1b9e81; text-decoration: none;}
a:hover { color: #1b9e81; text-decoration: underline;}
a:active { color: #1b9e81; text-decoration: none;}



/* ********************************************************** */
/* 番号付きリスト */
/* ********************************************************** */

ol.number_list { margin: 0 0 20px 24px; padding: 0; list-style-type: decimal;}

@media screen and (max-width: 767px) {
 ol.number_list li { font-size: 1.4rem;}
}



/* ********************************************************** */
/* ローディング */
/* ********************************************************** */

.orign-loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../images/loader.gif) center no-repeat #fff;}



/* ********************************************************** */
/* パーツ切り替え */
/* ********************************************************** */

.onlypc { display: block;}
.onlysmp { display: none;}

@media screen and (max-width: 991px) {
.onlypc { display: none;}
.onlysmp { display: block;}
}



/* ********************************************************** */
/* クリアランス */
/* ********************************************************** */

/* pc版クリアランス */
.cl_pc120 { margin-bottom: 120px}
.cl_pc100 { margin-bottom: 100px;}
.cl_pc80 { margin-bottom: 80px;}
.cl_pc50 { margin-bottom: 50px;}
.cl_pc30 { margin-bottom: 30px;}

@media screen and (max-width: 767px) {
.cl_pc120 { margin-bottom: 60px;}
.cl_pc100 { margin-bottom: 50px;}
.cl_pc80 { margin-bottom: 40px;}
.cl_pc50 { margin-bottom: 25px;}
.cl_pc30 { margin-bottom: 15px;}
}

/* smp版クリアランス */
.cl_sm20 { margin-bottom: 10px;}
.cl_sm40 { margin-bottom: 20px;}
.cl_sm30 { margin-bottom: 0;}

@media screen and (max-width: 767px) {
.cl_sm20 { margin-bottom: 20px;}	
.cl_sm40 { margin-bottom: 40px;}	
 .cl_sm30 { margin-bottom: 30px;}
}

/* 固定クリアランス */
.cl_10 { margin-bottom: 10px;}
.cl_30 { margin-bottom: 30px;}

/* 画像レスポンシブ80% */
.resp80_left { padding-right: 0;}
.resp80_right { padding-left: 0;}

@media screen and (max-width: 767px) {
 .resp80_left { padding-right: 20%;}
.resp80_right { padding-left: 20%;}
}

/* スマホ版改行 */
br.brlong { display: none; width: 0; height: 0; visibility: hidden; content: ""; font-size:0;}

@media screen and (max-width: 767px) {
br.brlong { display: block;}	
}



/* ********************************************************** */
/* ページ先頭に戻るボタン */
/* ********************************************************** */

#btnTop { display: table; width: 40px; height: 40px; background-color: rgba(50,181,152,0.8); text-align: center; color: #fff; position: fixed; bottom: -50px; right: 20px; z-index: 1; border-radius: 4px; -webkit-transition:1.0s ease-in-out; transition:1.0s ease-in-out;
}
a#btnTop:link { text-decoration: none;}
#btnTop i { display: table-cell; vertical-align: middle; font-size: 30px;}

#btnTop.disp { bottom: 20px; z-index: 6;}

@media screen and (max-width: 767px) {
	#btnTop { right: 15px;}
}



/* ********************************************************** */
/* ヘッダー */
/* ********************************************************** */

header { position: relative;}
header h1 { width: 290px; margin: 0 0 30px 0; padding: 0;}
header h1 img { width: 100%; height: auto;}
header #hiker_main { width: 542px; height: 453px; background-image: url("../images/main_hiker.png"); background-repeat: no-repeat; background-size: cover; position: absolute; top: -320px; right: 6%;}

@media screen and (max-width: 991px) {
 header #hiker_main { width: 400px; height: 334px; top: -280px;}
}

@media screen and (max-width: 767px) {
 header h1 { width: 180px; margin: 0 auto 20px auto;}
 header #hiker_main { width: 220px; height: 183px; top: -220px;}
}



/* ********************************************************** */
/* トップページ */
/* ********************************************************** */

/* トップページビジュアルスライド */
#keyvisual { width: 100%; height: 600px; margin-bottom: 60px; background-position: center bottom; background-repeat: no-repeat; position: relative;}

#keyvisual h2 { font-size: 4.0rem; color: #fff; font-weight: 500; position: absolute; top: 46%; left: 8%;}

@media screen and (max-width: 767px) {
 #keyvisual { height: 300px;}
 #keyvisual h2 { font-size: 2.0rem; text-align: center; right: 0; left: 0; top: 30%;}
}

@media screen and (max-width: 991px) {
.book_cover_wrapper { width: 80%; margin: 0 auto;}
}

/* 道標 */
.sign_course01 { height: 142px; background-image: url("../images/sign01.png"); background-repeat: no-repeat; background-position: right top; background-size: contain;}
.sign_course02 { height: 142px; background-image: url("../images/sign02.png"); background-repeat: no-repeat; background-position: left top; background-size: contain;}
.sign_course03 { height: 142px; background-image: url("../images/sign03.png"); background-repeat: no-repeat; background-position: right top; background-size: contain;}
.sign_course04 { height: 142px; background-image: url("../images/sign04.png"); background-repeat: no-repeat; background-position: left top; background-size: contain;}

@media screen and (max-width: 767px) {
 .sign_course01,.sign_course02,.sign_course03,.sign_course04 { height: 80px; background-position: left top;}
}

/* ポップアップアイコン */
a.zoomup { display: block; position: relative;}
a.zoomup i:after { content: "\f00e"; font-family: FontAwesome; font-size: 2.0rem; color: #fff; position: absolute; top: 10px; left: 10px; z-index: 1;}

@media screen and (max-width: 767px) {
 a.zoomup i.padd20:after { content: "\f00e"; font-family: FontAwesome; font-size: 2.0rem; color: #fff; position: absolute; bottom: 10px; right: 10px !important; z-index: 1; text-align: right;}
}

/* デコ画像 */
.deco_image { position: relative;}
.deco_image img.hiker { position: absolute; bottom: -20px; z-index: 1;}
.deco_image img.animal { position: absolute; bottom: -60px; right: 0; z-index: 1;}

@media screen and (max-width: 1199px) {
 .deco_image img.hiker { width: 72%; height: auto;}
}

@media screen and (max-width: 991px) {
 .deco_image img.hiker { width: 60%; height: auto;}
}

@media screen and (max-width: 767px) {
 .deco_image img.hiker { width: 30%; height: auto;}
 .deco_image img.hiker.hiker_right { right: 20px;}
 .deco_image img.animal { width: 30%; height: auto;}
}

/* マップラッパー */
.map_wrapper { width: 100%; height: 500px; overflow: scroll; border: 3px solid #32b598;}

/* 黄色帯 */
.yellow_tie { padding: 50px 0; background: #ffde00; text-align: center;}
.yellow_tie h2 { margin: 0; padding: 0; line-height: 0.6em;}
.yellow_tie h1 { color: #32b598; font-size: 3.0rem; line-height: 1.0em;}
.yellow_tie h1 span { font-size: 1.4rem;}
.yellow_tie h1 span:after { content: "\A"; white-space: pre;}

@media screen and (max-width: 767px) {
 .yellow_tie { padding: 30px 0;}
}

/* お問い合わせボタン */
a.contact { display: block; width: 480px; margin: 0 auto; padding: 16px 0 24px 0; background: #32b598; font-size: 2.6rem; line-height: 1.0em; text-align: center; color: #fff; border-radius: 8px; box-shadow: 0 0 6px 0 #666;}
a.contact span { font-size: 1.4rem;}
a.contact span:after { content: "\A"; white-space: pre;}
a.contact:link { text-decoration: none;}
a.contact:hover { background: #3dd6b4; box-shadow: 0 0 0 rgba(0,0,0,0);}

@media screen and (max-width: 767px) {
 a.contact { width: 80%; font-size: 2.0rem; padding: 12px 0 16px 0;}
 a.contact span { font-size: 1.2rem;}
}

/* お問い合わせフォーム */
.form-group { padding: 0 15px;}
.form-group input, .form-group textarea { width: 100% !important;}
.btn.btn-danger { background: #32b598; border: none;}
.form-group label { font-weight: normal;}
input::placeholder, textarea::placeholder { font-size: 1.2rem;}


/* フッター */
footer { width: 100%; height: 340px; padding-top: 30px; background-color: #84d3c1; background-image: url("../images/foot_bg.jpg"); background-repeat: no-repeat; position: relative;}
footer p { font-size: 1.2rem; text-align: right; color: #fff;}
footer h2 { width: 80px; height: 65px; margin: 170px 0 20px 0; padding: 0; float: right;}
footer a:link,footer a:visited,footer a:hover,footer a:active { color: #fff;}

footer .outer_link { height: 40px; position: absolute; top: -10px; left: 10%;}
footer .outer_link a { display: block; width: 40px; height: 40px; margin-right: 10px; float: left;}
footer .outer_link a.link_facebook { background: url("../images/logo_facebook.png") no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden;}
footer .outer_link a.link_eidaya { background: url("../images/logo_eidaya.png") no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden;}

@media screen and (max-width: 767px) {
 footer { background-position: center;}
 footer p { text-align: center;}
 footer h2 { background-position: center top;}
}


/* ガイドさん怪我中の注意書き */
p.note { display: inline-block; color: #fff; margin: 20px auto 0 auto; padding: 20px; background: #bd244f;}