@charset "utf-8";

/* ナビゲーションアイコンの基本スタイル */
.class01.on, .class02.on,
.class01.off, .class02.off {
   width: 168px;
   min-height: 90px;
   cursor: pointer;
}

.map__clickimg{
    top: 58vw;
    bottom: auto;
}

/* ホバーエフェクト */
.class01.on:hover, .class02.on:hover,
.class01.off:hover, .class02.off:hover {
	transform: scale(1.1, 1.1);
    transition: 0.5s all;
}

/* 職業1 アイコン */
.class01.on {
	background: url(../img/icon_01-1.png); /* アクティブ時のアイコン */
	background-repeat: no-repeat;
	background-size: contain;
}
.class01.off {
	background: url(../img/icon_01-1_off.png); /* 非アクティブ時のアイコン */
	background-repeat: no-repeat;
	background-size: contain;
}

/* 職業2 アイコン */
.class02.on {
	background: url(../img/icon_02-1.png); /* アクティブ時のアイコン */
	background-repeat: no-repeat;
	background-size: contain;
}
.class02.off {
	background: url(../img/icon_02-1_off.png); /* 非アクティブ時のアイコン */
	background-repeat: no-repeat;
	background-size: contain;
}

/* コンテンツ表示エリアのスタイル */
.main .mapbox {
    background: rgba(255, 255, 255, 0); /* 背景を透過に */
}
[class*=main] .mapbox:nth-child(2){
    background: transparent;
}

.swiperbox_c{
    background: rgba(0, 0, 0, 0.448);
    margin:0;
    padding: 1rem 2rem;
    color: #fff;

}

/* 元のモーダル用スタイルを適用 */
.swiper-w {
    border-radius: 14px;
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    flex-direction: column;
    padding-bottom: 2rem;
}


/* PC表示用のスタイル */
@media screen and (min-width: 820px) {
    .class01.on, .class02.on,
    .class01.off, .class02.off {
        width: 320px;
        height: 170px;
    }

    .swiper-w {
        background-color: initial;
        flex-direction: column-reverse;
        justify-content: center;
    }
    .swiperbox_c {
        overflow: visible;
        background-color: inherit;
        font-size: 2rem;
        padding: 0 0 0 4rem;
        width: 100%;
        color: #fff;
    }
    .swiperbox_c p {
        font-size: 1.4rem;
        /* text-shadow: 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000; */
    }
    .swipercharacter01 {
        background: url(../img/modal_character1.png) 0 0 no-repeat;
        background-size: cover;
                background-position: center;
        padding: 3rem 0;
        border-radius:0;
        height: 856px;
        display: flex;
    }
    .swipercharacter02 {
        background: url(../img/modal_character2.png) 0 0 no-repeat;
        background-size: cover;
                background-position: center;
        padding: 3rem 0;
                border-radius:0;
                height: 856px;
                display: flex;

    }
    .map-image {
        margin-top: 0;
                height: 856px;
    }
    .map__clickimg {
    top: auto;
    bottom: 0;
}
}