@charset "utf-8";
:root {
    --color-gray01: #907578;
    --color-pink01: #e84472;
    --color-green01: #1a773a;
    --color-green02: #81ba36;
    --color-orange01: #f2771d;
    --color-yellow01: #fbd870;
    --color-yellow02: #ffea00;
    --color-brown01: #6b1400;
}

/*--- common  ---*/
#content-area {
    background: url("../images/hawaiian/bg_body.png") #ffd040 50% 0 / calc(400 * var(--scale-ratio)) calc(400 * var(--scale-ratio));
}
.content-inner {
    background: var(--color-white01);
	font-family: "Murecho", sans-serif;
}
.sec-inner {
	margin: auto;
	width: calc(670 * var(--scale-ratio));
}

/*--- reservation-fixed ---*/
.reservation-fixed.btn {
    padding-top: calc(6 * var(--scale-ratio));
    background: var(--color-white01);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
}
.reservation-fixed.btn a {
    background: url("../images/hawaiian/btn_bg03.png") repeat 50% 50% / calc(48 * var(--scale-ratio)) calc(71 * var(--scale-ratio));
    color: var(--color-white01);
    text-decoration: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100 * var(--scale-ratio));
}
.reservation-fixed.btn .btn-txt {
    padding-bottom: calc(2 * var(--scale-ratio));
    font-weight: bold;
    font-size: 150%;
    letter-spacing: 0.025em;
    line-height: 1;
}
.reservation-fixed.btn a::after {
    content: "";
    margin-left: calc(10 * var(--scale-ratio));
    background: url("../images/hawaiian/btn_ico01.png") no-repeat 50% 50% / contain;
    display: inline-block;
    width: calc(34 * var(--scale-ratio));
    height: calc(35 * var(--scale-ratio));
    transition: all 0.5s;
}
.reservation-fixed.btn:hover a::after {
    transform: translateX(5px);
}

/*--- content-top  ---*/
.content-top {
    position: relative;
}
.content-top-title{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(480 * var(--scale-ratio));
}
.content-top-title .title_txt01 {
    position: absolute;
    left: calc(25 * var(--scale-ratio));
    top: calc(70 * var(--scale-ratio));
    z-index: 2;
    display: block;
    width: calc(604 * var(--scale-ratio));
}
.content-top-title .title_txt02 {
    position: absolute;
    right: calc(25 * var(--scale-ratio));
    top: calc(255 * var(--scale-ratio));
    display: block;
    width: calc(443 * var(--scale-ratio));
}
.content-top-title .icon {
    position: absolute;
    right: 0;
    top: calc(95 * var(--scale-ratio));
    display: block;
    width: calc(196 * var(--scale-ratio));
}

/*--- content-head  ---*/
.content-head {
    padding: 0 0 calc(109 * var(--scale-ratio));
}
.lead-2026 {
    margin: calc(-40 * var(--scale-ratio)) calc(-10 * var(--scale-ratio)) calc(10 * var(--scale-ratio));
}
.head-logo {
    margin: 0 auto calc(38 * var(--scale-ratio));
    width: calc(656 * var(--scale-ratio));
}
.head-lead {
    margin: auto;
    width: calc(621 * var(--scale-ratio));
}

