@charset "utf-8";

/* ================================================== */
/* LP Header Styles */
/* ヘッダとドロワーメニューに必要なスタイルのみを抽出 */
/* ================================================== */

/* --------------------------------------------------
 * Variables (色定義)
 * -------------------------------------------------- */
:root {
    --color-bdr: rgba(15, 41, 77, 0.1);
    --box-shadow: 0 3px 6px rgba(85, 104, 139, 0.16);

    --text-color-navy: #0F294D;
    --text-color-blue: #0169D8;
    --text-color-white: #FFFFFF;

    --bg-white: #FFFFFF;
    --bg-dark-blue: #0059B9;
    --bg-pale-blue-gray: #EAEFF7;
    --bg-light-gray: #F2F4F8;
    --bg-black-opacity: rgba(0, 0, 0, 0.5);

    --screen-sm-min: 768px;
    --screen-md-min: 992px;
    --screen-lg-min: 1200px;
}

/* --------------------------------------------------
 * Header Base
 * -------------------------------------------------- */
.l-site-header {
    box-shadow: var(--box-shadow);
    background-color: var(--bg-white);
    z-index: 50;
}

.l-site-header.before-loading {
    min-height: 139px;
}

@media (min-width: 992px) {
    .l-site-header.before-loading {
        min-height: 184px;
    }
}

/* --------------------------------------------------
 * Header Label
 * -------------------------------------------------- */
.l-site-header-label {
    padding-top: 5px;
    padding-bottom: 6px;
    background-color: var(--bg-dark-blue);
    color: var(--text-color-white);
    font-size: 10px;
}

/* --------------------------------------------------
 * Header Main Top
 * -------------------------------------------------- */
.l-site-header-main-top {
    border-bottom: 1px solid var(--color-bdr);
    min-height: 60px;
}

@media (min-width: 992px) {
    .l-site-header-main-top {
        min-height: 82px;
    }
}

.l-site-header-main-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
}

@media (min-width: 992px) {
    .l-site-header-main-top-inner {
        padding: 18px 0;
    }
}

.l-site-header-main-top-logo-image {
    height: 33px;
}

@media (min-width: 992px) {
    .l-site-header-main-top-logo-image {
        height: 45px;
    }
}

/* --------------------------------------------------
 * Header History List
 * -------------------------------------------------- */
.l-site-header-main-top-history-list {
    display: flex;
}

.l-site-header-main-top-history-list > li {
    text-indent: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.l-site-header-main-top-history-list > li:before {
    display: none;
}

.l-site-header-main-top-history-list > li:last-child {
    margin-bottom: 0;
}

.l-site-header-main-top-history-list-item {
    margin-right: 16px;
}

@media (min-width: 992px) {
    .l-site-header-main-top-history-list-item {
        margin-right: 24px;
    }
}

.l-site-header-main-top-history-list-item:last-child {
    margin-right: 0;
}

.l-site-header-main-top-history-list-item-link {
    display: block;
    color: var(--text-color-navy);
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
}

@media (min-width: 992px) {
    .l-site-header-main-top-history-list-item-link {
        font-size: 12px;
    }
}

.l-site-header-main-top-history-list-item-link-image {
    display: block;
    margin: 5px auto 0;
}

@media (min-width: 992px) {
    .l-site-header-main-top-history-list-item-link-image {
        margin: 4px auto 0;
    }
}

/* --------------------------------------------------
 * Header Main Bottom
 * -------------------------------------------------- */
.l-site-header-main-bottom {
    min-height: 54px;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom {
        min-height: 78px;
    }
}

.l-site-header-main-bottom.fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    background-color: var(--bg-white);
    box-shadow: var(--box-shadow);
}

.l-site-header-main-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 10px 0;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-inner {
        padding: 16px 0;
    }
}

.l-site-header-main-bottom-tour {
    display: flex;
    flex: 1;
    justify-content: space-between;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-tour {
        align-items: center;
    }
}

.l-site-header-main-bottom-tour-select {
    position: relative;
    display: flex;
    flex: 1;
    margin-right: 16px;
    border-radius: 0 50px 50px 0;
    align-items: center;
    background-color: var(--bg-pale-blue-gray);
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-tour-select {
        flex: initial;
        width: 300px;
        border-radius: 50px;
    }
}

