@charset "UTF-8";

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: min(calc(16vw / 1366 * 100), 16px);
    line-height: 1.5;
    color: #474342;
    overflow-x: hidden;
}

img {
    width: 100%;
    transition: all 0.3s;
}

a img:hover {
    opacity: 0.7;
}

a {
    transition: all 0.3s;
}

iframe {
    width: 100%;
    height: 100%;
}

.show-sp {
    display: none;
}

.inner {
    position: relative;
    width: min(calc(1140vw / 1366 * 100), 1140px);
    margin: 0 auto;
}

.acc-btn {
    cursor: pointer;
}

.acc-cnt {
    display: none;
}

.asta {
    font-size: 0.6em;
    vertical-align: top;
}

.common-btn-area {
    display: flex;
    justify-content: space-between;
}

.common-btn {
    height: 100%;
}

.common-btn-inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: bold;
    color: #fff;
    border-radius: min(calc(100vw / 1366 * 100), 100px);
    box-shadow: min(calc(0vw / 1366 * 100), 0px) min(calc(3vw / 1366 * 100), 3px) min(calc(6vw / 1366 * 100), 6px) rgba(0, 0, 0, 0.16);
    transition: all 0.3s;
    z-index: 1;
}

.dl .common-btn-inner:hover {
    color: #173660;
}

.online .common-btn-inner:hover {
    color: #6ba301;
}

.common-btn-inner::before {
    content: "";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1;
}

.dl .common-btn-inner::before {
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/btn_icon_dl.png);
}

.online .common-btn-inner::before {
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/btn_icon_online.png);
}

.common-btn-inner-bg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.common-btn-inner-bg::before,
.common-btn-inner-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: min(calc(100vw / 1366 * 100), 100px);
    transition: all 0.3s;
}

.common-btn-inner-bg::before {
    background-color: #fff;
    opacity: 0;
    z-index: -2;
}

.dl .common-btn-inner-bg::before {
    border: min(calc(2vw / 1366 * 100), 2px) solid #173660;
}

.online .common-btn-inner-bg::before {
    border: min(calc(2vw / 1366 * 100), 2px) solid #6ba301;
}

.common-btn-inner:hover .common-btn-inner-bg::before {
    opacity: 1;
}

.common-btn-inner-bg::after {
    z-index: -3;
}

.dl .common-btn-inner-bg::after {
    background: linear-gradient(#2c67a3 0%, #050b13 100%);
}

.online .common-btn-inner-bg::after {
    background: linear-gradient(#6ba301 0%, #3f6726 100%);
}

.common-sec {
    padding: min(calc(105vw / 1366 * 100), 105px) 0;
}

.common-sec-bg {
    position: relative;
    background-color: #F3EFE6;
    overflow: hidden;
    z-index: 0;
}

.common-sec-bg::before,
.common-sec-bg::after {
    content: "";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
}

.common-sec-bg::before {
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/bg_img_hexagon_left.png);
    width: min(calc(931vw / 1366 * 100), 931px);
    height: min(calc(519vw / 1366 * 100), 519px);
    bottom: max(calc(-10vw / 1366 * 100), -10px);
    left: max(calc(-254vw / 1366 * 100), -254px);
}

.common-sec-bg::after {
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/bg_img_hexagon_right.png);
    width: min(calc(680vw / 1366 * 100), 680px);
    height: min(calc(555vw / 1366 * 100), 555px);
    top: max(calc(-228vw / 1366 * 100), -228px);
    right: min(calc(54vw / 1366 * 100), 54px);
}

.common-sec-sub-head {
    margin-bottom: min(calc(10vw / 1366 * 100), 10px);
    font-size: min(calc(28vw / 1366 * 100), 28px);
    font-weight: 900;
    color: #173660;
    text-align: center;
}

.common-sec-sub-head .num {
    font-size: min(calc(36vw / 1366 * 100), 36px);
}

.common-sec-sub-head .accent {
    padding-bottom: min(calc(3vw / 1366 * 100), 3px);
    border-bottom: min(calc(2vw / 1366 * 100), 2px) solid #B68B35;
}

.common-sec-head {
    font-size: min(calc(48vw / 1366 * 100), 48px);
    font-weight: 900;
    color: #173660;
    text-align: center;
}

.common-sec-head .accent {
    color: #B68B35;
}

.num {
    font-family: 'Roboto', sans-serif;
}

@media (max-width: 750px) {
    body {
        font-size: calc(16vw / 750 * 100);
    }

    .show-pc {
        display: none;
    }

    .show-sp {
        display: block;
    }

    .inner {
        width: calc(670vw / 750 * 100);
    }

    .common-btn-inner {
        border-radius: calc(100vw / 750 * 100);
        box-shadow: calc(0vw / 750 * 100) calc(3vw / 750 * 100) calc(6vw / 750 * 100) rgba(0, 0, 0, 0.16);
    }

    .common-btn-inner-bg::before,
    .common-btn-inner-bg::after {
        border-radius: calc(100vw / 750 * 100);
    }

    .dl .common-btn-inner-bg::before {
        border: calc(2vw / 750 * 100) solid #173660;
    }

    .online .common-btn-inner-bg::before {
        border: calc(2vw / 750 * 100) solid #6ba301;
    }

    .common-sec {
        padding: calc(120vw / 750 * 100) 0;
        overflow: hidden;
    }

    .common-sec-bg::before {
        background-image: url(/web/jp/asp/buyer/hotel/img/sp/bg_img_hexagon_left.png);
        width: calc(500vw / 750 * 100);
        height: calc(664vw / 750 * 100);
        bottom: 0;
        left: 0;
    }

    .common-sec-bg::after {
        background-image: url(/web/jp/asp/buyer/hotel/img/sp/bg_img_hexagon_right.png);
        width: calc(480vw / 750 * 100);
        height: calc(480vw / 750 * 100);
        top: calc(-0vw / 750 * 100);
        right: calc(-15vw / 750 * 100);
    }

    .common-sec-sub-head {
        margin-bottom: calc(10vw / 750 * 100);
        font-size: calc(40vw / 750 * 100);
        line-height: 1.6;
    }

    .common-sec-sub-head .num {
        font-size: calc(52vw / 750 * 100);
    }

    .common-sec-sub-head .accent {
        padding-bottom: calc(3vw / 750 * 100);
        border-bottom: calc(4vw / 750 * 100) solid #B68B35;
    }

    .common-sec-head {
        font-size: calc(60vw / 750 * 100);
    }
}

/* swiper */
.swiper-pagination-bullet {
    width: min(calc(12vw / 1366 * 100), 12px);
    height: min(calc(12vw / 1366 * 100), 12px);
    background-color: #CECCC8;
    vertical-align: middle;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: #2A6098;
    width: min(calc(16vw / 1366 * 100), 16px);
    height: min(calc(16vw / 1366 * 100), 16px);
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 min(calc(7vw / 1366 * 100), 7px);
}

@media (max-width: 750px) {
    .swiper-pagination-bullet {
        width: calc(20vw / 750 * 100);
        height: calc(20vw / 750 * 100);
    }

    .swiper-pagination-bullet-active {
        width: calc(28vw / 750 * 100);
        height: calc(28vw / 750 * 100);
    }

    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 calc(12vw / 750 * 100);
    }
}

/* animation */
.fade-in-bottom {
    opacity: 0;
}

.scroll-anime-start.fade-in-bottom {
    animation: fade-in-bottom 0.5s 0.5s forwards;
}

/* animation */
@keyframes fade-in-bottom {
    0% {
        transform: translateY(min(calc(50vw / 1366 * 100), 50px));
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-loop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes slide-loop-reverse {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

/* modal */
.modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 20;
    overflow-y: scroll;
    overscroll-behavior-y: none;
}

.modal-close-btn {
    position: fixed;
    top: min(calc(30vw / 1366 * 100), 30px);
    right: min(calc(30vw / 1366 * 100), 30px);
    width: min(calc(40vw / 1366 * 100), 40px);
    cursor: pointer;
}

.modal-close-btn:hover {
    opacity: 0.7;
}

.modal-inner {
    width: min(calc(944vw / 1366 * 100), 944px);
    margin-top: min(calc(50vw / 1366 * 100), 50px);
    padding: min(calc(30vw / 1366 * 100), 30px) 0;
}

.example-modal-box {
    display: none;
    background-color: #fff;
    border-radius: min(calc(15vw / 1366 * 100), 15px);
}

.example-modal-box a {
    color: #173660;
    text-decoration: underline;
}

.example-modal-box a:hover {
    text-decoration: none;
}

.example-modal-box-inner {
    width: min(calc(760vw / 1366 * 100), 760px);
    margin: 0 auto;
    padding: min(calc(50vw / 1366 * 100), 50px) 0;
}

.example-modal-box-close-btn {
    width: min(calc(32vw / 1366 * 100), 32px);
    cursor: pointer;
    margin: 0 auto;
    padding-bottom: min(calc(30vw / 1366 * 100), 30px);
}

.example-modal-box-close-btn line {
    stroke: #2D4175;
}

.example-modal-box-top {
    display: flex;
    justify-content: space-between;
    font-size: min(calc(14vw / 1366 * 100), 14px);
    margin-bottom: min(calc(20vw / 1366 * 100), 20px);
    color: #B5B5B5;
}

.example-modal-box-head {
    font-size: min(calc(28vw / 1366 * 100), 28px);
    font-weight: bold;
    margin-bottom: min(calc(30vw / 1366 * 100), 30px);
}

.example-modal-box-img-area {
    width: min(calc(624vw / 1366 * 100), 624px);
    margin: 0 auto min(calc(40vw / 1366 * 100), 40px);
}

.example-modal-box-img {
    margin-bottom: min(calc(20vw / 1366 * 100), 20px);
}

.example-modal-box-img img {
    border-radius: min(calc(15vw / 1366 * 100), 15px);
}

.example-modal-box-img-notes {
    font-size: min(calc(14vw / 1366 * 100), 14px);
    line-height: 2;
}

.example-modal-box-txt {
    font-size: min(calc(16vw / 1366 * 100), 16px);
    margin-bottom: min(calc(30vw / 1366 * 100), 30px);
    line-height: 1.7;
}

.example-modal-box-point {
    width: 100%;
    padding: min(calc(30vw / 1366 * 100), 30px) 0;
    border-top: min(calc(1vw / 1366 * 100), 1px) solid #8E99B5;
    border-bottom: min(calc(1vw / 1366 * 100), 1px) solid #8E99B5;
    margin-bottom: min(calc(50vw / 1366 * 100), 50px);
}

.example-modal-box-point-head {
    font-size: min(calc(28vw / 1366 * 100), 28px);
    font-weight: bold;
    margin-bottom: min(calc(15vw / 1366 * 100), 15px);
}

.example-modal-box-point-item {
    font-size: min(calc(18vw / 1366 * 100), 18px);
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: min(calc(10vw / 1366 * 100), 10px);
}

.example-modal-box-point-item:last-child {
    margin-bottom: 0;
}

.example-modal-box-point-item::before {
    content: "";
    display: block;
    width: min(calc(36vw / 1366 * 100), 36px);
    height: min(calc(36vw / 1366 * 100), 36px);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: min(calc(10vw / 1366 * 100), 10px);
}

.example-modal-box-point-item:nth-child(1)::before {
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/example_modal_icon_num_1.svg);
}

.example-modal-box-point-item:nth-child(2)::before {
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/example_modal_icon_num_2.svg);
}