/*--- sec-block  ---*/
.sec-block {
    margin-bottom: calc(85 * var(--scale-ratio));
    padding-bottom: calc(160 * var(--scale-ratio));
    background: url("../images/hawaiian/bg_sec_bg01_02.jpg") no-repeat 50% 100% / 100% auto, url("../images/hawaiian/bg_sec_bg01_01.jpg") no-repeat 50% calc(-70 * var(--scale-ratio)) / 100% auto;
    background-color: #fff1e6;
}
.sec-ti-area {
    padding-top: calc(10 * var(--scale-ratio));
    position: relative;
}
.sec-ti-area-art {
    width: calc(192 * var(--scale-ratio));
    position: absolute;
    right: 0;
    top: 0;
}
.sec-block .txt-area {
    margin: calc(70 * var(--scale-ratio)) auto calc(95 * var(--scale-ratio));
    color: var(--color-gray01);
    letter-spacing: 0.01em;
}
.sec-block .txt-area .price {
    margin-top: calc(12 * var(--scale-ratio));
    font-weight: bold;
    font-size: 125%;
}
.sec-block .txt-area .txt_drink {
    margin-top: calc(28 * var(--scale-ratio));
    font-size: 91.66%;
    line-height: 1.63;
}
.sec-block .txt-area .note {
    margin-top: calc(30 * var(--scale-ratio));
    font-weight: 500;
    font-size: 83%;
}
.sec-block .img-area {
    margin-bottom: calc(70 * var(--scale-ratio));
    position: relative;
    width: calc(710 * var(--scale-ratio));
}
.sec-block .img-area::before {
    content: "";
    background: var(--color-white01);
    position: absolute;
    top: calc(10 * var(--scale-ratio));
    width: calc(720 * var(--scale-ratio));
    height: 100%;
}
.sec-block .img-area img {
    position: relative;
    z-index: 1;
}
.sec-block .img-area.-left {
    margin-left: calc(-40 * var(--scale-ratio));
}
.sec-block .img-area.-right {
    margin-right: calc(-40 * var(--scale-ratio));
}
.sec-block .img-area.-left img,
.sec-block .img-area.-left::before {
    border-radius: 0 calc(40 * var(--scale-ratio)) calc(40 * var(--scale-ratio)) 0;
}
.sec-block .img-area.-left::before {
    left: 0;
}
.sec-block .img-area.-right img,
.sec-block .img-area.-right::before {
    border-radius: calc(40 * var(--scale-ratio)) 0 0 calc(40 * var(--scale-ratio));
}
.sec-block .img-area.-right::before {
    right: 0;
}
.sec-block .img-area .img-txt {
    position: absolute;
    z-index: 2;
}
.sec-block .info-area {
    margin-top: calc(105 * var(--scale-ratio));
}
.sec-block .info-area .info-ti {
    margin-bottom: calc(30 * var(--scale-ratio));
    padding: calc(20 * var(--scale-ratio)) 0 calc(25 * var(--scale-ratio));
    background: var(--color-green01);
    position: relative;
    width: calc(710 * var(--scale-ratio));
}
.sec-block .info-area .info-ti.-left {
    margin-left: calc(-40 * var(--scale-ratio));
    padding-left: calc(40 * var(--scale-ratio));
    border-radius: 0 calc(20 * var(--scale-ratio)) calc(20 * var(--scale-ratio)) 0;
}
.sec-block .info-area .info-ti.-right {
    margin-right: calc(-40 * var(--scale-ratio));
    border-radius: calc(20 * var(--scale-ratio)) 0 0 calc(20 * var(--scale-ratio));
}
.sec-block .info-area .info-ti-txt {
    color: var(--color-white01);
    font-size: 125%;
    font-weight: 500;
    line-height: 1.33;
    position: relative;
    z-index: 3;
}
.sec-block .info-area .info-ti-txt em {
    color: var(--color-yellow01);
}
.sec-block .info-area .info-ti-art {
    position: absolute;
    z-index: 2;
}
.info-table,
.info-table .th-long {
    margin: calc(-10 * var(--scale-ratio));
    border-collapse: separate;
    border-spacing: calc(10 * var(--scale-ratio));
    table-layout: fixed;
    width: calc(100% + (20 * var(--scale-ratio)));
}
.info-table .th-long th {
    padding-bottom: calc(15 * var(--scale-ratio));
}
.info-table th {
    padding: calc(15 * var(--scale-ratio)) 0 calc(20 * var(--scale-ratio));
    color: var(--color-white01);
    font-weight: bold;
    font-size: 108.3%;
    text-align: center;
    vertical-align: middle;
}
.info-table th .age {
    font-size: 84.6%;
    line-height: 0.8;
    letter-spacing: 0.1em;
    text-align: center;
    display: block;
}
.info-table .th01 {
    background: var(--color-orange01);
}
.info-table .th02 {
    padding-bottom: calc(15 * var(--scale-ratio));
    background: var(--color-green02);
}
.info-table td {
    padding: calc(15 * var(--scale-ratio)) 0;
    background: var(--color-yellow01);
    color: var(--color-brown01);
    font-size: 108.3%;
    text-align: center;
    vertical-align: middle;
}
.info-table tr:first-child th {
    border-radius: calc(15 * var(--scale-ratio)) 0 0 0;
}
.info-table tr:first-child td:last-child {
    border-radius: 0 calc(15 * var(--scale-ratio)) 0 0;
}
.info-table tr:last-child td:last-child {
    border-radius: 0 0 calc(15 * var(--scale-ratio)) 0;
}
.menu-area {
    margin-top: calc(40 * var(--scale-ratio));
    border-radius: calc(15 * var(--scale-ratio));
    background: var(--color-white01);
}
.menu-area .menu-ti {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(84 * var(--scale-ratio));
}
.menu-area .menu-ti span {
    display: block;
    width: calc(219 * var(--scale-ratio));
}
.menu-area .menu-ti .arrow {
    background: url("../images/btn_ico03.png") no-repeat 50% 50% / contain;
    position: absolute;
    top: 50%;
    right: calc(17 * var(--scale-ratio));
    transform: translateY(-50%) scaleY(-1);
    width: calc(34 * var(--scale-ratio));
    height: calc(34 * var(--scale-ratio));
}
.menu-area.is-open .menu-ti .arrow {
    transform: translateY(-50%);
}
.menu-area .accordion-btn {
    cursor: pointer;
}
.menu-area .accordion-content {
    display: none;
}
.menu-area .menu-content .menu-cover {
    padding: 0 calc(30 * var(--scale-ratio)) calc(30 * var(--scale-ratio));
    display: flex;
    justify-content: space-between;
}
.menu-area .menu-content ul {
    width: calc(50% - 14 * var(--scale-ratio));
}
.menu-area .menu-content li {
    padding-left: 1em;
    color: var(--color-blue01);
    font-size: clamp(12px,3.2vw,24px);
    text-indent: -1em;
    letter-spacing: 0.025em;
    line-height: 1.416;
}
.menu-area .menu-content li:nth-child(n+2) {
    margin-top: 0.58em;
}
.menu-area .menu-content li:before {
    content: "\25CF";
}

