/*! スキップリンク / pc用ヘッダー / パンくず / 重要なお知らせ / フッター */

/* --------------------start_スキップリンク-------------------- */

#skipNav {
  position: fixed;
  z-index: 2147483638;
  background: 0 0;
  transition: background 0.1s ease;
}

#skipNav:focus-within {
  position: fixed;
  inset: 0;
  width: 100%;
  z-index: 2147483638;
  background: rgba(0, 17, 26, 0.7);
}

.skipLink {
  position: fixed;
  left: 40px;
  top: -70px;
  opacity: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 60px;
  font-size: 14px;
  font-weight: 700;
  background: white;
  border-radius: 8px;
  border: 2px solid #0038ff;
  transition: top 0.3s, opacity 0.3s;
}

.skipLink:focus {
  top: 40px;
  opacity: 1;
}

/* --------------------start_スキップリンク-------------------- */

/* --------------------start_ヘッダー-------------------- */
#Header {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}

.Header__inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 1024px;
  margin: 0 auto;
}

#Header__logo {
  width: 114px;
  margin-right: 20px;
}

#SelectArea {
  position: relative;
  padding: 0 25px 0 15px;
  background-color: #f5f5f5;
  border-radius: 100px;
  transition: background-color 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

#SelectArea:hover {
  background-color: white;
  box-shadow: 0px 0px 0px 1px var(--corporate-color) inset;
}

#SelectArea::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-80%) rotate(45deg);
}

.SelectArea__label {
  padding: 5px 10px 5px 0;
  font-size: 1.3rem;
  border-right: 1px dotted #888;
}

.SelectArea__content {
  display: inline-block;
  padding: 10px 10px 10px 5px;
  color: var(--corporate-color);
  font-size: 1.4rem;
  font-weight: 600;
}

/* start_出発地モーダル */
#SelectAreaModal {
  opacity: 0;
  pointer-events: none;
  width: 200px;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  font-size: 1.4rem;
  background: white;
  border: 2px solid var(--corporate-color);
  border-radius: 6px;
  transform: translate(-50%, calc(100% + 6px));
  box-shadow: 0px 18px 8px -15px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s;
}

#SelectAreaModal.js_SelectAreaModal--active {
  opacity: 1;
  pointer-events: auto;
}

.SelectAreaModal__items {
  position: relative;
}

.SelectAreaModal__items::before {
  content: "";
  display: block;
  position: absolute;
  top: -8px;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 6px 5px;
  border-color: transparent transparent var(--corporate-color) transparent;
  transform: translateX(-50%);
}

.SelectAreaModal__link {
  position: relative;
  display: block;
  padding: 8px 30px;
}

.SelectAreaModal__item:not(:last-child) .SelectAreaModal__link {
  border-bottom: 1px solid #e5e5e5;
}

.SelectAreaModal__item:first-child .SelectAreaModal__link {
  border-radius: 5px 5px 0 0;
}

.SelectAreaModal__item:last-child .SelectAreaModal__link {
  border-radius: 0 0 5px 5px;
}

.SelectAreaModal__link:hover {
  background-color: #f5f5f5;
}

.SelectAreaModal__link--selected {
  background: var(--active-color);
  pointer-events: none;
}

.SelectAreaModal__link--selected::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 7px;
  border-left: 2px solid var(--corporate-color);
  border-bottom: 2px solid var(--corporate-color);
  transform: translate(-150%, -70%) rotate(-45deg);
  position: absolute;
  top: 50%;
}
/* end_出発地モーダル */

/* start_テキストリンク */
.Header__links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
}

.Header__links-items {
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
}

.Header__links-item:not(:last-child)::after {
  content: "｜";
  display: inline;
  font-size: 1.3rem;
}

.Header__links-link {
  font-size: 1.3rem;
  margin: 0 5px;
}

.Header__links-link:hover {
  text-decoration: underline;
}

/* .Header__links-link::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.Header__links-link--qa::before {
  background-image: url(../images/icn_Header-link--qa.svg);
}

.Header__links-link--beginner::before {
  background-image: url(../images/icn_Header-link--beginner.svg);
}

.Header__links-link--store::before {
  background-image: url(../images/icn_Header-link--store.svg);
} */
/* end_テキストリンク */

/* start_お気に入りボタン */
.Header__favorite {
  display: block;
  margin-right: 10px;
  padding: 10px 20px;
  color: #666;
  font-size: 1.4rem;
  white-space: nowrap;
  border: 1px solid #c3c3c3;
  border-radius: 3px;
  transition: color 0.3s, border-color 0.3s;
}