@media (min-width: 1200px) {
    .l-site-header-main-bottom-tour-select {
        width: 375px;
    }
}

.l-site-header-main-bottom-tour-select:after {
    content: "";
    position: absolute;
    right: 16px;
    background-image: url('../../../common/images/share/icon/icon_arrow_down_medium.svg');
    background-repeat: no-repeat;
    width: 1em;
    height: 0.5em;
    pointer-events: none;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-tour-select:after {
        right: 21px;
    }
}

.l-site-header-main-bottom-tour-select-link {
    display: flex;
    align-items: center;
    line-height: 1;
    width: 100%;
    padding: 4px 40px 4px 4px;
    text-decoration: none;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-tour-select-link {
        padding: 13px 40px 13px 32px;
    }
}

.l-site-header-main-bottom-tour-select-departure {
    color: var(--text-color-blue);
    font-size: 12px;
    font-weight: bold;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-tour-select-departure {
        font-size: 14px;
    }
}

.l-site-header-main-bottom-tour-select-icon {
    margin-right: 4px;
    margin-left: 4px;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-tour-select-icon {
        margin-right: 10px;
        margin-left: 10px;
    }
}

.l-site-header-main-bottom-tour-select-arrive {
    color: var(--text-color-navy);
    font-size: 16px;
    font-weight: bold;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-tour-select-arrive {
        font-size: 20px;
    }
}

.l-site-header-main-bottom-tour-search {
    padding: 0 14px 0 0;
    border-right: 1px solid var(--color-bdr);
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-tour-search {
        padding: 8px 16px 8px 16px;
    }
}

@media (min-width: 1200px) {
    .l-site-header-main-bottom-tour-search {
        padding: 8px 24px 8px 24px;
    }
}

.l-site-header-main-bottom-tour-search-link {
    display: block;
    color: var(--text-color-navy);
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-tour-search-link {
        display: flex;
        font-size: 12px;
    }
}

@media (min-width: 1200px) {
    .l-site-header-main-bottom-tour-search-link {
        font-size: 14px;
    }
}

.l-site-header-main-bottom-tour-search-link-image {
    display: block;
    margin: 0 auto 6px;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-tour-search-link-image {
        margin-bottom: 0;
        margin-right: 6px;
        width: 20px;
    }
}

.l-site-header-main-bottom-global {
    padding-left: 16px;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-global {
        padding: 8px 16px 8px 16px;
        border-right: 1px solid var(--color-bdr);
    }
}

@media (min-width: 1200px) {
    .l-site-header-main-bottom-global {
        padding: 8px 24px 8px 23px;
    }
}

.l-site-header-main-bottom-global-link {
    display: block;
    color: var(--text-color-navy);
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-global-link {
        display: flex;
        font-size: 12px;
    }
}

@media (min-width: 1200px) {
    .l-site-header-main-bottom-global-link {
        font-size: 14px;
    }
}

.l-site-header-main-bottom-global-link-image {
    display: block;
    margin: 0 auto 6px;
}

@media (min-width: 992px) {
    .l-site-header-main-bottom-global-link-image {
        margin-bottom: 0;
        margin-right: 8px;
        width: 20px;
    }
}

/* --------------------------------------------------
 * Drawer Menu Overlay
 * -------------------------------------------------- */
.drawer_menu-overlay.active {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--bg-black-opacity);
    z-index: 90;
}

/* --------------------------------------------------
 * Drawer Menu Left
 * -------------------------------------------------- */
.drawer_menu-left {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 100vw;
    width: 100%;
    transition: 0.4s ease-out;
    z-index: 100;
    background-color: var(--bg-light-gray);
    overflow-x: hidden;
}

@media (min-width: 768px) {
    .drawer_menu-left {
        width: 640px;
    }

    .drawer_menu-left .drawer_menu-head {
        right: 0;
        left: 100vw;
        transition: 0.4s ease-out;
    }
}

.drawer_menu-left.active {
    left: 0;
    transition: 0.4s ease-out;
}

@media (min-width: 768px) {
    .drawer_menu-left.active {
        left: calc(100% - 640px);
    }

    .drawer_menu-left.active .drawer_menu-head {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
        transition: 0.4s ease-out;
        width: 640px;
        left: calc(100% - 640px);
    }
}

