@charset "utf-8";
/* CSS Document */
.subnav a{cursor:pointer;}
.spPrefList{ display: none;}
#tab1 h3{margin:0 0 30px;}
#tab1 .txt{padding:25px 10px; text-align:center; font-size:18px; line-height:1.8; border:2px solid #006f0b; position:relative; max-width:634px; margin:0 auto 60px;}
#tab1 .txt:before{position:absolute; top:4px; right:4px; left:4px; bottom:4px; border:1px solid #006f0b; content:'';}
#tab1 .map{text-align:center;}

#tab2 h3{margin:0 0 50px;}
#tab2{display:none; text-align:center;}
#tab2 dl{font-size:15px; display:inline-block;}
#tab2 dt,
#tab2 dd{padding-bottom:25px; text-align:left;}
#tab2 dt{width:125px; float:left; clear:both;}
#tab2 dd{width:calc(100% - 125px); float:right;}
#tab2 a{color:#006f0b; text-decoration: underline;}
#tab2 a:hover{text-decoration:underline;}

.modal{display:none;}
#singlepage.modal{;display: block;}
.modal .inner{padding:4%; width:960px; font-size:13px; line-height:1.7;}
.modal .box-tit{color:#006f0b; padding:0 0 5px; margin:0 0 20px; border-bottom:1px solid #006f0b;}
.modal .box-tit .tit{font-size:17px; line-height:1.5; float:left; padding:0 0 0 16px; position:relative;}
.modal .box-tit .tit:before,
.modal .box-tit .tit:after{top:4px; bottom:5px; position:absolute; background:#006f0b; content:'';}
.modal .box-tit .tit:before{left:0; width:4px;}
.modal .box-tit .tit:after{left:6px; width:2px;}
.modal .box-tit .date{font-size:15px; float:right;}
.modal .box-cont .img{float:left; width:28.5%;}
.modal .box-cont .img p{font-size:10px; line-height:1.5; padding:8px 0 0 0;}
.modal .box-cont .txt{float:right; width:68.5%;}

.modal .btn-close{width:110px; background:#000; color:#fff; font-size:12px; line-height:1.6; padding:3px 0; text-align:center; cursor:pointer; margin:40px auto 0;}
.modal .btn-close i{width:0; height:0; border-top:3px solid transparent; border-left:4px solid #fff; border-bottom:3px solid transparent; display:inline-block; vertical-align:middle; margin:0 13px 0 0;}
.modal .btn-close:hover{background:#006f0b;}

.compensate-for-scrollbar{margin-right:0 !important;}


/* add 19.12.17 */
.japanMapWrap{ position: relative; width: 100%; padding-top: 60%; z-index: 10;}
.japanMapWrap .baseMap{ position: absolute; top: 0; left: 0; right: 0; z-index: 30; pointer-events: none;}
.japanMapWrap li{ position: absolute; z-index: 20;}
.japanMapWrap li a{display: block; position: relative; background: #E0EEE1; pointer-events: none;}
.japanMapWrap li.bgKyotei a{ background: #ffc1c4;}
.japanMapWrap li.bgYousei a{ background: #f1f368;}
.japanMapWrap li.bgkyogi a{ background: #ffa52c;}
.japanMapWrap li.linkOn a{ pointer-events: auto; cursor: pointer;}
/*.japanMapWrap li.linkOn a:after{ content: '▶︎詳細'; font-size: 10px; background: #000; line-height: 1em; color: #fff; position: absolute; display: block; left: 3px; bottom: 5px; padding: 2px 3px; text-align: center;}*/
.japanMapWrap li.linkOn a:after { content: '▶︎詳細'; font-size: 10px; background: #000; line-height: 1em; color: #fff; position: absolute; display: block; left: 50%; transform: translateX(-50%); bottom: 5px; padding: 2px 3px; text-align: center; width: 3em;}
.japanMapWrap li.linkOn:hover a,
.japanMapWrap li.linkOn:hover a:after{ opacity: 0.7;}
.japanMapWrap li a .label{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); line-height: 1em; font-size: 12px; height: 3em;}
.japanMapWrap li a .label{ writing-mode: vertical-lr;}
.japanMapWrap li.linkOn a .label{ writing-mode: horizontal-tb; width: 3em; transform: translate(-50%,-40%);}
.hokkaido{ top: 0; left: 72.4%; width: 20.42%;}
.hokkaido a{ padding-top: 65.85365%;}
.aomori{ top: 24.5%; left: 72.4%; width: 16.7%;}
.aomori a{ padding-top: 32.93413%;}
.iwate,.miyagi,.akita,.yamagata{ width: 8.4%;}
.iwate a,.miyagi a,.akita a,.yamagata a{ padding-top: 61.90476%;}
.iwate{ top: 33.6%; left: 80.7%;}
.miyagi{ top: 42.21%; left: 80.7%;}
.akita{ top: 33.6%; left: 72.4%;}
.yamagata{ top: 42.3%; left: 72.5%;}
.fukushima{ top: 50.9%; left: 72.4%; width: 16.7%;}
.fukushima a{ padding-top: 31.13772%;}
.ibaraki,.gunma,.chiba,.kanagawa{ width: 4.8%;}
.ibaraki a,.gunma a,.chiba a,.kanagawa a{ padding-top: 218.75%;}
.tochigi,.saitama,.tokyo{ width: 7.3%;}
.tochigi a,.saitama a,.tokyo a{ padding-top: 72.60274%;}
.ibaraki{ top: 59.6%; left: 84.3%;}
.tochigi{ top: 59.6%; left: 77.1%;}
.gunma{ top: 59.6%; left: 72.4%;}
.saitama{top: 68.3%; left: 77.1%;}
.chiba{ top: 77%; left: 84.3%;}
.tokyo{ top: 77%; left: 77.1%;}
.kanagawa{ top: 76.9%; left: 72.4%;}
.niigata,.toyama,.ishikawa,.fukui{ width: 4.4%;}
.niigata a,.toyama a,.ishikawa a,.fukui a{ padding-top: 236.36363%;}
.niigata{ top: 49.5%; left: 68.2%;}
.toyama{ top: 49.5%; left: 63.8%;}
.ishikawa{ top: 49.5%; left: 59.5%;}
.fukui{ top: 49.5%; left: 55.2%;}
.yamanashi,.nagano,.gifu,.shizuoka,.aichi,.mie{ width: 5.7%;}
.yamanashi a,.nagano a,.gifu a,.shizuoka a,.aichi a,.mie a{ padding-top: 142.10526%;}
.yamanashi{ top: 66.7%; left: 66.9%;}
.nagano{ top: 66.8%; left: 61.1%;}
.gifu{ top: 66.7%; left: 55.3%;}
.shizuoka{ top: 80.1%; left: 66.8%;}
.aichi{ top: 80.1%; left: 61.1%;}
.mie{ top: 80.1%; left: 55.3%;}
.shiga,.kyoto,.nara{ width: 5.6%;}
.shiga a,.kyoto a,.nara a{ padding-top: 125%;}
.shiga{ top: 61.1%; left: 49.7%;}
.kyoto{ top: 49.5%; left: 49.7%;}
.osaka{ top: 72.6%; left: 44.6%; width: 5.2%;}
.osaka a{ padding-top: 134.61538%;}
.hyogo,.yamaguchi{ width: 5.2%;}
.hyogo a,.yamaguchi a{ padding-top: 267.30769%;}
.hyogo{ top: 49.5%; left: 44.6%;}
.nara{ top: 72.6%; left: 49.7%;}
.wakayama{ top: 84%; left: 44.6%; width: 10.7%;}
.wakayama a{ padding-top: 65.42056%;}
.tottori,.shimane,.okayama,.hiroshima{ width: 5.4%;}
.tottori a,.shimane a,.okayama a,.hiroshima a{ padding-top:129.62962%;}
.tottori{ top: 49.5%; left: 39.3%;}
.shimane{ top: 49.5%; left: 34%;}
.okayama{ top: 61%; left: 39.3%;}
.hiroshima{ top: 60.9%; left: 34%;}
.yamaguchi{ top: 49.5%; left: 28.9%;}
.tokushima,.kagawa,.ehime,.kochi{ width: 7.2%;}
.tokushima a,.kagawa a,.ehime a,.kochi a{ padding-top: 72.22222%;}
.tokushima{ top: 84.5%; left: 36.1%;}
.kagawa{ top: 76%; left: 36.1%;}
.ehime{top: 76%; left: 28.9%;}
.kochi{ top: 84.5%; left: 28.9%;}
.fukuoka,.saga,.nagasaki{ width: 4.8%;}
.fukuoka a,.saga a,.nagasaki a{ padding-top: 208.33333%;}
.fukuoka{ top: 52.2%; left: 23%;}
.saga{ top: 52.2%; left: 18.3%;}
.nagasaki{ top: 52.2%; left: 13.6%;}
.kumamoto,.oita,.miyazaki,.kagoshima{ width: 4.8%;}
.kumamoto a,.oita a,.miyazaki a,.kagoshima a{ padding-top:191.66666%;}
.kumamoto{ top: 68.6%; left: 18.3%;}
.oita{ top: 68.6%; left: 23%;}
.miyazaki{ top: 83.7%; left: 23%;}
.kagoshima{ top:83.7%; left: 18.3%;}
.okinawa{ top: 90.4%; left: 6.5%; width: 7.5%;}
.okinawa a{ padding-top: 73.33333%;}

/* add '20.01.17 */
.japanMapWrap .map_txtbox{ position: absolute; bottom: 55%; right: 32%;}
.map_txtbox p{ text-align: left;}
.map_txtbox p:not(.cap){ position: relative; padding-left: 40px; line-height: 1em; margin: 15px 0;}
.map_txtbox p:not(.cap):before{ content: ''; padding: 20px 0 0 30px; border: 1px solid #222; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.map_txtbox p:first-child:before{ background: #ffc1c4;}
.map_txtbox p:nth-child(2):before{ background: #f1f368;}
.map_txtbox p:nth-child(3):before{ background: #ffa52c;}
.map_txtbox p.cap{ font-size: 10px;}
.map_txtbox.spv{ margin-top: 10px; display: inline-block;}

/*===============================
             MEDIA
================================*/
@media screen and (min-width:0\0) and (min-width:1000px){  /* IE */
.modal .btn-close{padding:5px 0 1px;}
}

@media only screen and (max-width:1000px){
	.modal .inner{width:100%;}
	.modal .box-cont .img{max-width:250px; width:100%; float:none; margin:0 auto;}
	.modal .box-cont .img p br{display:none;}
	.modal .box-cont .txt{width:100%; float:none; margin:0 0 20px;}
	.japanMapWrap li a .label{ font-size: 10px;}
}

@media only screen and (max-width:767px){
	.japanMapWrap li.linkOn a:after{ display: none;}
/*	.japanMapWrap li.linkOn a .label:after{ content: '▶︎'; font-size: 10px; position: static; display: inline-block;}*/
/*	.japanMapWrap li.linkOn a .label { transform: translate(-50%,-50%); height: 1em;}*/
/*	.japanMapWrap li.linkOn a .label { background: #222; color: #fff; height: auto; padding: 2px;}*/

	.japanMapWrap li.linkOn a{ pointer-events: none;}
	.japanMapWrap li a .label{ display: none;}
	.japanMapWrap li.linkOn:hover a,
	.japanMapWrap li.linkOn:hover a:after{ opacity: 1;}
	.spPrefList{ display: block; margin-top: 30px;}
	.spPrefList .youseiBox,
	.spPrefList .kyogiBox{ margin-top: 20px;}
	.spPrefList .listTit { padding: 5px 10px; margin-bottom: 10px; font-size: 14px; text-align: center;}
	.spPrefList .kyoteiBox .listTit { background: #ffc1c4;}
	.spPrefList .youseiBox .listTit { background: #f1f368;}
	.spPrefList .kyogiBox .listTit { background: #ffa52c;}
	.spPrefList ul{ display: flex; flex-wrap: wrap; padding: 0 10px;}
	.spPrefList li{ font-size: 13px; flex-basis: calc((100% - 10px)/3); margin-bottom: 5px;}
	.spPrefList li a:hover{ opacity: 0.8}
	.spPrefList li a span{ display: inline-block; line-height: 1em; right: 0; top: 0; background: #222; padding: 3px; color: #fff; font-size: 10px; margin-left: 5px;}
}

@media only screen and (max-width:480px){
	#tab1 .txt{font-size:14px; padding:20px; margin:0 auto 40px;}
	#tab1 .txt br{display:none;}

	#tab2 dl{font-size:13px;}
	#tab2 dt, #tab2 dd{padding-bottom:15px;}
	#tab2 dt{width:90px;}
	#tab2 dd{width:calc(100% - 90px);}

	.modal .inner{padding:6% 4%;}
	.modal .box-tit .tit{float:none; font-size:15px;}
	.modal .box-tit .date{float:none; font-size:13px; margin:0 0 5px;}
/*	.japanMapWrap li.linkOn a:after{ content: '▶︎'; font-size: 10px; position: absolute; width: 1em; height: 1em; transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; background: transparent; color: #000;}*/
	.map_txtbox{ top: 0; left: 6%; bottom: auto; right: auto;}
}
@media only screen and (max-width:320px){
	.map_txtbox{ font-size: 10px;}
.map_txtbox p{ padding-left: 25px; margin: 10px 0;}
.map_txtbox p:before{ padding: 15px 0 0 20px;}
}