.flexbox { display: flex; } .fw { flex-wrap: wrap; } #topics { position: relative; z-index: 10; } .tab { margin: 0 auto 40px; overflow: hidden; max-width: 1200px; } .tab2 { margin: 0 auto 40px; overflow: hidden; max-width: 1200px; } .flexbox { display: flex; } .fw { flex-wrap: wrap; } .li_map{ color: #A5A5A5; list-style: none; width: 34%; padding: 10px 0 15px 0; margin-right: 8%; margin-left: 8%; margin-top: 50px; border: 1px solid #ddd; background-color: rgba(0,0,0,0.02); cursor: pointer; .sp_visible { display: none; } } .li_map:hover { border: solid 1px #000080; color: #fff; background-color: #000080; } .li_map3:hover { color: #000080; } .li_map2 { color: #A5A5A5; font-size: 18px; line-height: 26px; list-style: none; width: 13.6%; padding: 10px 0px; margin-right: 1.5%; margin-left: 1.5%; margin-top: 30px; text-align: center; border: 1px solid #ddd; background-color: rgba(0,0,0,0.02); cursor: pointer; .sp_visible { display: none; } } .li_map2:hover { border: solid 1px #000080; color: #fff; background-color: #000080; } .select3 { border: 1px solid #000080; color: #000080; background-color: rgba(0,0,0,0.05); } .select { border: solid 1px #000080; color: #fff; background-color: #000080; } .topicon { } .hide { display:none; } .text_map { color: #1C1C1C; font-size: 16px; line-height: 26px } .text_map a { color: #004989; } .text_map a:hover { color: #dc8c50; } .text_map2 { font-size: 14px; line-height: 24px; } @media screen and (max-width: 1199px) { .text_map { color: #1C1C1C; font-size: 14px; line-height: 20px } .text_map2 { font-size: 12px; line-height: 20px; } } @media screen and (max-width: 999px) { .text_map { color: #1C1C1C; font-size: 12px; line-height: 18px } .text_map2 { font-size: 10px; line-height: 16px; } } /* メニュー制御 */ .map_menu_size { width: 100%; height: auto; } .menu_comment_pc { color: #672413; position: absolute; top: 46%; right: 0px; left: 0px; width: 100%; margin: 0px auto; padding: 0px 5%; } .menu_comment2_pc { color: #672413; position: absolute; top: 20%; right: 0px; left: 0px; width: 100%; margin: 0px auto; padding: 0px 5%; } .insatsu_link { position: absolute; z-index: 50; top: 0px; left: 0px; width: 12%; } .map_joukamachi { text-align: center; position: absolute; top: 25%; left: 23%; width: 21.2%; cursor: pointer; } .map_joukamachi a:hover { opacity:0.5; transition:0.2s; } .map_shigaichi { text-align: center; position: absolute; top: 31%; left: 44%; width: 21.2%; cursor: pointer; } .map_shigaichi a:hover { opacity:0.5; transition:0.2s; } .map_obata { text-align: center; position: absolute; top: 5%; left: 67%; width: 21.2%; cursor: pointer; } .map_obata a:hover { opacity:0.5; transition:0.2s; } .map_matsumoto { text-align: center; position: absolute; top: 40%; left: 73%; width: 21.2%; cursor: pointer; } .map_matsumoto a:hover { opacity:0.5; transition:0.2s; } .map_tsubaki { text-align: center; position: absolute; bottom: 0%; left: 57%; width: 21.2%; cursor: pointer; } .map_tsubaki a:hover { opacity:0.5; transition:0.2s; } .map_yamada { text-align: center; position: absolute; top: 55%; left: 14%; width: 21.2%; cursor: pointer; } .map_yamada a:hover { opacity:0.5; transition:0.2s; } .map_shigai2 { text-align: center; position: absolute; top: 41%; left: 38%; width: 17%; cursor: pointer; } .map_shigai2 a:hover { opacity:0.5; transition:0.2s; } .map_kouiki { text-align: center; position: absolute; top: 10%; left: 2.8%; } .map_kouiki a { color: #005C8D; background-color: rgba(255,255,255,0.2);padding: 10px 15px; border: solid 1px #DCF7FC; cursor: pointer; } .map_kouiki a:hover { color: #1D79AA; background-color: rgba(255,255,255,0.5);padding: 10px 15px; border: solid 1px #DCF7FC; cursor: pointer; } .map_shigai { text-align: center; position: absolute; top: 10%; left: 2.8%; } .map_shigai a { color: #005C8D; background-color: rgba(255,255,255,0.2);padding: 10px 15px; border: solid 1px #DCF7FC; cursor: pointer; } .map_shigai a:hover { color: #1D79AA; background-color: rgba(255,255,255,0.5);padding: 10px 15px; border: solid 1px #DCF7FC; cursor: pointer; } .map_ooi { text-align: center; position: absolute; top: 10%; left: 58%; width: 28% } .map_sanmi { text-align: center; position: absolute; top: 63%; left: 3%; width: 28% } .map_akiragi { text-align: center; position: absolute; top: 67%; left: 52%; width: 30% } .map_sonota { text-align: center; position: absolute; top: 47%; left: 79.5%; width: 20% } /* 個別・城下町 */ .comment_jyoukamachi { color: #672413; position: absolute; top: 9%; left: 2.8%; width: 22%; } .map_shigaichi3_3 { text-align: center; position: absolute; top: 25%; right: 2%; width: 20%; cursor: pointer; } .map_shigaichi3_3 a:hover { opacity:0.5; transition:0.2s; } .map_syoundou { text-align: left; position: absolute; top: 51%; left: 71%; width: 14% } .map_tamura { text-align: left; position: absolute; top: 48.5%; left: 64.5%; width: 16% } .map_ikkeigama { text-align: left; position: absolute; top: 42%; left: 50%; width: 18% } .map_yawaragi { text-align: left; position: absolute; top: 45.5%; left: 58.5%; width: 12% } .map_tougaen { text-align: left; position: absolute; top: 72%; left: 70.5%; width: 14% } .map_arase { text-align: right; position: absolute; top: 71.5%; right: 32%; width: 18% } .map_jyoukaen { text-align: right; position: absolute; top: 64.5%; right: 36%; width: 16% } .map_ougigama { text-align: right; position: absolute; top: 67%; right: 36%; width: 18% } .map_iwaki { text-align: right; position: absolute; top: 61.5%; right: 35.5%; width: 16% } .map_hisatsugu { text-align: left; position: absolute; top: 59.5%; left: 66.5%; width: 18% } .map_saitouan { text-align: left; position: absolute; top: 55.5%; left: 65%; width: 14% } .map_hadano { text-align: left; position: absolute; top: 47.5%; left: 45%; width: 16% } .map_gasyudou { text-align: right; position: absolute; top: 43.5%; right: 59%; width: 14% } .map_syuhoudou { text-align: right; position: absolute; top: 40%; right: 55%; width: 14% } .map_tazz2 { text-align: right; position: absolute; top: 60.5%; right: 4%; width: 16% } .map_kisetuan { text-align: left; position: absolute; top: 54%; left: 71.5%; width: 14% } .map_touryuan2 { text-align: left; position: absolute; top: 21%; left: 73%; width: 14% } .map_itou { text-align: left; position: absolute; top: 25.5%; left: 30%; width: 16% } .map_nagao { text-align: right; position: absolute; top: 31%; right: 79.5%; width: 16% } .map_jyouzan { text-align: right; position: absolute; top: 39%; right: 83%; width: 16%; } .map_horinouchi { text-align: left; position: absolute; top: 40.5%; left: 21%; width: 18% } .map_hagijyougama { text-align: right; position: absolute; top: 27.5%; right: 76%; width: 18% } .map_syougetsu { text-align: left; position: absolute; top: 31.5%; left: 25%; width: 18% } .map_siryoukan { text-align: right; position: absolute; top: 24%; right: 75.5%; width: 16% } .map_oda { text-align: left; position: absolute; top: 85.5%; left: 35%; width: 14% } .map_meirin { text-align: right; position: absolute; top: 75.5%; right: 4.5%; width: 16% } .map_shiro { text-align: left; position: absolute; top: 15%; left: 28%; width: 16% } .map_uragami { text-align: left; position: absolute; top: 82.5%; left: 66%; width: 18% } .map_hagihaku { text-align: right; position: absolute; top: 55%; right: 44%; width: 14% } /* 個別・市街地 */ .comment_shigaichi { text-align: left; color: #672413; position: absolute; top: 9%; left: 2.8%; width: 25%; } .map_kouiki_4 { margin-top: 10px; } .map_kouiki_4 a { color: #005C8D; background-color: rgba(255,255,255,0.2); padding: 10px 15px; border: solid 1px #DCF7FC; cursor: pointer; } .map_kouiki_4 a:hover { color: #1D79AA; background-color: rgba(255,255,255,0.5); padding: 10px 15px; border: solid 1px #DCF7FC; cursor: pointer; } .map_shigai_4 { margin-top: 10px; } .map_shigai_4 a { color: #005C8D; background-color: rgba(255,255,255,0.2);padding: 8px 15px; border: solid 1px #DCF7FC; cursor: pointer; } .map_shigai_4 a:hover { color: #1D79AA; background-color: rgba(255,255,255,0.5);padding: 8px 15px; border: solid 1px #DCF7FC; cursor: pointer; } .map_jibita { text-align: left; position: absolute; top: 14%; left: 50%; width: 14% } .map_miwaseigadou { text-align: left; position: absolute; top: 40%; left: 59%; width: 16% } .map_harada { text-align: right; position: absolute; top: 42%; right: 42.5%; width: 16% } .map_koushindou { text-align: left; position: absolute; top: 33%; left: 61%; width: 14% } .map_touryuan { text-align: left; position: absolute; top: 28.5%; left: 43%; width: 14% } .map_oda2 { text-align: left; position: absolute; top: 59%; left: 27%; width: 14% } .map_gensyu { text-align: left; position: absolute; top: 90.5%; left: 69%; width: 14% } .map_seiungama { text-align: left; position: absolute; top: 79.5%; left: 30%; width: 14% } .map_nosaka { text-align: left; position: absolute; top: 82.5%; left: 20%; width: 16% } .map_ryoun { text-align: right; position: absolute; top: 67.5%; right: 85.5%; width: 14% } .map_renkouzan { text-align: left; position: absolute; top: 49.5%; left: 76.5%; width: 10% } .map_tazz { text-align: right; position: absolute; top: 45%; right: 46.5%; width: 16% } .map_taizangama { text-align: left; position: absolute; top: 47%; left: 60%; width: 14% } .map_nadaya3 { text-align: left; position: absolute; top: 32.5%; left: 70%; width: 16% } .map_syuhouen { text-align: left; position: absolute; top: 83.5%; left: 33%; width: 14% } .map_meirin2 { text-align: left; position: absolute; top: 54.5%; left: 53.5%; width: 16% } .map_shiro2 { text-align: left; position: absolute; top: 25%; left: 20%; width: 16% } .map_uragami2 { text-align: left; position: absolute; top: 55%; left: 36%; width: 18% } .map_taibi { text-align: left; position: absolute; top: 6%; left: 67%; width: 21% } .map_hagihaku2 { text-align: left; position: absolute; top: 39%; left: 38%; width: 14% } .map_sonjyuku { text-align: left; position: absolute; top: 39%; left: 81%; width: 16% } .map_joukamachi3 { text-align: center; position: absolute; top: 28%; left: 17%; width: 18%; cursor: pointer; } .map_joukamachi3 a:hover { opacity:0.5; transition:0.2s; } .map_matsumoto3 { text-align: center; position: absolute; top: 48%; left: 79%; width: 18%; cursor: pointer; } .map_matsumoto3 a:hover { opacity:0.5; transition:0.2s; } .map_obata3 { text-align: center; position: absolute; top: 1%; left: 81%; width: 18%; cursor: pointer; } .map_obata3 a:hover { opacity:0.5; transition:0.2s; } .map_yamada3 { text-align: center; position: absolute; bottom: 3%; left: 0.5%; width: 18%; cursor: pointer; } .map_yamada3 a:hover { opacity:0.5; transition:0.2s; } .map_tsubaki3 { text-align: center; position: absolute; bottom: 0%; left: 47%; width: 18%; cursor: pointer; } .map_tsubaki3 a:hover { opacity:0.5; transition:0.2s; } /* 個別・小畑 */ .comment_obata { color: #672413; position: absolute; top: 9%; left: 2.8%; width: 25%; } .map_shigaichi3_1 { text-align: center; position: absolute; bottom: 0%; left: 15%; width: 21.2%; cursor: pointer; } .map_shigaichi3_1 a:hover { opacity:0.5; transition:0.2s; } .map_ishikawa { text-align: left; position: absolute; top: 2.5%; left: 71%; width: 16% } .map_seisyu { text-align: left; position: absolute; top: 18%; left: 74.5%; width: 14% } .map_okadagama { text-align: left; position: absolute; top: 47%; left: 62.5%; width: 18% } .map_tentyouzan { text-align: left; position: absolute; top: 50%; left: 64.5%; width: 18% } .map_syoukeian { text-align: left; position: absolute; top: 43.5%; left: 73%; width: 14% } .map_kohagigama { text-align: left; position: absolute; top: 56%; left: 63.5%; width: 14% } .map_syuhougama { text-align: right; position: absolute; top: 49%; right: 41%; width: 14% } .map_senryuzan { text-align: left; position: absolute; top: 60%; left: 53%; width: 18% } .map_hagiyakikaikan { text-align: right; position: absolute; top: 61.5%; right: 52%; width: 14% } .map_tenryugama { text-align: left; position: absolute; top: 70%; left: 50%; width: 18% } .map_yokujyou { text-align: right; position: absolute; top: 56.5%; right: 59.5%; width: 14% } .map_nadaya { display: none; } .map_taibi2 { text-align: right; position: absolute; top: 53.5%; right: 39%; width: 21% } .map_sonjyuku2 { text-align: left; position: absolute; top: 92%; left: 55%; width: 16% } .map_hansyaro { text-align: right; position: absolute; top: 40%; right: 38%; width: 16% } /* 個別・松本*/ .comment_matsumoto { color: #672413; position: absolute; top: 9%; left: 2.8%; width: 32%; } .map_shigaichi3_2 { text-align: center; position: absolute; top: 50%; left: 0%; width: 20%; cursor: pointer; } .map_shigaichi3_2 a:hover { opacity:0.5; transition:0.2s; } .map_saka { text-align: right; position: absolute; top: 7%; right: 9.5%; width: 18% } .map_toukou { text-align: right; position: absolute; top: 36%; right: 41.5%; width: 16% } .map_kinsyouen { text-align: left; position: absolute; top: 32%; left: 58%; width: 14% } .map_kunisukegama { text-align: left; position: absolute; top: 45.5%; left: 57%; width: 18% } .map_taikeian { text-align: left; position: absolute; top: 49.5%; left: 41.5%; width: 18% } .map_tounomori { text-align: right; position: absolute; top: 62%; right: 45.5%; width: 12% } .map_syounzan { text-align: left; position: absolute; top: 27%; left: 68%; width: 14% } .map_sengoku { text-align: right; position: absolute; top: 44%; right: 48.5%; width: 16% } .map_housengama { text-align: right; position: absolute; top: 40%; right: 42.5%; width: 18% } .map_hakujyuan { text-align: left; position: absolute; top: 53.5%; left: 41.5%; width: 14% } .map_baiten { text-align: right; position: absolute; top: 47.5%; right: 67.7%; width: 18% } .map_renkouzan2 { text-align: left; position: absolute; top: 56%; left: 26%; width: 14% } .map_nadaya2 { text-align: left; position: absolute; top: 20%; left: 17%; width: 16% } .map_fusouan { text-align: left; position: absolute; top: 26.5%; left: 36%; width: 16% } .map_ryukisyou { text-align: left; position: absolute; top: 90.5%; left: 45%; width: 14% } .map_sonjyuku3 { text-align: left; position: absolute; top: 42%; left: 31%; width: 18% } .map_toukouji { text-align: left; position: absolute; top: 38%; left: 64.5%; width: 16% } .map_tougeimura { text-align: left; position: absolute; top: 76%; left: 53%; width: 16% } /* 個別・椿 */ .comment_tsubaki { color: #672413; position: absolute; top: 9%; left: 2.8%; width: 25%; } .map_shigaichi3_4 { text-align: center; position: absolute; top: 0%; left: 36%; width: 20%; cursor: pointer; } .map_shigaichi3_4 a:hover { opacity:0.5; transition:0.2s; } .map_ryokueigama { text-align: left; position: absolute; top: 73%; left:42%; width: 14% } .map_toukazan { text-align: left; position: absolute; top: 54.5%; left: 62%; width: 14% } .map_nanmyoujigama { text-align: left; position: absolute; top: 73%; left: 58%; width: 14% } .map_ooyagama { text-align: left; position: absolute; top: 79%; left: 50.5%; width: 14% } .map_syutouen { text-align: left; position: absolute; top: 60.5%; left: 31%; width: 18% } .map_furuhatagama { text-align: left; position: absolute; top: 72%; left: 67%; width: 14% } .map_hakkeizan { text-align: right; position: absolute; top: 73.5%; right: 8%; width: 18% } .map_syukazan { text-align: left; position: absolute; top: 34.5%; left: 4.5%; width: 14% } .map_gensyu2 { text-align: left; position: absolute; top: 32%; left: 57%; width: 14% } .map_syoundoutsubaki { text-align: left; position: absolute; top: 37%; left: 12%; width: 16% } .map_daisyouin { text-align: left; position: absolute; top: 40.5%; left: 4%; width: 16% } .map_aibagawa { text-align: left; position: absolute; top: 28.7%; left: 60%; width: 14% } /* 個別・山田*/ .comment_yamada { color: #672413; position: absolute; top: 9%; left: 2.8%; width: 25%; } .map_shigaichi3_5 { text-align: center; position: absolute; top: 0%; right: 3%; width: 20%; cursor: pointer; } .map_shigaichi3_5 a:hover { opacity:0.5; transition:0.2s; } .map_sinpakuzan { text-align: left; position: absolute; top: 83%; left: 32.5%; width: 14% } .map_seiungama2 { text-align: left; position: absolute; top: 20%; left: 69%; width: 14% } .map_nosaka2 { text-align: right; position: absolute; top: 24%; right: 34.5%; width: 18% } .map_ryoun2 { text-align: right; position: absolute; top: 6.5%; right: 53%; width: 14% } .map_syukazan2 { text-align: right; position: absolute; top: 42%; right: 23%; width: 14% } .map_kouungama { text-align: left; position: absolute; top: 52.5%; left: 41%; width: 14% } .map_choun { text-align: left; position: absolute; top: 40%; left: 18%; width: 16% } .map_tsutiwa { text-align: right; position: absolute; top: 46%; right: 79.5%; width: 16% } .map_nantikoubou { text-align: left; position: absolute; top: 49%; left: 22%; width: 14% } .map_syoundoutsubaki2 { text-align: left; position: absolute; top: 48%; left: 83.5%; width: 16% } .map_syuhouen2 { text-align: left; position: absolute; top: 25%; left: 71%; width: 14% } .map_kuroubou { text-align: center; position: absolute; bottom: 2%; left: 45%; } .map_kuroubou a { color: #005C8D; background-color: rgba(0,0,0,0.1); padding: 6px 8px; border: solid 1px #ADC086; cursor: pointer; } .map_kuroubou a:hover { color: #1D79AA; background-color: rgba(255,255,255,0.3); padding: 6px 8px; border: solid 1px #ADC086; cursor: pointer; } .map_daisyouin2 { text-align: left; position: absolute; top: 51%; left: 75%; width: 16% }