/*! sp用ヘッダー / パンくず / 重要なお知らせ / フッター */

/* --------------------start_ヘッダー-------------------- */
:root {
  --Header-height: 6rem;
}

#Header {
  position: fixed;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 1.5rem;
  box-shadow: 0px -1px 0px 0px #e5e5e5 inset;
  background-color: white;
  --Header__logo-width: 9.6rem;
  --Header__btn-width: 6.5rem;
}

.Header__logo {
  width: var(--Header__logo-width);
}

/* start_出発地選択 */
.SelectArea {
  position: relative;
  width: calc(
    100% - var(--Header__logo-width) - (var(--Header__btn-width) * 2) - 2rem
  );
  height: 4rem;
  margin-left: 1rem;
  padding: 0.6rem;
  background: #f5f5f5;
  border-radius: 0.2rem;
}

.SelectArea::after {
  content: "";
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 0.2rem solid #333;
  border-bottom: 0.2rem solid #333;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-70%) rotate(45deg);
}

.SelectArea__label {
  display: block;
  font-size: 1.2rem;
  line-height: 1;
}

.SelectArea__option {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / 0.75);
  height: calc(100% / 0.75);
  padding: 2.4rem 0.8rem 0.6rem 0.8rem;
  color: var(--corporate-color);
  font-size: 1.6rem;
  font-weight: var(--bold);
  text-decoration: underline;
  transform-origin: top left;
  transform: scale(0.75);
}

.SelectArea__alert {
    display: flex;
    position: absolute;
    bottom: -4.8rem;
    left: 0;
    padding: .8rem 1.5rem;
    font-weight: 600;
    font-size: 1.2rem;
    white-space: nowrap;
    border-radius: .6rem;
    background: white;
    border: .2rem solid var(--caution-color);
    box-shadow: 0px 0.4rem 0.7rem -0.6rem rgb(0 0 0 / 50%);
    z-index: 1;
}

.SelectArea__alert::before {
    content: '';
    display: block;
    position: absolute;
    top: -.8rem;
    left: 1rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 .6rem .6rem .6rem;
    border-color: transparent transparent var(--caution-color) transparent;
}

.SelectArea__alert::after {
    content: '';
    display: block;
    position: absolute;
    top: -.5rem;
    left: 1.1rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 .5rem .5rem .5rem;
    border-color: transparent transparent white transparent;
}

.SelectArea__alert-txt {
  width: calc(100% - 1.6rem);
  line-height: 1.3;
}
/* end_出発地選択 */

.Header__mypage,
.Header__menu {
  display: flex;
  flex-direction: column;
  width: var(--Header__btn-width);
  height: var(--Header-height);
  font-size: 1rem;
  font-weight: var(--bold);
  border-left: 1px solid #c3c3c3;
}

.Header__mypage:active,
.Header__menu:active {
  background-color: var(--active-color);
}

.Header__mypage {
  margin-left: auto;
}

.Header__mypage::before {
  content: "";
  display: block;
  width: 100%;
  height: 3rem;
  background: url(https://www.hankyu-travel.com/sharing/common21/images/icn_mypage--fill.svg) no-repeat 50%
    calc(50% + 0.2rem) / 2rem;
}

.Header__mypage-txt,
.Header__menu-txt {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2rem;
  line-height: 1.2;
  text-align: center;
}

/* start_ハンバーガーアイコン */
.Header__hamburger-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2.8rem;
  margin-top: 0.2rem;
}

.Header__hamburger-line {
  position: relative;
  display: block;
  width: 2rem;
  height: 2px;
  background-color: var(--corporate-color);
  transition: background-color 0.3s;
}

.Header__hamburger-line::before,
.Header__hamburger-line::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--corporate-color);
  position: absolute;
  left: 0;
  transition: transform 0.3s, top 0.3s;
}

.Header__hamburger-line::before {
  top: -0.6rem;
}

.Header__hamburger-line::after {
  bottom: -0.6rem;
}

.Gnav-open {
  /* overflow-y: scroll; */
  position: fixed;
  width: 100%;
  left: 0;
}

.Gnav-open .Header__hamburger-line {
  background-color: white;
}

.Gnav-open .Header__hamburger-line::before {
  top: 50%;
  transform: rotate(45deg);
}

.Gnav-open .Header__hamburger-line::after {
  top: 50%;
  transform: rotate(-45deg);
}
/* end_ハンバーガーアイコン */
/* --------------------end_ヘッダー-------------------- */

/* --------------------start_メニュー-------------------- */
#Gnav {
  position: fixed;
  top: var(--Header-height);
  right: -31rem;
  z-index: 30;
  transition: right 0.3s;
}

