@charset "utf-8";

:root {
    --ui-static-gap-5xl: 160px;
    --ui-static-gap-4xl: 120px;
    --ui-static-gap-3xl: 96px;
    --ui-static-gap-2xl: 80px;
    --ui-static-gap-xl: 64px;
    --ui-static-gap-l: 56px;
    --ui-static-gap-m: 40px;
    --ui-static-gap-s: 24px;
    --ui-static-gap-xs: 16px;
    --ui-static-gap-xxs: 8px;
    --ui-static-gap-xxxs: 4px;
    --ui-static-gap-none: 0px;
    --ui-static-txt-9xl: 56px;
    --ui-static-txt-8xl: 48px;
    --ui-static-txt-7xl: 40px;
    --ui-static-txt-6xl: 36px;
    --ui-static-txt-5xl: 32px;
    --ui-static-txt-4xl: 28px;
    --ui-static-txt-3xl: 26px;
    --ui-static-txt-2xl: 24px;
    --ui-static-txt-xl: 20px;
    --ui-static-txt-l: 18px;
    --ui-static-txt-m: 16px;
    --ui-static-txt-s: 14px;
    --ui-static-txt-xs: 12px;
    --ui-hawaii-senmon-blue: #0072CC;
}

.disnon {
    display: none;
}

.hawaii-senmon-stafflist .disnon-stafflist {
    display: none;
}

.hawaii-senmon-top .disnon-top {
    display: none;
}

/*MV*/
.hawaii-senmon .hawaii-mv-container {
    margin-bottom: calc(-1 * var(--ui-space-L));
}

.hawaii-senmon .ttl-about .ui-title-primary.ui-title-size-xl:after {
    background-color: var(--ui-unleash-blue-90);
    bottom: 0;
    content: "";
    display: block;
    height: 4px;
    left: 50%;
    position: absolute;
    -webkit-transform: skew(-20deg) translateX(-50%);
    transform: skew(-20deg) translateX(-50%);
    width: 60px;
}

.hawaii-senmon .mv-txt .cmp-container {
    gap: 0;
}

.hawaii-senmon .mv-txt .ui-separator {
    width: 100%;
}

/*ナビ*/
.hawaii-senmon .hawaii-nav-container {
    margin: 0px auto calc(-1 * var(--ui-space-L));
    width: 700px;

}

.hawaii-senmon .nav-inner .cmp-container {
    position: relative;
    aspect-ratio: 1 / 1;
    min-width: 0;
    border-radius: var(--ui-radius-S);
    /*box-shadow: var(--ui-drop-shadow-1-box);
    background: #fff;*/
}



.hawaii-senmon .nav-item p:before {
    content: "";
    width: 50px;
    /*background: url(/content/dam/hisj/branch/hawaii/assets/common/images/nav_staff.png);*/
    height: 50px;
    display: block;
    margin: 0px auto 0px;
}