/*--- stitch  ---*/
#stitch {
    margin-bottom: calc(35 * var(--scale-ratio));
    background-position-y: 100%, calc(-35 * var(--scale-ratio));
}
#stitch .sec-ti-area {
    margin-bottom: calc(75 * var(--scale-ratio));
}
#stitch .sec-ti-area .sec-ti {
    width: calc(485 * var(--scale-ratio));
}
#stitch .sec-ti-area-art {
    top: calc(-20 * var(--scale-ratio));
}
#stitch .img-area.-stitch01 .img-txt {
    right: calc(-30 * var(--scale-ratio));
    bottom: calc(-60 * var(--scale-ratio));
    width: calc(323 * var(--scale-ratio));
}
#stitch .img-area.-stitch02 .img-txt.-txt01 {
    left: calc(-20 * var(--scale-ratio));
    top: calc(-45 * var(--scale-ratio));
    width: calc(207 * var(--scale-ratio));
}
#stitch .img-area.-stitch02 .img-txt.-txt02 {
    left: calc(-29 * var(--scale-ratio));
    bottom: calc(-72 * var(--scale-ratio));
    width: calc(350 * var(--scale-ratio));
}
#stitch .info-area .info-ti-art {
    top: calc(-40 * var(--scale-ratio));
    right: calc(-35 * var(--scale-ratio));
    width: calc(207 * var(--scale-ratio));
}
#stitch .info-table .th02 {
    width: calc(145 * var(--scale-ratio));
}
#stitch .info-table td {
    width: calc(370 * var(--scale-ratio));
}
#stitch .info-table th[rowspan="3"] {
    border-radius: 0 0 0 calc(15 * var(--scale-ratio));
}

/*--- lunchdinner  ---*/
#lunchdinner {
    background-position-y: 100%, calc(0 * var(--scale-ratio));
}
#lunchdinner .sec-ti-area {
    margin-bottom: calc(60 * var(--scale-ratio));
}
#lunchdinner .sec-ti-area .sec-ti {
    width: calc(415 * var(--scale-ratio));
}
#lunchdinner .sec-ti-area-art {
    top: calc(20 * var(--scale-ratio));
}
#lunchdinner .img-area.-lunchdinner01 {
    margin-bottom: calc(90 * var(--scale-ratio));
}
#lunchdinner .img-area.-lunchdinner01 .img-txt {
    left: calc(22 * var(--scale-ratio));
    bottom: calc(-94 * var(--scale-ratio));
    width: calc(493 * var(--scale-ratio));
}
#lunchdinner .info-area.-lunch {
    margin-top: calc(-25 * var(--scale-ratio));
}
#lunchdinner .info-area.-dinner {
    margin-top: calc(90 * var(--scale-ratio));
}
#lunchdinner .info-ti {
    padding: calc(33 * var(--scale-ratio)) 0 calc(35 * var(--scale-ratio)) calc(135 * var(--scale-ratio));
}
#lunchdinner .info-ti .info-ti-art {
    left: calc(5 * var(--scale-ratio));
    top: calc(-22 * var(--scale-ratio));
    width: calc(121 * var(--scale-ratio));
}
#lunchdinner .info-table tr:last-child th {
    border-radius: 0 0 0 calc(15 * var(--scale-ratio));
}
#lunchdinner .info-table th,
#lunchdinner .info-table .th-long .th-th {
    width: calc(290 * var(--scale-ratio));
}
#lunchdinner .info-table .th-long-cover {
    padding: 0;
}
#lunchdinner .info-table .th-long .th-td {
    width: calc(180 * var(--scale-ratio));
}

