.main .wrapMain {
    overflow: unset;
}

.main .wrapMain .wrapCatchphrase {
    width: 210px;
    top: 55.5%;
}

.haruIntroArea {
    text-align: left;
    position: relative;
    padding-bottom: 51px;
    margin-top: -44px;
    padding-top: 34px;
    z-index: 11;
}

.haruIntroArea .inner {
    max-width: 924px;
    margin: 0 auto 0;
    width: 100%;
}

.haruIntroArea .subTitle {
    font-size: 37px;
    line-height: 1.2;
    margin-bottom: 1px;
    color: #000;
}

.haruIntroArea .subTitle .strokeText {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: inherit;
    z-index: -1;
    -webkit-text-stroke: 7px #bb452e;
    filter: drop-shadow(5.5px 5.5px 0 #bb452e);
    pointer-events: none;
}

.haruIntroArea .subTitle .mainText {
    position: relative;
    z-index: 1;
}

.haruIntroArea .Introtitle {
    position: relative;
    font-size: 55.15px;
    font-weight: normal;
    color: #ffffff;
    z-index: 1;
    margin-bottom: 41px;
    letter-spacing: 0px;
    line-height: 1.2;
}

.haruIntroArea .Introtitle .strokeText {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: inherit;
    z-index: -1;
    -webkit-text-stroke: 7px #bb452e;
    filter: drop-shadow(5.5px 5.5px 0 #bb452e);
    pointer-events: none;
}

.haruIntroArea .Introtitle .mainText {
    position: relative;
    z-index: 1;
}

.haruIntroArea .Introtitle span span {
    margin-left: 21px;
    font-size: 74px;
    vertical-align: -8px;
}

.haruIntroArea .introText {
    font-size: 24px;
    line-height: 1.75;
    padding: 0 9px;
}

.bgRightTriangle {
    position: relative;
}

.bgRightTriangle::before {
    content: "";
    position: absolute;
    top: 45px;
    right: -1px;
    width: 29.7%;
    aspect-ratio: 380.5/1370;
    background: url(../images/haru/right-triangle.png) no-repeat;
    background-size: 100%;
    z-index: -1;
}

.haruIntroImg {
    text-align: center;
}

.haruIntroImg img {
    max-width: 100%;
    height: auto;
    width: 100%;
}

.haruFoodArea {
    padding: 0;
    margin-top: -75px;
    position: relative;
    z-index: 13;
    padding-bottom: 0;
    z-index: 9;
}

.haruFoodArea .inner {
    max-width: 1217px;
    margin: 0 auto;
    width: 100%;
}

.haruFoodArea .foodMainTitle {
    font-size: 73.7px;
    text-align: right;
    padding: 0px 57px;
    margin-bottom: 56px;
    text-shadow: 9px 9px 12px rgba(0, 0, 0, 0.55);
    color: #fff;
}

.haruFoodArea .haruFoodRow {
    display: flex;
    align-items: center;
    margin-bottom: -3px;
    gap: 11px;
    justify-content: unset;
}

.haruFoodArea .haruFoodRow:last-child {
    margin-bottom: 0;
}

.haruFoodArea .haruFoodRow.rowLeft {
    flex-direction: row-reverse;
}

.haruFoodArea .haruFoodRow .foodImg {
    flex: 1;
    max-width: 663px;
    width: 100%;
    flex-shrink: 0;
    align-self: flex-start;
}

.haruFoodArea .haruFoodRow .foodImg img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.haruFoodArea .haruFoodRow.rowLeft .foodImg {
    margin-left: -213px;
    margin-right: 12px;
    margin-top: -31px;
    max-width: 669px;
    z-index: -1;
}

.haruFoodArea .haruFoodRow .foodContent {
    padding: 0 0;
    display: flex;
    align-self: flex-start;
    flex-direction: row-reverse;
}

.haruFoodArea .haruFoodRow .tag {
    align-self: start;
    margin-left: 19px;
    margin-top: 2px;
    /* box-shadow: 12px 12px 21px rgba(0, 0, 0, 0.7); */
    max-width: 137px;
    transform: translate(-16px, -16px);
}

.haruFoodArea .haruFoodRow .tag img {
    width: 100%;
    aspect-ratio: 137/372;
    display: block;
    height: auto;
}

.haruFoodArea .haruFoodRow.rowLeft .tag {
    max-width: 137px;
}

.haruFoodArea .haruFoodRow .foodContent .foodTitle {
    font-size: 41px;
    line-height: 1.2;
    margin-bottom: 0;
    margin-left: 20px;
    text-align: left;
    writing-mode: vertical-rl;
    height: fit-content;
}

.haruFoodArea .haruFoodRow .foodContent .foodTitle .line {
    display: block;
    padding-top: 5px;
    padding-bottom: 0;
}

.haruFoodArea .haruFoodRow .foodContent .foodTitle .line:last-child {
    text-align: end;
    padding-top: 219px;
}

html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodTitle .line:last-child {
    padding-top: 152px;
}

.haruFoodArea .haruFoodRow .foodContent .foodText {
    font-size: 18px;
    line-height: 1.75;
    writing-mode: vertical-rl;
    padding-top: 41px;
}

html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodTitle {
    writing-mode: unset;
    width: 160px;
    padding-top: 32px;
}

html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodTitle .line {}

html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodTitle .line:last-child {
    padding-top: 0;
    text-align: left;
}

html[lang="en"] .haruFoodArea .haruFoodRow.rowLeft .foodContent .foodTitle .line:last-child {}

html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodText {
    writing-mode: unset;
    width: 182px;
}

html[lang="en"] .haruFoodArea .haruFoodRow.haruFoodRow.rowLeft .foodContent .foodText {}

html[lang="en"] .haruFoodArea .haruFoodRow.haruFoodRow.rowLeft .foodContent .foodText br.pc {
    display: none;
}

.haruFoodArea .haruFoodRow.rowLeft .foodContent .foodTitle .line:last-child {
    padding-top: 141px;
}

.haruFoodArea .haruFoodRow.haruFoodRow.rowLeft .foodContent .foodText {
    padding-bottom: 30px;
}

.haruRecommendedArea {
    padding: 124px 0 43px;
    background: url(../images/haru/bg-marble.png) center top / cover no-repeat;
    position: relative;
    /* clip-path: polygon(0 2.5vw, 100% 0, 100% 100%, 0 100%); */
    margin-top: -80px;
}

.haruRecommendedArea.bgRainBow:after {
    display: none;
}

.haruRecommendedArea .inner {
    max-width: 957px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
}

.haruRecommendedArea .recommendedTitle {
    font-size: 66.7px;
    margin-bottom: 40px;
    color: #fff;
    letter-spacing: 0;
    text-shadow: 8px 8px 15px rgba(0, 0, 0, 0.9);
    font-weight: bold;
}

.haruRecommendedArea .recommendedTitle span {
    font-size: 84.2px;
}

.haruRecommendedArea .haruHighlight {
    display: flex;
    /* align-items: center; */
    margin-bottom: 17px;
}

.haruRecommendedArea .haruHighlight .img {
    width: 100%;
    max-width: 363px;
}

.haruRecommendedArea .haruHighlight .img img {
    width: 100%;
    display: block;
}

.haruRecommendedArea .haruHighlight .highlightContent {
    margin-top: -20px;
    max-width: 513px;
    width: 100%;
}

.haruRecommendedArea .haruHighlight .highlightTitle {
    font-size: 41.4px;
    margin-bottom: 21px;
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
    padding-left: 69px;
    line-height: 1;
    text-align: left;
    color: #000;
    font-weight: bold;
}

.haruRecommendedArea .haruHighlight .highlightTitle span {
    font-size: 53.71px;
}

.haruRecommendedArea .haruHighlight .haruListWrap {
    padding-left: 51px;
}

.haruRecommendedArea .haruHighlight .haruList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    gap: 15px 34px;
    display: grid;
    grid-template-columns: auto auto;
}

.haruRecommendedArea .haruHighlight .haruList li {
    font-size: 20px;
    font-weight: normal;
    line-height: 1;
    color: #000;
    flex: 0 0 44.8%;
}

.haruRecommendedArea .haruPlanList {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: clamp(9px, 2.3vw, 29px);
}

.haruRecommendedArea .haruPlanList .planItem {
    width: 100%;
    max-width: 360px;
    position: relative;
}

.haruRecommendedArea .haruPlanList .planItem a {
    transition: 0.3s;
    display: block;
}

.haruRecommendedArea .haruPlanList .planItem:nth-child(1) {
    z-index: 1;
    margin-right: -1.7%;
}

.haruRecommendedArea .haruPlanList .planItem:nth-child(2) {
    z-index: 2;
    align-self: self-start;
}

.haruRecommendedArea .haruPlanList .planItem:nth-child(3) {
    z-index: 1;
    margin-left: -2.1%;
    /* transform: translateX(-9px); */
}

.haruRecommendedArea .haruPlanList .planItem:nth-child(1),
.haruRecommendedArea .haruPlanList .planItem:nth-child(3) {
    margin-top: 58px;
}

.haruRecommendedArea .haruPlanList .planItem img {
    width: 100%;
    display: block;
}

.haruInfo {
    padding: 68px 0 82px;
    margin: 0 auto;
    width: 100%;
}

.haruInfo .inner {
    max-width: 880px;
}

.haruInfo .infoMainTitle {
    font-size: 60px;
    text-align: center;
    margin-bottom: 45px;
    text-shadow: 9px 9px 14px rgba(0, 0, 0, 0.35);
}

.haruInfo .infoList {
    margin: 0 0 52px;
}

.haruInfo .infoList li {
    display: flex;
    border-bottom: 2px solid #211815;
    padding: 37px 109px 19.9px 149px;
}

.haruInfo .infoList li .infoTitle {
    width: 218px;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 600;
    padding-right: 30px;
    line-height: 1.71;
    text-align: left;
}

.haruInfo .infoList li .infoText {
    /* flex: 1; */
    line-height: 1.71;
    font-size: 20px;
    width: calc(100% - 220px);
}

.haruInfo .infoMap {
    width: 100%;
    max-width: 548px;
    margin: 0 auto;
}

.haruInfo .infoMap iframe {
    width: 100%;
    height: 359px;
    border: 0;
}

.haruCta {
    padding: 128px 0 194px;
    background-image: url("../images/haru/cta-bg.png");
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #fff;
}

.haruCta .ctaTitle {
    font-size: 60px;
    margin-bottom: 23px;
}

.haruCta .ctaText {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 42px;
}

.haruCta .ctaBtns {
    display: flex;
    justify-content: center;
    gap: 28px;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.haruCta .ctaBtns .btnLink {
    margin: 0;
}

.btnLink.btnPhone a .txtBtnLink {
    padding-right: 0;
}

.btnLink.btnPhone a .txtBtnLink::after {
    display: none;
}

.haruCta .ctaBtns .btnLink a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 66px;
    padding: 0 0;
    line-height: 1;
    font-size: 30px;
    text-decoration: none;
    border: 2px solid #fff;
    background: #fff;
    color: #000;
    transition: 0.3s;
}

.haruCta .ctaBtns .btnLink.btnPhone a {
    font-weight: normal;
}

.haruCta .ctaBtns .btnLink.btnPhone a img {
    margin-right: 17px;
    width: 30px;
    transform: translate(12px, 3px);
}

.haruCta .ctaBtns .btnLink.btnReserve a {
    background: #e60012;
    border-color: #e60012;
    color: #fff;
}

.haruFoodArea.bgRainBow:after {
    bottom: 205px;
    top: unset;
    right: -141px;
    background-position: bottom;
    z-index: -2;
}

.haruFoodArea.bgDiamond::before {
    bottom: unset;
    top: -102px;
    width: 497.3px;
    left: -149px;
}

/* .haruRecommendedArea.bgRainBow::after {
    content: "";
    position: absolute;
    top: 170px;
    right: -222px;
    width: 881px;
    height: 100%;
    background: url("../images/haru/bg-rainbow-2.png") center no-repeat;
    background-size: 100%;
    z-index: 0;
} */
.haruInfo.bgRainBow::after {
    background: url("../images/haru/bg-rainbow-3.svg") center no-repeat;
    background-size: 100%;
    background-position: bottom;
    width: 1031px;
    right: -478px;
    top: 18px;
}

.haruInfo.bgDiamond::before {
    background: url("../images/haru/bg-diamond-2.png") center no-repeat;
    background-size: 100%;
    top: 199px;
    left: -185px;
    width: 555px;
    height: 555px;
}

/* Safari */
.Safari .haruIntroArea .Introtitle,
.Safari .haruFoodArea .foodMainTitle,
.Safari .haruRecommendedArea .recommendedTitle,
.Safari .haruInfo .infoMainTitle {
    font-weight: normal;
}

@media (min-width: 769px) {
    .haruIntroArea .introText {
        padding: 0 60px 0 9px;
    }

    .haruCta .ctaBtns .btnLink.btnReserve a:hover {
        background: #000;
        border-color: #000;
    }

    .haruCta .ctaBtns .btnPhone a {
        pointer-events: none;
    }

    .haruFoodArea .haruFoodRow.rowRight .foodContent {
        margin-left: -41px;
    }

    .haruRecommendedArea .haruHighlight .haruList li {
        flex: 0 0 43.3%;
    }

    .haruRecommendedArea .recommendedTitle {
        padding-left: 25px;
    }

    .haruRecommendedArea .haruHighlight {
        padding-left: 20px;
    }

    .haruRecommendedArea .haruPlanList .planItem a:hover {
        transform: translateY(8px);
    }

    .haruInfo .infoList li .infoText a {
        pointer-events: none;
    }

    html[lang="en"] .haruFoodArea .foodMainTitle {
        line-height: 1.2;
    }

}

@media (max-width: 1140px) and (min-width: 769px) {
    html[lang="en"] .haruIntroArea {
        margin-top: 7.8vw;
    }

}

@media (max-width: 1160px) and (min-width: 769px) {
    .haruIntroArea {
        margin-top: 0;
    }
}

@media (max-width: 1100px) and (min-width: 769px) {
    .haruFoodArea {
        margin-top: -6vw;
    }

    .haruRecommendedArea .recommendedTitle {
        padding-left: 0;
    }

    .haruRecommendedArea .haruHighlight {
        padding-left: 0;
    }

    .haruRecommendedArea .haruHighlight .highlightTitle {
        padding-left: clamp(10px, 2vw, 45px);
    }

    .haruRecommendedArea .haruHighlight .haruListWrap {
        padding-left: clamp(10px, 2vw, 45px);
    }

    .haruRecommendedArea .haruHighlight .haruList {
        flex-wrap: wrap;
        gap: 1vw 2%;
        display: flex;
    }

    .haruRecommendedArea .haruPlanList {
        padding: 0 clamp(9px, 1.3vw, 19px) 0 clamp(9px, 2.3vw, 29px);
    }

    .haruRecommendedArea .haruHighlight .haruList li {
        flex: initial;
        width: 49%;
        line-height: 1.5;
        font-size: clamp(15px, 1.8vw, 20px);
    }

    .haruInfo .infoList li {
        padding: 37px 9vw 19.9px 9vw;
    }
}

@media (max-width: 1000px) and (min-width: 769px) {
    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodTitle {
        font-size: 36px;
        width: 134px;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodText {
        width: 200px;
        font-size: 16px;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow .tag {
        max-width: 125px;
    }

    .haruFoodArea .haruFoodRow.rowRight {
        margin-bottom: 30px;
    }

    .haruFoodArea .haruFoodRow .foodImg {
        margin-left: -70px;
    }

    .haruRecommendedArea .haruHighlight .img {
        max-width: 41.66vw;
    }

    .haruFoodArea .haruFoodRow.rowLeft .foodImg {
        margin-left: -15.77vw;
        margin-right: -4.22vw;
        align-self: flex-start;
    }

    .haruFoodArea .haruFoodRow .foodImg {
        margin-left: -90px;
        max-width: initial;
        width: 47%;
    }

    .haruFoodArea .haruFoodRow.rowRight .foodContent {
        margin-left: -2vw;
        margin-right: -3vw;
        width: 55%;
    }

    .haruFoodArea .haruFoodRow .tag,
    .haruFoodArea .haruFoodRow.rowLeft .tag {
        min-width: clamp(80px, 13.7vw, 137px);
        max-width: clamp(80px, 13.7vw, 137px);
    }

    .haruFoodArea .haruFoodRow .foodContent .foodTitle {
        font-size: clamp(30px, 4.1vw, 41px);
        margin-left: 2vw;
    }

    .haruFoodArea .haruFoodRow .foodContent .foodText {
        font-size: clamp(16px, 1.8vw, 18px);
    }

    .haruFoodArea .haruFoodRow .foodImg {
        margin-top: 3vw;
    }

    .haruFoodArea .haruFoodRow.rowLeft .foodImg {
        margin-left: -15.77vw;
        margin-right: -7.22vw;
    }
}

@media (max-width: 900px) and (min-width: 769px) {
    .haruFoodArea .haruFoodRow {
        gap: 0;
    }

    html[lang="zh-CN"] .haruFoodArea .haruFoodRow .foodContent .foodText {
        max-height: 410px;
    }

    .haruFoodArea .foodMainTitle {
        padding: 0 25px;
        font-size: 8.18vw;
    }
}


@media (max-width: 768px) {
    .main .wrapMain .wrapCatchphrase {
        width: clamp(69px, 15.333vw, 117.76px);
        top: 18.7%;
        left: 42px;
    }

    .main .wrapMain .mainPhoto img {
        aspect-ratio: 450/ 314;
    }

    .haruIntroArea {
        padding-bottom: clamp(18px, 4vw, 30.7px);
        margin-top: 0;
    }

    .haruIntroArea .inner {
        padding: 0 9.8%;
    }

    .haruIntroArea .subTitle {
        font-size: clamp(16.7px, 3.71vw, 28.5px);
        margin-bottom: clamp(-3.4px, -0.44vw, -2px);
    }

    .haruIntroArea .Introtitle {
        font-size: clamp(25px, 5.56vw, 42.7px);
        margin-bottom: clamp(20px, 4.44vw, 34.1px);
        letter-spacing: 0.4px;
    }

    .haruIntroArea .Introtitle .strokeText {
        -webkit-text-stroke: 5px #bb452e;
        filter: drop-shadow(2.5px 2.5px 0 #bb452e);
    }

    .haruIntroArea .Introtitle span span {
        font-size: clamp(34px, 7.56vw, 58px);
        vertical-align: -1px;
        margin-left: clamp(10px, 2.22vw, 17.1px);
    }

    .haruIntroArea .introText {
        font-size: clamp(12px, 2.44vw, 18.8px);
        padding: 0 clamp(5px, 1.11vw, 8.5px);
        line-height: 1.76;
    }

    .haruFoodArea {
        margin-top: clamp(-51.2px, -6.67vw, -30px);
    }

    .haruFoodArea .inner {
        padding: 0;
    }

    .haruFoodArea .foodMainTitle {
        font-size: clamp(27px, 6vw, 46.1px);
        padding: 0 clamp(42px, 9.33vw, 71.7px);
        letter-spacing: clamp(-2px, -0.27vw, -1.2px);
        margin-bottom: clamp(4px, 0.89vw, 6.8px);
        text-shadow: clamp(3px, 0.67vw, 5.1px) clamp(3px, 0.67vw, 5.1px) clamp(2px, 0.44vw, 3.4px) rgba(0, 0, 0, 0.65);
    }

    .haruFoodArea .haruFoodRow.rowRight .foodImg {
        float: left;
        width: 58.89vw;
        margin-top: clamp(-131.4px, -17.11vw, -77px);
        transform: translate(clamp(8px, 1.78vw, 13.7px),
            clamp(9px, 2vw, 15.4px));
    }

    .haruFoodArea .haruFoodRow {
        padding-right: 3%;
        width: 100%;
    }

    .haruFoodArea .haruFoodRow.rowLeft {
        padding-left: 6%;
        padding-right: 0;
    }

    .haruFoodArea .haruFoodRow .foodContent .foodText {
        font-size: clamp(12px, 2.67vw, 20.5px);
        margin-left: clamp(-126.3px, -16.44vw, -74px);
        padding-top: clamp(33px, 7.333vw, 56.32px);
    }

    .haruFoodArea .haruFoodRow.haruFoodRow.rowLeft .foodContent .foodText {
        margin-left: 0;
    }

    .haruFoodArea .haruFoodRow .foodContent {
        padding: clamp(22px, 4.89vw, 37.5px) 0 0;
    }

    .haruFoodArea .haruFoodRow.rowLeft .foodContent {
        margin-right: -30px;
    }

    .haruFoodArea .haruFoodRow .foodContent .foodTitle {
        font-size: clamp(25px, 5.56vw, 38px);
        margin-left: clamp(16px, 3.56vw, 27.3px);
        padding-top: clamp(15px, 3.33vw, 25.6px);
        line-height: 1.1;
        letter-spacing: -1.7px;
    }

    .haruFoodArea .haruFoodRow.rowLeft .foodContent .foodTitle {
        margin-left: clamp(10px, 2.26vw, 27.3px);
    }

    .haruFoodArea .haruFoodRow .tag,
    .haruFoodArea .haruFoodRow.rowLeft .tag {
        max-width: clamp(82.8px, 17.888vw, 136.53px);
        margin-left: 0;
        margin-top: 0;
        transform: translate(2px, 0px);
    }

    

    .haruFoodArea .haruFoodRow.rowLeft .tag {
        transform: translate(0);
    }

    .haruFoodArea .haruFoodRow .tag img {
        aspect-ratio: 83/ 226;
    }

    .haruFoodArea .haruFoodRow.rowLeft .tag img {
        aspect-ratio: 83/ 220;
    }

    

    .haruFoodArea .haruFoodRow .foodContent .foodTitle .line {
        padding-top: 0;
    }

    .haruFoodArea .haruFoodRow .foodContent .foodTitle .line:last-child {
        padding-top: clamp(126px, 28vw, 215px);
    }

    .haruFoodArea .haruFoodRow.rowLeft {
        margin-top: clamp(-22.2px, -2.89vw, -13px);
    }

    .haruFoodArea .haruFoodRow.rowLeft .foodImg {
        max-width: unset;
        width: 67.11vw;
        margin-top: -52.9vw;
        margin-right: -20.32vw;
        margin-left: -9.87vw;
        align-self: unset;
    }

    .haruFoodArea .haruFoodRow.rowLeft .foodContent .foodTitle .line:last-child {
        padding-top: clamp(76px, 16.89vw, 129.7px);
        padding-bottom: clamp(48px, 10.67vw, 81.9px);
    }

    .haruRecommendedArea {
        padding: clamp(34px, 7.56vw, 58px) 0 clamp(23px, 4.22vw, 32.4px);
        background-size: 100%;
        margin-top: clamp(-58px, -7.56vw, -34px);
        background: url('../images/haru/bg-marble-sp.png') no-repeat bottom center/ cover;
        background-size: cover;
    }

    .haruRecommendedArea .inner {
        padding: 0 10%;
    }

    .haruRecommendedArea .recommendedTitle {
        font-size: clamp(24px, 5.33vw, 41px);
        margin-bottom: clamp(16px, 3.56vw, 27.3px);
        text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.9);
    }

    .haruRecommendedArea .recommendedTitle span {
        font-size: clamp(30.1px, 6.69vw, 51.4px);
    }

    .haruRecommendedArea .haruHighlight .highlightTitle {
        font-size: clamp(19px, 4.22vw, 32.4px);
        padding-right: clamp(18px, 4vw, 25px);
        padding-left: clamp(16px, 3.56vw, 22px);
        letter-spacing: clamp(1.1px, 0.24vw, 1.9px);
        padding-bottom: clamp(9px, 2vw, 15.4px);
        margin-bottom: clamp(10px, 2.22vw, 17.1px);
        width: fit-content;
    }

    .haruRecommendedArea .haruHighlight .highlightTitle span {
        font-size: clamp(24.5px, 5.44vw, 41.8px);
    }

    .haruRecommendedArea .haruHighlight {
        flex-direction: column-reverse;
        padding: 0;
        gap: clamp(30px, 6.67vw, 51.2px);
        margin-bottom: clamp(-22.2px, -2.89vw, -13px);
    }

    .haruRecommendedArea .haruHighlight .img {
        max-width: 100%;
    }

    .haruRecommendedArea .haruHighlight .highlightContent {
        padding-left: 0;
        padding-top: clamp(20px, 4.44vw, 34.1px);
        width: 100%;
        max-width: unset;
    }

    .haruRecommendedArea .haruHighlight .haruListWrap {
        padding-left: 0;
        justify-content: start;
    }

    .haruRecommendedArea .haruHighlight .haruList li {
        font-size: clamp(12px, 2.67vw, 16px);
        flex: 0 0 40%;
        letter-spacing: -0.09px;
    }

    .haruRecommendedArea .haruHighlight .haruList {
        justify-content: start;
        padding-left: clamp(20px, 4.44vw, 24px);
        grid-template-columns: auto auto auto;
        gap: clamp(8.3px, 1.84vw, 14.2px);
    }

    .haruRecommendedArea .haruHighlight .haruList li {
        flex: 0 0 31.7%;
    }

    .haruRecommendedArea .haruPlanList .planItem {
        width: 197px;
        width: 43.778vw;
        margin: 0;
        transform: none;
    }

    .haruRecommendedArea .haruPlanList .planItem:nth-child(1),
    .haruRecommendedArea .haruPlanList .planItem:nth-child(3) {
        margin-top: 0
    }

    .haruRecommendedArea .haruPlanList {
        padding: 0 9.3%;
        transform: translateX(clamp(5px, 1.11vw, 8.5px));
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
        row-gap: 31px;
        margin-top: 34px;
        row-gap: 6.889vw;
        margin-top: 7.566vw;
    }

    .haruRecommendedArea .haruPlanList .planItem:nth-child(2) {
        margin-left: -5.63vw;
        transform: translateY(22.22vw);
    }

    .haruRecommendedArea .haruPlanList .planItem:nth-child(3) {
        transform: translateX(8px);
    }

    .haruInfo {
        padding: clamp(39px, 8.67vw, 66.6px) 0 clamp(28px, 6.22vw, 47.8px);
    }

    .haruInfo .inner {
        padding: 0 10%;
    }

    .haruInfo .infoMainTitle {
        font-size: clamp(32.6px, 7.24vw, 55.6px);
        margin-bottom: 0px;
        text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.35);
    }

    .haruInfo .infoList li {
        border-bottom: 1px solid #211815;
        padding: clamp(21.5px, 4.88vw, 36.7px) clamp(26.7px, 5.57vw, 51.2px)clamp(9.1px, 2.07vw, 20.5px) clamp(26.7px, 5.57vw, 51.2px);
    }

    .haruInfo .infoList {
        margin: clamp(3px, 0.67vw, 5.1px) 0 clamp(28px, 6.22vw, 47.8px);
    }

    .haruInfo .infoList li .infoTitle {
        width: clamp(105px, 23.3vw, 170px);
        order: -1;
        font-size: clamp(12px, 2.67vw, 20.5px);
        padding-right: 10px;
    }

    .haruInfo .infoList li .infoText {
        font-size: clamp(12px, 2.67vw, 20.5px);
        line-height: 1.72;
        width: calc(100% - clamp(105px, 23.3vw, 170px));
    }

    .haruInfo .infoMap {
        width: clamp(297px, 66vw, 548px);
    }

    .haruInfo .infoMap iframe {
        height: auto;
        aspect-ratio: 297.5 / 194.5;
    }

    .haruCta {
        padding: clamp(19px, 4.22vw, 32.4px) 0 clamp(53px, 11.78vw, 90.5px);
    }

    .haruCta .ctaTitle {
        font-size: clamp(30.5px, 6.78vw, 52.1px);
        margin-bottom: clamp(7px, 1.56vw, 11.9px);
    }

    .haruCta .ctaText {
        font-size: clamp(12px, 2.67vw, 20.5px);
        margin-bottom: clamp(16px, 3.56vw, 27.3px);
    }

    .haruCta .ctaBtns {
        gap: clamp(14px, 3.11vw, 23.9px);
        padding: 0 10%;
    }

    .haruCta .ctaBtns .btnLink a {
        font-size: clamp(15px, 3.33vw, 25.6px);
        min-height: clamp(34px, 7.56vw, 58px);
        height: unset;
        padding: clamp(5px, 1.11vw, 8.5px);
        width: 100%;
    }

    .haruCta .ctaBtns .btnLink.btnPhone a img {
        width: clamp(15.5px, 3.44vw, 26.5px);
        margin-right: clamp(8px, 1.78vw, 13.7px);
        transform: translate(clamp(5px, 1.11vw, 8.5px), 1px);
    }

    .haruCta .ctaBtns .btnLink {
        min-width: clamp(145.5px, 32.33vw, 248.3px);
        display: flex;
    }

    .haruCta .btnLink a .txtBtnLink {
        padding-right: clamp(29px, 6.44vw, 49.5px);
    }

    .haruCta .btnLink.btnPhone a .txtBtnLink {
        padding-right: 0;
    }

    .haruCta .btnLink a .txtBtnLink:after {
        width: clamp(19px, 4.22vw, 32.4px);
        height: clamp(7px, 1.56vw, 11.9px);
        top: 54%;
        right: clamp(-10.2px, -1.33vw, -6px);
    }

    html[lang="en"] .haruCta .btnLink a .txtBtnLink:after {
        right: 0vw;
    }

    .haruFoodArea.bgDiamond::before {
        left: clamp(-64.85px, -8.444vw, -38px);
        top: 35%;
        width: clamp(216px, 48vw, 368.64px);
        aspect-ratio: 1/1;
    }

    .haruFoodArea.bgRainBow:after {}

    /* .haruRecommendedArea.bgRainBow::after {
        background:url('../images/haru/bg-rainbow.png') no-repeat;
        background-size: 100%;
        width: clamp(242px, 53.778vw, 413.01px);
        left: unset;
        right: -9%;
        top: 56.7%;
    } */
    /* .haruRecommendedArea.bgRainBow::before {
        content: "";
        position: absolute;
        top: 84.5%;
        right: -12.8%;
        height: 100%;
        background:url('../images/haru/bg-rainbow.png') no-repeat;
        background-size: 100%;
        width: clamp(166px, 36.889vw, 283.31px);
    } */
    .haruInfo.bgDiamond::before {
        width: clamp(234px, 52vw, 399.36px);
        left: -19.5%;
        top: -21.2%;
    }

    .haruInfo.bgRainBow::after {
        width: clamp(541px, 120.222vw, 923.31px);
        right: -64%;
        top: 1.8%;
    }

    .bgRightTriangle::before {
        top: 0px;
        width: 35.4%;
    }
}

@media (max-width: 430px) {
    .haruIntroArea .inner {
        padding: 0 4%;
    }

    .haruIntroArea .subTitle {
        margin-bottom: 5px;
    }

    .haruFoodArea .haruFoodRow {
        padding-right: 4%;
        justify-content: flex-end;
    }

    .haruFoodArea .haruFoodRow.rowRight .foodImg {
        width: 54.8vw;
    }

    .haruFoodArea .haruFoodRow.rowLeft {
        margin-top: 0;
        padding-left: 4%;
    }

    .haruRecommendedArea .inner {
        padding: 0 4%;
    }

    .haruRecommendedArea .haruPlanList {
        padding: 0 4%;
    }

    .haruRecommendedArea .haruPlanList .planItem {
        width: 49vw;
    }

    .haruInfo .inner {
        padding: 0 4%;
    }

    .haruInfo .infoList li {
        padding: clamp(21.5px, 4.88vw, 36.7px) clamp(22px, 5.57vw, 51.2px) clamp(9.1px, 2.07vw, 20.5px) clamp(22px, 5.57vw, 51.2px);
    }

    .haruInfo .infoList li .infoTitle {
        width: 80px;
    }

    .haruInfo .infoList li .infoText {
        width: calc(100% - 80px);
    }

    .haruFoodArea .foodMainTitle {
        padding: 0 9%;
    }
}

@media (max-width: 413px) {
    .haruIntroArea {
        margin-top: 25px;
    }
}

@media (max-width: 390px) {
    .haruRecommendedArea .haruHighlight .highlightTitle {
        padding-left: 10px;
    }

    .haruRecommendedArea .haruHighlight .haruList {
        padding-left: 10px;
        grid-template-columns: auto auto;
        gap: clamp(11px, 2.8vw, 24px) clamp(20px, 4.8vw, 30px);
    }
}


/* html[lang="zh-CN"] */
@media (min-width: 769px) {
    html[lang="zh-CN"] .haruFoodArea .haruFoodRow.haruFoodRow.rowLeft .foodContent .foodText {
        max-height: 410px;
    }
}
@media (max-width: 900px) and (min-width: 769px) {
    html[lang="zh-CN"] .haruFoodArea .foodMainTitle {
        font-size: 7.4vw;
    }
}

@media (max-width: 768px) {
    html[lang="zh-CN"] .haruFoodArea .haruFoodRow.rowLeft .foodImg {
        margin-top: clamp(-240px, -52.9vw, -200px);
    }
    html[lang="zh-CN"] .haruFoodArea .haruFoodRow.rowRight .foodImg {
        margin-top: -12vw;
    }
    html[lang="zh-CN"] .haruFoodArea .haruFoodRow .foodContent .foodText {
        max-height: clamp(300px, 66.6vw, 400px);
    }
    html[lang="zh-CN"] .haruFoodArea .haruFoodRow.rowLeft .foodContent .foodTitle .line:last-child {
        padding-top: 39vw;
        padding-bottom: 0;
    }

    html[lang="zh-CN"] .haruFoodArea .haruFoodRow .foodContent .foodText br.pc,
    html[lang="zh-CN"] .haruFoodArea .haruFoodRow.haruFoodRow.rowLeft .foodContent .foodText br {
        display: none;
    }
}

/* html[lang="en"] */
html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodTitle .line br,
html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodText br {
    display: none;
}
html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodTitle .line {
    display: inline;
}
html[lang="en"] .haruRecommendedArea .haruHighlight .haruList li {
    line-height: 1.5;
}
@media (min-width: 769px) {
    html[lang="en"] .haruFoodArea {
        margin-top: clamp(-120px, -9.4vw, -80px);
    }
    html[lang="en"] .haruFoodArea .foodMainTitle {
        font-size: clamp(42px, 4.8vw, 62px);
        padding: 0;
    }
    html[lang="en"] .haruFoodArea .haruFoodRow.rowRight .foodContent,
    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent {
        margin-left: unset;
        flex-direction: column;
        width: 46%;
        position: relative;
    }
    html[lang="en"] .haruFoodArea .haruFoodRow {
        position: relative;
        margin-bottom: 60px;
    }
    html[lang="en"] .haruFoodArea .haruFoodRow .tag {
        position: absolute;
        right: 0;
        top: 0;
    }
    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodTitle {
        width: 71%;
        margin-left: 0;
        font-size: 36px;
    }
    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodText {
        width: 71%;
    }

    html[lang="en"] .haruRecommendedArea .haruHighlight .haruList li {
        font-size: 18px;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow.rowLeft .foodImg {
        max-width: 619px;
    }
    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent {
        width: 52%;
    }

    html[lang="en"] .haruCta .ctaBtns .btnLink a {
        height: 96px;
        padding: 0 20px;
    }
}
@media (max-width: 1100px) and (min-width: 769px) {
    html[lang="en"] .haruFoodArea .haruFoodRow.rowRight .foodContent, 
    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent {
        width: 62%;
    }
    html[lang="en"] .haruFoodArea .haruFoodRow .tag {
        max-width: 105px;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodTitle {
        font-size: 30px;
    }
}
@media (max-width: 768px) {
    html[lang="en"] .haruFoodArea .haruFoodRow.haruFoodRow.rowLeft .foodContent .foodText {
        width: 100%;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow.rowRight {
        padding: 0 9.8%;
        margin-bottom: 40px;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent {
        flex-direction: column;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow .tag,
    html[lang="en"] .haruFoodArea .haruFoodRow.rowLeft .tag {
        position: absolute;
        top: 90px;
        right: 0;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow.rowRight .foodImg {
        margin-left: -20vw;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodTitle {
        width: 100%;
        padding-top: 10px;
        font-size: clamp(20px, 5.3vw, 40px);
        line-height: 1.3;
        letter-spacing: 0;
        margin: 0 auto;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow.rowRight .foodImg {
        margin-left: -20vw;
        margin-top: 0;
        width: 83vw;
        display: none;
        max-width: 550px;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow.rowLeft .foodImg {
        width: 87vw;
        margin-top: 0;
        margin-right: 0;
        margin-left: -30vw;
        max-width: 550px;
    }
    html[lang="en"] .haruFoodArea .haruFoodRow.rowLeft .foodContent .foodTitle .line:last-child {
        padding-bottom: 0;
    }
    .showEn {
        display: none;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow.rowRight .foodImg.showEn {
        display: block;
    }
    html[lang="en"] .haruFoodArea .foodMainTitle {
        font-size: clamp(20px, 5.3vw, 40px);
        text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.65);
    }

     html[lang="en"] .haruRecommendedArea .haruHighlight .haruList {
        grid-template-columns: initial;
        display: flex;
        justify-content: space-between;
        gap: clamp(11px, 2.8vw, 24px) 2%;
    }
     html[lang="en"] .haruRecommendedArea .haruHighlight .haruList li {
        line-height: 1.4;
        width: 48%;
        flex: initial;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent,
    html[lang="en"] .haruFoodArea .haruFoodRow.rowLeft {
        margin: 0;
        flex-direction: column;
    } 
    html[lang="en"] .haruFoodArea .haruFoodRow.rowLeft {
        position: relative;
    }
    html[lang="en"] .haruFoodArea .haruFoodRow .foodContent .foodText {
        width: 100%;
        padding-top: 10px;
        margin-left: 0;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow .tag {
        position: absolute;
        top: 22vw;
        right: 0;
    }
    html[lang="en"] .haruFoodArea .haruFoodRow.rowLeft .tag {
        position: absolute;
        top: 0;
        right: 0;
    }

    html[lang="en"] .haruFoodArea .haruFoodRow.rowLeft {
        margin: 0;
        padding: 0 9.8%;
    }
}

@media (max-width: 430px) {
    html[lang="en"] .haruFoodArea .haruFoodRow.rowRight,
    html[lang="en"] .haruFoodArea .haruFoodRow.rowLeft {
        padding: 0 6%;
    }
}