/* --------------------------------------------------
 * Drawer Menu Right
 * -------------------------------------------------- */
.drawer_menu-right {
    position: fixed;
    top: 0;
    left: -100%;
    bottom: 0;
    right: 0;
    width: 100%;
    transition: 0.4s ease-out;
    z-index: 100;
    background-color: var(--bg-light-gray);
    overflow-x: hidden;
}

@media (min-width: 768px) {
    .drawer_menu-right {
        right: auto;
    }

    .drawer_menu-right .drawer_menu-head {
        left: -640px;
        transition: 0.4s ease-out;
    }
}

.drawer_menu-right.active {
    left: 0;
    transition: 0.4s ease-out;
}

@media (min-width: 768px) {
    .drawer_menu-right.active {
        width: 640px;
        right: auto;
    }

    .drawer_menu-right.active .drawer_menu-head {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
        transition: 0.4s ease-out;
        width: 640px;
    }
}

/* --------------------------------------------------
 * Drawer Menu Head
 * -------------------------------------------------- */
.drawer_menu-head {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 50px;
    background-color: var(--bg-white);
    padding: 10px 8px 8px;
    box-shadow: var(--box-shadow);
}

.drawer_menu-head-heading {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color-navy);
}

.drawer_menu-head-close {
    position: absolute;
    right: 8px;
    border-left: 1px solid var(--color-bdr);
}

.drawer_menu-head-close-link {
    color: var(--text-color-navy);
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    padding-left: 16px;
}

.drawer_menu-head-close-link-image {
    display: block;
    margin: 0 auto 5px;
}

/* --------------------------------------------------
 * Drawer Menu Body
 * -------------------------------------------------- */
.drawer_menu-body {
    padding-top: 50px;
    padding-bottom: 50px;
}

.drawer_menu-body_white {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: var(--bg-white);
}

/* --------------------------------------------------
 * Utility Classes
 * -------------------------------------------------- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .container {
        padding: 0 30px;
    }
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

* {
    box-sizing: border-box;
}

/* --------------------------------------------------
 * Card Styles (Favorites/History)
 * -------------------------------------------------- */
.card-link-thumbnail-small {
    display: flex;
    padding: 12px;
    background-color: var(--bg-white);
    border-radius: 4px;
    text-decoration: none;
}

@media (min-width: 992px) {
    .card-link-thumbnail-small {
        transition: 0.3s;
    }

    .card-link-thumbnail-small:hover .card-link-thumbnail-small-content-title {
        color: var(--text-color-blue);
        transition: 0.3s;
    }
}

.card-link-thumbnail-small .button-xsmall-blue {
    border: 1px solid transparent;
}

.card-link-thumbnail-small-image {
    margin-right: 12px;
    max-width: 100px;
    max-height: 100px;
}

.card-link-thumbnail-small-content-category {
    margin-bottom: 0;
    color: var(--bg-dark-blue);
    font-size: 12px;
}

.card-link-thumbnail-small-content-title {
    margin-bottom: 8px;
    color: var(--text-color-navy);
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
}

.card-link-thumbnail-small-content-delete {
    margin-top: 16px;
    margin-bottom: 0;
    border-top: 1px solid var(--color-bdr);
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: right;
    width: 100%;
}

.card-link-thumbnail-small-content-delete-link {
    position: relative;
    z-index: 1;
    color: var(--text-color-blue);
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

@media (min-width: 992px) {
    .card-link-thumbnail-small-content-delete-link {
        transition: 0.3s;
    }

    .card-link-thumbnail-small-content-delete-link:hover {
        transition: 0.3s;
        opacity: 0.7;
    }
}

/* --------------------------------------------------
 * Button Styles
 * -------------------------------------------------- */
.button-xsmall-blue {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--box-shadow);
    line-height: 1.25;
    background-color: var(--bg-dark-blue);
    color: var(--text-color-white);
}

@media (min-width: 992px) {
    .button-xsmall-blue {
        padding: 6px 8px;
    }
}

.button-xsmall-blue:focus,
.button-xsmall-blue:active,
.button-xsmall-blue:hover {
    color: var(--text-color-white);
}

@media (min-width: 992px) {
    .button-xsmall-blue {
        transition: 0.3s;
    }

    .button-xsmall-blue:hover {
        transition: 0.3s;
        opacity: 1;
        background-color: #108CF7;
    }
}