/*--- drink  ---*/
#drink {
    margin: calc(100 * var(--scale-ratio)) 0 calc(10 * var(--scale-ratio));
}
#drink .sec-ti-area {
    margin-bottom: calc(90 * var(--scale-ratio));
}
#drink .sec-ti-area .sec-ti {
    padding-top: calc(15 * var(--scale-ratio));
    width: calc(415 * var(--scale-ratio));
}
#drink .sec-ti-area-art {
    top: calc(-60 * var(--scale-ratio));
}
.img-area.-drink01 {
    margin: 0 0 calc(150* var(--scale-ratio)) calc(17* var(--scale-ratio));
    width: auto;
}
.img-area.-drink01::before {
    display: none;
}
.img-area.-drink01 .img01 {
    transform: rotate(-5deg);
    position: relative;
    width: calc(405 * var(--scale-ratio));
}
.img-area.-drink01 .img01 img {
    border-radius: calc(40 * var(--scale-ratio));
}
.img-area.-drink01 .img01::before {
    content: "";
    border-radius: calc(40 * var(--scale-ratio));
    background: var(--color-white01);
    position: absolute;
    top: calc(10 * var(--scale-ratio));
    left: calc(10 * var(--scale-ratio));
    z-index: -1;
    width: 100%;
    height: 100%;
}
.img-area.-drink01 .img-txt {
    left: calc(15 * var(--scale-ratio));
    bottom: calc(-115 * var(--scale-ratio));
    width: calc(259 * var(--scale-ratio));
}
.img-area.-drink01 .img-art {
    position: absolute;
    left: calc(-18 * var(--scale-ratio));
    bottom: calc(15 * var(--scale-ratio));
    width: calc(503 * var(--scale-ratio));
    pointer-events: none;
}
.img-area.-drink01 .img02 {
    position: absolute;
    right: calc(2 * var(--scale-ratio));
    bottom: calc(-55 * var(--scale-ratio));
    width: calc(283 * var(--scale-ratio));
}
.img-area.-drink01 .img02 figcaption {
    padding-left: calc(10* var(--scale-ratio));
    color: var(--color-blue01);
    font-size: 75%;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.01em;
    position: absolute;
    top: calc(100% + 2* var(--scale-ratio));
    left: 0;
    width: 100%;
}

/*--- scroll-slide  ---*/
.scroll-slide {
    margin-bottom: calc(120 * var(--scale-ratio));
    display: flex;
    width: max-content;
    animation: scrollLoop 45s linear infinite;
}
@keyframes scrollLoop {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.scroll-slide-item {
    margin-right: calc(25 * var(--scale-ratio));
    border-radius: calc(30 * var(--scale-ratio));
    overflow: hidden;
    width: calc(640 * var(--scale-ratio));
}

/*--- reservation  ---*/
#reservation {
    margin-bottom: calc(50 * var(--scale-ratio));
    padding-top: calc(55 * var(--scale-ratio));
    background-position: 50% 100%, 50% calc(-50 * var(--scale-ratio));
}
#reservation .sec-ti-area {
    padding-top: 0;
}
#reservation .sec-ti {
    margin: 0 auto calc(45 * var(--scale-ratio));
    width: calc(557 * var(--scale-ratio));
}
.reservation-item {
    padding: calc(37 * var(--scale-ratio)) calc(30 * var(--scale-ratio)) calc(27 * var(--scale-ratio));
    border-radius: calc(35 * var(--scale-ratio));
    background: var(--color-white01);
    box-shadow: 0 calc(8 * var(--scale-ratio)) 0 0 #fee5d0;
}
.reservation-item + .reservation-item {
    margin-top: calc(60 * var(--scale-ratio));
}
.reservation-item .reservation-ti {
    margin: 0 calc(-20 * var(--scale-ratio)) calc(25 * var(--scale-ratio));
    width: calc(650 * var(--scale-ratio));
}
.reservation-item .reservation-ti.-room {
    margin-bottom: calc(-3 * var(--scale-ratio));
}
.reservation-item .txt-area {
    margin: 0;
}
.reservation-item .txt-area.-fdd em {
    color: #c9151e;
}
.reservation-item .txt-area.-fdd .txt-start {
    margin: calc(25 * var(--scale-ratio)) auto 0;
    color: #c9151e;
    background: #ffd338;
    border-radius: calc(60 * var(--scale-ratio));
    font-weight: bold;
    font-size: 108%;
    letter-spacing: 0.08em;
    line-height: calc(60 * var(--scale-ratio));
    text-align: center;
    height: calc(60 * var(--scale-ratio));
}
.reservation-item .txt-area.-fdd .txt-start .number {
    vertical-align: baseline;
    font-size: 115%;
}
.reservation-item .txt-area.-fdd .txt-start .week {
    vertical-align: baseline;
    font-size: 85%;
}
.reservation-item .btn {
    margin-top: calc(40 * var(--scale-ratio));
    border-radius: calc(15 * var(--scale-ratio));
    background: var(--color-white01);
}
.reservation-item .btn a {
    border-radius: calc(15 * var(--scale-ratio));
    background: url("../images/hawaiian/btn_bg01.png") no-repeat 50% 50% / contain;
    color: var(--color-white01);
    text-decoration: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100 * var(--scale-ratio));
}
.reservation-item .btn .btn-txt {
    padding-bottom: calc(2 * var(--scale-ratio));
    font-weight: bold;
    font-size: 150%;
    letter-spacing: 0.025em;
    line-height: 1;
}
.reservation-item .btn a::after {
    content: "";
    background: url("../images/hawaiian/btn_ico01.png") no-repeat 50% 50% / contain;
    right: calc(21 * var(--scale-ratio));
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: calc(34 * var(--scale-ratio));
    height: calc(35 * var(--scale-ratio));
    transition: all 0.5s;
}
.reservation-item .btn:hover a::after {
    transform: translate(5px,-50%);
}
.reservation-item hr {
    margin: calc(70 * var(--scale-ratio)) 0;
    background: #fee5d0;
    border: none;
    height: calc(6 * var(--scale-ratio));
}