.example-modal-box-point-item:nth-child(3)::before {
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/example_modal_icon_num_3.svg);
}

.example-modal-box-cnt-head {
    position: relative;
    font-size: min(calc(28vw / 1366 * 100), 28px);
    font-weight: bold;
    margin: min(calc(50vw / 1366 * 100), 50px) 0;
}

.example-modal-box-cnt-head::before {
    content: "";
    display: block;
    position: absolute;
    bottom: max(calc(-17vw / 1366 * 100), -17px);
    left: 0;
    width: min(calc(40vw / 1366 * 100), 40px);
    height: min(calc(2vw / 1366 * 100), 2px);
    background-color: #B68B35;
}

.example-modal-box-cnt-head::after {
    content: "";
    display: block;
    position: absolute;
    bottom: max(calc(-17vw / 1366 * 100), -17px);
    left: min(calc(42vw / 1366 * 100), 42px);
    width: min(calc(718vw / 1366 * 100), 718px);
    height: min(calc(2vw / 1366 * 100), 2px);
    background-color: #173660;
}

.example-modal-box-cnt-sub-head {
    font-size: min(calc(20vw / 1366 * 100), 20px);
    font-weight: bold;
    color: #B68B35;
    margin-bottom: min(calc(15vw / 1366 * 100), 15px);
}

.example-modal-box-cnt-area {
    display: flex;
    justify-content: space-between;
}

.example-modal-box-cnt-area.reverse {
    flex-direction: row-reverse;
}

.example-modal-box-cnt-txt-area {
    width: min(calc(560vw / 1366 * 100), 560px);
}

.example-modal-box-cnt-txt-area.full {
    width: 100%;
}

.example-modal-box-cnt-txt {
    font-size: min(calc(16vw / 1366 * 100), 16px);
    color: #383838;
    margin-bottom: min(calc(30vw / 1366 * 100), 30px);
    line-height: 1.7;
}

.example-modal-box-cnt-txt .accent {
    font-weight: bold;
}

.example-modal-box-cnt-notes {
    font-size: min(calc(12vw / 1366 * 100), 12px);
    color: #383838;
    margin-bottom: min(calc(30vw / 1366 * 100), 30px);
    line-height: 1.7;
}

.example-modal-box-cnt-img-area {
    width: min(calc(150vw / 1366 * 100), 150px);
    margin-bottom: min(calc(30vw / 1366 * 100), 30px);
}

.example-modal-box-cnt-img+.example-modal-box-cnt-img {
    margin-top: min(calc(30vw / 1366 * 100), 30px);
}

.example-modal-box-cnt-img-caption {
    font-size: min(calc(11vw / 1366 * 100), 11px);
    text-align: center;
    margin-top: min(calc(5vw / 1366 * 100), 5px);
}

@media (max-width: 750px) {
    .modal-close-btn {
        background-color: #173660;
        top: calc(20vw / 750 * 100);
        right: calc(20vw / 750 * 100);
        width: calc(50vw / 750 * 100);
        padding: calc(10vw / 750 * 100);
        line-height: 1;
    }

    .modal-inner {
        width: calc(670vw / 750 * 100);
        margin-top: calc(100vw / 750 * 100);
        padding: calc(30vw / 750 * 100) 0;
    }

    .example-modal-box {
        border-radius: calc(35vw / 750 * 100);
    }

    .example-modal-box-inner {
        width: calc(590vw / 750 * 100);
        padding: calc(65vw / 750 * 100) 0 0;
    }

    .example-modal-box-close-btn {
        width: calc(32vw / 750 * 100);
        padding-bottom: calc(80vw / 750 * 100);
    }

    .example-modal-box-top {
        display: block;
        font-size: calc(25vw / 750 * 100);
        margin-bottom: calc(20vw / 750 * 100);
    }

    .example-modal-box-head {
        font-size: calc(39vw / 750 * 100);
        margin-bottom: calc(45vw / 750 * 100);
    }

    .example-modal-box-img-area {
        width: 100%;
        margin: 0 auto calc(50vw / 750 * 100);
    }

    .example-modal-box-img img {
        border-radius: calc(15vw / 750 * 100);
    }

    .example-modal-box-img {
        margin-bottom: calc(25vw / 750 * 100);
    }

    .example-modal-box-img-notes {
        font-size: calc(21vw / 750 * 100);
        margin-top: calc(5vw / 750 * 100);
    }

    .example-modal-box-txt {
        font-size: calc(29vw / 750 * 100);
        margin-bottom: calc(50vw / 750 * 100);
        line-height: 1.8;
    }

    .example-modal-box-point {
        padding: calc(50vw / 750 * 100) 0;
        margin-bottom: calc(80vw / 750 * 100);
    }

    .example-modal-box-point-head {
        font-size: calc(39vw / 750 * 100);
        margin-bottom: calc(15vw / 750 * 100);
    }

    .example-modal-box-point-item {
        font-size: calc(36vw / 750 * 100);
        margin-bottom: calc(45vw / 750 * 100);
    }

    .example-modal-box-point-item::before {
        width: calc(72vw / 750 * 100);
        height: calc(72vw / 750 * 100);
        margin-right: calc(30vw / 750 * 100);
        transform: translateY(calc(-20vw / 750 * 100));
        flex: 0 0 auto;
    }

    .example-modal-box-cnt-head {
        font-size: calc(50vw / 750 * 100);
        margin: calc(50vw / 750 * 100) 0 calc(76vw / 750 * 100);
    }

    .example-modal-box-cnt-head::before {
        bottom: calc(-26vw / 750 * 100);
        width: calc(74vw / 750 * 100);
        height: calc(4vw / 750 * 100);
    }

    .example-modal-box-cnt-head::after {
        bottom: calc(-26vw / 750 * 100);
        left: calc(80vw / 750 * 100);
        width: calc(495vw / 750 * 100);
        height: calc(4vw / 750 * 100);
    }

    .example-modal-box-cnt-area {
        display: flex;
        flex-direction: column;
        margin-bottom: calc(70vw / 750 * 100);
    }

    .example-modal-box-cnt-area.reverse {
        flex-direction: column;
    }

    .example-modal-box-cnt-sub-head {
        font-size: calc(35vw / 750 * 100);
        margin-bottom: calc(45vw / 750 * 100);
    }

    .example-modal-box-cnt-txt-area {
        width: 100%;
    }

    .example-modal-box-cnt-txt {
        font-size: calc(29vw / 750 * 100);
        margin-bottom: calc(50vw / 750 * 100);
        line-height: 1.8;
    }

    .example-modal-box-cnt-img-area {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: calc(30vw / 750 * 100);
    }

    .example-modal-box-cnt-img {
        width: calc(284vw / 750 * 100);
        margin-bottom: calc(30vw / 750 * 100);
    }

    .example-modal-box-cnt-img+.example-modal-box-cnt-img {
        margin-top: 0;
    }

    .example-modal-box-cnt-img-caption {
        font-size: calc(22vw / 750 * 100);
        margin-top: calc(25vw / 750 * 100);
    }
}

/* sp-header-btn */
.sp-header-btn {
    display: none;
}

@media (max-width: 750px) {
    .sp-header-btn {
        position: fixed;
        top: calc(40vw / 750 * 100);
        right: calc(35vw / 750 * 100);
        display: block;
        width: calc(48vw / 750 * 100);
        z-index: 10;
    }
}

/* sp-menu */
.sp-menu {
    display: none;
}