.Gnav__inner {
  width: 31rem;
  height: calc((var(--vh, 1vh) * 100) - var(--Header-height));
  overflow: scroll;
  background-color: white;
}

.Gnav-open #Gnav {
  right: 0;
}

/*start_GnavHead*/
.GnavHead {
  background-color: var(--corporate-color);
}

.GnavHead__top {
  padding: 0.5rem 1.5rem;
  color: white;
  font-size: 1.4rem;
  text-align: right;
  background-color: var(--sub-corporate-color);
}

.GnavHead__name {
  font-size: 1.5rem;
  font-weight: var(--bold);
}

.GnavHead__content {
  padding: 2rem 1.5rem;
}

.HankyuPoint {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  color: white;
  border-bottom: 1px dotted white;
}

.HankyuPoint__label {
  font-size: 1.5rem;
  font-weight: var(--bold);
}

.HankyuPoint__label::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  vertical-align: -0.4rem;
  background: url(https://www.hankyu-travel.com/sharing/common21/images/icn_heiPoint.svg) no-repeat center / contain;
}

.HankyuPoint__content {
  font-size: 1.3rem;
}

.HankyuPoint__point {
  margin-right: 0.3rem;
  font-size: 1.6rem;
  font-weight: var(--bold);
}

.GnavHead__btn {
  position: relative;
  display: block;
  padding: 1.3rem 1.5rem;
  color: var(--corporate-color);
  font-size: 1.4rem;
  font-weight: var(--bold);
  background: white;
  border-radius: 0.4rem;
  box-shadow: 0 1.5rem 0.4rem -1.3rem #008dce;
}

.GnavHead__btn::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  vertical-align: -0.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-repeat: no-repeat;
}

.GnavHead__btn--favorite::before {
  background-image: url(https://www.hankyu-travel.com/sharing/common21/images/icn_favorite--stroke-pink.svg);
}

.GnavHead__btn--history::before {
  background-image: url(https://www.hankyu-travel.com/sharing/common21/images/icn_history.svg);
}

.GnavHead__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.2rem;
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  border-top: 0.2rem solid var(--corporate-color);
  border-right: 0.2rem solid var(--corporate-color);
  transform: translateY(-50%) rotate(45deg);
}

.GnavHead__btn:not(:last-child) {
  margin-bottom: 1rem;
}
/*end_GnavHead*/

.Gnav__group {
  border-top: 0.2rem solid var(--sub-corporate-color);
}

.Gnav__label {
  padding: 1.5rem;
  font-weight: var(--bold);
  background-color: #f5f5f5;
}

.Gnav__link {
  position: relative;
  display: block;
  padding: 1.5rem 4.5rem 1.5rem 1.5rem;
  color: initial;
}

.Gnav__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.2rem;
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  border-top: 0.2rem solid var(--corporate-color);
  border-right: 0.2rem solid var(--corporate-color);
  transform: translateY(-50%) rotate(45deg);
}

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

#GnavOverlay {
  display: block;
  width: 100%;
  height: calc(100vh - var(--Header-height));
  position: fixed;
  top: var(--Header-height);
  left: 0;
  z-index: 20;
  background: #00111a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.Gnav-open #GnavOverlay {
  opacity: 0.7;
  pointer-events: auto;
}

/* start_GnavFoot */
.GnavFoot {
  border-top: 1px solid #e5e5e5;
  padding-top: 2rem;
  text-align: center;
}

.GnavFoot__search {
  display: flex;
  justify-content: space-between;
  padding: 0 1.5rem;
  margin-bottom: 2rem;
}

.GnavFoot__input {
  width: 62%;
  padding: 1rem 1.5rem;
  border: 1px solid #888;
  border-radius: 4px;
  font-size: 1.6rem;
  text-align: left;
}

.GnavFoot__submit {
  width: 36.4%;
  color: white;
  font-size: 1.5rem;
  font-weight: var(--bold);
  letter-spacing: 0.05em;
  background: var(--caution-color);
  border-radius: 4px;
}

.GnavFoot__submit::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.3rem;
  vertical-align: -0.2rem;
  background: url(https://www.hankyu-travel.com/sharing/common21/images/icn_search--white.svg) no-repeat center / contain;
}

.GnavFoot__logout {
  display: inline-block;
  margin: 0 auto 2rem auto;
  padding: 1rem 3rem;
  color: var(--corporate-color);
  font-size: 1.5rem;
  white-space: nowrap;
  border: 1px solid var(--corporate-color);
  border-radius: 0.4rem;
}

.GnavFoot__logout::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1rem;
  vertical-align: -0.2rem;
  background: url(https://www.hankyu-travel.com/sharing/common21/images/icn_logout.svg) no-repeat center / contain;
}