/*--- content-ft  ---*/
.content-ft {
    margin-bottom: 0;
    padding: calc(35 * var(--scale-ratio)) 0;
    background: url("../images/hawaiian/bg_sec_bg02_02.jpg") no-repeat 50% 100% / 100% auto, url("../images/hawaiian/bg_sec_bg02_01.jpg") no-repeat 50% calc(-70 * var(--scale-ratio)) / 100% auto;
    background-color: #fffebe;
}
.content-ft .ti-summer01 {
    margin: 0 auto calc(30 * var(--scale-ratio));
    width: calc(576 * var(--scale-ratio));
}
.content-ft .ti-summer02 {
    margin: 0 calc(-20 * var(--scale-ratio))0 calc(-14 * var(--scale-ratio));
    width: calc(704 * var(--scale-ratio));
}
.content-ft .img-area {
    margin: 0;
    border-radius: calc(30 * var(--scale-ratio)) calc(30 * var(--scale-ratio)) 0 0;
    overflow: hidden;
    width: 100%;
}
.content-ft .img-area::before {
    display: none;
}
.content-ft .img-area .ti-summer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: calc(405 * var(--scale-ratio));
}
.content-ft .btn {
    margin-top: calc(30 * var(--scale-ratio));
}
.content-ft .btn a {
    border-radius: calc(60 * var(--scale-ratio));
    background: url("../images/hawaiian/btn_bg02.png") no-repeat 50% 50% / 100% 100%;
    color: var(--color-white01);
    text-decoration: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(120 * var(--scale-ratio));
}
.content-ft .btn .btn-txt {
    padding-bottom: calc(2 * var(--scale-ratio));
    font-weight: bold;
    font-size: 166%;
    letter-spacing: 0.025em;
    line-height: 1;
}
.content-ft .btn a::after {
    content: "";
    background: url("../images/hawaiian/btn_ico02.png") no-repeat 50% 50% / contain;
    right: calc(20 * var(--scale-ratio));
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: calc(34 * var(--scale-ratio));
    height: calc(34 * var(--scale-ratio));
    transition: all 0.5s;
}
.content-ft .btn:hover a::after {
    transform: translate(5px,-50%);
}
.content-ft .art.line {
    margin: calc(60 * var(--scale-ratio)) calc(-40 * var(--scale-ratio)) 0;
    pointer-events: none;
    width: calc(750 * var(--scale-ratio));
}
.sns-block {
    margin-top: calc(140 * var(--scale-ratio));
    padding-bottom: calc(35 * var(--scale-ratio));
}
.sns-block .note-list:first-child li {
    font-size: 83%;
}
#sns {
    margin-top: calc(55 * var(--scale-ratio));
    .snsCap {
        p::before {
            content: "\FF1C";
        }
        p::after {
            content: "\FF1E";
        }
    }
}