.Header__favorite:hover {
  color: #ff6978;
  border-color: #ff6978;
}

.Header__favorite::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  vertical-align: -5px;
  background: url(../images/icn_favorite--stroke-pink.svg) no-repeat center /
    contain;
}
/* end_お気に入りボタン */

/* start_マイページボタン */
.Header__mypage {
  padding: 10px 20px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--corporate-color);
  border: 1px solid var(--corporate-color);
  border-radius: 3px;
  transition: color 0.3s, background-color 0.3s;
}

.Header__mypage:hover {
  color: white;
  background-color: var(--corporate-color);
}

.Header__mypage-icn {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: var(--corporate-color);
  transition: fill 0.3s;
  vertical-align: -5px;
}

.Header__mypage:hover .Header__mypage-icn {
  fill: white;
}
/* end_マイページボタン */

/* --------------------end_ヘッダー-------------------- */

/* --------------------start_グローバルナビゲーション-------------------- */
#Gnav {
  border-top: 1px solid #e5e5e5;
  border-bottom: 2px solid var(--corporate-color);
}

.Gnav__inner {
  display: flex;
  justify-content: space-between;
  width: 1024px;
  margin: 0 auto;
}

.Gnav__group {
  display: flex;
  justify-content: space-between;
}

.Gnav__group--other {
  border-left: 2px solid var(--corporate-color);
}

.Gnav__label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  color: white;
  font-size: 1.4rem;
  font-weight: 600;
  writing-mode: vertical-rl;
  background: var(--corporate-color);
}

.Gnav__items {
  display: flex;
  justify-content: space-between;
}

.Gnav__item:not(:last-child) {
  border-right: 1px dotted #888;
  /* background-image: linear-gradient(to bottom, #888, #888 1px, transparent 1px, transparent 1px);
  background-size: 1px 2px;
  background-position: right top;
  background-repeat: repeat-y; */
}

.Gnav__group:last-child .Gnav__item:last-child {
  border-right: 1px dotted #888;
}

.Gnav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 100%;
  padding: 5px 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: inherit;
  line-height: 1.3;
  text-align: center;
  transition: color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.Gnav__link:not(.Gnav__link--active):hover {
  color: var(--corporate-color);
  box-shadow: 0px -2px 0px 0px var(--corporate-color) inset;
  background-color: var(--active-color);
}

.Gnav__link::before {
  content: "";
  display: block;
  align-self: start;
  width: 100%;
  height: 30px;
  margin-bottom: 2px;
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}

.Gnav__link-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.Gnav__link--active {
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.Gnav__link--active::after {
  content: '';
  display: block;
  background-color: var(--corporate-color);
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 4px;
  z-index: -1;
}
.Gnav__link--d::before {
  background-image: url(../images/icn_Gnav--d.svg);
}

.Gnav__link--bus::before {
  background-image: url(../images/icn_Gnav--bus.svg);
}

.Gnav__link--dpd::before {
  background-image: url(../images/icn_Gnav--dpd.svg);
}

.Gnav__link--hotel::before {
  background-image: url(../images/icn_Gnav--hotel.svg);
}

.Gnav__link--i::before {
  background-image: url(../images/icn_Gnav--i.svg);
}

.Gnav__link--dp::before {
  background-image: url(../images/icn_Gnav--dp.svg);
}

.Gnav__link--cruise::before {
  background-image: url(../images/icn_Gnav--cruise.svg);
}

.Gnav__link--theme::before {
  background-image: url(../images/icn_Gnav--theme.svg);
}

/* start_active */
.Gnav__link--d.Gnav__link--active::before {
  background-image: url(../images/icn_Gnav--d-white.svg);
}

.Gnav__link--bus.Gnav__link--active::before {
  background-image: url(../images/icn_Gnav--bus-white.svg);
}

.Gnav__link--dpd.Gnav__link--active::before {
  background-image: url(../images/icn_Gnav--dpd-white.svg);
}

.Gnav__link--hotel.Gnav__link--active::before {
  background-image: url(../images/icn_Gnav--hotel-white.svg);
}

.Gnav__link--i.Gnav__link--active::before {
  background-image: url(../images/icn_Gnav--i-white.svg);
}

.Gnav__link--dp.Gnav__link--active::before {
  background-image: url(../images/icn_Gnav--dp-white.svg);
}

.Gnav__link--cruise.Gnav__link--active::before {
  background-image: url(../images/icn_Gnav--cruise-white.svg);
}

.Gnav__link--theme.Gnav__link--active::before {
  background-image: url(../images/icn_Gnav--theme-white.svg);
}
/* end_active */

/* --------------------end_グローバルナビゲーション-------------------- */

/* --------------------start_パンくず-------------------- */
#BreadCrumb {
  padding: 5px 0;
  border-bottom: 1px solid #e5e5e5;
}