.GnavFoot__close {
  padding: 1.5rem;
  font-size: 1.5rem;
  background: #f5f5f5;
}

.GnavFoot__close-icn {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.4rem;
}

.GnavFoot__close-icn::before,
.GnavFoot__close-icn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1.4rem;
  height: 0.2rem;
  background-color: #333;
}

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

.GnavFoot__close-icn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* end_GnavFoot */
/* --------------------end_メニュー-------------------- */

/* --------------------start_パンくず-------------------- */
#BreadCrumb {
  width: 100%;
  overflow: scroll;
  border-bottom: 1px solid #e5e5e5;
}

.BreadCrumb__items {
  padding: 3vw;
  display: flex;
  justify-content: flex-start;
  font-size: 1.2rem;
}

.BreadCrumb__item {
  flex-shrink: 0;
}

.BreadCrumb__icn {
  margin: 0 0.3rem;
  vertical-align: 0.1rem;
}

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

/* --------------------start_重要なお知らせ-------------------- */
#PrimaryNotice {
  padding: 1.5rem;
  font-size: 1.4rem;
  line-height: 1.5;
  border: 1.5rem solid #f5f5f5;
}

.PrimaryNotice__ttl {
  margin-bottom: 0.5rem;
  color: var(--caution-color);
  font-weight: var(--bold);
}

.PrimaryNotice__item:not(:last-child) {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dotted #888;
}

.PrimaryNotice__link {
  display: inline-block;
  color: var(--textLink-color);
  text-indent: -1.3rem;
  padding-left: 1.3rem;
}

.PrimaryNotice__link:active {
  text-decoration: underline;
}

.PrimaryNotice__link::before {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.5rem;
  border-top: 0.2rem solid var(--corporate-color);
  border-right: 0.2rem solid var(--corporate-color);
  transform: rotate(45deg);
  vertical-align: 0.1rem;
}

/* --------------------end_重要なお知らせ-------------------- */

/* --------------------start_PR枠-------------------- */
.Footer__pr {
  padding: 1.5rem;
  font-size: 1.4rem;
  background-color: #f5f5f5;
  border-top: 1px solid #e5e5e5;
}

.Footer__pr-item {
  display: block;
  position: relative;
  padding: 2.3rem 4rem .5rem .5rem;
  background-color: white;
  border: 1px solid #c3c3c3;
}

.Footer__pr-item:not(:last-child) {
  margin-bottom: 1.5rem;
}

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

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

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

.Footer__pr-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem .5rem .8rem .5rem;
  color: white;
  font-weight: var(--bold);
  font-size: 1rem;
  line-height: 0;
  background: var(--corporate-color);
}
/* --------------------end_PR枠-------------------- */

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

.Footer__link-lev1 {
  position: relative;
  display: block;
  padding: 1.5rem;
  font-size: 1.3rem;
  font-weight: var(--bold);
  background-color: white;
  color: #333333;
}

.Footer__link-lev1::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.2rem;
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  border-top: 0.2rem solid var(--corporate-color);
  border-right: 0.2rem solid var(--corporate-color);
  transform: translateY(-50%) rotate(45deg);
}

.Footer__toggle[data-lv="1"] {
  position: relative;
  padding: 1.5rem;
  font-size: 1.3rem;
  font-weight: var(--bold);
  background-color: white;
}

.Footer__toggle[data-lv="1"][data-state="open"] {
  background-color: #f5f5f5;
}

.Footer__inner[data-lv="1"] {
  width: calc(100% - 3rem);
  margin: 0 auto 1.5rem auto;
  background-color: white;
}

.Footer__toggle[data-lv="2"] {
  position: relative;
  padding: 1.5rem;
  font-size: 1.3rem;
  font-weight: var(--bold);
}

.Footer__link-lev2 {
  position: relative;
  display: block;
  padding: 1.5rem 1.5rem 1.5rem 3rem;
  color: var(--textLink-color);
  font-size: 1.3rem;
}

.Footer__link-lev2:active {
  text-decoration: underline;
}

.Footer__link-lev2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.5rem;
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 0.2rem solid var(--corporate-color);
  border-right: 0.2rem solid var(--corporate-color);
  transform: translateY(-50%) rotate(45deg);
}

.Footer__toggle[data-lv="3"] {
  position: relative;
  padding: 1.5rem;
  font-size: 1.3rem;
  font-weight: var(--bold);
}

.Footer__link-lev3 {
  position: relative;
  display: block;
  padding: 1.5rem 1.5rem 1.5rem 3rem;
  color: var(--textLink-color);
  font-size: 1.3rem;
}

.Footer__link-lev3:active {
  text-decoration: underline;
}

