@charset "utf-8";

/* *****共通設定***** */
body, h1, h2, h3, h4, h5, h6, p, a, span, div {
    font-family: "Noto Sans JP", sans-serif;
    color:#000;
}

a {
  text-decoration: none;
}

a:hover,
a[href^="tel:"]:hover {
  color:#f39800;
}
*:focus {
  outline: none !important;
}

a.imglink img {
    transition: transform 0.5s;
}
a.imglink:hover img {
    transform: translateY(-5px);
}

p > a { color:#f39800; }
p > a:not(.btn):hover { text-decoration: underline; }

p > a[href^="tel:"] { color:#000; }
p > a[href^="tel:"]:hover { text-decoration:none; }

a.extlink::after {
  content: '';
  display: inline-block;
  background-image: url(../img/i-blk-extlink.svg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 1em;
  height: .75em;
  margin-left: 2px;
}
a.btn.extlink::after {
  background-image: url(../img/i-w-extlink.svg);
}

.pdf-dl {
  font-size: 1.2rem;
  color:#FFF;
  display: inline-block;
}
a.btn.pdf-dl span { color:#FFF; }
a.btn.pdf-dl::after {
  content:'';
  width: 1.2em;
  height: 1.2em;
  margin-left: 2px;
  display: inline-block;
  vertical-align: sub;
  background-image: url(../img/i-w-pdf.svg);
  background-size: cover;
  background-repeat: no-repeat;
}

ul, ol { 
  list-style:none;
  padding-left:0;
}

.logo { height:65px; }
.btn {
  border-radius: 5px;
  border:1px solid #00A0E9;
  display: inline-block;
  background-color:#00A0E9;
  color:#FFF;
  font-weight: bold;
}
.btn:hover, .btn:focus, .btn:active,
.btn:first-child:active,
:not(.btn-check)+.btn:active
 {
  border:1px solid #f39800;
  background-color:#f39800;
  color: #FFF;
}
.btn.pink {
  border:1px solid #ff4fa4;
  background-color:#ff4fa4;  
}
.btn.pink:hover {
  border:1px solid #cd2777;
  background-color:#cd2777;
  color: #FFF;
}
.btn span { color:#FFF; }

.w-80 { width:80%; }

.mb100 { margin-bottom:100px; }

.fs10 {font-size: .625rem;}
.fs12 { font-size:.75rem; }

.fw-normal { font-weight:normal; }

h2 { font-size:1.875rem; }
h2 i { padding-right:.4em; }
h2 i > img { width:20px; vertical-align:middle; }

.key-color {color:#00A0E9;}
.bg-key-color {background-color:#eef9ff;}

.bdr-gray {border: 1px solid #a5a5a5; }

.table { border: 1px solid #999; }
.table th, .table td { padding:1rem; }
.table th { background-color:#eef9ff; }

/*ローディング画面*/
#loading{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  transition: all .5s;
  z-index: 1060;
}
/*エフェクト*/
.loading-set{
  font-size: 16px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.loading-anime{
  position: relative;
  left: 2em;
}
.loading-anime::after{
  content: "";
  background: #fff;
  width: 3em;
  height: 1em;
  display: inline-block;
  transition: all 1s;
  animation: loadingset 1.0s infinite ease-in-out;
}
@keyframes loadingset{
  0%{ transform: translateX(-2em); }
  100%{ transform: translateX(0); }
}
/*ローディング完了後に非表示にする*/
.loadup{
  opacity: 0;
  visibility: hidden;
}

/*スクロールアニメーション*/
.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 2s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/* デジタルチラシ追従バナー */
a.digital-flyer-btn {
  width: 180px;
  margin-top: 10px;
  z-index: 1036;
}
a.digital-flyer-btn img { width: 180px; }

/* *****ヘッダー***** */
header { border-bottom:1px solid #5f5f5f; }

/*  PC以外の時の画面下固定ボタン */
header .fixed-bottom { 
  background-color:rgba(255,255,255,0.7);
  padding:10px 5px;
}
header .fixed-bottom .nav-item { padding:0 5px; }
header .fixed-bottom .nav-item a { 
  color: #FFF;
  border-radius: 4px;
}
header .fixed-bottom .nav-item a span { color:#FFF; }
header .fixed-bottom .nav-item a::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  margin-right: 3px;
  vertical-align: middle;
}
header .fixed-bottom .nav-item.digi-flyer a { background-color:#a5a5a5; }
header .fixed-bottom .nav-item.digi-flyer a::before {
  background-image: url(../img/i-w-doc.svg);
}
header .fixed-bottom .nav-item.flow a { background-color:#24b3eb; }
header .fixed-bottom .nav-item.flow a::before {
  background-image: url(../img/i-w-question.svg);
  width: 11px;
}
header .fixed-bottom .nav-item.beginner a { background-color:#24b3eb; }
header .fixed-bottom .nav-item.beginner a::before {
  background-image: url(../img/i-w-begginer.svg);
  width: 11px;
}
header .fixed-bottom .nav-item.contact a { background-color:#009368; }
header .fixed-bottom .nav-item.contact a::before {
  background-image: url(../img/i-w-contact.svg);
  width: 17px;
}
header .fixed-bottom .nav-item.login a { background-color:#ff4fa4; }
header .fixed-bottom .nav-item.login a::before {
  background-image: url(../img/i-login.svg);
  width: 13px;
}

.navbar { 
  background-color:#FFF;
  padding-top:0;
}
.navbar.navbar-expand-lg { flex-wrap: wrap; }

/* ロゴ・テキストリンク・ログインボタン段 */
.navbar .util-link {
  margin-top:-2.1em;
  font-size: .875em;
  margin-right: calc(var(--bs-gutter-x) * -0.5);
}
.navbar .util-link a.nav-link { 
  padding:1em .75em .75em;
  color: #000;
  line-height: 1em;
  text-indent:.75em;
  position: relative;
}
.navbar .util-link a.nav-link.flow:hover { color:#24b3eb; }
.navbar .util-link a.nav-link.beginner:hover { color:#24b3eb; }
.navbar .util-link a.nav-link.contact:hover { color:#009368; }
.navbar .util-link a.nav-link::before {
  content: "";
  display:inline-block;
  width:16px;
  height:16px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
}
.navbar .util-link a.nav-link.flow::before { background-image: url('../img/i-question.svg'); }
.navbar .util-link a.nav-link.beginner::before { background-image: url('../img/i-beginner.png'); }
.navbar .util-link a.nav-link.contact::before { background-image: url('../img/i-contact.png'); }
.navbar .util-link .login-btn {
  display: block;
  border-bottom-left-radius: 10px;
  border: 1px solid #ff4fa4;
  background-color: #ff4fa4;
  padding:.75em 1em;
  margin: -6px 0 0 1em;
}
.navbar .util-link .login-btn:hover {
  border: 1px solid #cd2777;
  background-color: #cd2777;  
}
.navbar .util-link span {
  color:#FFF;
  line-height: 1.4em;
  text-indent:1em;
  position: relative;
  padding-left: 22px;
}
.navbar .util-link span::before { 
  content: "";
  display:inline-block;
  width:20px;
  height:20px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  background-image: url('../img/i-login.svg'); 
}

/* グローバルメニュー */
.container-fluid.global-menu { max-width:1200px; }
.global-menu li.nav-item {
  border-right: 1px solid #5f5f5f;
}
.global-menu .nav-link:hover { font-weight:bold; }
.global-menu li.nav-item:last-child {
  border:none;
}
.global-menu .nav-link span {
  line-height: 1em;
  padding-left: 1.8em;
  position: relative;
}
.global-menu .nav-link span::before {
  content: "";
  display:inline-block;
  width:23px;
  height:23px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top:0;
}
.global-menu .nav-link .home::before { background-image: url('../img/i-home.svg'); }
.global-menu .nav-link .day::before { background-image: url('../img/i-daytour.svg'); }
.global-menu .nav-link .stay::before { background-image: url('../img/i-staytour.svg'); }
.global-menu .nav-link .other::before { background-image: url('../img/i-other.svg'); }
.global-menu .nav-link .abroad::before { background-image: url('../img/i-abroad.svg'); }
.global-menu .nav-link .busstop::before { background-image: url('../img/i-busstop.svg'); }
.global-menu .nav-link .flow::before { background-image: url('../img/i-question.svg'); }
.global-menu .nav-link .beginner::before { background-image: url('../img/i-beginner.png'); }
.global-menu .nav-link .contact::before { background-image: url('../img/i-contact.png'); }
.global-menu .dropdown-menu { border-color:#FFF; }

.global-menu .dropdown-item:focus, .dropdown-item:hover {
  background-color:#fff;
  font-weight:bold;
}

/* ハンバーガーメニュー */
.global-menu .navbar-toggler {
  color:#FFF;
  border-radius:5px;
  border: 2px solid #FFF;
  padding: .5rem .75rem;
  margin-left: .25rem;
  background-color: #00a0e9;
  width: 50px;
  height: 50px;
}
.global-menu .navbar-toggler:focus { box-shadow:none !important; }
.global-menu .navbar-toggler.fixed-top {
  top:17.5px;
  right:8px;
  left:auto;
  z-index: 1050;
}
.global-menu .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='3' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  width: 2em;
  height: 2em;
}
.navbar-toggler small { display:block; }
.offcanvas-collapse,
.offcanvas-collapse.open {
  z-index: 1040;
}
#navbarsExampleDefault .nav-fill {
  width: 100%; 
}
.global-menu .navbar-util li {
  padding-left: 1em;
}
.global-menu .navbar-util li a {
  display: block;
  padding: 8px 0 ;
  color:#000;
  text-decoration: none;
}
.global-menu .navbar-util .login-btn {
  display: inline-block;
  border-radius: 10px;
  border: 1px solid #ff4fa4;
  background-color: #ff4fa4;
  padding:.75em 2em;
  margin-top:1rem;
}
.global-menu .navbar-util li .login-btn span {
  color: #FFF;
  color:#FFF;
  line-height: 1.4em;
  text-indent:1em;
  position: relative;
}
.global-menu .navbar-util li .login-btn:hover {
  border: 1px solid #cd2777;
  background-color: #cd2777;
  font-weight: normal;
}
.global-menu .navbar-util li .login-btn span::before { 
  content: "";
  display:inline-block;
  width:20px;
  height:20px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  background-image: url('../img/i-login.svg'); 
}

/* *****外部リンクバナーセクション***** */
#banners ul { padding:0 10px 0; }
#banners {
  padding-bottom: 206px;
  background: url(../img/clouds.png);
  background-repeat: repeat-x;
  background-position: bottom center;
  background-color: #eef9ff;
}
#banners section {
  background-color:#FFF;
}
#banners ul { margin-bottom:0; }
#banners ul.ext-bnr li { padding-bottom:20px; }
#banners ul.ext-bnr li img {
  width: 100%;
  border: 1px solid #a5a5a5;
}

/* *****フッター***** */
footer { background-color:#eef9ff; }
footer .info-area {
  background-image: url(../img/footer-deco.png);
  background-repeat: repeat-x;
  background-position: center bottom;
  min-height: 400px;
  padding-bottom: 352px;
}
footer .info-area .btn.contactBtn {
  padding:10px;
  width: 80%;
  font-size: 1.2rem;
  border:1px solid #00A0E9;
  background-color: #00A0E9;
}
footer .info-area .btn.contactBtn:hover {
  border:1px solid #f39800;
  background-color: #f39800;
}
footer .info-area .btn.contactBtn span {
  color: #FFF;
  position: relative;
}
footer .info-area .btn.contactBtn span::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 20px;
  background-image: url(../img/i-balloon.svg);
  background-position: no-repeat;
  background-size: contain;
  position: absolute;
  left: -24px;
  top:.25em;
}
footer .info-area .bnr { width:280px; }
footer .info-area i {
  vertical-align: middle;
  padding-right: 5px;
}
footer .info-area i img { 
  width:28px;
  vertical-align: top;
}
footer .info-area ul {
  border-top:1px solid #5f5f5f;
}
footer .info-area li {
  border-bottom:1px solid #5f5f5f;
}
footer img.bus {
  width:250px;
  margin-bottom:-550px;
}
footer .pagetop {
  display: block;
  margin-bottom: 150px;
  z-index: 1035;
}
footer .pagetop img {
  width: 170px;
}
footer #page-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
footer #page-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
footer .footer-index { 
  background-color:#f4f4f4;
  padding-top: 10px;
}
footer .footer-index p {
  margin-bottom: 0;
  padding-bottom: 1rem;
}
footer .footer-index li {
  border-right: 1px solid #5f5f5f;
  margin-bottom: 1rem;
}
footer .footer-index li:last-child {
  border:none;
}
footer .copyright-area { 
  background-color: #b18147;
  color: #FFF;
  padding:5px 0;
}
footer .copyright-area p,
footer .copyright-area li a { color: #FFF; }
footer .copyright-area li a:hover { font-weight:bold; }


/* *****下層ページ共通***** */
/* h1見出し */
.h1-box {
  height:200px;
  background-image: url(../img/others-top.jpg);
  background-position: top 50% left 50%;
  background-color:rgba(0,0,0,0.5);
  background-blend-mode:darken;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.h1-box h1 {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: #FFF;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
  padding:0 1rem;
}
.h1-box h1 + p {
  font-weight: 400;
  color: #FFF;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
  padding:0 1rem;
}

/* ぱんくず */
.breadcrumb-item:first-of-type,
.breadcrumb-item + .breadcrumb-item {
  padding: 0 .5rem 0 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: none;
  float: none;
  padding-right:0;
}
.breadcrumb-item::after {
  content:url(../img/bc-devider.svg);
  display: inline-block;
  vertical-align: baseline;
  width: 12px;
}
.breadcrumb-item a:hover { color:#00A0E9; }

/* コンテンツエリア共通スタイル */
main section.container { padding-bottom:80px; }
main .container figure > img { width:100%; }
.highlighter { background: linear-gradient(transparent 50%, #FFC5EC 50%); }
i.parking { padding-right: 5px; }
i.parking img { width:1.2rem; }
.bg-orange { background-color:#FFEFD6; }
.bg-pink { background-color:#FFECF5; }
.bg-blue { background-color:#eef9ff; }
/* 注意事項（共通） */
.attention-or-bg, .attention-red-bg { 
  width:70%;
  margin:0 auto;
}
.attention-or-bg .bg-orange,
.attention-red-bg .bg-pink {
  border-radius: 15px;
  padding:2rem 3.5rem 3rem;
}
.attention-or-bg .attention-mark,
.attention-red-bg .attention-mark {
  display: block;
  padding-bottom: 1rem;
  text-align: center;
}
.attention-or-bg .attention-mark i img,
.attention-red-bg .attention-mark i img {
  width: 70px;
}
.attention-or-bg .lead-border,
.attention-red-bg .lead-border {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #fc9a00;
}
.attention-or-bg .lead-border:before,
.attention-or-bg .lead-border:after,
.attention-red-bg .lead-border:before,
.attention-red-bg .lead-border:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #fc9a00;
}
.attention-or-bg .lead-border:before, 
.attention-red-bg .lead-border:before {
  margin-right: 1rem;
}
.attention-or-bg .lead-border:after,
.attention-red-bg .lead-border:after {
  margin-left: 1rem;
}
.attention-or-bg h3,
.attention-red-bg h2 {
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.attention-or-bg ul,
.attention-red-bg ul {
  margin-bottom: 0;
  padding-left: 1.5rem;
}
.attention-or-bg li,
.attention-red-bg li {
  list-style: disc;
  padding-bottom: .5rem;
}
.attention-or-bg li:last-child,
.attention-red-bg li:last-child {padding-bottom: 0;}
/* 注意事項（中） */
.attention-or-bg {
  background-image: repeating-linear-gradient(45deg, #fc9a00, #fc9a00 10px, #ffefd6 10px, #ffefd6 20px);
}
.attention-or-bg h3 { border-bottom: 2px solid #fc9a00; }
.attention-or-bg .lead-border { color: #fc9a00; }
.attention-or-bg .lead-border:before,
.attention-or-bg .lead-border:after { background-color: #fc9a00; }
/* 注意事項（高） */
.attention-red-bg {
  background-image: repeating-linear-gradient(45deg, #FF8282, #FF8282 10px, #FFECF5 10px, #FFECF5 20px);
}
.attention-red-bg h2 { 
  border-bottom: 2px solid #FF8282;
  padding-top: 0;
}
.attention-red-bg .lead-border { color: #FF8282; }
.attention-red-bg .lead-border:before,
.attention-red-bg .lead-border:after {
  background-color: #FF8282;
}

/* *****トップページ & おすすめコースページ共通***** */
/* 今月のおすすめコース(CMS生成) */
.reco ul.row { padding:1.5rem 0 0; }
.reco ul.row li a { 
  background-color:#FFF;
  display: block;
  border-radius: 8px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.reco ul.row li a:hover { background-color:#ffefd7; }
/* 「NEW!」リボン */
.reco ul.row li .icon {
  margin-bottom: 0;
  color: #FFF;
  font-weight: bold;
  font-size: .75rem;
  letter-spacing: .05em;
  position: absolute;
  z-index: 50;
  margin: 5px 0 0 -5px;
  transform:rotate(-20deg);
}
.reco ul.row li .icon > span.new {
  padding: 2px 7px;
  background-color: #ff4fa4;
  display: inline-block;
  text-align: center;
  position: relative;
  height: 24px;
  box-sizing: border-box;
  color: #FFF;
}
.reco ul.row li .icon > .new:before {
  content: '';
  position: absolute;
  width: 10px;
  bottom: -3px;
  left: -12px;
  z-index: -2;
  border: 10px solid #dd2c92;
  border-left-color: transparent;/*山形に切り抜き*/
}
.reco ul.row figure {
  max-width: 100%;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-bottom: 0;
}
.reco ul.row figure img {
  aspect-ratio: 4 / 3;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center center;
  transition: .6s ease;
}
.reco ul.row a:hover img {
  transform: scale(1.1);
}
.reco ul.row h4 {
  background-color: #00a0e9;
  padding: .5rem 15px;
  color: #FFF;
  font-size: 1.2rem;
  width: 100%;
  display: block;
}
.reco ul.row h4 span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #FFF;
}
.reco ul.row .details { padding:0 15px; }
.reco ul.row .details .tag {
  font-size: .8rem;
  color: #FFF;
  margin: .8rem 0 .1rem;
}
.reco ul.row .details .tag > span {
  display: inline-block;
  padding:2px 4px;
  border-radius: 3px;
  margin:0 5px 5px 0;
  color: #FFF;
}

/* --タグ種類 -- */
/*日帰り*/
.reco ul.row .details .tag > .day { background-color: #00a0e9; }
/*宿泊*/
.reco ul.row .details .tag > .stay { background-color: #3838af; }
/*1名様参加OK*/
.reco ul.row .details .tag > .onetraveler { background-color: #00b21d; }
/*新コース - 非表示*/
.reco ul.row .details .tag > span.new { display:none; }

.reco ul.row .details .date {
  color: #603813;
  font-weight: bold;
}
.reco ul.row .details .courseNo {
  font-size: .875rem;
  margin-bottom: .25rem;
  color: #666;
}
.reco ul.row .details .courseNo strong { 
  color:#f39800;
  font-size: 1rem;
}
.reco ul.row .details .disc {
  width: 100%;
  display: block;
}
.reco ul.row .details .disc span {
   display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.reco ul.row .price { 
  padding:0 15px;
  font-weight: bold;
  font-size: 1.5rem;
  color: #ff4fa4;
}
.reco ul.row .price span { 
  font-size:1rem;
  color: #ff4fa4; 
}

/* *****トップページ & 「News & Topics」一覧ページ共通***** */
/* News & Topics */
#news-list h2 i > img { width:30px; vertical-align:middle; }
#news-list h2 span::before {
  background-image: url(../img/hanit-flwr.png);
  width:120px;
  height: 93px;
}
.news-topics { 
  width:80%;
  margin:0 auto 50px;
  border-top: 1px dotted #5f5f5f;
}
.news-topics li {
  border-bottom: 1px dotted #5f5f5f;
  padding-top: 1rem;
}
.news-topics li dl { margin-bottom: 0.5rem; }
.news-topics li dl:after {
  content:" ";
  display:block;
  clear:both;
}
#news-list ul dt, #news-list ul dd { padding: 0 1rem; }
#news-list dt { 
  width:200px;
  float: left; 
}
#news-list ul dd {
  margin-left: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: #000;
}
#news-list ul dd small {
  color: #FFF;
  padding:1px 10px;
  margin-right: 5px;
}
#news-list ul dd small.important {
  background-color: #ff4fa4;
}
#news-list ul dd small.recommend {
  background-color: #00A0E9;
}

/* *****トップページ & 「News & Topics」一覧ページ & 「おすすめコース」一覧ページ共通***** */
.bg-blue-cloudbtm { 
  background-color:#eef9ff;
  background-image: url(../img/clouds-top.png);
  background-repeat: repeat-x;
  background-position: center bottom;
  padding-bottom: 230px;
}

/* *****「News & Topics」一覧ページ & 「おすすめコース」一覧ページ共通***** */
.bg-blue-btm img { margin-right:100px; }
.bg-blue-btm .big-dash { 
  height:4px;
  background: repeating-linear-gradient(
    90deg,
    #b4dbf1,
    #b4dbf1 50px,
    #eef9ff 50px, 
    #eef9ff 100px
  );
}

/* ページネーション */
.hanit-pagination {
  --bs-pagination-color:#00A0E9;;
  --bs-pagination-border-color:#00A0E9;
  --bs-pagination-hover-border-color:#00A0E9;
  --bs-pagination-hover-bg:#b4dbf1;
  --bs-pagination-active-bg:#00A0E9;
  --bs-pagination-active-border-color:#00A0E9;
}
.hanit-pagination .page-item span { color:#00A0E9; }
.hanit-pagination .page-item.disabled span {color:#999;}
.hanit-pagination .page-item:hover span {color:#0a58ca;}
.hanit-pagination .page-item.disabled:hover span {color:#999;}


/* *****乗り場案内ページ & 旅行センターページ & ハニットツアーとは & ご予約についてページ共通***** */
main section.container.annai {padding:0 3rem;}

.annai .row > .col-12.col-lg-6 {
  padding:2rem;
}

/* ページ内アンカーボタン */
.anchor-btn { 
  margin-bottom:50px;
  padding-top: 30px; 
}
.anchor-btn li {
  display: inline-block;
  margin: 0 .5rem 1rem;
}
.anchor-btn a.btn { 
  width:220px;
  position: relative; 
}
.anchor-btn a.btn::before,
.anchor-btn a.btn::after {
  position: absolute;
  top: 55%;
  bottom: 0;
  right: 11px;
  width: 10px;
}
.anchor-btn a.btn::before {
  height: 2px;
  margin-top: -10px;
  right: 15px;
  content: "";
  height:16px;
  width:2px;
  content: "";
  background: #FFF;

}
.anchor-btn a.btn::after {
  height: 10px;
  margin-top: -6px;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  content: "";
  display: inline-block;
  vertical-align: middle;
}

/* google map埋込 */
.gmap iframe {
  width: 100%;
  height: 400px;
}


/* *****ご予約についてページ & 初めての方へページ共通***** */
.choice li {
  border: 3px solid #00A0E9;
  border-radius: 10px;
  width: 300px;
  height: 300px;
}
.choice li figure {
  text-align: center;
  padding:10px;
  margin-bottom: 0;
}
.choice li figure img { width:200px; }
.choice li figure figcaption { 
  font-size:1.25rem;
  font-weight: bold;
  margin-top: .5rem;
}

.info {
  border:5px solid #6CC6F0;
  border-radius: 15px;
  padding:1.5rem;
}
.info .info-mark i img {
  width: 40px;
}
.info .lead-border {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #6CC6F0;
}
.info .lead-border:before,
.info .lead-border:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #6CC6F0;
}
.info .lead-border:before {
  margin-right: 1rem;
}
.info .lead-border:after {
  margin-left: 1rem;
}

.info.important {
  border:5px solid #FF8282;
}
.info.important .lead-border {
  color: #FF8282;
}
.info.important .lead-border:before,
.info.important .lead-border:after {
  background-color: #FF8282;
}
.info dl:last-child { margin-bottom:0; }
.info dt { padding:.5rem 0; }
.info dd > ul { 
  margin-bottom:0;
  padding-left: 1.5rem;
}
.info dd > ul li { list-style:disc; }
.info a { color:#f39800; }
.info a:hover { text-decoration:underline; }

.info, .table, .cancel-fee table + ul { 
  width:80%;
  margin:0 auto;
}

.cancel-fee h5::before,
.cancel-fee h5::after,
#beginner section dt::before,
#beginner section dt::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border-right: 1px solid #000;
  border-top: 1px solid #000;
  display: inline-block;
}
.cancel-fee h5::before,
#beginner section dt::before { 
  transform: rotate(227deg);
}
.cancel-fee h5::after,
#beginner section dt::after
 { transform: rotate(45deg); }


/* *****404エラーページ***** */
#error404 figure, #error404 figure + div { width:40%; } 
#error404 h1 {
  font-weight: 800;
}
#error404 h1 span {font-size: 8.5rem;}

/* --------------------------------------------------

 レスポンシブ

--------------------------------------------------　*/
@media (min-width: 1200px) {
  .container {max-width:1200px;}
}

@media (max-width: 1199.98px) {
  a.digital-flyer-btn {
    margin-top: 5px;
  }
  a.digital-flyer-btn img { width: 160px; }

  /* *****乗り場案内ページ & 旅行センターページ共通***** */
  .attention-or-bg { 
    width:100%;
    margin:0 auto;
  }
}

@media (max-width: 991.98px) {
  /* md タブレット・スマートフォン向け */

  /* デジタルチラシ追従バナー */
  a.digital-flyer-btn {
    display: none;
  }

  /* *****ヘッダー***** */
  .navbar > .container-fluid.login-top { display:none; }
  .global-menu li.nav-item {
    border: none;
  }

  #nav01 .btn.btn-warning, #nav01 .btn-primary { 
    width:66px;
    height: 66px;
    border-radius: 0;
    border-color:transparent;
  }
  #nav01 .btn-primary:focus {
    box-shadow: 0 0 0 0;
  }
  #nav01 .btn i {
    padding:0;
    font-size: 1.5rem;
    padding-top:8px;
  }
  #nav01 .btn span {
    display:block;
    font-size: .625rem;
    padding-top:2px;
  }

  .container-fluid.global-menu { max-width:100%; }
  .global-menu .offcanvas-collapse { top:0; }
  #navbarsExampleDefault .nav-fill.mt-3 { margin-top:70px !important; }
  #navbarsExampleDefault .nav-fill .nav-item { text-align:left; padding-left:1em; }

  /* ハンバーガーメニュー */
  .navbar.container { padding-right:0; }

  /* フッター */
  footer .copyright-area {
    padding-bottom:70px;
  }

  /* *****下層ページ共通***** */
  .breadcrumb { margin-bottom:0;}

  /* *****トップページ & News & Topics一覧ページ共通***** */
  /* News & Topics */
  .news-topics { 
    width:100%;
  }

  /* *****「News & Topics」一覧ページ & 「おすすめコース」一覧ページ共通***** */
  /* ページネーション */
  .hanit-pagination {
    margin-bottom: 50px;
  }

  /* *****乗り場案内ページ & 旅行センターページ共通***** */
  .attention-or-bg .bg-orange,
  .attention-red-bg .bg-pink {
    padding:1rem 2.5rem 2rem;
  }

  /* *****ご予約についてページ & 初めての方へページ共通***** */
  .choice li {
    width: 200px;
    height: 200px;
  }
  .choice li figure img { width:120px; }

  /* *****404エラーページ***** */
  #error404 figure { 
    width:50%;
    margin: 0 auto;
  }
  #error404 figure + div { width:100%; }
  #error404 figure + div > h1, #error404 figure + div p { text-align:center; } 
}

@media (max-width: 767.98px) {
  /* s スマートフォン向け */

  /* *****トップページ & News & Topics一覧ページ共通***** */
  /* *****外部リンクバナーセクション***** */
  #news-list, #banners {
    padding-bottom: 50px;
    background-size: contain;
    background-color: #eef9ff;
    background-repeat: no-repeat;
  }

  /* *****フッター***** */
  footer .info-area {
    background-image: url(../img/footer-deco_sm.png);
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 200px;
    padding-bottom: 152px;
  }
  footer img.bus {
    margin-bottom:-250px;
  }

  /* *****トップページ & 「News & Topics」一覧ページ & 「おすすめコース」一覧ページ共通***** */
  /* News & Topics */
  .bg-blue-cloudbtm {
    padding-bottom: 30px;
    background-size: contain;
    background-color: #eef9ff;
    background-repeat: no-repeat;
  }
  #news-list dt { 
    width:100%;
    float: none;
    margin-bottom: .15rem; 
  }
  #news-list ul dd {
    margin-left: 0;
    margin-bottom: 1rem; 
  }

  /* *****「おすすめコース」一覧ページ共通***** */
  main#recommend section.container { padding-bottom:0; }
  main#recommend .bg-blue-btm { padding-bottom:70px; }

  /* *****乗り場案内ページ & 旅行センターページ共通***** */
  .attention-or-bg .bg-orange {
    padding:.5rem 2rem 2rem;
  }

  /* *****ご予約についてページ & 初めての方へページ共通***** */
  .choice li {
    width: 300px;
    height: 300px;
  }
  .choice li figure img { width:200px; }
}

@media (min-width: 751px) {
  /* スマホのみ電話テキストから電話がかけられるようにする */
  a[href^="tel:"] {
      pointer-events: none;
      cursor: default;
  }
}

@media (max-width: 575.98px) {
  /* xs スマートフォン向け */

  /* *****ヘッダー***** */
  header .fixed-bottom .nav-item a { 
    font-size: .875rem;
  }

  .logo { height:50px; }
  .global-menu .navbar-toggler.fixed-top { top:8.5px; }

  /* *****トップページ & News & Topics一覧ページ共通***** */
  /* *****外部リンクバナーセクション***** */
  #news-list, #banners {
    padding-bottom: 30px;
    background-size: contain;
    background-color: #eef9ff;
    background-repeat: no-repeat;
  }

  /* *****フッター***** */
  footer .info-area .btn.contactBtn {
    width: 100%;  
  }
  footer .info-area dt span {
    display: inline-block;
  }
  footer img.bus {
    margin-bottom:-200px;
    width: 200px;
  }
  footer .pagetop { 
    margin-top:-160px;
    margin-right:0;
  }

  /* *****下層ページ共通***** */
  /* h1見出し */
  .h1-box {
    height:130px;
  }
  .h1-box h1 {
    font-size: 2rem;
  }

  /* *****トップページ & おすすめコースページ共通***** */
  /* 今月のおすすめコース(CMS生成) */
  .reco li .icon > .new:before {
    left: -8px;
  }

  /* *****トップページ & News & Topics一覧ページ共通***** */
  #news-list ul dd {
    -webkit-line-clamp: 2;
  }

  /* *****「おすすめコース」一覧ページ共通***** */
  main#recommend .bg-blue-btm { padding-bottom:20px; }

  /* *****乗り場案内ページ & 旅行センターページ、ご予約についてページ共通***** */
  main section.container.annai {padding:0 1.5rem;}
  .attention-or-bg .bg-orange,
  .attention-red-bg .bg-pink {
    padding:.5rem 1rem 1rem;
  }

  /* *****ご予約についてページ & 初めての方へページ共通***** */
  .choice li {
    width: 200px;
    height: 200px;
  }
  .choice li figure img { width:120px; }

  /* *****404エラーページ***** */
  #error404 figure { width:100%; }
}