.BreadCrumb__inner {
  width: 1024px;
  margin: 0 auto;
}

.BreadCrumb__items {
  display: flex;
  justify-content: flex-start;
  font-size: 1.2rem;
  overflow-x: auto;
}

.BreadCrumb__items::-webkit-scrollbar {
  height: 5px;
}

.BreadCrumb__items::-webkit-scrollbar-thumb {
  background-color: #e5e5e5;
  border-radius: 10px;
}

.BreadCrumb__item {
  flex-shrink: 0;
}

.BreadCrumb__link:hover {
  text-decoration: underline;
}

.BreadCrumb__icn {
  margin: 0 5px;
  vertical-align: 1px;
}

.BreadCrumb__current {
  vertical-align: -1px;
}
/* --------------------end_パンくず-------------------- */

/* --------------------start_重要なお知らせ-------------------- */
#PrimaryNotice {
  padding: 20px 0;
  background: #f5f5f5;
}

#BreadCrumb + #PrimaryNotice {
  border-bottom: 1px solid #e5e5e5;
}

.PrimaryNotice__inner {
  display: flex;
  justify-content: flex-start;
  width: 1024px;
  margin: 0 auto;
}

.PrimaryNotice__ttl {
  margin-right: 20px;
  color: var(--caution-color);
  font-size: 1.4rem;
  font-weight: 600;
}

.PrimaryNotice__link {
  color: var(--textLink-color);
  font-size: 1.4rem;
}

.PrimaryNotice__link::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-top: 2px solid var(--corporate-color);
  border-right: 2px solid var(--corporate-color);
  transform: rotate(45deg);
  vertical-align: 1px;
}

.PrimaryNotice__link:hover {
  text-decoration: underline;
}
/* --------------------end_重要なお知らせ-------------------- */

/* --------------------start_ハイパーバナー-------------------- */
#hyperBn {
  position: fixed;
  bottom: 100px;
  right: 0;
  z-index: 10;
  padding: 10px 40px 10px 10px;
  background-color: white;
  box-shadow: 0px 0px 10px -5px rgb(0 0 0 / 50%);
}

.hyperBn__img {
  display: block;
  width: 320px;
  border: 1px solid #e5e5e5;
  transition: opacity 0.3s;
}

.hyperBn__img:hover {
  opacity: 0.7;
}

.hyperBn__close {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid white;
  transition: border-color 0.3s;
}

.hyperBn__close:hover {
  border-color: #888;
}

.hyperBn__close-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.hyperBn__close-inner::before,
.hyperBn__close-inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 12px;
  height: 2px;
  background-color: #888;
}

.hyperBn__close-inner::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.hyperBn__close-inner::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* --------------------end_ハイパーバナー-------------------- */

/* --------------------start_ページトップボタン-------------------- */
#btnToTop {
  position: fixed;
  bottom: -85px;
  right: 15px;
  z-index: 10;
  display: block;
  width: 70px;
  height: 70px;
  opacity: 0.7;
  background: url(../images/btnToTop.svg) no-repeat center / contain;
  cursor: pointer;
  transition: 0.3s;
}

#btnToTop:hover {
  opacity: 1;
}

#btnToTop.btnToTop--active {
  bottom: 15px;
}
/* --------------------end_ページトップボタン-------------------- */

/* --------------------start_フッター-------------------- */
#Footer {
  background: #f5f5f5;
  border-top: 4px solid var(--sub-corporate-color);
}

/* start_フリーワード */
.Footer__search {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  border-bottom: 1px solid #e5e5e5;
  background: white;
}

.Footer__search-ttl {
  margin-right: 20px;
  font-size: 1.8rem;
  font-weight: 600;
}

.Footer__search-ttl::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  vertical-align: -2px;
  background: url(../images/icn_search--black.svg) no-repeat center / contain;
}

.Footer__search-input {
  width: 270px;
  padding: 5px;
  border: 1px solid #888;
  border-radius: 4px;
}

.Footer__search-submit {
  padding: 7px ​15px;
  padding: 7px 15px;
  color: white;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background-color: var(--caution-color);
  border-radius: 3px;
  transition: opacity 0.3s;
}

.Footer__search-submit:hover {
  opacity: 0.7;
}

.Footer__search-submit::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  vertical-align: -3px;
  background: url(../images/icn_search--white.svg) no-repeat center / contain;
}
/* end_フリーワード */

/* start_PR枠 */
.Footer__pr {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 40px;
  font-size: 1.4rem;
}