@media (max-width: 750px) {
    .sp-menu {
        position: fixed;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100vh;
        padding: calc(30vw / 750 * 100) 0;
        background-color: #fff;
        z-index: 20;
    }

    .sp-menu-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sp-menu-top-logo {
        width: calc(200vw / 750 * 100);
    }

    .sp-menu-top-close {
        width: calc(36vw / 750 * 100);
    }

    .sp-menu-link-list {
        width: calc(590vw / 750 * 100);
        margin: calc(30vw / 750 * 100) auto 0;
    }

    .sp-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(20vw / 750 * 100) calc(20vw / 750 * 100);
        font-size: calc(28vw / 750 * 100);
        font-weight: bold;
        color: #173660;
        border-bottom: calc(1vw / 750 * 100) solid #173660;
    }

    .sp-menu-link a {
        display: block;
        height: 100%;
        width: 100%;
    }

    .sp-menu-link::after {
        content: "";
        display: block;
        width: calc(10vw / 750 * 100);
        height: calc(10vw / 750 * 100);
        border-top: calc(2vw / 750 * 100) solid #173660;
        border-right: calc(2vw / 750 * 100) solid #173660;
        transform: rotate(45deg);
    }

    .sp-menu-btn {
        width: calc(590vw / 750 * 100);
        height: calc(124vw / 750 * 100);
        margin: calc(80vw / 750 * 100) auto 0;
    }

    .sp-menu-btn+.sp-menu-btn {
        margin-top: calc(40vw / 750 * 100);
    }

    .sp-menu-btn-inner {
        padding-left: calc(180vw / 750 * 100);
        font-size: calc(35vw / 750 * 100);
    }

    .dl .sp-menu-btn-inner::before {
        top: calc(4vw / 750 * 100);
        left: calc(-24vw / 750 * 100);
        width: calc(164vw / 750 * 100);
        height: calc(127vw / 750 * 100);
        margin: 0 auto;
    }

    .online .sp-menu-btn-inner::before {
        top: calc(-18vw / 750 * 100);
        left: calc(19vw / 750 * 100);
        width: calc(155vw / 750 * 100);
        height: calc(152vw / 750 * 100);
        margin: 0 auto;
    }
}

/* fv */
.fv {
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/fv_bg.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    width: 100%;
    height: min(calc(668vw / 1366 * 100), 668px);
    overflow: hidden;
}

.fv .inner {
    display: flex;
    justify-content: space-between;
    width: min(calc(1200vw / 1366 * 100), 1200px);
}

.fv-txt-area {
    width: min(calc(670vw / 1366 * 100), 670px);
    padding-top: min(calc(100vw / 1366 * 100), 100px);
}

.fv-main-txt {
    width: min(calc(620vw / 1366 * 100), 620px);
}

.fv-sub-txt {
    margin-top: min(calc(40vw / 1366 * 100), 40px);
    font-size: min(calc(35vw / 1366 * 100), 35px);
    font-weight: bold;
    color: #173660;
    line-height: 1;
}

.fv-sub-txt .accent {
    background-color: #B68B35;
    margin-right: min(calc(5vw / 1366 * 100), 5px);
    padding: 0 min(calc(0vw / 1366 * 100), 0px) 0 min(calc(15vw / 1366 * 100), 15px);
    font-size: min(calc(36vw / 1366 * 100), 36px);
    color: #fff;
}

.fv-logo {
    width: min(calc(625vw / 1366 * 100), 625px);
    margin-top: min(calc(60vw / 1366 * 100), 60px);
}

.fv-btn-area {
    margin-top: min(calc(50vw / 1366 * 100), 50px);
    width: min(calc(663vw / 1366 * 100), 663px);
    height: min(calc(70vw / 1366 * 100), 70px);
}

.fv-btn {
    width: min(calc(320vw / 1366 * 100), 320px);
}

.fv-btn-inner {
    padding-left: min(calc(102vw / 1366 * 100), 102px);
    font-size: min(calc(20vw / 1366 * 100), 20px);
}

.dl .fv-btn-inner::before {
    top: 0;
    left: max(calc(-11vw / 1366 * 100), -11px);
    width: min(calc(93vw / 1366 * 100), 93px);
    height: min(calc(71vw / 1366 * 100), 71px);
}

.online .fv-btn-inner::before {
    top: max(calc(-10vw / 1366 * 100), -10px);
    left: min(calc(4vw / 1366 * 100), 4px);
    width: min(calc(87vw / 1366 * 100), 87px);
    height: min(calc(86vw / 1366 * 100), 86px);
}

.fv-img-area {
    position: relative;
    width: min(calc(757vw / 1366 * 100), 757px);
    height: min(calc(668vw / 1366 * 100), 668px);
}

.fv-main-img {
    position: absolute;
    top: max(calc(-170vw / 1366 * 100), -170px);
    left: max(calc(-10vw / 1366 * 100), -10px);
    width: min(calc(757vw / 1366 * 100), 757px);
}

.fv-authority_01 {
    position: absolute;
    top: min(calc(315vw / 1366 * 100), 295px);
    left: min(calc(126vw / 1366 * 100), 126px);
    width: min(calc(171vw / 1366 * 100), 171px);
}

.fv-authority_02 {
    position: absolute;
    top: min(calc(472vw / 1366 * 100), 510px);
    left: min(calc(61vw / 1366 * 100), 61px);
    width: min(calc(138vw / 1366 * 100), 138px);
}

.fv-authority_03 {
    position: absolute;
    top: min(calc(472vw / 1366 * 100), 510px);
    left: min(calc(235vw / 1366 * 100), 235px);
    width: min(calc(124vw / 1366 * 100), 124px);
}

.fv-authority-notes-list {
    position: absolute;
    top: min(calc(618vw / 1366 * 100), 470px);
    left: min(calc(75vw / 1366 * 100), 75px);
    width: min(calc(300vw / 1366 * 100), 300px);
}

.fv-authority-notes {
    font-size: min(calc(11vw / 1366 * 100), 11px);
}

@media (max-width: 750px) {
    .fv {
        background-image: url(/web/jp/asp/buyer/hotel/img/sp/fv_bg.jpg);
        height: calc(1340vw / 750 * 100);
    }

    .fv .inner {
        flex-direction: column-reverse;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
    }

    .fv-txt-area {
        width: 100%;
        padding-top: calc(55vw / 750 * 100);
    }

    .fv-main-txt {
        width: calc(590vw / 750 * 100);
        margin: 0 auto;
    }

    .fv-sub-txt {
        width: calc(590vw / 750 * 100);
        margin: calc(40vw / 750 * 100) auto 0;
        font-size: calc(30vw / 750 * 100);
    }

    .fv-sub-txt .accent {
        margin-right: calc(8vw / 750 * 100);
        padding: 0 calc(0vw / 750 * 100) 0 calc(15vw / 750 * 100);
        font-size: calc(36vw / 750 * 100);
    }

    .fv-logo {
        width: calc(590vw / 750 * 100);
        margin: calc(65vw / 750 * 100) auto 0;
    }

    .fv-btn-area {
        margin-top: calc(125vw / 750 * 100);
        width: 100%;
        height: calc(120vw / 750 * 100);
    }

    .fv-btn {
        width: 50%;
    }

    .fv-btn-inner {
        justify-content: center;
        padding-left: 0;
        font-size: calc(33vw / 750 * 100);
    }

    .dl .fv-btn-inner::before {
        top: calc(-70vw / 750 * 100);
        left: 0;
        right: 0;
        width: calc(150vw / 750 * 100);
        height: calc(114vw / 750 * 100);
        margin: 0 auto;
    }

    .online .fv-btn-inner::before {
        top: calc(-100vw / 750 * 100);
        left: 0;
        right: 0;
        width: calc(135vw / 750 * 100);
        height: calc(132vw / 750 * 100);
        margin: 0 auto;
    }

    .fv-btn-inner-bg::before,
    .fv-btn-inner-bg::after {
        border-radius: 0;
    }

    .fv-img-area {
        width: 100%;
        height: calc(690vw / 750 * 100);
    }

    .fv-main-img {
        top: calc(-202vw / 750 * 100);
        left: calc(-106vw / 750 * 100);
        width: calc(776vw / 750 * 100);
    }

    .fv-authority_01 {
        top: calc(321vw / 750 * 100);
        left: calc(404vw / 750 * 100);
        width: calc(181vw / 750 * 100);
    }

    .fv-authority_02 {
        top: calc(486vw / 750 * 110);
        left: calc(344vw / 750 * 100);
        width: calc(146vw / 750 * 100);
    }

    .fv-authority_03 {
        top: calc(487vw / 750 * 110);
        left: calc(514vw / 750 * 100);
        width: calc(130vw / 750 * 100);
    }

    .fv-authority-notes-list {
        top: calc(648vw / 750 * 78);
        left: calc(344vw / 750 * 100);
        width: calc(380vw / 750 * 100);
    }

    .fv-authority-notes {
        font-size: calc(14vw / 750 * 100);
    }
}

/* fixed-bnr */
.fixed-bnr {
    position: fixed;
    right: min(calc(20vw / 1366 * 100), 20px);
    bottom: min(calc(30vw / 1366 * 100), 30px);
    background-color: #fff;
    width: min(calc(300vw / 1366 * 100), 300px);
    padding: min(calc(25vw / 1366 * 100), 25px) 0;
    border: min(calc(2vw / 1366 * 100), 2px) solid #BEBEBE;
    border-radius: min(calc(20vw / 1366 * 100), 20px);
    z-index: 10;
}

.fixed-bnr-close-btn {
    position: absolute;
    top: min(calc(-10vw / 1366 * 100), -10px);
    right: min(calc(-10vw / 1366 * 100), -10px);
    width: min(calc(34vw / 1366 * 100), 34px);
    cursor: pointer;
    transition: all 0.7s;
}

.fixed-bnr-close-btn:hover {
    opacity: 0.7;
}

.fixed-bnr-btn {
    width: min(calc(264vw / 1366 * 100), 264px);
    height: min(calc(58vw / 1366 * 100), 58px);
    margin: 0 auto
}

.fixed-bnr-btn+.fixed-bnr-btn {
    margin-top: min(calc(15vw / 1366 * 100), 15px);
}

.fixed-bnr-btn-inner {
    justify-content: center;
    font-size: min(calc(16vw / 1366 * 100), 16px);
}

.fixed-bnr-btn-inner::before {
    content: none;
}

.fixed-bnr-btn-inner::after {
    content: "";
    display: block;
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/fixe_bnr_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: min(calc(20vw / 1366 * 100), 20px);
    width: min(calc(14vw / 1366 * 100), 14px);
    height: min(calc(14vw / 1366 * 100), 14px);
    transform: translateY(-50%);
}

@media (max-width: 750px) {
    .fixed-bnr {
        display: none;
    }
}

/* campany-logo-area */
.campany-logo-area {
    display: flex;
    padding: min(calc(10vw / 1366 * 100), 10px) 0;
    overflow: hidden;
}

