/* 御前山 #map と同等の見た目/挙動 */
#illustmap{margin:40px auto 120px}
#illustmap .illustmapArea{display:flex;justify-content:center;position:relative}
#illustmap .illustmapArea .map{width:800px;flex-shrink:0;background:#fff;border-radius:20px 0 0 20px;position:relative;overflow:hidden}
#illustmap .illustmapArea .map a{font-size:120%;border:3px solid transparent;border-radius:50px;display:flex;justify-content:center;align-items:center;position:absolute;cursor:pointer;transform:translate(-50%,-50%);transform-origin:center}
#illustmap .illustmapArea .map a:hover{transform:translate(-50%,-50%) scale(1.2)}
#illustmap .illustmapArea .map a:hover img{opacity:1}
#illustmap .illustmapArea .acMenu{position:relative}
#illustmap .illustmapArea .acMenu dt{display:none}
#illustmap .illustmapArea .acMenu dd{position:relative;width:100%;height:100%;display:block}
#illustmap .illustmapArea .infoBox{width:380px;height:100%;background:#fefced;border-radius:0 20px 20px 0;overflow:hidden;position:relative}
#illustmap .illustmapArea .infoBox .box{line-height:1.8em;width:100%;height:100%;padding:20px;box-sizing:border-box;transition:all .4s;position:absolute;top:0;left:100%}
#illustmap .illustmapArea .infoBox .box:first-of-type{left:0}
#illustmap .illustmapArea .infoBox .titleSet{display:flex;align-items:center;gap:10px;margin:0 0 10px}
#illustmap .illustmapArea .infoBox .titleSet em{font-style:normal;font-size:140%;width:50px;height:50px;display:flex;justify-content:center;align-items:center}
#illustmap .illustmapArea .infoBox .box .titleSet h3{font-size:160%;width:calc(100% - 50px)}
#illustmap .illustmapArea .infoBox .box .titleSet h3 span{font-size:70%;margin-right:5px}
#illustmap .illustmapArea .infoBox .box .scrBox{width:355px;height:90%;overflow-y:scroll;padding-right:15px;box-sizing:border-box;scrollbar-width:thin}
#illustmap .illustmapArea .infoBox .box .scrBox img{margin-bottom:10px}
#illustmap .illustmapArea .infoBox .box .scrBox .more{text-align:center;margin:20px 0 0}
#illustmap .illustmapArea .infoBox .box .scrBox .more a{display:inline-block;color:#fff;background:#2679c5;padding:5px 20px}
#illustmap .illustmapArea .infoBox .box .scrBox .more a:hover{opacity:.8}
#illustmap .illustmapArea .infoBox .box .scrBox::-webkit-scrollbar{width:8px}
#illustmap .illustmapArea .infoBox .box .scrBox::-webkit-scrollbar-track{border-radius:10px;box-shadow:inset 0 0 5px rgba(0,0,0,.1)}
#illustmap .illustmapArea .infoBox .box .scrBox::-webkit-scrollbar-thumb{background-color:rgba(0,0,50,.2);border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.3)}

@media screen and (max-width: 480px){
	#illustmap{border-radius:20px;margin:20px auto 40px;padding:15px}
	#illustmap .illustmapArea{flex-direction:column}
	#illustmap .illustmapArea .map{width:auto;border-radius:10px}
	#illustmap .illustmapArea .map a{font-size:100%;border:none !important}
	#illustmap .illustmapArea .map a:hover{transform:unset}
	#illustmap .illustmapArea .acMenu{margin:5px 0 0}
	#illustmap .illustmapArea .acMenu dt{display:block;position:absolute;right:15px;top:-20px;z-index:3;cursor:pointer}
	#illustmap .illustmapArea .acMenu dt a{display:inline-block;color:#fff;background:#2679C5;padding:8px 18px;border-radius:18px}
	#illustmap .illustmapArea .acMenu dt a::after{content:'一覧を見る'}
	#illustmap .illustmapArea .acMenu dt.active a{background:#999}
	#illustmap .illustmapArea .acMenu dt.active a::after{content:'閉じる'}

    #illustmap .illustmapArea .acMenu dt.active {
        position: fixed;
        left: 50%;
        right: auto;
        top: auto;
        bottom: 10vh;
        transform: translateX(-50%);
        cursor: pointer;
    }

	#illustmap .illustmapArea .acMenu dd{display:block}

	/* モバイル全画面モーダル */
    
	#illustmap .illustmapArea .acMenu dd.illustmap-modal{position:fixed;left:0;right:0;bottom:0;top:50px;z-index:2;background:rgba(0,0,0,.55);display:none}
	#illustmap .illustmapArea .infoBox{position:absolute;left:0;right:0;top:0;bottom:0;width:auto;height:auto;margin:0;background:#fefced;border-radius:0;overflow:auto;padding:20px}
	#illustmap .illustmapArea .illustmap-modal-close{position:absolute;top:8px;right:12px;font-size:28px;line-height:1;background:transparent;border:0;color:#333}
	#illustmap .illustmapArea .infoBox .box{position:relative;left:0 !important;padding:10px;margin:15px 0;background:#fff;border-radius:10px}
	#illustmap .illustmapArea .infoBox .titleSet em{font-size:120%;width:30px;height:30px}
	#illustmap .illustmapArea .infoBox .box .titleSet h3{font-size:130%;line-height:1.2em}
	#illustmap .illustmapArea .infoBox .box .titleSet h3 span{letter-spacing:0}
	#illustmap .illustmapArea .infoBox .box .scrBox{line-height:1.6em;width:auto;height:auto;padding-right:0;margin-bottom:20px}
}