.Footer__pr-item {
  display: block;
  position: relative;
  padding: 5px 40px 5px 5px;
  background-color: white;
  border: 1px solid #c3c3c3;
  transition: background-color 0.3s, border-color 0.3s;
}

.Footer__pr-item:hover {
  background-color: #f2fafe;
  border-color: var(--corporate-color);
}

.Footer__pr-item::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: 10px;
  background: var(--corporate-color);
  border-radius: 50%;
  transform: translateY(-50%);
}

.Footer__pr-item::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  right: 16px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: translateY(-50%) rotate(45deg);
}

.Footer__pr-item:not(:last-child) {
  margin-right: 10px;
}

.Footer__pr-label {
  padding: 3px 8px;
  color: white;
  font-weight: 600;
  background: var(--corporate-color);
}
/* end_PR枠 */

.footer-category-inner {
  width: 1024px;
  margin: 0 auto;
  padding: 30px 0 5px 0;
}

.Footer__category {
  padding-bottom: 5px;
  margin-bottom: 20px;
  border-bottom: 1px solid #c3c3c3;
}

.Footer__category-ttl {
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: 600;
}

.Footer__category-ttl-inner {
  padding-left: 12px;
  position: relative;
}

.Footer__category-ttl-inner::before,
.Footer__category-ttl-inner::after {
  content: "";
  display: block;
  width: 4px;
  height: 9px;
  position: absolute;
  left: 0;
  top: 50%;
}

.Footer__category-ttl-inner::before {
  transform: translateY(-100%);
  background: var(--corporate-color);
}

.Footer__category-ttl-inner::after {
  background: var(--sub-corporate-color);
}

.Footer__group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.Footer__group-ttl {
  width: 140px;
}

.Footer__group-ttl-link {
  display: block;
  color: var(--textLink-color);
  font-weight: 600;
  line-height: 0.9;
}

.Footer__group-ttl-link::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-top: 2px solid var(--corporate-color);
  border-right: 2px solid var(--corporate-color);
  transform: rotate(45deg);
  vertical-align: 2px;
}

.Footer__group-ttl-link:hover {
  text-decoration: underline;
}

.Footer__group-wrap {
  width: calc(100% - 140px);
}

.Footer__group-inner {
  display: flex;
  justify-content: flex-start;
}

.Footer__group-items {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: calc(100% - 100px);
}

.Footer__group-item {
  margin: 0 10px 10px 0;
  padding-right: 10px;
  line-height: 1;
  border-right: 1px solid #c3c3c3;
}

.Footer__group-link {
  display: block;
  color: var(--textLink-color);
  font-size: 1.3rem;
}

.Footer__group-link:hover {
  text-decoration: underline;
}

.Footer__group-link--homen {
  display: block;
  width: 100px;
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1;
}

.Footer__category-items {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: -2px;
}

.Footer__category-link {
  display: block;
  margin: 0 25px 15px 0;
  color: var(--textLink-color);
  font-weight: 600;
}

.Footer__category-link:hover {
  text-decoration: underline;
}

.Footer__category-link::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-top: 2px solid var(--corporate-color);
  border-right: 2px solid var(--corporate-color);
  transform: rotate(45deg);
  vertical-align: 2px;
}

.Footer__sub-group {
  background: white;
}

.footer-sub-group-inner {
  width: 1024px;
  margin: 0 auto;
  padding: 15px 0 5px 0;
}

.Footer__sub-group-items {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.Footer__sub-group-item {
  margin: 0 10px 10px 0;
  padding-right: 10px;
  line-height: 1;
  border-right: 1px solid #c3c3c3;
}

.Footer__sub-group-link {
  display: block;
  font-size: 1.4rem;
}

.Footer__sub-group-link:hover {
  text-decoration: underline;
}

.Footer__outer-link::after {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 3px;
  background: url(../images/icn_link.svg) no-repeat center / contain;
}

.Footer__copy {
  padding: 15px 0;
  color: white;
  font-size: 1rem;
  text-align: right;
  background-color: var(--corporate-color);
}

.Footer__copy-inner {
  width: 1024px;
  margin: 0 auto;
}
/* --------------------end_フッター-------------------- */

/*カウントバッジ*/
.Header__mypage {
	position: relative;
}

.Header__info-cnt {
	position: absolute;
	top: -7px;
	right: -7px;
	font-size: 1.0rem;
	background-color: #f00;
	color: #fff;
	border-radius: 50%;
	height: 27px;
	width: 27px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.Footer_note {
  width: 1024px;
  margin: 5px auto;
  font-size: 1.2rem;
}