.campany-logo {
    height: min(calc(80vw / 1366 * 100), 80px);
    animation: slide-loop 25s infinite linear 0.5s both;
}

.campany-logo img {
    width: auto;
    height: 100%;
}

@media (max-width: 750px) {
    .campany-logo-area {
        padding: calc(40vw / 750 * 100) 0;
    }

    .campany-logo {
        height: calc(120vw / 750 * 100);
    }
}

/* task */
.task-box-list {
    display: flex;
    justify-content: space-between;
    margin-top: min(calc(50vw / 1366 * 100), 50px);
}

.task-box {
    background-color: #fff;
    width: min(calc(270vw / 1366 * 100), 270px);
    height: min(calc(540vw / 1366 * 100), 540px);
    padding-top: min(calc(30vw / 1366 * 100), 30px);
    border-radius: min(calc(10vw / 1366 * 100), 10px);
    box-shadow: min(calc(0vw / 1366 * 100), 0px) min(calc(3vw / 1366 * 100), 3px) min(calc(6vw / 1366 * 100), 6px) rgba(0, 0, 0, 0.16);
}

.task-box-head {
    position: relative;
    font-size: min(calc(30vw / 1366 * 100), 30px);
    font-weight: bold;
    color: #173660;
    text-align: center;
}

.task-box-head::after {
    content: "";
    display: block;
    background-color: #173660;
    position: absolute;
    bottom: max(calc(-15vw / 1366 * 100), -15px);
    left: 0;
    right: 0;
    width: min(calc(70vw / 1366 * 100), 70px);
    height: min(calc(3vw / 1366 * 100), 3px);
    margin: 0 auto;
}

.task-box-img {
    margin: min(calc(35vw / 1366 * 100), 35px) auto 0;
    height: min(calc(192vw / 1366 * 100), 192px);
}

.task-box-img_01 {
    width: min(calc(171vw / 1366 * 100), 171px);
    padding-top: 0;
}

.task-box-img_02 {
    width: min(calc(148vw / 1366 * 100), 148px);
    padding-top: min(calc(33vw / 1366 * 100), 33px);
}

.task-box-img_03 {
    width: min(calc(166vw / 1366 * 100), 166px);
    padding-top: min(calc(10vw / 1366 * 100), 10px);
}

.task-box-img_04 {
    width: min(calc(240vw / 1366 * 100), 240px);
    padding-top: min(calc(19vw / 1366 * 100), 19px);
}

.task-box-txt {
    width: min(calc(200vw / 1366 * 100), 200px);
    margin: min(calc(15vw / 1366 * 100), 15px) auto 0;
    font-size: min(calc(18vw / 1366 * 100), 18px);
    line-height: 1.7;
}

.task-txt {
    margin-top: min(calc(50vw / 1366 * 100), 50px);
    font-size: min(calc(36vw / 1366 * 100), 36px);
    font-weight: bold;
    color: #173660;
    text-align: center;
    line-height: 1.6;
}

.task-txt .accent {
    color: #B68B35;
}

@media (max-width: 750px) {
    .task-box-list {
        flex-direction: column;
        margin-top: calc(70vw / 750 * 100);
    }

    .task-box {
        width: 100%;
        height: auto;
        padding: calc(45vw / 750 * 100) 0;
        border-radius: calc(40vw / 750 * 100);
        box-shadow: calc(0vw / 750 * 100) calc(3vw / 750 * 100) calc(6vw / 750 * 100) rgba(0, 0, 0, 0.16);
    }

    .task-box+.task-box {
        margin-top: calc(40vw / 750 * 100);
    }

    .task-box-head {
        font-size: calc(52vw / 750 * 100);
        line-height: 1.4;
    }

    .task-box-head::after {
        bottom: calc(-30vw / 750 * 100);
        width: calc(140vw / 750 * 100);
        height: calc(7vw / 750 * 100);
    }

    .task-box-img {
        margin: calc(75vw / 750 * 100) auto 0;
        height: auto;
    }

    .task-box-img_01 {
        width: calc(276vw / 750 * 100);
    }

    .task-box-img_02 {
        width: calc(259vw / 750 * 100);
        padding-top: calc(14vw / 750 * 100);
    }

    .task-box-img_03 {
        width: calc(279vw / 750 * 100);
        padding-top: 0;
    }

    .task-box-img_04 {
        width: calc(445vw / 750 * 100);
        padding-top: 0;
    }

    .task-box-txt {
        width: calc(590vw / 750 * 100);
        margin: calc(30vw / 750 * 100) auto 0;
        font-size: calc(32vw / 750 * 100);
    }

    .task-txt {
        margin-top: calc(66vw / 750 * 100);
        font-size: calc(44vw / 750 * 100);
        line-height: 1.6;
    }

    .task-txt .accent {
        font-size: calc(52vw / 750 * 100);
    }
}

/* merit */
.merit-box-list {
    margin-top: min(calc(70vw / 1366 * 100), 70px);
}

.merit-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: min(calc(300vw / 1366 * 100), 300px);
    border-radius: min(calc(20vw / 1366 * 100), 20px);
}

