@charset "utf-8";
/*
*****************
* スマホ、PC共通 *
*****************
*/
body {font-size: 16px; font-family: verdana; line-height: 1.5em; margin: 0 auto; width: 1000px; -webkit-text-size-adjust: 100%;}

/* リンク色設定 */
a:link,
a:visited {color: #333;}
a:active {color: #339999;}

/* パンくずリスト */
#BreadcrumbList2 {font-size: 12px; margin: 0 0 2em -3em; line-height: 1.2em;}
.BreadcrumbList li {display: inline; list-style: none;}
.BreadcrumbList li a {border-bottom: 1px #333 dotted; padding-bottom: 0; text-decoration: none;}

a.u_line {border-bottom: 1px #333 dotted; padding-bottom: 0; text-decoration: none;}/* 文中（下線ありの箇所）のアンダーライン位置、#333色指定*/
a.u_line10 {border-bottom: #999999 1px dotted; color: #999999; padding-bottom: 0; text-decoration: none;} /* 日程Topへ */

/* 画像タイトル下及び左右中央配置 */
.img_r {float: right; padding-left: .5em; width: 300px;}
.img_c {display: block; margin: 1em auto 0 auto; width: 510px;}
.img_c2 {display: block; margin: 1em auto 0 auto; width: 610px;}

/* 映像 */
div.mv {display: block; margin: 1em auto; text-align: center;}
iframe.mv {border: none; height: 343px; width: 610px;}

/* コピーガード (https://techblog.yahoo.co.jp/advent-calendar-2016/css_pointer_events/) */
.guard {pointer-events: none; border: none; margin: 0 auto;}

/* h tag */
h1.hk_itinerary {color: #660033; font-size: 1.2em; margin-top: 2em; text-align: center; white-space: pre-line;}
h2.hk_itinerary {color: #004c00; font-size: 1em; text-align: center;}
h3.hk_itinerary {color: #660033; font-size: 1em; text-align: left;}

/* itinerary */
.ex-hk {background-color: #fffbe5; display: block; margin: 0 auto; padding: 10px; text-align: center; width: 100%;} /* サンプル日程 */
.day-hk {background-color: #e5f2e5; border-top: #cce5cc 1px solid; display: block; margin: 0 auto; padding: 10px; width: 100%;} /* 日次 */
.todo1-hk {background-color: #fffbe5; border-top: #e5e5e5 1px solid; display: block; margin: 0 auto; padding: 10px; width: 100%;} /* 内容Top */
.todo2-hk {background-color: #fffbe5; display: block; margin: 0 auto; padding: 10px; width: 100%;} /* 内容 中 */

.access-hk {background-color: #fffbe5; border-top: #e5e5e5 1px solid; color: #808080; display: block; font-size: small; margin: 0 auto; padding: 10px; width: 100%;} /* 発地へ着地からの移動手段 */
.access2-hk {background-color: #fffbe5; color: #808080; display: block; font-size: small; margin: 0 auto; padding: 10px; width: 100%;} /* 帰路移動手段 */
.extra-hk {background-color: #fffbe5; color: #008000; display: block; font-size: small; margin: 0 auto; padding: 10px; width: 100%;} /* 前泊 延泊 */
.htl-hk {background-color: #fffbe5; display: block; margin: 0 auto; padding: 10px; text-align: right; width: 100%;} /* 宿泊地 */
.htl2-hk {display: none; margin: 0 auto; padding: 0; width: 100%;} /* 宿泊地modal画像 */
.hide-hk {font-size: 70%; font-style: italic;}


.rmk1-hk {color: #3399cc; font-size: 13px;} /* 注釈#3399cc */
.rmk2-hk {color: #660033; font-size: 13px;} /* 注釈#660033 */

a.u_line1 {border-bottom: #3399cc 1px dotted; color: #3399cc; padding-bottom: 0; text-decoration: none;}

ul.hk_itinerary {padding-left: 1em;}
li.notice {color: #3399cc; list-style: none;}

/* 改行（Enterキーで改行がそのまま反映） */
.wrap {white-space: pre-line;}

/* Credit */
.credit {color: #808080; float: right; font-size: 11px; margin: 0 auto 1em auto;}

div.close_botton {clear: both; margin: 1em 0 2em 0; text-align: center;}

/* PageTopボタン設定 */
#page-top {bottom: 20px; position: fixed; right: 20px; z-index: 110;}
#page-top a {background-color: #ccc; border-radius: 50%; color: #808080; display: inline-block; font-weight: bold; height: 60px; line-height: 60px; opacity: .7; overflow: hidden; text-align: center; text-decoration: none; transition: .4s; vertical-align: middle; width: 60px;}
#page-top a:hover {background-color: #808080; color: #fff; text-decoration: none;}
/* 〜スマホ、PC共通ここまで〜 */

/*
**************************
* スマホ（タテ）サイズに適用 *
**************************
※共通cssと違う箇所のみ記載
*/
@media screen and (max-width: 599px) {
body {font-size: 15px; width: 98%;}

/* 上部パンくずリストを非表示に */
#BreadcrumbList2 {display: none;}
/* スマホ用下部パンくずリスト */
#BreadcrumbList4 {clear: both; font-size: 12px; margin-left: -3em; line-height: 1.4em;}
.BreadcrumbList li {display: inline; list-style: none;}
.BreadcrumbList li a {border-bottom: 1px #333 dotted; font-size: 12px; padding-bottom: 0; text-decoration: none;}

.img_r {float: none; margin: .5em auto; padding: 0; text-align: center; width: 100%;}

/* 映像 */
div.mv {height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative;}
iframe.mv {height: 100%; left: 0; position: absolute; top: 0; width: 100%;}

/* スマホ、タブレットのみデバイスに合わせて画像を調整 */
img {height: auto; max-width: 100%;}
.img_c,
.img_c2 {max-width: 100%;}

/* itinerary */
h1.hk_itinerary {margin-top: 1.5em;}
h3.hk_itinerary {text-align: center;}

.ex-hk,
.day-hk,
.todo1-hk,
.todo2-hk,
.access-hk,
.extra-hk,
.htl-hk,
.htl2-hk {padding: 10px 5px; width: 96%;}

ul.hk_itinerary {padding-left: 1em;}

/* 非表示にしたいとき */
.hide-hk {display: none;}

/* 改行（Enterキーで改行がそのまま反映） */
.wrap2 {white-space: pre-line;}

/* スマホ、タブレットのみデバイスに合わせてtable外のテキストを調整 */
.text-left {margin: 0 auto; width: 96%;}

#page-top {bottom: 10px; font-size: 85%; position: fixed; right: 15px; z-index: 110;}
}
/* 〜スマホ（タテ）サイズここまで〜 */

/*
*****************************
*  スマホ（ヨコ1）サイズに適用  *
*****************************
※共通cssと違う箇所のみ記載
*/
@media screen and (min-width: 600px) and (max-width: 799px) {
body {font-size: 15px; width: 98%;}

/* 上部パンくずリストを非表示に */
#BreadcrumbList2 {display: none;}
/* スマホ用下部パンくずリスト */
#BreadcrumbList4 {clear: both; font-size: 12px; margin-left: -3em; line-height: 1.4em;}
.BreadcrumbList li {display: inline; list-style: none;}
.BreadcrumbList li a {border-bottom: 1px #333 dotted; font-size: 12px; padding-bottom: 0; text-decoration: none;}

/* タブレットサイズで改行を外す（<br>を挟むspan） */
.kaigyo {display: none;}

/* スマホ、タブレットのみデバイスに合わせて画像を調整 */
img {height: auto; max-width: 100%;}

/* 映像 */
div.mv {height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative;}
iframe.mv {height: 100%; left: 0; position: absolute; top: 0; width: 100%;}

/* itinerary */
h1.hk_itinerary {margin-top: 1.5em;}
h3.hk_itinerary {padding-left: 2%;}

.ex-hk,
.day-hk,
.todo1-hk,
.todo2-hk,
.access-hk,
.extra-hk,
.htl-hk,
.htl2-hk {padding: 10px 5px; width: 96%;}

.hide-hk {display: none;}

/* スマホ、タブレットのみデバイスに合わせてtable外のテキストを調整 */
.text-left {margin: 0 auto; width: 96%;}

#page-top {bottom: 10px; right: 15px;}
}
/* 〜スマホ（ヨコ1）サイズここまで〜 */

/*
*******************************************
* スマホ（ヨコ2）・タブレット（タテ）サイズに適用 *
*******************************************
※共通cssと違う箇所のみ記載
*/
@media screen and (min-width: 800px) and (max-width: 1024px) {
body {font-size: 15px; width: 98%;}

/* 上部パンくずリストを非表示に */
#BreadcrumbList2 {display: none;}
/* スマホ用下部パンくずリスト */
#BreadcrumbList4 {clear: both; font-size: 12px; margin-left: -3em; line-height: 1.4em;}
.BreadcrumbList li {display: inline; list-style: none;}
.BreadcrumbList li a {border-bottom: 1px #333 dotted; font-size: 12px; padding-bottom: 0; text-decoration: none;}

/* タブレットサイズで改行を外す（<br>を挟むspan） */
.kaigyo {display: none;}

/* スマホ、タブレットのみデバイスに合わせて画像を調整 */
img {height: auto; max-width: 100%;}

/* 映像 */
div.mv {height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative;}
iframe.mv {height: 100%; left: 0; position: absolute; top: 0; width: 100%;}

/* itinerary */
h3.hk_itinerary {padding-left: 1%;}

.ex-hk,
.day-hk,
.todo1-hk,
.todo2-hk,
.access-hk,
.extra-hk,
.htl-hk,
.htl2-hk {padding: 10px; width: 98%;}

.hide-hk {display: inline;}

/* スマホ、タブレットのみデバイスに合わせてtable外のテキストを調整 */
.text-left {margin: 0 auto; width: 98%;}

#page-top {bottom: 10px; right: 15px;}
}
/* 〜スマホ（ヨコ2）・タブレット（タテ）サイズここまで〜 */

/*
**********************************
* タブレット（ヨコ）・PCサイズに適用  *
**********************************
※共通cssと違う箇所のみ記載
*/
@media screen and (min-width: 1025px) {
/* スマホ用パンくずリストを非表示に */
#BreadcrumbList4,
#BreadcrumbList5,
#BreadcrumbList6 {display: none;}
/* PCで改行を外す（<br>を挟むspan） */
.kaigyo {display: none;}
.kaigyo2 {display: none;}
}
/* 〜タブレット（ヨコ）・PCサイズここまで〜 */