.button-xsmall-border_blue {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    line-height: 1.25;
    background-color: var(--bg-white);
    color: var(--text-color-blue);
    border: 1px solid var(--text-color-blue);
    box-shadow: none;
}

@media (min-width: 992px) {
    .button-xsmall-border_blue {
        padding: 6px 8px;
    }
}

.button-xsmall-border_blue:focus,
.button-xsmall-border_blue:active,
.button-xsmall-border_blue:hover {
    color: var(--text-color-blue);
}

@media (min-width: 992px) {
    .button-xsmall-border_blue {
        transition: 0.3s;
    }

    .button-xsmall-border_blue:hover {
        transition: 0.3s;
        opacity: 1;
        background-color: #E7F2FD;
        border-color: var(--text-color-blue);
        box-shadow: none;
    }
}

/* --------------------------------------------------
 * Navigation Styles (Favorites/History)
 * -------------------------------------------------- */
.l-global-navi-favorite-list,
.l-global-navi-history-list {
    padding-left: 0;
    list-style: none;
}

.l-global-navi-favorite-list > li,
.l-global-navi-history-list > li {
    text-indent: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.l-global-navi-favorite-list > li:before,
.l-global-navi-history-list > li:before {
    display: none;
}

.l-global-navi-favorite-list > li:last-child,
.l-global-navi-history-list > li:last-child {
    margin-bottom: 0;
}

.l-global-navi-favorite-list-item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4px;
    border-radius: 4px;
    background-color: var(--bg-white);
    padding-right: 12px;
}

.l-global-navi-favorite-list-item .card-link-thumbnail-small-content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    padding-bottom: 12px;
}

.l-global-navi-favorite-heading {
    margin-top: 32px;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #003E92;
}

.l-global-navi-history-list-item {
    margin-bottom: 4px;
    border-radius: 4px;
}

.l-global-navi-history-heading {
    margin-top: 32px;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #003E92;
}

/* --------------------------------------------------
 * Wrapper Utilities
 * -------------------------------------------------- */
.wrap-content {
    padding: 0 16px;
}

@media (min-width: 768px) {
    .wrap-content {
        padding: 0 30px;
    }
}

/* 検索フォーム内の.wrap-contentのみ左右padding 0（SP版のみ） */
@media (max-width: 960px) {
    .l-top-searchbox-content .wrap-content {
        padding-left: 0;
        padding-right: 0;
    }
}

.wrap-content.pb-0 {
    padding-bottom: 0;
}

.wrap-content-1200 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .wrap-content-1200 {
        padding: 0 30px;
    }
}

/* --------------------------------------------------
 * Spacing Utilities
 * -------------------------------------------------- */
.mt-32 {
    margin-top: 32px;
}

.mt-60-md {
    margin-top: 32px;
}

@media (min-width: 992px) {
    .mt-60-md {
        margin-top: 60px;
    }
}

.ta-c {
    text-align: center;
}

.pb-0 {
    padding-bottom: 0;
}

.pl-0 {
    padding-left: 0;
}

.pr-0 {
    padding-right: 0;
}

@media (min-width: 992px) {
    .pl-16-md {
        padding-left: 16px;
    }

    .pr-16-md {
        padding-right: 16px;
    }
}

.d-f {
    display: flex;
}

.ai-c {
    align-items: center;
}

/* --------------------------------------------------
 * Button Small Border Blue
 * -------------------------------------------------- */
.button-small-border_blue {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    line-height: 1.25;
    background-color: var(--bg-white);
    color: var(--text-color-blue);
    border: 1px solid var(--text-color-blue);
    box-shadow: none;
    cursor: pointer;
}

.button-small-border_blue:focus,
.button-small-border_blue:active,
.button-small-border_blue:hover {
    color: var(--text-color-blue);
}

@media (min-width: 992px) {
    .button-small-border_blue {
        transition: 0.3s;
    }

    .button-small-border_blue:hover {
        transition: 0.3s;
        opacity: 1;
        background-color: #E7F2FD;
        border-color: var(--text-color-blue);
    }
}

/* --------------------------------------------------
 * Drawer Menu Block Animation
 * -------------------------------------------------- */
.js-drawer_menu-block {
    opacity: 1;
}