.merit-box:nth-child(odd) {
    background: linear-gradient(90deg, #f3efe6 0%, #fff 100%);
}

.merit-box:nth-child(even) {
    background: linear-gradient(-90deg, #f3efe6 0%, #fff 100%);
    flex-direction: row-reverse;
}

.merit-box+.merit-box {
    margin-top: min(calc(95vw / 1366 * 100), 95px);
}

.merit-box-txt-area {
    width: min(calc(690vw / 1366 * 100), 690px);
    height: 100%;
    padding: min(calc(60vw / 1366 * 100), 60px) 0 0 min(calc(45vw / 1366 * 100), 45px);
    color: #173660;
}

.merit-box:nth-child(even) .merit-box-txt-area {
    padding: min(calc(70vw / 1366 * 100), 70px) min(calc(45vw / 1366 * 100), 45px) 0 0;
}

.merit-box:nth-child(2) .merit-box-txt-area {
    width: min(calc(795vw / 1366 * 100), 795px);
}

.merit-box:nth-child(3) .merit-box-txt-area {
    width: min(calc(810vw / 1366 * 100), 810px);
}

.merit-box:nth-child(4) .merit-box-txt-area {
    width: min(calc(795vw / 1366 * 100), 795px);
}

.merit-box:nth-child(5) .merit-box-txt-area {
    width: min(calc(760vw / 1366 * 100), 760px);
}

.merit-box-num {
    margin-top: max(calc(-90vw / 1366 * 100), -90px);
    font-size: min(calc(90vw / 1366 * 100), 90px);
    font-weight: 900;
    color: #B68B35;
    line-height: 1;
}

.merit-box-head {
    margin-top: min(calc(10vw / 1366 * 100), 10px);
    font-size: min(calc(36vw / 1366 * 100), 36px);
    font-weight: 900;
}

.merit-box-txt {
    margin-top: min(calc(20vw / 1366 * 100), 20px);
    font-size: min(calc(18vw / 1366 * 100), 18px);
    line-height: 1.9;
}

.merit-box-notes {
    margin-top: min(calc(5vw / 1366 * 100), 5px);
    font-size: min(calc(12vw / 1366 * 100), 12px);
}

.merit-box-img_01 {
    width: min(calc(397vw / 1366 * 100), 397px);
    transform: translate(max(calc(-31vw / 1366 * 100), -31px), max(calc(-29vw / 1366 * 100), -29px));
}

.merit-box-img_02 {
    width: min(calc(247vw / 1366 * 100), 247px);
    transform: translate(min(calc(43vw / 1366 * 100), 43px), max(calc(-18vw / 1366 * 100), -18px));
}

.merit-box-img_03 {
    width: min(calc(222vw / 1366 * 100), 222px);
    transform: translate(max(calc(-77vw / 1366 * 100), -77px), min(calc(10vw / 1366 * 100), 10px));
}

.merit-box-img_04 {
    width: min(calc(161vw / 1366 * 100), 161px);
    transform: translate(min(calc(83vw / 1366 * 100), 83px), max(calc(-25vw / 1366 * 100), -25px));
}

.merit-box-img_05 {
    width: min(calc(332vw / 1366 * 100), 332px);
    transform: translate(max(calc(-48vw / 1366 * 100), -48px), max(calc(-1vw / 1366 * 100), -1px));
}

@media (max-width: 750px) {
    .merit {
        padding-bottom: calc(195vw / 750 * 100);
    }

    .merit-box-list {
        margin-top: calc(130vw / 750 * 100);
    }

    .merit-box {
        height: auto;
        border-radius: calc(40vw / 750 * 100);
    }

    .merit-box+.merit-box {
        margin-top: calc(185vw / 750 * 100);
    }

    .merit-box:nth-child(odd),
    .merit-box:nth-child(even) {
        background: linear-gradient(0deg, #f3efe6 0%, #fff 100%);
        flex-direction: column;
    }

    .merit-box-txt-area {
        width: calc(590vw / 750 * 100);
        padding: 0;
    }

    .merit-box:nth-child(even) .merit-box-txt-area {
        padding: 0;
    }

    .merit-box:nth-child(2) .merit-box-txt-area {
        width: calc(590vw / 750 * 100);
    }

    .merit-box:nth-child(3) .merit-box-txt-area {
        width: calc(590vw / 750 * 100);
    }

    .merit-box:nth-child(4) .merit-box-txt-area {
        width: calc(590vw / 750 * 100);
    }

    .merit-box:nth-child(5) .merit-box-txt-area {
        width: calc(590vw / 750 * 100);
    }

    .merit-box-num {
        margin-top: calc(-57vw / 750 * 100);
        font-size: calc(120vw / 750 * 100);
        text-align: center;
    }

    .merit-box-head {
        margin-top: calc(35vw / 750 * 100);
        font-size: calc(48vw / 750 * 100);
        text-align: center;
    }

    .merit-box-txt {
        margin-top: calc(45vw / 750 * 100);
        font-size: calc(32vw / 750 * 100);
    }

    .merit-box-notes {
        margin-top: 0;
        font-size: calc(26vw / 750 * 100);
        line-height: 2;
    }

    .merit-box-img {
        margin-top: calc(-20vw / 750 * 100);
        height: calc(427vw / 750 * 100);
    }

    .merit-box-img_01 {
        width: calc(537vw / 750 * 100);
        transform: translate(0, calc(50vw / 750 * 100));
    }

    .merit-box-img_02 {
        width: calc(309vw / 750 * 100);
        transform: translate(0, calc(56vw / 750 * 100));
    }

    .merit-box-img_03 {
        width: calc(520vw / 750 * 100);
        transform: translate(0, calc(64vw / 750 * 100));
    }

    .merit-box-img_04 {
        width: calc(301vw / 750 * 100);
        transform: translate(0, calc(57vw / 750 * 100));
    }

    .merit-box-img_05 {
        width: calc(512vw / 750 * 100);
        height: auto;
        transform: translate(0, calc(56vw / 750 * 100));
    }
}

/* cta */
.cta {
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/cta_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: min(calc(445vw / 1366 * 100), 445px);
    padding-top: min(calc(75vw / 1366 * 100), 75px);
}

.cta .inner {
    background-color: #fff;
    padding: min(calc(20vw / 1366 * 100), 20px) 0 min(calc(30vw / 1366 * 100), 30px);
    border-radius: min(calc(25vw / 1366 * 100), 25px);
}

.cta-sub-head,
.cta-head {
    font-size: min(calc(36vw / 1366 * 100), 36px);
    font-weight: bold;
    text-align: center;
}

.cta-sub-head {
    color: #173660;
}

.cta-head {
    color: #DD3333;
}

.cta-btn-area {
    margin: min(calc(47vw / 1366 * 100), 47px) auto 0;
    width: min(calc(927vw / 1366 * 100), 927px);
    height: min(calc(96vw / 1366 * 100), 96px);
}

.cta-btn {
    width: min(calc(450vw / 1366 * 100), 450px);
}

.cta-btn-inner {
    padding-left: min(calc(140vw / 1366 * 100), 140px);
    font-size: min(calc(29vw / 1366 * 100), 29px);
}

.dl .cta-btn-inner::before {
    top: min(calc(1vw / 1366 * 100), 1px);
    left: max(calc(-16vw / 1366 * 100), -16px);
    width: min(calc(126vw / 1366 * 100), 126px);
    height: min(calc(96vw / 1366 * 100), 96px);
}

.online .cta-btn-inner::before {
    top: max(calc(-16vw / 1366 * 100), -16px);
    left: min(calc(16vw / 1366 * 100), 16px);
    width: min(calc(118vw / 1366 * 100), 118px);
    height: min(calc(116vw / 1366 * 100), 116px);
}

@media (max-width: 750px) {
    .cta {
        background-image: url(/web/jp/asp/buyer/hotel/img/sp/cta_bg.jpg);
        height: calc(800vw / 750 * 100);
        padding-top: calc(80vw / 750 * 100);
    }

    .cta .inner {
        padding: calc(50vw / 750 * 100) 0 calc(70vw / 750 * 100);
        border-radius: calc(40vw / 750 * 100);
    }

    .cta-sub-head {
        font-size: calc(40vw / 750 * 100);
    }

    .cta-head {
        margin-top: calc(5vw / 750 * 100);
        font-size: calc(44vw / 750 * 100);
    }

    .cta-btn-area {
        flex-direction: column;
        margin: calc(35vw / 750 * 100) auto 0;
        width: calc(590vw / 750 * 100);
        height: auto;
    }

    .cta-btn {
        width: 100%;
        height: calc(124vw / 750 * 100);
    }

    .cta-btn+.cta-btn {
        margin-top: calc(40vw / 750 * 100);
    }

    .cta-btn-inner {
        padding-left: calc(180vw / 750 * 100);
        font-size: calc(35vw / 750 * 100);
    }

    .dl .cta-btn-inner::before {
        top: calc(3vw / 750 * 100);
        left: calc(-24vw / 750 * 100);
        width: calc(166vw / 750 * 100);
        height: calc(126vw / 750 * 100);
        margin: 0 auto;
    }

    .online .cta-btn-inner::before {
        top: calc(-18vw / 750 * 100);
        left: calc(19vw / 750 * 100);
        width: calc(155vw / 750 * 100);
        height: calc(152vw / 750 * 100);
        margin: 0 auto;
    }
}

/* flow */
.flow-box {
    position: relative;
    background-color: #fff;
    margin-top: min(calc(65vw / 1366 * 100), 65px);
    padding: min(calc(130vw / 1366 * 100), 130px) 0 min(calc(75vw / 1366 * 100), 75px);
    border-radius: min(calc(25vw / 1366 * 100), 25px);
}

.flow-box-head-area {
    position: absolute;
    top: max(calc(-20vw / 1366 * 100), -20px);
    left: 0;
    right: 0;
    width: min(calc(470vw / 1366 * 100), 470px);
    margin: 0 auto;
    text-align: center;
}

.flow-box-sub-head {
    margin-top: min(calc(10vw / 1366 * 100), 10px);
    font-size: min(calc(28vw / 1366 * 100), 28px);
    font-weight: bold;
}

.flow-box-cnt-area {
    display: flex;
    justify-content: space-between;
    width: min(calc(900vw / 1366 * 100), 900px);
    margin: 0 auto;
}

.flow-box-cnt {
    position: relative;
    width: min(calc(370vw / 1366 * 100), 370px);
    padding: min(calc(30vw / 1366 * 100), 30px) min(calc(35vw / 1366 * 100), 35px);
    border-radius: min(calc(10vw / 1366 * 100), 10px);
    color: #173660;
    text-align: center;
}

.flow-box-cnt.buyer {
    background-color: #E6EDF4;
}

.flow-box-cnt.seller {
    background-color: #E6F1D1;
}

.flow-box-cnt-firm {
    position: absolute;
    top: max(calc(-83vw / 1366 * 100), -83px);
    left: 0;
    right: 0;
    width: min(calc(110vw / 1366 * 100), 110px);
    margin: 0 auto;
}

.flow-box-cnt-type {
    padding: min(calc(10vw / 1366 * 100), 10px) 0;
    font-size: min(calc(28vw / 1366 * 100), 28px);
    font-weight: bold;
    color: #fff;
    border-radius: min(calc(10vw / 1366 * 100), 10px);
    line-height: 1.1;
}

.flow-box-cnt-type .small {
    font-size: min(calc(20vw / 1366 * 100), 20px);
}

.buyer .flow-box-cnt-type {
    background-color: #2C67A3;
}

.seller .flow-box-cnt-type {
    background-color: #76AF03;
}

.flow-box-cnt-img {
    height: min(calc(167vw / 1366 * 100), 167px);
    position: relative;
    margin: 0 auto;
    z-index: 2;
}

.buyer .flow-box-cnt-img {
    width: min(calc(233vw / 1366 * 100), 233px);
    transform: translate(max(calc(-18vw / 1366 * 100), -18px), min(calc(14vw / 1366 * 100), 14px));
}

.seller .flow-box-cnt-img {
    width: min(calc(238vw / 1366 * 100), 238px);
    transform: translate(max(calc(-13vw / 1366 * 100), -13px), min(calc(0vw / 1366 * 100), 0px));
}

.flow-box-cnt-arrow {
    position: absolute;
    z-index: 1;
}

.buyer .flow-box-cnt-arrow {
    top: min(calc(131vw / 1366 * 100), 131px);
    left: min(calc(267vw / 1366 * 100), 267px);
    width: min(calc(333vw / 1366 * 100), 333px);
}

.seller .flow-box-cnt-arrow {
    top: min(calc(308vw / 1366 * 100), 308px);
    left: max(calc(-230vw / 1366 * 100), -230px);
    width: min(calc(277vw / 1366 * 100), 277px);
}

.flow-box-cnt-sub-head {
    font-size: min(calc(26vw / 1366 * 100), 26px);
    font-weight: bold;
}

.flow-box-cnt-head {
    font-size: min(calc(40vw / 1366 * 100), 40px);
    font-weight: bold;
    line-height: 1.4;
}

.buyer .flow-box-cnt-head {
    color: #2C67A3;
}

.seller .flow-box-cnt-head {
    color: #76AF03;
}

.flow-box-cnt-bubble {
    position: relative;
    margin-top: min(calc(15vw / 1366 * 100), 15px);
    padding: min(calc(2vw / 1366 * 100), 2px) 0;
    font-size: min(calc(24vw / 1366 * 100), 24px);
    font-weight: bold;
    color: #fff;
    border-radius: min(calc(10vw / 1366 * 100), 10px);
    z-index: 1;
}

.buyer .flow-box-cnt-bubble {
    background-color: #2C67A3;
}

.seller .flow-box-cnt-bubble {
    background-color: #76AF03;
}

.flow-box-cnt-bubble::after {
    content: "";
    display: block;
    position: absolute;
    bottom: max(calc(-4vw / 1366 * 100), -4px);
    left: 0;
    right: 0;
    width: min(calc(24vw / 1366 * 100), 24px);
    height: min(calc(24vw / 1366 * 100), 24px);
    margin: 0 auto;
    transform: rotate(45deg);
    z-index: -1;
}

.buyer .flow-box-cnt-bubble::after {
    background-color: #2C67A3;
}

.seller .flow-box-cnt-bubble::after {
    background-color: #76AF03;
}

.flow-box-cnt-txt-list {
    margin-top: min(calc(20vw / 1366 * 100), 20px);
}

.buyer .flow-box-cnt-txt-list {
    transform: translateX(min(calc(10vw / 1366 * 100), 10px));
}

.flow-box-cnt-txt {
    font-size: min(calc(20vw / 1366 * 100), 20px);
    font-weight: bold;
    text-align: left;
}

.flow-box-cnt-txt+.flow-box-cnt-txt {
    margin-top: min(calc(8vw / 1366 * 100), 8px);
}

.flow-box-cnt-people {
    position: absolute;
}

.buyer .flow-box-cnt-people {
    bottom: max(calc(-10vw / 1366 * 100), -10px);
    left: max(calc(-33vw / 1366 * 100), -33px);
    width: min(calc(60vw / 1366 * 100), 60px);
}

.seller .flow-box-cnt-people {
    bottom: max(calc(-6vw / 1366 * 100), -6px);
    right: max(calc(-30vw / 1366 * 100), -30px);
    width: min(calc(96vw / 1366 * 100), 96px);
}

@media (max-width: 750px) {
    .flow-head {
        font-size: calc(68vw / 750 * 100);
    }

    .flow-head .sp-small {
        font-size: calc(52vw / 750 * 100);
    }

    .flow-box {
        margin-top: calc(105vw / 750 * 100);
        padding: calc(265vw / 750 * 100) 0 calc(75vw / 750 * 100);
        border-radius: calc(20vw / 750 * 100);
    }

    .flow-box-head-area {
        top: calc(-25vw / 750 * 100);
        width: calc(590vw / 750 * 100);
    }

    .flow-box-sub-head {
        margin-top: calc(20vw / 750 * 100);
        font-size: calc(44vw / 750 * 100);
    }

    .flow-box-cnt-area {
        flex-direction: column;
        width: calc(590vw / 750 * 100);
    }

    .flow-box-cnt {
        width: 100%;
        padding: calc(55vw / 750 * 100) calc(55vw / 750 * 100);
        border-radius: calc(20vw / 750 * 100);
    }

    .flow-box-cnt+.flow-box-cnt {
        margin-top: calc(195vw / 750 * 100);
    }

    .flow-box-cnt-firm {
        top: calc(-128vw / 750 * 100);
        width: calc(183vw / 750 * 100);
    }

    .flow-box-cnt-type {
        padding: calc(16vw / 750 * 100) 0;
        font-size: calc(44vw / 750 * 100);
        border-radius: calc(20vw / 750 * 100);
    }

    .flow-box-cnt-type .small {
        font-size: calc(28vw / 750 * 100);
    }

    .flow-box-cnt-img {
        height: calc(232vw / 750 * 100);
    }

    .buyer .flow-box-cnt-img {
        width: calc(373vw / 750 * 100);
        transform: translate(calc(-22vw / 750 * 100), calc(14vw / 750 * 100));
    }

    .seller .flow-box-cnt-img {
        width: calc(385vw / 750 * 100);
        transform: translate(calc(-27vw / 750 * 100), calc(0vw / 750 * 100));
    }

    .buyer .flow-box-cnt-arrow {
        top: auto;
        bottom: calc(-250vw / 750 * 100);
        left: calc(148vw / 750 * 100);
        width: calc(145vw / 750 * 100);
    }

    .seller .flow-box-cnt-arrow {
        top: calc(-237vw / 750 * 100);
        left: calc(298vw / 750 * 100);
        width: calc(141vw / 750 * 100);
    }

    .flow-box-cnt-sub-head {
        margin-top: calc(40vw / 750 * 100);
        font-size: calc(40vw / 750 * 100);
    }

    .flow-box-cnt-head {
        font-size: calc(60vw / 750 * 100);
    }

    .flow-box-cnt-bubble {
        margin-top: calc(20vw / 750 * 100);
        padding: calc(5vw / 750 * 100) 0;
        font-size: calc(34vw / 750 * 100);
        border-radius: calc(15vw / 750 * 100);
    }

    .flow-box-cnt-bubble::after {
        bottom: calc(-4vw / 750 * 100);
        width: calc(36vw / 750 * 100);
        height: calc(24vw / 750 * 100);
    }

    .flow-box-cnt-txt-list {
        margin-top: calc(35vw / 750 * 100);
        transform: translateX(calc(25vw / 750 * 100));
    }

    .buyer .flow-box-cnt-txt-list {
        transform: translateX(calc(52vw / 750 * 100));
    }

    .flow-box-cnt-txt {
        font-size: calc(27vw / 750 * 100);
    }

    .flow-box-cnt-txt+.flow-box-cnt-txt {
        margin-top: calc(8vw / 750 * 100);
    }

    .buyer .flow-box-cnt-people {
        bottom: calc(-42vw / 750 * 100);
        left: calc(-24vw / 750 * 100);
        width: calc(88vw / 750 * 100);
    }

    .seller .flow-box-cnt-people {
        bottom: calc(-29vw / 750 * 100);
        right: calc(-27vw / 750 * 100);
        width: calc(140vw / 750 * 100);
    }
}

/* support */
.support-box-list {
    margin-top: min(calc(80vw / 1366 * 100), 80px);
}

.support-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: min(calc(360vw / 1366 * 100), 360px);
    padding: 0 min(calc(40vw / 1366 * 100), 40px);
    border-radius: min(calc(180vw / 1366 * 100), 180px);
}

.support-box:nth-child(odd) {
    background: linear-gradient(90deg, #f3efe6 0%, #fff 100%);
}

.support-box:nth-child(even) {
    background: linear-gradient(-90deg, #f3efe6 0%, #fff 100%);
    flex-direction: row-reverse;
}

.support-box+.support-box {
    margin-top: min(calc(35vw / 1366 * 100), 35px);
}

.support-box-txt-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(calc(700vw / 1366 * 100), 700px);
    height: 100%;
    color: #173660;
}

.support-box:nth-child(2) .support-box-txt-area {
    padding-top: min(calc(30vw / 1366 * 100), 30px);
}

.support-box-head {
    font-size: min(calc(36vw / 1366 * 100), 36px);
    font-weight: 900;
}

.support-box-txt {
    margin-top: min(calc(20vw / 1366 * 100), 20px);
    font-size: min(calc(18vw / 1366 * 100), 18px);
    line-height: 2;
}

.support-box-img_01 {
    width: min(calc(236vw / 1366 * 100), 236px);
    transform: translate(min(calc(64vw / 1366 * 100), 64px), max(calc(-29vw / 1366 * 100), -29px));
}

.support-box-img_02 {
    width: min(calc(310vw / 1366 * 100), 310px);
    transform: translate(max(calc(-17vw / 1366 * 100), -17px), max(calc(-23vw / 1366 * 100), -23px));
}

.support-box-img_03 {
    width: min(calc(310vw / 1366 * 100), 310px);
    transform: translate(min(calc(9vw / 1366 * 100), 9px), max(calc(-35vw / 1366 * 100), -35px));
}

@media (max-width: 750px) {
    .support {
        padding-bottom: calc(240vw / 750 * 100);
    }

    .support-sub-head {
        font-size: calc(36vw / 750 * 100);
    }

    .support-head {
        margin-top: calc(30vw / 750 * 100);
        font-size: calc(60vw / 750 * 100);
    }

    .support-box-list {
        margin-top: calc(65vw / 750 * 100);
    }

    .support-box {
        position: relative;
        height: auto;
        padding: calc(50vw / 750 * 100) calc(40vw / 750 * 100) calc(320vw / 750 * 100);
        border-radius: calc(30vw / 750 * 100);
        flex-direction: column-reverse;
        justify-content: flex-start;
    }

    .support-box:nth-child(odd) {
        background: linear-gradient(180deg, #f3efe6 0%, #fff 100%);
    }

    .support-box:nth-child(even) {
        background: linear-gradient(180deg, #f3efe6 0%, #fff 100%);
        flex-direction: column-reverse;
    }

    .support-box:nth-child(2) {
        margin-top: calc(100vw / 750 * 100);
    }

    .support-box:nth-child(3) {
        margin-top: calc(205vw / 750 * 100);
    }

    .support-box-txt-area {
        width: calc(590vw / 750 * 100);
    }

    .support-box:nth-child(2) .support-box-txt-area {
        padding-top: calc(30vw / 750 * 100);
    }

    .support-box-head {
        font-size: calc(46vw / 750 * 100);
        text-align: center;
    }

    .support-box-txt {
        margin-top: calc(40vw / 750 * 100);
        font-size: calc(32vw / 750 * 100);
        line-height: 1.9;
    }

    .support-box-img {
        position: absolute;
    }

    .support-box-img_01 {
        bottom: calc(-40vw / 750 * 100);
        left: calc(120vw / 750 * 100);
        width: calc(446vw / 750 * 100);
        transform: none;
    }

    .support-box-img_02 {
        bottom: calc(-141vw / 750 * 100);
        left: calc(144vw / 750 * 100);
        width: calc(382vw / 750 * 100);
        transform: none;
    }

    .support-box-img_03 {
        bottom: calc(-101vw / 750 * 100);
        left: calc(136vw / 750 * 100);
        width: calc(415vw / 750 * 100);
        transform: none;
    }
}

/* realization */
.realization-box-list {
    display: flex;
    justify-content: space-between;
    margin-top: min(calc(180vw / 1366 * 100), 180px);
}

.realization-box {
    position: relative;
    background-color: #fff;
    width: min(calc(360vw / 1366 * 100), 360px);
    height: min(calc(390vw / 1366 * 100), 390px);
    padding: min(calc(120vw / 1366 * 100), 120px) min(calc(20vw / 1366 * 100), 20px) 0;
    border-radius: min(calc(20vw / 1366 * 100), 20px);
    box-shadow: min(calc(0vw / 1366 * 100), 0px) min(calc(3vw / 1366 * 100), 3px) min(calc(6vw / 1366 * 100), 6px) rgba(0, 0, 0, 0.16);
}

.realization-box-img {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.realization-box-img_01 {
    top: max(calc(-124vw / 1366 * 100), -124px);
    width: min(calc(190vw / 1366 * 100), 190px);
}

.realization-box-img_02 {
    top: max(calc(-116vw / 1366 * 100), -116px);
    width: min(calc(158vw / 1366 * 100), 158px);
}

.realization-box-img_03 {
    top: max(calc(-115vw / 1366 * 100), -115px);
    width: min(calc(177vw / 1366 * 100), 177px);
}

.realization-box-head {
    font-size: min(calc(28vw / 1366 * 100), 28px);
    font-weight: 900;
    color: #173660;
    text-align: center;
}

.realization-box-txt {
    width: min(calc(300vw / 1366 * 100), 300px);
    margin: min(calc(25vw / 1366 * 100), 25px) auto 0;
    font-size: min(calc(18vw / 1366 * 100), 18px);
    line-height: 1.7;
}

@media (max-width: 750px) {
    .realization-box-list {
        flex-direction: column;
        margin-top: calc(315vw / 750 * 100);
    }

    .realization-box {
        width: 100%;
        height: auto;
        padding: calc(215vw / 750 * 100) calc(60vw / 750 * 100) calc(55vw / 750 * 100);
        border-radius: calc(40vw / 750 * 100);
        box-shadow: calc(0vw / 750 * 100) calc(3vw / 750 * 100) calc(6vw / 750 * 100) rgba(0, 0, 0, 0.16);
    }

    .realization-box+.realization-box {
        margin-top: calc(275vw / 750 * 100);
    }

    .realization-box-img_01 {
        top: calc(-231vw / 750 * 100);
        width: calc(350vw / 750 * 100);
    }

    .realization-box-img_02 {
        top: calc(-216vw / 750 * 100);
        width: calc(292vw / 750 * 100);
    }

    .realization-box-img_03 {
        top: calc(-212vw / 750 * 100);
        width: calc(326vw / 750 * 100);
    }

    .realization-box-head {
        font-size: calc(48vw / 750 * 100);
    }

    .realization-box-txt {
        width: 100%;
        margin: calc(45vw / 750 * 100) auto 0;
        font-size: calc(32vw / 750 * 100);
        line-height: 1.9;
    }
}

/* step */
.step-slider-area {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: min(calc(70vw / 1366 * 100), 70px);
}

.step-slider-cnt {
    width: min(calc(722vw / 1366 * 100), 722px);
    overflow-x: hidden;
}

.step-slider-menu-list {
    display: block;
    width: min(calc(382vw / 1366 * 100), 382px);
}

.step-slider-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #F3EFE6;
    width: 100%;
    height: min(calc(161vw / 1366 * 100), 161px);
    font-size: min(calc(24vw / 1366 * 100), 24px);
    font-weight: 900;
    color: #344676;
    border-radius: min(calc(15vw / 1366 * 100), 15px);
    transition: all 0.3s;
    cursor: pointer;
}

.step-slider-menu-item+.step-slider-menu-item {
    margin-top: min(calc(10vw / 1366 * 100), 10px);
}

.step-slider-menu-item.swiper-slide-thumb-active {
    color: #fff;
}

.step-slider-menu-item.swiper-slide-thumb-active {
    background-color: #2C67A3;
}

.step-slider-menu-item.swiper-slide-thumb-active::after {
    content: "";
    display: block;
    background-color: #2A6098;
    position: absolute;
    top: min(calc(71vw / 1366 * 100), 71px);
    left: max(calc(-24vw / 1366 * 100), -24px);
    width: min(calc(13vw / 1366 * 100), 13px);
    height: min(calc(13vw / 1366 * 100), 13px);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.step-slider-menu-item-inner {
    padding: min(calc(30vw / 1366 * 100), 30px);
}

.step-slider-menu-item-step {
    font-size: min(calc(18vw / 1366 * 100), 18px);
}

.swiper-slide-thumb-active .step-slider-menu-item-step {
    color: #A6D642;
}

.step-slider-menu-item-step-num {
    font-size: min(calc(22vw / 1366 * 100), 22px);
}

.step-slider-menu-item-step-txt {
    margin-top: min(calc(5vw / 1366 * 100), 5px);
    font-size: min(calc(24vw / 1366 * 100), 24px);
}

.step-slider-area .swiper-pagination {
    width: min(calc(722vw / 1366 * 100), 722px);
    bottom: max(calc(-44vw / 1366 * 100), -44px);
    left: 0;
}

@media (max-width: 750px) {
    .step {
        padding-bottom: calc(210vw / 750 * 100);
    }

    .step-sub-head {
        font-size: calc(36vw / 750 * 100);
    }

    .step-slider-area {
        align-items: flex-start;
        flex-direction: column-reverse;
        margin-top: calc(65vw / 750 * 100);
    }

    .step-slider-cnt {
        width: 100%;
    }

    .step-slider-cnt img {
        border-radius: calc(40vw / 750 * 100);
    }

    .step-slider-menu-list {
        display: flex;
        width: calc(630vw / 750 * 100);
        margin-bottom: calc(50vw / 750 * 100);
    }

    .step-slider-menu-item {
        width: calc(670vw / 750 * 100);
        height: calc(160vw / 750 * 100);
        border-radius: calc(40vw / 750 * 100);
        margin-right: calc(30vw / 750 * 100);
    }

    .step-slider-menu-item.swiper-slide-active {
        background-color: #2C67A3;
        color: #fff;
    }

    .step-slider-menu-item.swiper-slide-thumb-active::after {
        content: none;
    }

    .step-slider-menu-item.swiper-slide-active::after {
        content: "";
        display: block;
        background-color: #2A6098;
        position: absolute;
        bottom: calc(-40vw / 750 * 100);
        left: 0;
        right: 0;
        width: calc(20vw / 750 * 100);
        height: calc(20vw / 750 * 100);
        margin: 0 auto;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
    }

    .step-slider-menu-item-inner {
        padding: 0 calc(40vw / 750 * 100);
    }

    .step-slider-menu-item-step {
        font-size: calc(32vw / 750 * 100);
    }

    .swiper-slide-active .step-slider-menu-item-step {
        color: #A6D642;
    }

    .step-slider-menu-item-step-num {
        font-size: calc(40vw / 750 * 100);
    }

    .step-slider-menu-item-step-txt {
        font-size: calc(35vw / 750 * 100);
    }

    .step-slider-area .swiper-pagination {
        width: calc(670vw / 750 * 100);
        bottom: calc(-76vw / 750 * 100);
    }
}

/* example */
.example-head {
    line-height: 1.4;
}

.example-head .accent {
    font-size: min(calc(72vw / 1366 * 100), 72px);
}

.example-txt {
    margin-top: min(calc(5vw / 1366 * 100), 5px);
    font-size: min(calc(28vw / 1366 * 100), 28px);
    font-weight: 900;
    color: #173660;
    text-align: center;
}

.example-slider-area {
    position: relative;
    height: min(calc(713vw / 1366 * 100), 713px);
    margin-top: min(calc(50vw / 1366 * 100), 50px);
}

.example-slider-cnt {
    padding: min(calc(10vw / 1366 * 100), 10px) min(calc(10vw / 1366 * 100), 10px);
    overflow: hidden;
}

.example-slider-box {
    background-color: #fff;
    border-radius: min(calc(20vw / 1366 * 100), 20px);
    box-shadow: min(calc(0vw / 1366 * 100), 0px) min(calc(0vw / 1366 * 100), 0px) min(calc(16vw / 1366 * 100), 16px) max(calc(-6vw / 1366 * 100), -6px) #3557C4;
    transition: all 0.3s;
    cursor: pointer;
}

.example-slider-box:hover {
    opacity: 0.7;
}

.example-slider-txt-area {
    position: relative;
    padding: min(calc(35vw / 1366 * 100), 35px) min(calc(35vw / 1366 * 100), 35px);
    height: min(calc(420vw / 1366 * 100), 420px);
    box-sizing: border-box;
}

.example-slider-box-head {
    height: min(calc(190vw / 1366 * 100), 190px);
    font-size: min(calc(22vw / 1366 * 100), 22px);
    font-weight: bold;
    color: #173660;
    line-height: 1.7;
}

.example-slider-box-name {
    height: min(calc(52vw / 1366 * 100), 52px);
    margin-top: min(calc(15vw / 1366 * 100), 15px);
    font-size: min(calc(18vw / 1366 * 100), 18px);
}

.example-slider-box-category {
    display: flex;
    width: 100%;
    margin-top: min(calc(15vw / 1366 * 100), 15px);
}

.example-slider-box-category-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: min(calc(41vw / 1366 * 100), 41px);
    font-weight: bold;
    border-radius: min(calc(10vw / 1366 * 100), 10px);
}

.example-slider-box-category-item.scale {
    background-color: #2C67A3;
    width: min(calc(143vw / 1366 * 100), 143px);
    font-size: min(calc(16vw / 1366 * 100), 16px);
    color: #fff;
}

.example-slider-box-category-item.area {
    width: min(calc(125vw / 1366 * 100), 125px);
    margin-left: min(calc(10vw / 1366 * 100), 10px);
    font-size: min(calc(14vw / 1366 * 100), 14px);
    color: #173660;
    border: min(calc(2vw / 1366 * 100), 2px) solid #173660;
}

.example-slider-box-category-item.small {
    width: min(calc(135vw / 1366 * 100), 135px);
    font-size: min(calc(12vw / 1366 * 100), 12px);
}

.example-slider-box-category-item.one-hundred-over {
    background-color: #76AF03;
    width: min(calc(100vw / 1366 * 100), 100px);
}

.example-slider-box-watch {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: min(calc(30vw / 1366 * 100), 30px);
    font-size: min(calc(16vw / 1366 * 100), 16px);
    color: #173660;
    text-align: right;
}

.example-slider-box-watch::before {
    content: "";
    display: block;
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/example_icon_watch.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: min(calc(20vw / 1366 * 100), 20px);
    height: min(calc(20vw / 1366 * 100), 20px);
    margin-right: min(calc(10vw / 1366 * 100), 10px);
}

.example-slider-area .swiper-pagination {
    bottom: 0;
    left: 0;
}

.example-slider-prev,
.example-slider-next {
    top: min(calc(300vw / 1366 * 100), 300px);
    width: min(calc(50vw / 1366 * 100), 50px);
    height: min(calc(50vw / 1366 * 100), 50px);
    z-index: 1;
}

.example-slider-prev {
    left: max(calc(-22vw / 1366 * 100), -22px);
}

.example-slider-next {
    right: max(calc(-22vw / 1366 * 100), -22px);
}

.example-slider-prev::after,
.example-slider-next::after {
    content: "";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.example-slider-prev::after {
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/example_icon_prev.svg);

}

.example-slider-next::after {
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/example_icon_next.svg);
}

@media (max-width: 750px) {
    .example-head .accent {
        font-size: calc(88vw / 750 * 100);
    }

    .example-txt {
        margin-top: calc(15vw / 750 * 100);
        font-size: calc(36vw / 750 * 100);
    }

    .example-slider-area {
        height: calc(1088vw / 750 * 100);
        margin-top: calc(70vw / 750 * 100);
    }

    .example-slider-cnt {
        width: calc(640vw / 750 * 100);
        padding: calc(10vw / 750 * 100) calc(10vw / 750 * 100);
        overflow: visible;
    }

    .example-slider-box {
        border-radius: calc(40vw / 750 * 100);
        box-shadow: calc(0vw / 750 * 100) calc(0vw / 750 * 100) calc(16vw / 750 * 100) calc(-6vw / 750 * 100) #3557C4;
    }

    .example-slider-txt-area {
        padding: calc(25vw / 750 * 100) calc(35vw / 750 * 100);
        height: calc(614vw / 750 * 100);
    }

    .example-slider-box-head {
        height: calc(232vw / 750 * 100);
        font-size: calc(36vw / 750 * 100);
    }

    .example-slider-box-name {
        height: calc(112vw / 750 * 100);
        margin-top: calc(35vw / 750 * 100);
        font-size: calc(32vw / 750 * 100);
    }

    .example-slider-box-category {
        margin-top: calc(5vw / 750 * 100);
    }

    .example-slider-box-category-item {
        height: calc(80vw / 750 * 100);
        border-radius: calc(20vw / 750 * 100);
    }

    .example-slider-box-category-item.scale {
        width: calc(256vw / 750 * 100);
        font-size: calc(28vw / 750 * 100);
    }

    .example-slider-box-category-item.area {
        width: calc(240vw / 750 * 100);
        margin-left: calc(10vw / 750 * 100);
        font-size: calc(28vw / 750 * 100);
        border: calc(2vw / 750 * 100) solid #173660;
    }

    .example-slider-box-category-item.small {
        width: calc(286vw / 750 * 100);
        font-size: calc(24vw / 750 * 100);
    }

    .example-slider-box-category-item.one-hundred-over {
        width: calc(184vw / 750 * 100);
    }

    .example-slider-box-watch {
        margin-top: calc(35vw / 750 * 100);
        font-size: calc(28vw / 750 * 100);
    }

    .example-slider-box-watch::before {
        width: calc(40vw / 750 * 100);
        height: calc(40vw / 750 * 100);
        margin-right: calc(10vw / 750 * 100);
    }

    .example-slider-prev,
    .example-slider-next {
        display: none;
    }
}

/* contact */
.contact-logo {
    width: min(calc(360vw / 1366 * 100), 360px);
    margin: min(calc(60vw / 1366 * 100), 60px) auto 0;
}

.contact-logo-txt {
    margin-top: min(calc(5vw / 1366 * 100), 5px);
    font-size: min(calc(36vw / 1366 * 100), 36px);
    font-weight: 900;
    color: #2C67A3;
    text-align: center;
}

.contact-txt {
    margin-top: min(calc(20vw / 1366 * 100), 20px);
    font-size: min(calc(16vw / 1366 * 100), 16px);
    text-align: center;
}

.contact-form {
    width: 100%;
    height: 950px;
    margin: min(calc(50vw / 1366 * 100), 50px) auto 0;
}

@media (max-width: 950px) {
    .contact-form {
        height: 1450px;
    }
}

@media (max-width: 750px) {
    .contact-head {
        font-size: calc(52vw / 750 * 100);
    }

    .contact-head .accent {
        font-size: calc(60vw / 750 * 100);
    }

    .contact-logo {
        width: calc(490vw / 750 * 100);
        margin: calc(60vw / 750 * 100) auto 0;
    }

    .contact-logo-txt {
        margin-top: calc(5vw / 750 * 100);
        font-size: calc(50vw / 750 * 100);
    }

    .contact-txt {
        margin-top: calc(20vw / 750 * 100);
        font-size: calc(32vw / 750 * 100);
        line-height: 1.6;
    }

    .contact-form {
        height: 1500px;
        margin: calc(50vw / 750 * 100) auto 0;
    }
}

/* bnr-area */
.bnr-area {
    padding: min(calc(100vw / 1366 * 100), 100px) 0;
}

.bnr-area-head {
    position: relative;
    font-size: min(calc(42vw / 1366 * 100), 42px);
    font-weight: bold;
    color: #173660;
    text-align: center;
}

.bnr-area-head::before,
.bnr-area-head::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
}

.bnr {
    margin-top: min(calc(30vw / 1366 * 100), 30px);
}

@media (max-width: 750px) {
    .bnr-area {
        padding: calc(100vw / 750 * 100) 0;
    }

    .bnr-area-head {
        font-size: calc(56vw / 750 * 100);
    }

    .bnr {
        margin-top: calc(30vw / 750 * 100);
    }
}

/* footer */
.footer {
    background-color: #333;
    padding: 50px 0;
    color: #fff;
}

.footer .inner {
    width: 1050px;
    display: flex;
    justify-content: space-between;
}

.footer-link-area {
    width: 615px;
    border-right: 1px solid #444;
}

.footer-link-head {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.footer-link-list-list {
    display: flex;
    flex-wrap: wrap;
}

.footer-link-list {
    width: 305px;
}

.footer-link-list:first-child {
    margin-bottom: 30px;
}

.footer-link-item {
    font-size: 16px;
    padding: 4px 0;
}

.footer-link-item.new-tab::after {
    content: "";
    display: inline-block;
    background-image: url(/web/jp/asp/buyer/hotel/img/pc/icon_new-tab.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 10px;
    height: 12px;
    margin-left: 10px;
}

.footer-info-area {
    position: relative;
    width: 400px;
    padding: 0 50px 50px;
    box-sizing: border-box;
}

.footer-info-sns-list {
    display: flex;
    margin-top: 30px;
}

.footer-info-sns-item {
    width: 40px;
    border-radius: 40px;
    border: 1px solid #fff;
    background-color: #fff;
    margin-right: 15px;
}

.footer-info-sns-item:last-child {
    margin-right: 0;
}

.footer-info-copyright {
    position: absolute;
    bottom: 0;
    left: 50px;
    font-size: 13px;
    color: #999;
}

@media (max-width: 1200px) {
    .footer {
        padding: calc(50vw / 1200 * 100) 0;
    }

    .footer .inner {
        width: calc(1050vw / 1200 * 100);
    }

    .footer-link-area {
        width: calc(615vw / 1200 * 100);
    }

    .footer-link-head {
        font-size: calc(18vw / 1200 * 100);
        margin-bottom: calc(10vw / 1200 * 100);
    }

    .footer-link-list {
        width: calc(305vw / 1200 * 100);
    }

    .footer-link-list:first-child {
        margin-bottom: calc(30vw / 1200 * 100);
    }

    .footer-link-item {
        font-size: calc(16vw / 1200 * 100);
        padding: calc(4vw / 1200 * 100) 0;
    }

    .footer-link-item.new-tab::after {
        width: calc(10vw / 1200 * 100);
        height: calc(12vw / 1200 * 100);
        margin-left: calc(10vw / 1200 * 100);
    }

    .footer-info-area {
        width: calc(400vw / 1200 * 100);
        padding: 0 calc(50vw / 1200 * 100) calc(50vw / 1200 * 100);
    }

    .footer-info-sns-list {
        margin-top: calc(30vw / 1200 * 100);
    }

    .footer-info-sns-item {
        width: calc(40vw / 1200 * 100);
        border-radius: calc(40vw / 1200 * 100);
        margin-right: calc(15vw / 1200 * 100);
    }

    .footer-info-copyright {
        left: calc(50vw / 1200 * 100);
        font-size: calc(13vw / 1200 * 100);
    }
}

@media (max-width: 750px) {
    .footer {
        padding: calc(50vw / 750 * 100) 0;
    }

    .footer .inner {
        display: block;
        width: calc(670vw / 750 * 100);
    }

    .footer-link-list-list {
        display: block;
    }

    .footer-link-area {
        width: 100%;
        border-right: none;
        margin-bottom: calc(50vw / 750 * 100);
    }

    .footer-link-head {
        font-size: calc(18vw / 750 * 100);
        margin-bottom: calc(10vw / 750 * 100);
    }

    .footer-link-list {
        width: 100%;
    }

    .footer-link-list:first-child {
        margin-bottom: 0;
    }

    .footer-link-item {
        font-size: calc(30vw / 750 * 100);
        padding: calc(15vw / 750 * 100) 0;
        border-bottom: 1px solid #444;
    }

    .footer-link-item.new-tab::after {
        width: calc(10vw / 750 * 100);
        height: calc(12vw / 750 * 100);
        margin-left: calc(10vw / 750 * 100);
    }

    .footer-info-area {
        width: 100%;
        padding: 0 calc(50vw / 750 * 100);
    }

    .footer-info-sns-list {
        margin-top: calc(30vw / 750 * 100);
        justify-content: center;
    }

    .footer-info-sns-item {
        width: calc(60vw / 750 * 100);
        border-radius: calc(40vw / 750 * 100);
        margin-right: calc(30vw / 750 * 100);
    }

    .footer-info-copyright {
        position: static;
        font-size: calc(22vw / 750 * 100);
        text-align: center;
        margin-top: calc(20vw / 750 * 100);
    }
}