.Footer__link-lev3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.5rem;
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 0.2rem solid var(--corporate-color);
  border-right: 0.2rem solid var(--corporate-color);
  transform: translateY(-50%) rotate(45deg);
}

.Footer__inner[data-lv="3"] {
  margin-bottom: -1px;
  border-top: var(--Footer-border-style);
}

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

.Footer__item {
  width: 50%;
}

.Footer__item:nth-child(odd) {
  border-right: var(--Footer-border-style);
}

.Footer__link-lev4 {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 1.5rem 1.5rem 1.5rem 3rem;
  color: var(--textLink-color);
  font-size: 1.3rem;
  border-bottom: var(--Footer-border-style);
}

.Footer__link-lev4::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.5rem;
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 0.2rem solid var(--corporate-color);
  border-right: 0.2rem solid var(--corporate-color);
  transform: translateY(-50%) rotate(45deg);
}

/*start_ボーダー設定*/
.Footer__toggle[data-lv="1"]:not(:first-child),
.Footer__link-lev1:not(:first-child) {
  border-top: var(--Footer-border-style);
}

.Footer__toggle[data-lv="2"]:not(:last-child),
.Footer__link-lev2:not(:last-child) {
  border-bottom: var(--Footer-border-style);
}

.Footer__toggle[data-lv="3"]:not(:first-child),
.Footer__link-lev3:not(:first-child) {
  border-top: var(--Footer-border-style);
}

.Footer__inner[data-lv="2"] {
  border-bottom: var(--Footer-border-style);
}
/*end_ボーダー設定*/

/* start_プラスアイコン設定 */
.Footer__plus {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  transform: translateY(-50%);
}

.Footer__plus--L {
  background-color: var(--corporate-color);
}

.Footer__plus--M {
  background-color: #f5f5f5;
}

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

.Footer__plus-inner::before,
.Footer__plus-inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0.8rem;
  height: 0.2rem;
  background-color: white;
}

.Footer__plus--M .Footer__plus-inner::before,
.Footer__plus--M .Footer__plus-inner::after {
  width: 1rem;
  background-color: var(--corporate-color);
}

.Footer__plus-inner::before {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.3s;
}

[data-state="open"] .Footer__plus-inner::before {
  transform: translate(-50%, -50%);
}

.Footer__plus-inner::after {
  transform: translate(-50%, -50%);
}

.Footer__toggle[data-lv="3"]::before,
.Footer__toggle[data-lv="3"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  display: block;
  width: 1rem;
  height: 0.2rem;
  background-color: #c3c3c3;
}

.Footer__toggle[data-lv="3"]::before {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s;
}

.Footer__toggle[data-lv="3"][data-state="open"]::before {
  transform: translateY(-50%);
}

.Footer__toggle[data-lv="3"]::after {
  transform: translateY(-50%);
}

/* end_アイコン設定 */

.Footer__inner[data-lv="1"],
.Footer__inner[data-lv="2"],
.Footer__inner[data-lv="3"] {
  display: none;
}

.Footer__sub-group {
  padding: 0 1.5rem;
  font-size: 1.3rem;
  background: white;
  border-top: var(--Footer-border-style);
}

.Footer__sub-group-link {
  display: block;
  padding: 1rem 0;
  color: #333333;
}

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

.Footer__sub-group-item:not(:last-child) {
  border-bottom: var(--Footer-border-style);
}

.Footer__copy {
  padding: 1.5rem;
  color: white;
  font-size: 1rem;
  text-align: center;
  background: var(--corporate-color);
}

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

.Footer_note {
  margin: 5px;
  font-size: 11px;
  letter-spacing: -0.3px;
}
/* --------------------end_フッター-------------------- */

/* --------------------start_ハイパーバナー-------------------- */
#hyperBn {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  padding: 1.5rem 4rem 1.5rem 1.5rem;
  background-color: white;
  border-top: 1px solid #e5e5e5;
}

.hyperBn__close {
  position: absolute;
  top: 1rem;
  right: 0.8rem;
  width: 2.4rem;
  height: 2.4rem;
}

.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: 1.2rem;
  height: 0.2rem;
  background-color: #888;
}

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

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

#btnToTop {
  position: fixed;
  bottom: 14.5rem;
  right: 1.5rem;
  z-index: 10;
  display: block;
  width: 6rem;
  height: 6rem;
  opacity: 0;
  background: url(https://www.hankyu-travel.com/sharing/common21/images/btnToTop.svg) no-repeat center / contain;
  cursor: pointer;
  transition: 0.3s;
}

#btnToTop.btnToTop--active {
  opacity: 0.7;
}
/* --------------------end_ハイパーバナー-------------------- */

.BreadCrumb__link span, .BreadCrumb__icn{
    padding:0;
}
.breadcrumb__item a{
    display:inline;
}