/* =========================================================
   共通ルール（全デバイス）
========================================================= */
.spot-container {
    padding: 40px 40px 0 40px;
    position: relative;
    background-color: transparent;
}

.spot-top-back {
    position: absolute;
    top: 0;
    right: 0;
    width: 1038px;
    height: 688px;
    background-image: url('/img/art/spot/spot_top_back.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    pointer-events: none;
    z-index: -1;
}

.spot-img-front-a {
    position: absolute;
    right: 733px;
    top: 476px;
    width: 392px;
    height: 280px;
    background-image: url('/img/art/spot/spot_top_front1.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
}

.spot-img-front-b {
    position: absolute;
    right: 37px;
    top: 650px;
    width: 158px;
    height: 238px;
    background-image: url('/img/art/spot/spot_top_front2.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
}

.spot-title-wrap {
    position: relative;
    margin-top: 120px;
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 10;
}

.spot-title-subimage {
    width: 327px;
    height: auto;
    display: block;
}

.spot-title-mainimage {
    width: 474px;
    height: auto;
    display: block;
}

.spot-desc {
    margin-top: 40px;
    margin-left: 50px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
    text-align: left;
    color: #222222;
}

.spot-green-area {
    background-color: #8ED28F;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 112px;
    padding-bottom: 174px;
    margin-top: 66px;
    position: relative;
    box-sizing: border-box;
}

.spot-green-inner {
    max-width: 100%;
    padding-left: 100px;
    padding-right: 100px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.search-spot-title {
    font-family: 'Ubuntu', sans-serif;
    font-size: 75px;
    font-weight: 700;
    color: #FFFFFF;
    text-align: left;
}

.search-spot-sub {
    font-size: 16px;
    font-weight: 700;
    color: #222222;
}

.box-area {
    margin-top: 33px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: 100px;
    margin-right: 100px;
}

.spot-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 330px;
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: 4px;
    position: relative;
    box-shadow: 0px 3px 6px #00000029;
    gap: 16px;
    padding: 0;
}

.spot-box:nth-child(1) { border-color: #EB8E22; }
.spot-box:nth-child(2) { border-color: #E6C657; }
.spot-box:nth-child(3) { border-color: #EB9293; }
.spot-box:nth-child(4) { border-color: #7FB2F1; }

.spot-box-title-area {
    position: absolute;
    top: 32px;
    text-align: center;
}

.spot-box-title-jp {
    font-size: 24px;
    font-weight: 700;
    color: #222;
}

.spot-box-title-property {
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

.spot-box-subtitle {
    font-family: Ubuntu, sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-top: 6px;
    padding: 4px 10px;
}

.spot-box:nth-child(1) .spot-box-subtitle { color: #EB8E22; border-color: #EB8E22; }
.spot-box:nth-child(2) .spot-box-subtitle { color: #E6C657; border-color: #E6C657; }
.spot-box:nth-child(3) .spot-box-subtitle { color: #EB9293; border-color: #EB9293; }
.spot-box:nth-child(4) .spot-box-subtitle { color: #7FB2F1; border-color: #7FB2F1; }

.spot-box-image {
    width: 200px;
    height: 130px;
    border-radius: 4px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.box-area .spot-box:nth-child(1) .spot-box-image {
    background-image: url('/img/art/spot/spot_top_yonago.png');
}

.box-area .spot-box:nth-child(2) .spot-box-image {
    background-image: url('/img/art/spot/spot_top_tottori.png');
}

.box-area .spot-box:nth-child(3) .spot-box-image {
    background-image: url('/img/art/spot/spot_top_matsue.png');
}

.box-area .spot-box:nth-child(4) .spot-box-image {
    background-image: url('/img/art/spot/spot_top_izumo.png');
}

.spot-box-search {
    position: absolute;
    bottom: 26px;
    width: 144px;
    height: 40px;
    border-radius: 22px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spot-box-search::after {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    right: 21px;
    top: 50%;
    transform: translateY(-50%);
}

.spot-box:nth-child(1) .spot-box-search { background-color: #EB8E22; }
.spot-box:nth-child(2) .spot-box-search { background-color: #E6C657; }
.spot-box:nth-child(3) .spot-box-search { background-color: #EB9293; }
.spot-box:nth-child(4) .spot-box-search { background-color: #7FB2F1; }

.spot-box-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: auto;
}

.scale-root {
    transform-origin: top left;
}

.mobile-only { display: none; }
.desktop-only { display: block; }

/* =========================================================
   スマホ（〜767px）
========================================================= */
@media screen and (max-width: 767px) {
    .scale-root {
        transform: scale(calc(100vw / 767));
    width: 767px;
    position: relative;
        transform-origin: top left;
        height: auto;
    }

    .spot-container {
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 0;
    }

    .spot-container::before {
        content: "";
        position: absolute;
        top: calc(-40px * 1.9679);     /* = -78.7px */
        left: 0;
        width: 100%;
        height: calc(459px * 1.9679); /* = 903px */
        background-image: url('/img/art/spot/spot_top_back_sp.png');
        background-size: 767px calc(459px * 1.9679);
        background-repeat: no-repeat;
        background-position: center top;
        pointer-events: none;
        z-index: -1;
        margin-left: 0;
    }

    .spot-top-back {
        display: none;
    }

    .spot-img-front-a {
        position: absolute;
        left: 0;
        right: auto;
        top: calc(373px * 1.9679); /* = 734px */
        width: calc(250px * 1.9679);  /* = 492px */
        height: calc(178px * 1.9679); /* = 349px */
        background-image: url('/img/art/spot/spot_top_front1.png');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 10;
    }

    .spot-img-front-b {
        position: absolute;
        right: calc(27px * 1.9679);    /* = 53px */
        left: auto;
        top: calc(705px * 1.9679);     /* = 1387px */
        width: calc(117px * 1.9679);   /* = 230px */
        height: calc(176px * 1.9679);  /* = 346px */
        background-image: url('/img/art/spot/spot_top_front2.png');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 10;
    }

    .spot-title-wrap {
        width: 100%;
        margin-left: 0;
        margin-top: calc(40px * 1.9679); /* = 79px */
        align-items: center;
    }

    .spot-title-subimage {
        width: calc(327px * 1.9679); /* = 643px */
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .spot-title-mainimage {
        width: calc(352px * 1.9679); /* = 693px */
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .spot-desc {
        position: absolute;
        top: calc(581px * 1.9679); /* = 1143px */
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0 calc(30px * 1.9679); /* = 59px */
        box-sizing: border-box;
        text-align: left;
        font-size: calc(16px * 1.9679);
        font-weight: 500;
        letter-spacing: 1.6px;
        line-height: 1.9;
        z-index: 5;
    }

    .spot-green-area {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-top: calc(112px * 1.9679); /* = 220px */
        padding-bottom: calc(93px * 1.9679); /* = 183px */
        margin-top: calc(550px * 1.9679); /* = 1082px */
        position: relative;
        box-sizing: border-box;
        z-index: 1;
    }

    .spot-green-inner {
        padding-left: calc(30px * 1.9679);  /* = 59px */
        padding-right: calc(30px * 1.9679); /* = 59px */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(12px * 1.9679); /* = 24px */
        max-width: 100%;
        box-sizing: border-box;
    }

    .search-spot-title {
        font-family: 'Ubuntu', sans-serif;
        font-size: calc(40px * 1.9679); /* = 79px */
        font-weight: 700;
        color: #FFFFFF;
        text-align: left;
        order: 1;
    }

    .search-spot-sub {
        font-size: calc(16px * 1.9679); /* = 31px */
        font-weight: 700;
        color: #222222;
        order: 0;
    }

    .box-area {
        margin-top: calc(40px * 1.9679); /* = 79px */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: nowrap;
        margin-left: 0;
        margin-right: 0;
        padding: 0 calc(30px * 1.9679); /* = 59px */
        gap: calc(28px * 1.9679); /* = 55px */
        width: 100%;
        box-sizing: border-box;
    }

    .spot-box {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: auto;
        background-color: #fff;
        border: 2px solid transparent;
        border-radius: calc(4px * 1.9679); /* = 7.8px */
        position: relative;
        box-shadow: 0px calc(3px * 1.9679) calc(6px * 1.9679) #00000029;
        gap: calc(16px * 1.9679); /* = 31px */
        padding: calc(20px * 1.9679); /* = 39px */
        box-sizing: border-box;
    }

    .spot-box-title-area {
        position: relative;
        top: 0;
        text-align: center;
        margin-bottom: calc(10px * 1.9679); /* = 20px */
    }

    .spot-box-title-jp {
        font-size: calc(18px * 1.9679); /* = 35px */
        font-weight: 700;
        color: #222;
        white-space: nowrap;
    }

    .spot-box-title-property {
        font-size: calc(14px * 1.9679); /* = 28px */
        font-weight: 700;
        color: #222;
        white-space: nowrap;
    }

    .spot-box-subtitle {
        font-family: Ubuntu, sans-serif;
        font-size: calc(12px * 1.9679); /* = 23px */
        font-weight: 700;
        margin-top: calc(4px * 1.9679); /* = 7px */
        padding: calc(3px * 1.9679) calc(8px * 1.9679); /* = 6px 15px */
        white-space: nowrap;
    }

    .spot-box-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex: 1;
        height: 100%;
        min-width: 0;
    }

    .spot-box-image {
        width: calc(124px * 1.9679); /* = 244px */
        height: calc(94px * 1.9679); /* = 185px */
        border-radius: calc(4px * 1.9679); /* = 7.8px */
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        flex-shrink: 0;
    }

    .spot-box-search {
        position: relative;
        bottom: 0;
        margin-top: calc(12px * 1.9679); /* = 23px */
        width: calc(130px * 1.9679); /* = 255px */
        height: calc(36px * 1.9679); /* = 71px */
        border-radius: calc(22px * 1.9679); /* = 43px */
        font-size: calc(14px * 1.9679); /* = 27px */
        font-weight: 700;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .spot-box-search::after {
        width: calc(7px * 1.9679); /* = 13px */
        height: calc(7px * 1.9679); /* = 13px */
        right: calc(18px * 1.9679); /* = 35px */
        top: 50%;
    }

    .desktop-only { display: none; }
    .mobile-only { display: block; }
}

/* =========================================================
   タブレット（768px〜1024px）
========================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .scale-root {
        transform: scale(calc(100vw / 1024));
        width: 1024px;
        position: relative;
        transform-origin: top left;
        height: auto;
    }

    .spot-container {
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 0;
    }

    .spot-container::before {
        content: "";
        position: absolute;
        top: calc(-40px * 2.6256);
        left: 0;
        width: 100%;
        height: calc(459px * 2.6256);
        background-image: url('/img/art/spot/spot_top_back_sp.png');
        background-size: 1024px calc(459px * 2.6256);
        background-repeat: no-repeat;
        background-position: center top;
        pointer-events: none;
        z-index: -1;
        margin-left: 0;
    }

    .spot-top-back {
        display: none;
    }

    .spot-img-front-a {
        position: absolute;
        left: 0;
        right: auto;
        top: calc(373px * 2.6256);
        width: calc(250px * 2.6256);
        height: calc(178px * 2.6256);
        background-image: url('/img/art/spot/spot_top_front1.png');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 10;
    }

    .spot-img-front-b {
        position: absolute;
        right: calc(27px * 2.6256);
        left: auto;
        top: calc(705px * 2.6256);
        width: calc(117px * 2.6256);
        height: calc(176px * 2.6256);
        background-image: url('/img/art/spot/spot_top_front2.png');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 10;
    }

    .spot-title-wrap {
        width: 100%;
        margin-left: 0;
        margin-top: calc(40px * 2.6256);
        align-items: center;
    }

    .spot-title-subimage {
        width: calc(327px * 2.6256);
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .spot-title-mainimage {
        width: calc(352px * 2.6256);
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .spot-desc {
        position: absolute;
        top: calc(581px * 2.6256);
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0 calc(30px * 2.6256);
        box-sizing: border-box;
        text-align: left;
        font-size: calc(16px * 2.6256);
        font-weight: 500;
        letter-spacing: 1.6px;
        line-height: 1.9;
        z-index: 5;
    }

    .spot-green-area {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-top: calc(112px * 2.6256);
        padding-bottom: calc(93px * 2.6256);
        margin-top: calc(550px * 2.6256);
        position: relative;
        box-sizing: border-box;
        z-index: 1;
    }

    .spot-green-inner {
        padding-left: calc(30px * 2.6256);
        padding-right: calc(30px * 2.6256);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(12px * 2.6256);
        max-width: 100%;
        box-sizing: border-box;
    }

    .search-spot-title {
        font-family: 'Ubuntu', sans-serif;
        font-size: calc(40px * 2.6256);
        font-weight: 700;
        color: #FFFFFF;
        text-align: left;
        order: 1;
    }

    .search-spot-sub {
        font-size: calc(16px * 2.6256);
        font-weight: 700;
        color: #222222;
        order: 0;
    }

    .box-area {
        margin-top: calc(40px * 2.6256);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: nowrap;
        margin-left: 0;
        margin-right: 0;
        padding: 0 calc(30px * 2.6256);
        gap: calc(28px * 2.6256);
        width: 100%;
        box-sizing: border-box;
    }

    .spot-box {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: auto;
        background-color: #fff;
        border: 2px solid transparent;
        border-radius: calc(4px * 2.6256);
        position: relative;
        box-shadow: 0px calc(3px * 2.6256) calc(6px * 2.6256) #00000029;
        gap: calc(16px * 2.6256);
        padding: calc(20px * 2.6256);
        box-sizing: border-box;
    }

    .spot-box-title-area {
        position: relative;
        top: 0;
        text-align: center;
        margin-bottom: calc(10px * 2.6256);
    }

    .spot-box-title-jp {
        font-size: calc(18px * 2.6256);
        font-weight: 700;
        color: #222;
        white-space: nowrap;
    }

    .spot-box-title-property {
        font-size: calc(14px * 2.6256);
        font-weight: 700;
        color: #222;
        white-space: nowrap;
    }

    .spot-box-subtitle {
        font-family: Ubuntu, sans-serif;
        font-size: calc(12px * 2.6256);
        font-weight: 700;
        margin-top: calc(4px * 2.6256);
        padding: calc(3px * 2.6256) calc(8px * 2.6256);
        white-space: nowrap;
    }

    .spot-box-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex: 1;
        height: 100%;
        min-width: 0;
    }

    .spot-box-image {
        width: calc(124px * 2.6256);
        height: calc(94px * 2.6256);
        border-radius: calc(4px * 2.6256);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        flex-shrink: 0;
    }

    .spot-box-search {
        position: relative;
        bottom: 0;
        margin-top: calc(12px * 2.6256);
        width: calc(130px * 2.6256);
        height: calc(36px * 2.6256);
        border-radius: calc(22px * 2.6256);
        font-size: calc(14px * 2.6256);
        font-weight: 700;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .spot-box-search::after {
        width: calc(7px * 2.6256);
        height: calc(7px * 2.6256);
        right: calc(18px * 2.6256);
        top: 50%;
    }

    .desktop-only { display: none; }
    .mobile-only { display: block; }
}

/* =========================================================
   PC（1025px以上）
========================================================= */
@media screen and (min-width: 1025px) and (max-width: 1600px) {
    .scale-root {
        transform: scale(calc(100vw / 1600));
        transform-origin: top left;
        width: 1600px;
    }

    .spot-container {
        padding: 40px 0 0 0;
        position: relative;
        background-color: transparent;
    }

    .box-area {
        margin-top: 33px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .spot-top-back {
        position: absolute;
        top: 0;
        right: 0;
        width: 1038px;
        height: 688px;
        background-image: url('/img/art/spot/spot_top_back.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top right;
        pointer-events: none;
        z-index: -1;
    }

    .spot-img-front-a {
        position: absolute;
        right: 733px;
        top: 476px;
        width: 392px;
        height: 280px;
        background-image: url('/img/art/spot/spot_top_front1.png');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 10;
    }

    .spot-img-front-b {
        position: absolute;
        right: 37px;
        top: 650px;
        width: 158px;
        height: 238px;
        background-image: url('/img/art/spot/spot_top_front2.png');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 10;
    }

    .spot-title-wrap {
        position: relative;
        margin-top: 120px;
        margin-left: 40px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        z-index: 10;
    }

    .spot-title-subimage {
        width: 327px;
        height: auto;
        display: block;
    }

    .spot-title-mainimage {
        width: 474px;
        height: auto;
        display: block;
    }

    .spot-desc {
        margin-top: 40px;
        margin-left: 50px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.8;
        text-align: left;
        color: #222222;
    }

    .spot-green-area {
        background-color: #8ED28F;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-top: 112px;
        padding-bottom: 174px;
        margin-top: 66px;
        position: relative;
        box-sizing: border-box;
    }

    .spot-green-inner {
        max-width: 100%;
        padding-left: 100px;
        padding-right: 100px;
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .search-spot-title {
        font-family: 'Ubuntu', sans-serif;
        font-size: 75px;
        font-weight: 700;
        color: #FFFFFF;
        text-align: left;
    }

    .search-spot-sub {
        font-size: 16px;
        font-weight: 700;
        color: #222222;
    }

    .box-area {
        margin-top: 33px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-left: 100px;
        margin-right: 100px;
    }

    .spot-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 320px;
        height: 330px;
        background-color: #fff;
        border: 2px solid transparent;
        border-radius: 4px;
        position: relative;
        box-shadow: 0px 3px 6px #00000029;
        gap: 16px;
        padding: 0;
    }

    .spot-box:nth-child(1) { border-color: #EB8E22; }
    .spot-box:nth-child(2) { border-color: #E6C657; }
    .spot-box:nth-child(3) { border-color: #EB9293; }
    .spot-box:nth-child(4) { border-color: #7FB2F1; }

    .spot-box-title-area {
        position: absolute;
        top: 32px;
        text-align: center;
    }

    .spot-box-title-jp {
        font-size: 24px;
        font-weight: 700;
        color: #222;
    }

    .spot-box-title-property {
        font-size: 18px;
        font-weight: 700;
        color: #222;
    }

    .spot-box-subtitle {
        font-family: Ubuntu, sans-serif;
        font-size: 16px;
        font-weight: 700;
        margin-top: 6px;
        padding: 4px 10px;
    }

    .spot-box:nth-child(1) .spot-box-subtitle { color: #EB8E22; border-color: #EB8E22; }
    .spot-box:nth-child(2) .spot-box-subtitle { color: #E6C657; border-color: #E6C657; }
    .spot-box:nth-child(3) .spot-box-subtitle { color: #EB9293; border-color: #EB9293; }
    .spot-box:nth-child(4) .spot-box-subtitle { color: #7FB2F1; border-color: #7FB2F1; }

    .spot-box-image {
        width: 200px;
        height: 130px;
        border-radius: 4px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .spot-box-search {
        position: absolute;
        bottom: 26px;
        width: 144px;
        height: 40px;
        border-radius: 22px;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .spot-box-search::after {
        content: "";
        width: 8px;
        height: 8px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        right: 21px;
        top: 50%;
        transform: translateY(-50%);
    }

    .mobile-only { display: none; }
    .desktop-only { display: block; }
}