.hawaii-senmon .nav-staff p:before {
    background: url(/content/dam/hisj/branch/hawaii/assets/common/images/nav_staff.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hawaii-senmon .nav-event p:before {
    background: url(/content/dam/hisj/branch/hawaii/assets/common/images/nav_event.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hawaii-senmon .nav-shop p:before {
    background: url(/content/dam/hisj/branch/hawaii/assets/common/images/nav_shop.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hawaii-senmon .nav-hawaii-info p:before {
    background: url(/content/dam/hisj/branch/hawaii/assets/common/images/nav_info.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hawaii-senmon .nav-hawaii-search p:before {
    background: url(/content/dam/hisj/branch/hawaii/assets/common/images/nav_item.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hawaii-senmon .nav-reservation p:before {
    background: url(/content/dam/hisj/branch/hawaii/assets/common/images/nav_reserve.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hawaii-senmon .nav-top p:before {
    background: url(/content/dam/hisj/branch/hawaii/assets/common/images/nav_top.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hawaii-senmon .nav-item p {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    position: relative;
}

/*臨時案内*/

.hawaii-senmon .temporary-container .ui-title .cmp-title__text {
    color: var(--ui-red-70);
}

/*スライドバナー*/

.hawaii-nav-container {}

.bnr-slide-wrap {}

.hawaii-senmon .bnr-slide-wrap .bnr-slide-box {
    width: 48%;

}
/*スライドバナー 埋め込み版*/
.hawaii-senmon .wwap-storyslide .slide-box-txt{
    margin-top: var(--ui-space-XS);
    font-size: var(--ui-typography-S);
    line-height: 21px;
}
.hawaii-senmon .wwap-storyslide .ui-static-image{
    border-radius: var(--ui-radius-M);
}
.hawaii-senmon .wwap-storyslide a{
    text-decoration: none;
    color: #2c2a29;
}
@media (hover: hover) {
 .hawaii-senmon .wwap-storyslide a:hover {
    opacity: 0.8;
  }
}
.movie-slide-box {}

/*ハワイ専門店とは*/
.hawaii-senmon .about-bg {
    padding-top: 48px;
}

.hawaii-senmon .about-bg .ui-container.has-bg-img>.container>.cmp-container {
    --mask: radial-gradient(51.61px at 50% 72px, #000 99%, #0000 101%) calc(50% - 60px) 0 / 120px 51% repeat-x, radial-gradient(51.61px at 50% -42px, #0000 99%, #000 101%) 50% 30px / 120px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.hawaii-senmon .about-grid-item {
    padding: var(--ui-static-gap-xs);
    background: var(--ui-white);
    border-radius: var(--ui-radius-M);
}

.hawaii-senmon .about-grid-item .icon-travel:before {
    content: "";
    width: 50px;
    background: url(/content/dam/hisj/branch/hawaii/assets/common/images/icon_sun.jpg);
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.hawaii-senmon .about-grid-item-ttl.ui-title-size-l .cmp-title__text {
    font-size: var(--ui-static-txt-l);
    font-weight: bold;
}

.hawaii-senmon .ui-container .about-ttl .cmp-title__text {
    color: var(--ui-static-white);
}

.hawaii-senmon .aloha-box {
    border-radius: var(--ui-radius-M);
    /*background-color: var(--ui-sky-blue-80);*/
    background: #F5C800;
    /*カラーパレットにあり*/
    padding: var(--ui-static-gap-xs);

}

.hawaii-senmon .aloha-box .ui-title .cmp-title__icon {
    align-items: start;
}

.hawaii-senmon .aloha-box .ui-title .cmp-title__text {
    text-align: left;
    font-size: var(--ui-static-txt-l);
}

.hawaii-senmon .aloha-box .ui-title .cmp-title__text {
    /*color: var(--ui-static-white);*/
}

.hawaii-senmon .aloha-box .ui-text {
    /*color: var(--ui-static-white);*/
}

/*スタッフ詳細*/

.hawaii-senmon .ui-container-container .staff-card-container {
    width: 100%;
}

.hawaii-senmon .ui-container-main-visual-basic-no-image .staff-card .ui-text {
    text-align: left;
}

.hawaii-senmon .staff-card {}

.hawaii-senmon .staff-card .travel-experience {}

.hawaii-senmon .staff-card .ui-container-space-row-narrow.box-txt>.container>.cmp-container {
    row-gap: var(--ui-space-XXXS);
    /*上書き*/
}

.hawaii-senmon .staff-card .category {
    color: var(--ui-sky-blue-80);

}

.hawaii-senmon .staff-card .category .ui-text {
    color: var(--ui-sky-blue-80);

}

.hawaii-senmon .staff-card .ui-title-primary.ui-title-size-l .cmp-title__text {
    font-weight: bold;
}

.hawaii-senmon .staff-card .catch {
    color: var(--ui-sky-blue-80);

}

.hawaii-senmon .staff-card .catch .ui-text {
    color: var(--ui-sky-blue-80);

}

.hawaii-senmon .staff-card .staff-name {
    text-align: center;
}

.hawaii-senmon .staff-card .ui-button .cmp-button {
    width: 100%;
    /*上書き*/
}

.hawaii-senmon .staff-card .box-buttom {}

.hawaii-senmon .staff-card .staff-button-link {}

.hawaii-senmon .staff-card .staff-button-reserve {}

/*イベント詳細*/

.hawaii-senmon .event-card {}


.hawaii-senmon .event-card .ui-container-space-row-narrow.box-txt>.container>.cmp-container {
    row-gap: var(--ui-space-XXXS);
    /*上書き*/
}


.hawaii-senmon .event-card .ui-button .cmp-button {
    width: 100%;
    /*上書き*/
}

.hawaii-senmon .event-card .event-place p {
    position: relative;
}

.hawaii-senmon .event-card .event-place p:before {
    display: inline-block;
    font-family: his-icons;
    font-style: normal;
    font-weight: 400;
    color: var(--ui-sky-blue-80);
    text-align: center;
    text-decoration: inherit;
    content: "\e8b9";
    width: 16px;
}

/*店舗情報*/
.hawaii-senmon .shop-photo .cmp-container {
    height: 515px;
}

.ui-container.shop-photo.has-bg-img>.container>.cmp-container {
    background-size: contain;
}

.hawaii-senmon .shop-info-box {}

.hawaii-senmon .shop-info-box-grid {}

.hawaii-senmon .map-box {}

.hawaii-senmon .shop-txt-wrap {}

.hawaii-senmon .shop-txt-box {}

.hawaii-senmon .icon-list {}

.hawaii-senmon .newsletter {}

.hawaii-senmon .shop-info-box .sns-list {
    width: 30%;
}

.hawaii-senmon .shop-info-box .map-box iframe {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.hawaii-senmon .shop-txt-box-reserve {
    padding: var(--ui-static-gap-xs);
    background: var(--ui-sky-blue-20);
    border-radius: var(--ui-radius-S);
}

.hawaii-senmon .shop-txt-box-reserve p {
    color: var(--ui-static-unleash-blue-100)
}

.hawaii-senmon .shop-txt-box .ui-button-large {
    width: 100%;
    /*上書き*/
}

.hawaii-senmon .news-container {}

.hawaii-senmon .news-box {}

.hawaii-senmon .news-item {}

.hawaii-senmon .news-top {}

.hawaii-senmon .news-top {}

.hawaii-senmon .news-date {}

.hawaii-senmon .category-box {}

.hawaii-senmon .category-item {}

.hawaii-senmon .category-item p {
    padding: var(--ui-static-gap-xxxs) var(--ui-static-gap-xs);
    background: var(--ui-gray-25);
    line-height: 1;
    border-radius: var(--ui-radius-S);
}

.hawaii-senmon .news-txt {}


/*ハワイ情報*/

.hawaii-senmon .movie-container {}

/*商品を探す*/

.hawaii-senmon .hawaii-recommend-wrap {
    /*width: 70%;*/
    margin: auto;
}

.hawaii-senmon .hawaii-recommend-wrap .hawaii-recommend-box {
    width: 47%;
}
.hawaii-senmon .hawaii-recommend-wrap .hawaii-recommend-box .cmp-button{
    width: 100%;
}

.hawaii-senmon .hawaii-link-list.ui-link-list .cmp-container {
    display: -webkit-box;
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--ui-space-S);
    row-gap: var(--ui-space-S);
}

/*打消し*/
.hawaii-senmon .hawaii-link-list.ui-link-list .cmp-container .ui-text-link-with-border .cmp-text-link {
    border: none;
    border-radius: inherit;
}

/*上書き*/
.hawaii-senmon .hawaii-link-list.ui-link-list .cmp-container .ui-text-link-with-border {
    border: var(--ui-border-solid-S);
    border-radius: var(--ui-radius-M);
}

/*modalウィンドウ*/

/* モーダルの基本スタイル（初期状態は非表示） */
.hawaii-senmon .hawaii-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* グレー背景（オーバーレイ） */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* 表示時のクラス */

.hawaii-modal.is-open {
    display: flex;
}

.hawaii-modal:not(.is-open) {
    display: none;
}

/* モーダルの中身 */
/*.hawaii-modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
}

/* 背景スクロール禁止用クラス */

body.hawaii-modal-open {
    overflow: hidden;
}

html.hawaii-modal-open {
    overflow: hidden;
}

.hawaii-senmon .hawaii-modal-content {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    min-width: 300px;
    width: 1100px;
    padding: var(--ui-space-M);
    overflow: scroll;
    height: 90dvh;
}

.hawaii-senmon .modal-reservation .hawaii-modal-close-buttom button {
    width: 100%;
}

.hawaii-senmon .reservation-shop {
    padding: var(--ui-space-M);
    background: var(--ui-gray-30);
}

.hawaii-senmon .modal-reservation-ttl {
    font-size: var(--ui-static-txt-xl);
}

.hawaii-senmon .modal-reservation .staff-name {
    font-size: var(--ui-static-txt-xl);
}

.hawaii-senmon .reservation-set {}

.hawaii-senmon .button-100 a.cmp-button {
    width: 100%;
}

.hawaii-senmon .button-reservation {
    width: 50%;
}

.hawaii-senmon .button-reservation a.cmp-button {
    width: 100%;
}

/* 固定ナビ */
.hawaii-senmon .fixed-nav {
    position: fixed;
    width: 100%;
    left: 0%;
    bottom: -105px;
    z-index: 999;
    opacity: 0;
    /* 初期状態は透明 */
    visibility: hidden;
    /* 隠れている間はクリック判定もなくす */
    transition: bottom 0.6s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.6s ease-out,
        visibility 0.6s;
}

.hawaii-senmon .fixed-nav.is-show {
    bottom: 1%;
    opacity: 1;
    /* 不透明にする */
    visibility: visible;
    /* 表示状態にする */
}

.hawaii-senmon .fixed-nav-inner .nav-item p:before {
    content: "";
    width: 55px;
    height: 55px;
    margin: 0px auto;
}


.hawaii-senmon .fixed-nav-inner {
    width: 100%;
    width: 680px;
    margin: auto;
    padding: 4px 32px;
    z-index: 100;
    background: #ffffff;
    border-radius: 100px;
    border: solid 2px #555;
}

.hawaii-senmon .fixed-nav-inner .nav-item p {
    font-size: 14px;
}

.hawaii-senmon .fixed-nav-inner .ui-container-space-column-basic>.container>.cmp-container {
    column-gap: var(--ui-space-XS);
}

.hawaii-senmon .fixed-nav-inner .nav-inner .cmp-container {
    border-radius: inherit;
    box-shadow: inherit;
    background: inherit;
}


/*スタッフ詳細*/
.hawaii-senmon .self-introduction-card {}

.hawaii-senmon .self-introduction-catch {
    justify-self: center;
}

.hawaii-senmon .self-introduction .staff-txt-box {
    font-size: var(--ui-typography-S);
    line-height: 21px;
}

.ui-container-main-visual-basic-no-image.self-introduction-bg>.container>.cmp-container {
    padding: var(--ui-space-L) 0;
}

.ui-container-main-visual-basic-no-image.self-introduction-bg .ui-title .cmp-title__text {
    font-weight: normal;
}

.hawaii-senmon .self-introduction-details {}

.hawaii-senmon .self-introduction-q.ui-title .cmp-title__text {
    color: var(--ui-sky-blue-80);
}

.hawaii-senmon .self-introduction-q .ui-title .cmp-title__text {
    color: var(--ui-sky-blue-80);
}

.hawaii-senmon .self-introduction-a {}


.hawaii-senmon .self-introduction-a .self-introduction-qa-txt {}


/*.hawaii-senmon .self-introduction-photo {
    width: 60%;
}*/
/*詳細ページのみ有効*/
.hawaii-senmon .hawaii-senmon-stafflist .self-introduction-card .self-introduction {
    width: 60%;
    margin: auto;
}

/*詳細ページのみ有効*/
.hawaii-senmon .hawaii-senmon-stafflist .self-introduction-card .staff-card .box-buttom {
    display: none;
}

/*.hawaii-senmon .self-introduction-box-txt {
    width: 60%;
}*/


/*トップへ戻るボタン*/
.hawaii-senmon .page-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    z-index: 999;
    transition: .2s ease-out;
    bottom: 24px;
    right: 24px;
}

.hawaii-senmon .page-top-button {
    display: flex;
    border: none;
    outline: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: .2s ease-out;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(105, 113, 128, .5);
    outline: none;
    border: none;
    width: 40px;
    height: 40px;
}

.hawaii-senmon .page-top-button::after {
    content: "\e881";
    font-family: his-icons;
    font-size: 40px;
    line-height: 1;
    text-align: center;
    color: #fff;
}


/*渋谷特設アナウンス*/
.hawaii-senmon .shibuya-yoyaku-ttl {}

.hawaii-senmon .shibuya-yoyaku-txtbox {}




.hawaii-senmon .shibuya-yoyaku-ttl.ui-title .cmp-title__icon {
    justify-content: center;
    background-color: var(--ui-unleash-blue-90);
    padding: 8px;
    position: relative;
}

.hawaii-senmon .shibuya-yoyaku-ttl.ui-title .cmp-title__text {
    color: #fff;
}

.hawaii-senmon .shibuya-yoyaku-txtbox {
    padding: var(--ui-space-XS);
    background: var(--ui-static-sky-blue-20);
}

.hawaii-senmon .shibuya-yoyaku-ttl .icon-travel:before {
    content: "";
    width: 60px;
    background: url(/content/dam/hisj/branch/hawaii/assets/common/images/icon_shibuya.png);
    height: 63px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -53px;
}
 @media screen and (max-width: 1100px) {
        .hawaii-senmon .hawaii-modal-content {
            width: 90vw;
        }
    }
@media screen and (max-width: 767px) {

    /*ナビ*/
    .hawaii-senmon .nav-item p:before {
        content: "";
        width: 70px;
        height: 70px;
        display: block;
        margin: 0px auto 0px;
    }

    .hawaii-senmon .nav-item p {
        font-size: 16px;
    }

    .hawaii-senmon .hawaii-nav-container {
        width: 90%;
    }

    /*ハワイ商品をさがす*/
    .hawaii-senmon .hawaii-recommend-wrap {
        width: 100%;
    }

    .hawaii-senmon .hawaii-recommend-wrap .hawaii-recommend-box {
        width: 100%;
    }

    .hawaii-senmon .hawaii-link-list.ui-link-list .cmp-container {
        display: -webkit-box;
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: var(--ui-space-XS);
    }

    /*modal*/
    .hawaii-senmon .hawaii-modal-content {
        position: relative;
        background-color: #fff;
        border-radius: 8px;
        /*width: 90%;*/
        padding: var(--ui-space-XS) var(--ui-space-XS);
        overflow: scroll;
        height: 90dvh;
        max-width: 90vw;
        margin: auto;
    }

   

    .hawaii-senmon .modal-reservation-ttl {
        font-size: var(--ui-static-txt-l);
    }

    .hawaii-senmon .modal-reservation .staff-name {
        text-align: center;
        font-size: var(--ui-static-txt-l);
    }

    .hawaii-senmon .button-reservation {
        width: 100%;
    }

    .hawaii-senmon .reservation-shop {
        padding: var(--ui-space-S);
    }


    /*固定ナビ*/
    .hawaii-senmon .fixed-nav-inner {
        width: 100%;
        margin: auto;
        padding: 0% 2%;
        border-radius: 0px;
        border: inherit;
    }

    .hawaii-senmon .fixed-nav-inner .ui-container-col-sm-2>.container>.cmp-container {
        grid-template-columns: repeat(4, 1fr);
    }


    .hawaii-senmon .fixed-nav-inner .nav-item.nav-hawaii-info {
        display: none;
    }

    .hawaii-senmon .fixed-nav-inner .nav-item.nav-hawaii-search {
        display: none;
    }

    .hawaii-senmon .fixed-nav.is-show {
        opacity: 1;
        bottom: 0%;
    }

    .hawaii-senmon .fixed-nav-inner .nav-item p {
        font-size: var(--ui-typography-XS);
    }

    /*店舗情報*/
    .hawaii-senmon .shop-photo .cmp-container {
        height: inherit;
        aspect-ratio: 16 / 9;
    }

    .ui-container.shop-photo.has-bg-img>.container>.cmp-container {
        background-size: cover;
    }

    /*スタッフ詳細*/

    .hawaii-senmon .self-introduction-card .staff-button-reserve {
        width: 100%;
    }

    /*.hawaii-senmon .self-introduction-photo {
        width: 100%;
    }

    .hawaii-senmon .self-introduction-box-txt {
        width: 100%;
    }*/
    /*詳細ページのスタッフ各人エリアのみ有効*/

    .hawaii-senmon .hawaii-senmon-stafflist .self-introduction-card .self-introduction {
        width: 100%;

    }

    /*トップへ戻るボタン*/
    .hawaii-senmon .page-top {
        bottom: 150px;

    }

    /*スマホ時の固定ナビ分のフッターpadding追加*/
    .footer {
        padding-bottom: 150px;
    }
}

@media screen and (max-width: 766px) {
    .hawaii-senmon .nav-inner .cmp-container {
        border-radius: 0px;
        box-shadow: none;
    }

    .hawaii-senmon .hawaii-nav-main {
        /*box-shadow: var(--ui-drop-shadow-1-box);*/
    }

    .hawaii-nav-main .ui-container-item.nav-item {
        border-radius: 4px;
        /*outline: rgb(107 169 255) solid 2px;
        outline-offset: 1px;*/
        background: #e0edff;
    }

    .hawaii-senmon .nav-item p {
        font-size: 14px;
    }



    .hawaii-senmon .hawaii-nav-container .ui-container-space-column-basic>.container>.cmp-container {
        /*-webkit-column-gap: 0px;
    -moz-column-gap: 0px;
    column-gap: 0px;*/
    }

    .hawaii-senmon .hawaii-nav-container .ui-container-space-row-basic>.container>.cmp-container {
        /*row-gap: 0px;*/
    }

    .hawaii-senmon .fixed-nav .ui-container-col-sm-3>.container>.cmp-container {
        grid-template-columns: repeat(4, 1fr);
    }
     .hawaii-senmon .reservation-set .ui-image .cmp-image .cmp-image__image {
        width: 60%;
        margin: auto;
    }
}

@media screen and (max-width: 481px) {
       .hawaii-senmon .nav-item p:before {
        width: 60px;
        height: 60px;
    }

    .hawaii-senmon .bnr-slide-wrap .bnr-slide-box {
        width: 100%;

    }


}